Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts

    Problem with javascript image swap

    Hi guys,

    I have this little snippet of code that swaps a toggle image for news for a plus or minus sign showing if the div is open or closed. This code has worked before but i made a couple modifications today and it stopped working unexpectedly and i'm not sure why its failing.

    I am presetting the div tag with a plus sign with css and then modifying it with javascript. The problem i am having is that when the div tag has been opened it does not swap the image to min.gif anylonger. It remains max.gif.


    Here's the javascript code
    Code:
    	var News_Images = new Array();
    	News_Images[0]="images/max.gif"
    	News_Images[1]="images/min.gif"
    
    function DisplayNews(body,box,link,id){
    		
    		$(body + " > div > .news_box").each(function(){
    	        if($(this).css("display")=="block"){
    	        	$(this).slideToggle("slow");
    	        }
    	     });
    
    	     $(body + " > div > a[class='open_button_closed']").each(function(){ // search and change the + / - images
    	     	  $(this).css("background-image",'url('+script_path+News_Images[0]+')');//
    	     });
    
    	     $(body + " > div > a[class='open_button']").each(function(){
    	     	  $(this).css("background-image",'url('+script_path+News_Images[0]+')');//
    	     });
    
    	     if($(body + " > div > #"+box+id).css("display")=="none"){
    	     	$(body + " > div > #"+box+id).slideDown("slow");
    			
    	     	$(body + " > div > #"+link+id).css("background-image",'url('+script_path+News_Images[1]+')');//
    			alert("box =" + box + " id = " + id + " link =" + link);
    	     }
    	}
    And here is the html sample
    Code:
        <div class="recent_news_box">
        <a onclick="DisplayNews('#display_recent','news_link','open_button',3); return false;" id="open_button3" class="open_button"></a>
        <a class="link_block" href="">Some Title Text</a>
            <div style="display: none;" class="news_box" id="news_link3">
            <img class="front_image" alt="" src="" align="right">
            <span class="date">Jul 21, 2009</span>
            <div>Some Stuff to display here will be short text</div>											
            </div>
        </div>
    Thanks in advance.

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Is this jquery? If so, I'm going to be one of those dorks that says "Do this instead". Only because the existing code looks more complicated than necessary just for opening/closing and toggling an image. Here's what I just tossed together:

    CSS - I didn't have images handy, but this should be close.
    Code:
        .open_button {width:1em;height:1em;/*background-color:red;*/ background-image:url(images/max.gif);display:block;}
        .news_box {display:none;}
        .itsOpen {/*background-color:green;*/ background-image:url(images/min.gif);}
    HTML - test divs
    Code:
        <div class="recent_news_box">
            <a id="open_button1" class="open_button"></a><a class="link_block" href="">1111111</a>
            <div id="news_link1" class="news_box">
                <span class="date">Jul 21, 2009</span>
                <div>1111 Some Stuff to display here will be short text</div>
            </div>
        </div>
        <div class="recent_news_box">
            <a id="open_button2" class="open_button"></a><a class="link_block" href="">2222222</a>
            <div id="news_link2" class="news_box">
                <span class="date">Jul 21, 2009</span>
                <div>2222 Some Stuff to display here will be short text</div>
            </div>
        </div>
        <div class="recent_news_box">
            <a id="open_button3" class="open_button"></a><a class="link_block" href="">3333333</a>
            <div id="news_link3" class="news_box">
                <span class="date">Jul 21, 2009</span>
                <div>3333 Some Stuff to display here will be short text</div>
            </div>
        </div>
    jQuery - inside the $(document).ready function, of course
    Code:
    $('.open_button').click(function(){
        $(this).siblings('div').slideToggle('slow');
        $(this).toggleClass('itsOpen');
    });
    The use of siblings() could probably be replaced by something else, but it works in this generic case.

    Apologies if this is entirely in another direction than you want to go. It's certainly a simpler way to do what I think you want, anyway.
    Are you a Help Vampire?

  • #3
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts
    I'm not sure if i am using this properly.

    I placed your jquery code inside the function

    Code:
    	$(document).ready(function() {
       $('.open_button').click(function(){
        $(this).siblings('div').slideToggle('slow');
        $(this).toggleClass('itsOpen');
    	});
     });
    It didn't seem to work so i'm not sure if i did something wrong? Thanks.

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    You can check with Firebug to see if you're getting any errors and maybe drop an alert in there to confirm it's actually entering the click() function.
    Are you a Help Vampire?

  • #5
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts
    I placed an alert box right after document ready and it never fired off. I apologize for my lack of javascript knowledge, but this is over my head.

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    You mean you did this?
    Code:
    $(document).ready(function() {
      alert('hi!');
      /* other stuff */
     });
    And it never alerted? If so, there's an error in somewhere in the javascript. Firebug will show where.
    Are you a Help Vampire?


  •  

    Posting Permissions

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