Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Jan 2009
    Posts
    7
    Member #
    18098
    I am having some issues with my site. I have a main Nav with four links that load in 4 different sections.

    You can see the page I am working on here: http://idea-palette.com/official/newofficialsite4.html

    What I am trying to do is, when a user clicks on another Main Nav button, such as 'Web Projects', the background-image changes to another image that shows the lightbulb being on. I also want it to change back the background-image for any link that currently has the light on, so that it seems the light is on for whatever page the user visits.


    Here is my basic html layout that pertains:
    Code:
    <body>
      <div id="container">
        <div id="header">
          <div id="nav">
            <li>
              anchor tag
                span tag
    Each of the links are called 'printsectbtn', 'websectbtn', and so on. Each of the default background-images is called 'print_off.png', 'web_off.png', and so on. Each of the background images that show up when a user clicks that link are called 'print_on.png', 'web_on.png', and so on.

    I have started all their names with either 'print', 'web', 'mot', or 'int' so that I could make it dynamic and simply erase some letters from the clicked div's name and then add some others at the end.



    Here is my jquery that pertains to this issue:

    Code:
    $(function(){
            $('#nav li a').click(function(){
                var clickedLinkId = $(this).attr('id'); //This is the ID of the Main Nav Link that was clicked
                var picOnLocation = 'images/' + clickedLinkId - 'sectbtn' + '_on' + '.png'; //This is the location of the new background image once the user clicks a button
                var picOnUrl = 'url(' + picOnLocation + ')'; //This combines the background image location and URL Line
           
                $('#' + clickedLinkId + ' span').css({"background-image":picOnUrl}); //This changes the background image of the span of the currently clicked link.
    
                return false;
       });
    });
    Basically, what I am trying to do above is to:
    1) Get the ID of the clicked link. I called this var ClickedLinkId.
    2) Erase the word 'sectbtn' from the end of the ID, so that it just reads as 'print' or 'web' for example
    3) Add 'images/' before the word and '_on.png' after the word, so that it is the location of the new background Image that shows up after the user clicks on a link. I called this var picOnLocation.
    4) Combine the new background Image location(picOnLocation) and URL line. I called this var picOnUrl.
    5) Change the css of the clicked Link's span to show up as the new background image as specified by picOnUrl.


    What I am using does work as I can see the current background disappear, but no new background loads in. Also, when I try this: var picOnUrl = "url('images/web_on.png')"; ,it works fine, so I think I may have an issue with it not being able to find the background image file or perhaps my concatenation is incorrect.

    Here's my folder structure if it helps:
    newofficialdesign4.html
    IMAGES folder
    - print_on.png
    - web_on.png
    - mot_on.png
    - int_on.png

    I know this is a really long post, but I am really hoping someone can help me, so I included all the specifics. Please let me know if there are any other questions that I can answer to help you help me.

    Thanks in advance!

    -Chris

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The classical debugging technique here is logging the URI that you are trying to look at. If you have Firebug or you are using Safari, then you have a console you can log to easily. Right after you build the URI, put this code:

    Code:
    console.log(picOnUrl);
    Then, bring up either the Firebug console or the Safari console and you should see the URI outputted. As it is, your problem is that you are using `-' to remove part of a String. The only operator that works on Strings in Javascript is the + operator, which means concatenate. If you want to strip part of the id, you need to do:

    Code:
    clickedLinkId.replace("sectbtn", "");
    This will search for the given string (secbtn) and replace it with a blank string, effectively removing it. You can use this instead of the - operator, which will try to do an arithmetic subtraction, which means it will try to coerce the two strings into Numbers, which means it will try to parse numbers out of them, which, since they are not numbers, means you will get a NaN result (Not a Number). If you follow the above logging technique, you'll probably get something like:

    Code:
    images/NaN_on.png

  4. #3
    Junior Member
    Join Date
    Jan 2009
    Posts
    7
    Member #
    18098
    aaah, very interesting. I see. Thanks alot for your help! I hadn't even thought about using traditional javascript. I think i depend too much on jquery. I tried using the replace method and it did make the light stay on, but it didn't make the one that was already on go off.

    Anyways, I decided to take a different approach to my problem and I want to tell you my solution since you took the time to help me.

    What I did was add a class in the css called 'lit' to the button's span as they're the ones with the background-image.


    This is what I wrote in my CSS:

    Code:
    #printsectbtn span { background-image: url(../images/print_off.png); }
    #printsectbtn span:hover { background-image: url(../images/print_on.png); }                        
    #printsectbtn span.lit { background-image: url(../images/print_on.png); }
    
    #websectbtn span { background-image: url(../images/web_off.png); }
    #websectbtn span:hover { background-image: url(../images/web_on.png); }                        
    #websectbtn span.lit { background-image: url(../images/web_on.png); }
    
    #motsectbtn span { background-image: url(../images/motion_off.png); }
    #motsectbtn span:hover { background-image: url(../images/motion_on.png); }                        
    #motsectbtn span.lit { background-image: url(../images/motion_on.png); }
    
    #intsectbtn span { background-image: url(../images/int_off.png); }
    #intsectbtn span:hover { background-image: url(../images/int_on.png); }                        
    #intsectbtn span.lit { background-image: url(../images/int_on.png); }
    This is what I wrote in my jquery:

    Code:
    $(function(){
           $('#printsectbtn span').addClass('lit');
      
           $('#nav li a').click(function(){
                 var clickedLinkId = $(this).attr('id');
          
                 $('#nav li a span').removeClass('lit');
                 $('#' + clickedLinkId + ' span').addClass('lit');
    
                 return false;
       });
    });

    So basically when the user clicks on one of the buttons, it adds the class 'lit' which changes the background-image to what I specified in the css for each different button. It also removes the class 'lit' from all of the button's spans, which changes the background image back to the lightbulb being off.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Excellent. I'm glad you found that way, since it is ultimately the `Right' way to go about it. This way all the Javascript does is add style markers, and the CSS is still in charge of doing the actual style work.

    Sometimes I get too focused on answering the question at hand, rather than offering the correct alternative


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com