1

Here is my scenario, I want to include the css and js file, these are stored in static resources. I need the syntax and how to use these classes and styles defined in css file.

1

you can simply copy and paste those CSS/JS text as:

<apex:component >
     <script>
       text in js file
     </script>

    <style>
     text of css file
    </style>

    <!-- OR -->

   <apex:includescript value="{!$resource.jsfile}"/>
   <apex:stylesheet value="{!$resource.cssFile}"/>
</apex:component >

After this, include the component in Visualforce page at appropriate location line.

Reference

|improve this answer|||||
  • I have done the same thing as you mentioned above. I will paste my code here: <apex:component><!-- include the javascript and styles sheet --> <apex:stylesheet value="{!$Resource.SalesForecastStylesheet}"/> <apex:includeScript value="{!$Resource.SalesForecastJavascript}"/></apex:component> and in visual force page we are using this component . Please let me know whats roung here.. – Iqbal Oct 15 '15 at 11:43
  • @techsolutions what error you are getting – Ashwani Oct 15 '15 at 11:58
  • javascript and CSS are not functioning here... – Iqbal Oct 15 '15 at 12:03
  • They would. Make sure you have added this component on top of the page and also check that css/js are loaded. There in no different adding then in vf or component except the extra component. @techsolutions – Ashwani Oct 15 '15 at 12:10
2
  <apex:component >
     <script>
       text in js file
     </script>

    <style>
     text of css file
    </style>
   <apex:includeScript value="{!URLFOR($Resource.jqueryTest, 'jquery/jquery.js')}"/>
             <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"/>
             <apex:includeScript value="https://malsup.github.io/jquery.blockUI.js"/>
    <apex:stylesheet value="{!URLFOR($Resource.CF_Bootstrap, 'css/bootstrap.min.css')}"/>
</apex:component>

You can refer this as above example. And you can use them simple by referring them in your visual force page. If you want to use them with apex:tag then you can use styleclass attribute of component. Or if you want to know how to use css then there are many good articles available you can take help from there and if you got stuck we are here to help. Referencing a Static Resource in Visualforce Markup

|improve this answer|||||
0

You can find all details in this Salesforce documentation link. Here are couple of examples on how to add static resources in a VF page.

//Zip file

<apex:stylesheet value="{!URLFOR($Resource.style_resources, 'styles.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery3, 'js/jquery-1.8.0.min.js')}"/>

//Stand-alone files

<apex:stylesheet value="{$Resource.MyCSSFile}"/>
<apex:includeScript value="{!$Resource.MYJSFile)}"/>
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.