[SalesForce] Include both Html page and its CSS content in static resources and reference in Visualforce Page

I have included the html page and its css content in static resource and I am trying to reference the html content in visualforce page.HTML file will be used as header and footer for all of my visualforce pages.So is the reason to include it in static resource.But the nothing is displaying on visualforce page.Someone please help me.

<apex:stylesheet value="{!URLFOR($Resource.assests, 'css/bootstrap.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.assests, 'css/font-awesome.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.assests, 'css/datepicker.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.assests, 'css/bootstrap-timepicker.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.assests, 'css/common.css')}"/>    
<apex:iframe src="{!URLFOR($Resource.assests,'home.php-.html')}"/>

Best Answer

If you want to reuse your html for headers and footer, you should look into the component and composition VF tags. These will allow you to make Vf template pages, which I would think would be easier than trying to keep your html in static resources.

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_component.htm

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_composition.htm

Force.com Sites Page to template to component relationship

Related Solutions

[SalesForce] How to reference static resources from a Community HTML header in a cache-compatible way

If its just a single file (so there are no issues with order of loading as this code loads the JavaScript asynchronously) you can work out the URL in JavaScript like this:

<script>
(function() {
    var script = document.createElement('script');
    script.src = '/community-name/resource/'
            + Date.now()
            + '/MyStaticResource/js/some-code.js';
    document.head.appendChild(script);
})();
</script>

Using the current date timestamp ensures the latest version of the static resource is obtained. That is the technique used in this sample AngularJs app, though there the JavaScript would only be requested, cached and used once per application session. But for your use, the JavaScript would be requested and cached every time a page is opened.

If your present system works well, probably better to stick to it than use the above.

[SalesForce] How to load an image in lightning without including the namespace

This has been solved with Summer 16 release now .

<aura:component>
<!-- Stand-alone static resources -->
<img src="{!$Resource.generic_profile_svg}"/>
<img src="{!$Resource.yourNamespace__generic_profile_svg}"/>

<!-- Asset from an archive static resource -->
<img src="{!$Resource.SLDSv1 + '/assets/images/avatar1.jpg'}"/>
<img src="{!$Resource.yourNamespace__SLDSv1 + '/assets/images/avatar1.jpg'}"/>

Best Answer

Related Solutions

[SalesForce] How to reference static resources from a Community HTML header in a cache-compatible way

[SalesForce] How to load an image in lightning without including the namespace

Related Topic