function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Steven MellerSteven Meller 

Trailhead issue: Using Static Resources

This task, creating a Static Resource from:
Download the current version of the jQuery Mobile JavaScript library, currently jQuery Mobile 1.4.4, in the ZIP format.
The newest version, 1.4.5 is 7MB and of course does not upload.
 
Best Answer chosen by Steven Meller
thomastthomast
See the note under step 6 (https://developer.salesforce.com/trailhead/force_com_programmatic_beginner/visualforce_fundamentals/visualforce_static_resources#visualforce_static_resources_zipped_create):
If the jQuery Mobile ZIP file is larger than 5 MB, edit the zip file to remove the /demo/ directory and its contents, and upload the smaller zip archive.

All Answers

thomastthomast
See the note under step 6 (https://developer.salesforce.com/trailhead/force_com_programmatic_beginner/visualforce_fundamentals/visualforce_static_resources#visualforce_static_resources_zipped_create):
If the jQuery Mobile ZIP file is larger than 5 MB, edit the zip file to remove the /demo/ directory and its contents, and upload the smaller zip archive.
This was selected as the best answer
ParadiseScottParadiseScott
@thomast 

I was hoping you could help me figure out what I have done incorrectly.  I uploaded the jQueryMobile zip after removing the demo directory and am getting the below result.  

User-added image

This is my code: 

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    
     <!-- Add static resources to page's <head> -->
    <apex:stylesheet value="{! 
        URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5.css') }"/>
    <apex:includeScript value="{! $Resource.jQuery }"/>
    <apex:includeScript value="{! 
        URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5.js') }"/>
    
    <div style="margin-left: auto; margin-right: auto; width: 50%">
        <!-- Display images directly referenced in a static resource -->
        <h3>Images</h3>
        <p>A hidden message: 
           <apex:image alt="eye" title="eye"
               url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/eye-black.png')}"/> 
           <apex:image alt="heart" title="heart"
               url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/heart-black.png')}"/> 
           <apex:image alt="cloud" title="cloud"
               url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png')}"/> 
        </p>
    
        <!-- Display images referenced by CSS styles, 
             all from a static resource. -->
        <h3>Background Images on Buttons</h3>
        <button class="ui-btn ui-shadow ui-corner-all 
            ui-btn-icon-left ui-icon-action">action</button>
        <button class="ui-btn ui-shadow ui-corner-all 
            ui-btn-icon-left ui-icon-star">star</button>
    </div>
</apex:page>
John FiteJohn Fite
I got the icons to show when I included a reference to the parent folder for the path
Ex: jquery.mobile-1.4.5/images/icons-png/eye-black.png

I still haven't gotten the background images to appear on the buttons, however.
Alcides Del Valle Rojas BarrosoAlcides Del Valle Rojas Barroso

Please, can anybody answer this question??? I have the same problem, and it is drive me crazy.....I tried putting jquery.mobile-1.4.5.css, jquery.mobile-1.4.5.min.css ; query.mobile-1.4.5.js, jquery.mobile-1.4.5.min.js in the code, and nothing happens...

that is my code: 

<!-- Add static resources to page's <head> -->
    <apex:stylesheet value="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5.css') }"/>
    <apex:includeScript value="{! $Resource.jQuery }"/>
    <apex:includeScript value="{! URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5.js') }"/>
    
    <div style="margin-left: auto; margin-right: auto; width: 50%">
        <!-- Display images directly referenced in a static resource -->
        <h3>Images</h3>
        <p>A hidden message: 
           <apex:image alt="eye" title="eye"
               url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/eye-black.png')}"/> 
           <apex:image alt="heart" title="heart"
               url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/heart-black.png')}"/> 
           <apex:image alt="cloud" title="cloud"
               url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png')}"/> 
        </p>
    
        <!-- Display images referenced by CSS styles, 
             all from a static resource. -->
        <h3>Background Images on Buttons</h3>
        <button class="ui-btn ui-shadow ui-corner-all 
            ui-btn-icon-left ui-icon-action">action</button>
        <button class="ui-btn ui-shadow ui-corner-all 
            ui-btn-icon-left ui-icon-star">star</button>
    </div>
</apex:page>


Please help!!!

Best Regards
thomastthomast

Check your Static Resource. Ensure that the static resource name is jQueryMobile.
Open the ZIP file on your own computer. Make sure that the named css and js files are in the root of the ZIP, not in a folder within the ZIP. When using the $URLFOR($Resource structure, the part after the dot is the Name you entered when creating the Static Resource. The part in single quotes is the path and filename you want to get. So 

URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5.css')

Looks in the zip file for the static resource named 'jQueryMobile. In the root of the ZIP, it looks for the file named 
jquery.mobile-1.4.5.css. For

URLFOR($Resource.jQueryMobile, 'images/icons-png/eye-black.png'
It looks in the same zip file, but it goes into the images folder, then the icons-png folder, and there it gets the eye-black.png file.

You can check to see if your static resource is correctly set up by modifying the URL in your browser. From a regular record page, remove the record ID, and put the following 'resource/jQueryMobile/jquery.mobile-1.4.5.css'. ie, if you are on the na10 cluster, change the URL bar to:

https://na10.salesforce.com/resource/jQueryMobile/jquery.mobile-1.4.5.css

and press Enter. You should be redirected to the c.[pod].visual.force.com host name, and see the CSS file in your browser window. It starts:

/*!
* jQuery Mobile 1.4.5
* Git HEAD hash: 68e55e78b292634d3991c795f06f5e37a512decc <> Date: Fri Oct 31 2014 17:33:30 UTC
* http://jquerymobile.com
If you get a blank page, then something is wrong with the static resource name, or the contents of the ZIP file. 
vincent boucher sfdcvincent boucher sfdc
Hi, 
@John Fite
@Alcides Del Valle Rojas Barroso

Got the same issue here, and added the root folder name (where all files are). Sounds like the platform assumed all files are flat files into a zip archive which is not the case here.
So give it a try with something like (jQuerylight is the name of my static resource,  jquery.mobile-1.4.4 is the root folder once I have unzipped the package and I have the 1.4.4 version) 
url="{!URLFOR($Resource.jQuerylight, 'jquery.mobile-1.4.4/images/icons-png/eye-black.png')}"/>

This is my first post, hopefully it will helps :)
 
vincent boucher sfdcvincent boucher sfdc
url="{!URLFOR($Resource.jQuerylight, 'jquery.mobile-1.4.4/images/icons-png/eye-black.png')}"/>
Obviously the bold font does not work well in code section ... 
Jonathan Osgood 3Jonathan Osgood 3
That did it, thanks Vincent!
Kiran PandiyanKiran Pandiyan
@thomast i'm getting this error . How can I solve this ? It is Trailhead example . 
<apex:page showHeader="false" standardStylesheets="false" sidebar="false">
     <!-- Add static resources to page's <head> -->
    <apex:stylesheet value="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.4.css') }"/>
    <apex:includeScript value="{! $Resource.jQuery }"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.4.js') }"/>
     
    <div style="margin-left: auto; margin-right: auto; width: 50%">
        <!-- Display images directly referenced in a static resource -->
        <h3>Pictures</h3>
        <p>A hidden message:
           <apex:image alt="eye" title="eye" url="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.4/images/icons-png/eye-black.png')}"/>
           <apex:image alt="heart" title="heart" url="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.4/images/icons-png/heart-black.png')}"/>
           <apex:image alt="cloud" title="cloud" url="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.4/images/icons-png/cloud-black.png')}"/>
        </p>
     
        <!-- Display images referenced by CSS styles, all from a static resource. -->
        <h3>Background Images on Buttons</h3>
        <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">action</button>
        <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-star">star</button>
    </div>
</apex:page>

r User-added image
Ivan Gonzalez 30Ivan Gonzalez 30
Hello, I had the same problem. My solution was to delete the folder "demos" in the same ".zip" and upload again.
Regards
Rose FarnhamRose Farnham
I am having the same issue:  Download jQuery Mobile 1.4.5., unzipped deleted the Demo folder, zipped it back up.  Created the Static Resource jQueryMobile.  Copied the code per the instructions and received the following:
Preview

Here is my code:
<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    
    <!-- Add static resources to page's <head> -->
    <apex:stylesheet value="{!
          URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5/jquery.mobile-1.4.5.css')}"/>
    <apex:includeScript value="{! $Resource.jQuery }"/>
    <apex:includeScript value="{!
         URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5/jquery.mobile-1.4.5.js')}"/>

    <div style="margin-left: auto; margin-right: auto; width: 50%">
        <!-- Display images directly referenced in a static resource -->
        <h3>Images</h3>
        <p>A hidden message:
            <apex:image alt="eye" title="eye"
                 url="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5/images/icons-png/eye-black.png')}"/>
            <apex:image alt="heart" title="heart"
                 url="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5/images/icons-png/heart-black.png')}"/>
            <apex:image alt="cloud" title="cloud"
                 url="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5/images/icons-png/cloud-black.png')}"/>
        </p>

    <!-- Display images referenced by CSS styles,
         all from a static resource. -->
    <h3>Background Images on Buttons</h3>
    <button class="ui-btn ui-shadow ui-corner-all
         ui-btn-icon-left ui-icon-action">action</button>
    <button class="ui-btn ui-shadow ui-corner-all
         ui-btn-icon-left ui-icon-star">star</button>
    </div>
</apex:page>

Tried this from thomast's post:  From a regular record page, remove the record ID, and put the following 'resource/jQueryMobile/jquery.mobile-1.4.5.css'. ie, if you are on the na10 cluster, change the URL bar to:
https://na10.salesforce.com/resource/jQueryMobile/jquery.mobile-1.4.5.css
and press Enter. You should be redirected to the c.[pod].visual.force.com host name, and see the CSS file in your browser window. It starts:
1/*!
2* jQuery Mobile 1.4.5
3* Git HEAD hash: 68e55e78b292634d3991c795f06f5e37a512decc <> Date: Fri Oct 31 2014 17:33:30 UTC
4* http://jquerymobile.com
Received this:
User-added image
Not sure what I am doing wrong, any help would be greatly appreciated
Thanks!
lintao tanlintao tan
since the path is  'jquery.mobile-1.4.5/images/icons-png/eye-black.png',you should make sure the zip file path is like "\jquery.mobile-1.4.5.zip\jquery.mobile-1.4.5\*" ,
User-added image
not  like the default path "\jquery.mobile-1.4.5.zip\*"
User-added image
Simon DağcıSimon Dağcı
You should use the code below this writting. I changed urls and worked.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    
    <!-- Add static resources to page's <head> -->
    <apex:stylesheet value="{!
          URLFOR($Resource.jQueryMobile,'/jquery.mobile-1.4.5.css')}"/>
    <apex:includeScript value="{! $Resource.jQuery }"/>
    <apex:includeScript value="{!
         URLFOR($Resource.jQueryMobile,'/jquery.mobile-1.4.5.js')}"/>

    <div style="margin-left: auto; margin-right: auto; width: 50%">
        <!-- Display images directly referenced in a static resource -->
        <h3>Images</h3>
        <p>A hidden message:
            <apex:image alt="eye" title="eye"
                 url="{!URLFOR($Resource.jQueryMobile, '/images/icons-png/eye-black.png')}"/>
            <apex:image alt="heart" title="heart"
                 url="{!URLFOR($Resource.jQueryMobile, '/images/icons-png/heart-black.png')}"/>
            <apex:image alt="cloud" title="cloud"
                 url="{!URLFOR($Resource.jQueryMobile, '/images/icons-png/cloud-black.png')}"/>
        </p>

    <!-- Display images referenced by CSS styles,
         all from a static resource. -->
    <h3>Background Images on Buttons</h3>
    <button class="ui-btn ui-shadow ui-corner-all
         ui-btn-icon-left ui-icon-action">action</button>
    <button class="ui-btn ui-shadow ui-corner-all
         ui-btn-icon-left ui-icon-star">star</button>
    </div>
</apex:page>
Urich NOUPIKUrich NOUPIK
I have met the same problem but i fixed it. 
It appears due to the file location. In the code ensure that file's path match to the paths in zip file. In my case, i have choosen to put Css and Js file at the root of zip file. Then i have done some modification in all my file's path: removing all 'jquery.mobile-1.4.5/'  prefix in the path's file. Then here is the code

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    
    <!-- Add static resources to page's <head> -->
    <apex:stylesheet value="{!
          URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.css')}"/>
    <apex:includeScript value="{! $Resource.jQuery }"/>
    <apex:includeScript value="{!
         URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.js')}"/>
    <div style="margin-left: auto; margin-right: auto; width: 50%">
        <!-- Display images directly referenced in a static resource -->
        <h3>Images</h3>
        <p>A hidden message:
            <apex:image alt="eye" title="eye"
                 url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/eye-black.png')}"/>
            <apex:image alt="heart" title="heart"
                 url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/heart-black.png')}"/>
            <apex:image alt="cloud" title="cloud"
                 url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png')}"/>
        </p>
    <!-- Display images referenced by CSS styles,
         all from a static resource. -->
    <h3>Background Images on Buttons</h3>
    <button class="ui-btn ui-shadow ui-corner-all
         ui-btn-icon-left ui-icon-action">action</button>
    <button class="ui-btn ui-shadow ui-corner-all
         ui-btn-icon-left ui-icon-star">star</button>
    </div>
</apex:page>
Guilherme_MonteiroGuilherme_Monteiro
Thank you so much @Simon Dağcı for fixing the issue. It was the URL in my case. Trailhead has posted the code with an invalid static resource file's path.

Successful Result
Christophe Cano 3Christophe Cano 3
Thank you @Simon Dağcı.
First I tried to add 'jquery.mobile-1.4.5/' for images and it worked.
But buttons was not working.

After reading your post, I zipped without the folder 'jquery.mobile-1.4.5' and both images and buttons are now working.
 
Magyar-Hunor Tamas 1Magyar-Hunor Tamas 1

hey,
yes, it seems that the 2nd argument in the URLFOR function had the jquery/ (the jquery.zip name advised by trailhead) in front of the path, so it was actually trying to find the files in /jquery/images... while the zip folder was already - probably - loaded in so I just had to get rid of the jquery from start of the path (2nd arguement in all the URLFOR functions.

Now code looks like this:

User-added image

and Visualforce page looks like this:

User-added image
Roy AdminRoy Admin
Great thread! I had the same issue and was able to resolve it by fixing the filepath within the code. 
Magyar-Hunor Tamas 1 solution is exactly what I needed. 

Before (broken) example:
URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.css')}"/>
After (fixed) example:
URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.css')}"/>

I found that any occurance of double jquery like jquery/jquery needed to be fixed by removing the jquery/ from each example There are 5 at the time of typing this. Highlighted in yellow below:

User-added image