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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Post jQuery / Javascript

    Im having a bit of problem with this script, all its ment to do is highlight images on hover then switch class. Also there's a div which changes display depending on which button is selected. Im not great with javascript and would like a bit of help.

    I created the i variable so that i could reference that depending which button is pressed (i.e 0,1,2,3). If i change the variable to any of those numbers it works and the image changes and sets its value, although what im having trouble with is it doing it dynamically and when clicked it updates that variable.

    i tried adding
    i = 1;
    return;

    although i don't think that changed anything...
    i dont even know why i cant alert a function eg.
    Code:
    <script>
    function helpme() { alert("hello"); }
    </script>
    
    <input type="button" onClick="helpme()" value="submit me"/>
    --------------------------------------


    Heres the code for what im trying to get working:
    Code:
    <script>
    $(document).ready(function()
    {
    	var i = $(this).val();
    	
    	$("#button_intro").click(
    		function(){
    			$("#white_content_1").css("display","block");
    			$("#white_content_2").css("display","none");
    			$("#white_content_3").css("display","none");
    			$("#white_content_4").css("display","none");
    		}
    	);
    	$("#button_startup").click(
    		function(){
    			$("#white_content_1").css("display","none");
    			$("#white_content_2").css("display","block");
    			$("#white_content_3").css("display","none");
    			$("#white_content_4").css("display","none");
    		}
    	);
    	$("#button_small").click(
    		function(){
    			$("#white_content_1").css("display","none");
    			$("#white_content_2").css("display","none");
    			$("#white_content_3").css("display","block");
    			$("#white_content_4").css("display","none");
    		}
    	);
    	$("#button_large").click(
    		function(){
    			$("#white_content_1").css("display","none");
    			$("#white_content_2").css("display","none");
    			$("#white_content_3").css("display","none");
    			$("#white_content_4").css("display","block");
    		}
    	);
    
    	if (i == 0){
    		$("#button_intro").addClass('selected');
    		
    		$("#button_startup").hover(	
    			function(){$("#button_startup").addClass('selected');
    			},
    			function(){$("#button_startup").removeClass('selected');
    			});
    		$("#button_small").hover(	
    			function(){$("#button_small").addClass('selected');
    			},
    			function(){$("#button_small").removeClass('selected');	
    			});
    		$("#button_large").hover(	
    			function(){$("#button_large").addClass('selected');	
    			},
    			function(){$("#button_large").removeClass('selected');	
    			});	
    			
    			
    		} else if (i == 1) {
    		$("#button_startup").addClass('selected');
    		
    		$("#button_intro").hover(	
    			function(){$("#button_intro").addClass('selected');	
    			},
    			function(){$("#button_intro").removeClass('selected');	
    			});
    		$("#button_small").hover(	
    			function(){$("#button_small").addClass('selected');
    			},
    			function(){$("#button_small").removeClass('selected');	
    			});
    		$("#button_large").hover(	
    			function(){$("#button_large").addClass('selected');	
    			},
    			function(){$("#button_large").removeClass('selected');	
    			});	
    			
    	} else if (i == 2) {
    		$("#button_small").addClass('selected');
    		
    		$("#button_startup").hover(	
    			function(){$("#button_startup").addClass('selected');
    			},
    			function(){$("#button_startup").removeClass('selected');
    			});
    		$("#button_intro").hover(	
    			function(){$("#button_intro").addClass('selected');	
    			},
    			function(){$("#button_intro").removeClass('selected');	
    			});
    		$("#button_large").hover(	
    			function(){$("#button_large").addClass('selected');	
    			},
    			function(){$("#button_large").removeClass('selected');	
    			});	
    	} else if (i == 3) {
    		$("#button_large").addClass('selected');
    		
    		$("#button_small").hover(	
    			function(){$("#button_small").addClass('selected');
    			},
    			function(){$("#button_small").removeClass('selected');	
    			});
    		$("#button_startup").hover(	
    			function(){$("#button_startup").addClass('selected');
    			},
    			function(){$("#button_startup").removeClass('selected');
    			});
    		$("#button_intro").hover(	
    			function(){$("#button_intro").addClass('selected');	
    			},
    			function(){$("#button_intro").removeClass('selected');	
    			});
    	};
    });
    </script>
    Code:
    <div style="height:24px; border-bottom:3px solid #94A942;">
    		<img src="images/buttons/button1.png" alt="Buttons" id="button_intro" value="0" class="not_selected"/>
    		
    		<img src="images/buttons/button2.png" alt="Buttons" id="button_startup"  value="1"  style="margin-left:-13px;" class="not_selected"/>
    		
    		<img src="images/buttons/button3.png" alt="Buttons" id="button_small" style="margin-left:-13px;"  value="2" class="not_selected"/>
    		
    		<img src="images/buttons/button4.png" alt="Buttons" id="button_large" style="margin-left:-13px;"  value="3" class="not_selected"/>
    		
    	</div>
    	<div class="white_section" style="border-top:0px; height:244px">
    		<div id="white_content_1">
    			Intro
    		</div>
    		<div id="white_content_2" style="display:none">
    			Startup 
    		</div>
    		<div id="white_content_3" style="display:none">
    			Small
    		</div>
    		<div id="white_content_4" style="display:none">
    			Large
    		</div>
    		
    	</div>
    Thankyou for any help you can give.
    Lewis Stevens

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    "value" is not an attribute for <img> elements

    Try this
    Code:
    $(document).ready(function() {
       $('.not_selected').click(function() {
          // extract the number from the src of the image
          var theNum = this.src.match(/\d/)[1];
          // hide all the divs in white_section first
          $('.white_section div').hide();
          // show only the one with the correct number
          $('#white_content_' + theNum).show();
          // add a new "fixed" class to the current element that cannot be removed on mouseleave
          // remove this class from all other <img> first
          $('.not_selected').removeClass('fixed');
          $(this).addClass('fixed');
       });
       $('.not_selected').hover(function() {
          $(this).addClass('selected');
       }, function() {
          $(this).removeClass('selected');
       });
    });
    You would need to introduce a new .fixed class that cannot be removed on mouseleave and that should have the same style as .selected (just add another class selector to the same CSS rule)

  • Users who have thanked devnull69 for this post:

    lewisstevens1 (11-23-2012)

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ah thanks that worked but i did have to remove the
    [1] from var theNum = this.src.match(/\d/)[1];
    else it wouldn't work.

    So why doesnt below work?
    Code:
    <script>
    function helpme() { alert("hello"); }
    </script>
    
    <input type="button" onClick="helpme()" value="submit me"/>
    Thankyou for your help


  •  

    Posting Permissions

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