SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Basic syntax question

    Hello there, I am in a massive hurry and working with an expanding function which changes the background image of a link but it seems like every class parsed onto the function works appart from that of background image.

    I was wondering if I'm just being plain thick and not typing it properly:

    THIS DOESN'T WORK:

    $(this).css({'background-image' : 'url(../images/arrow_down.gif)!important'});


    THIS WORKS:
    $(this).css({'background-color' : 'pink;'});

    Now I'm wondering why the first one doesn't work I tried to type the URL without ../ bu still no joy...


  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code Javascript:
    $(this).css({backgroundImage : 'url(../images/arrow_down.gif)!important' });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried it but still no joy, it doesn't pick up the background images from the javascript only from the CSS sheet...

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The css image is referenced from the perspective of the style sheet. The javascript image reference is from the perspective of the page itself.

    The biggest trouble is in getting the image referenc correct. If the onscreeen image goes away but isn't replaced with what you expect, then it's most likely going to be a pathing issue.

    The following test code works for me.

    index.html
    style\style.css
    js\script.js
    images\arrow-down-css.gif
    images\arrow-down-jquery.gif

    Code css:
    div.down-arrow {
    	text-indent: -9999px;
    	width: 50px;
    	height: 80px;
    	background-image: url(../images/arrow-down-css.gif);
    }

    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>
    <body>
    <div class="down-arrow">Down</div>
    <script src="js/jquery-1.2.6.min.js"></script>
    <script src="js/script.js"></script>
    </body>
    </html>

    Code javascript:
    $('div.down-arrow').bind('click', function () {
    	$(this).css({'background-image' : 'url(images/arrow-down-jquery.gif)'});
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I was told to add an extra element to the equation (hurray...) so now I have to access the (<a>) child of (this)'s background image, would the syntax be something along the lines of (this a ).css?

    Does anyone know of an online j-query reference?

    Thanks!

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tupira View Post
    Does anyone know of an online j-query reference?
    jQuery Documentation
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool! Thanks! I'm just having so much trouble with jQuery pluggins at the moment, I initially thought they were fabulous because one doesn't need to have a good grasp of scripting but I was very wrong, they seem to have a lot of compatibility and conflicting issues with other plugins...

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    jquery isn't supposed to remove the need to understand scripting. It's purpose is to handle some of the more difficult aspects of scripting, so that programmers can more easily focus on getting the work done.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tupira View Post
    Does anyone know of an online j-query reference?
    Thanks!
    http://jquery.bassistance.de/api-browser/

    I find it very useful but I agree with pmw57 you must still
    know scripting

    Bye.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •