Morsusy2k Posted January 4, 2013 Share Posted January 4, 2013 Well..the title says it allI wanna build a navigation bar witch will change images in separate div,like here:http://aquaplan.rs/Lets just start with one button and one image..I tried lots of different stuff online and i couldn't find anything :SSo this is where i stoped: $(document).ready(function(){$('button').click(function(){ $("#bg").attr('src',"image1.jpg"); }};}}; This only makes the page to blink,i don't know why...help? :PThanks Link to comment Share on other sites More sharing options...
Ingolme Posted January 4, 2013 Share Posted January 4, 2013 That looks like it will work. The page would "blink" (refresh) under either of the following conditions: The button is a link, which isn't the case since you're using the selector for a <button> element. The button is inside a form and is considered a submit button. If your button is inside a form then remove the form. If you have other event handlers assigned to the button or elements in the page, show it. It would also be helpful to see the HTML of the page. Link to comment Share on other sites More sharing options...
Morsusy2k Posted January 5, 2013 Author Share Posted January 5, 2013 Sure,here Link to comment Share on other sites More sharing options...
Ingolme Posted January 5, 2013 Share Posted January 5, 2013 You should have checked the error console, look at this: SyntaxError: missing ) after argument list}}; Link to comment Share on other sites More sharing options...
Morsusy2k Posted January 5, 2013 Author Share Posted January 5, 2013 Still can't make it work..:S Link to comment Share on other sites More sharing options...
Ingolme Posted January 5, 2013 Share Posted January 5, 2013 Check the error console. In Firefox the shortcut to the error console is control+shift+J Link to comment Share on other sites More sharing options...
Morsusy2k Posted January 5, 2013 Author Share Posted January 5, 2013 Uncaught SyntaxError: Unexpected token } :S Link to comment Share on other sites More sharing options...
jeffman Posted January 5, 2013 Share Posted January 5, 2013 }};}}; You need two braces, not four. Try this: };}; Link to comment Share on other sites More sharing options...
Ingolme Posted January 5, 2013 Share Posted January 5, 2013 The braces need to be substituted with closing parenthesis, as the functions are being passed as parameters });}); Link to comment Share on other sites More sharing options...
Morsusy2k Posted January 5, 2013 Author Share Posted January 5, 2013 Foxy,you're right..It works now! :)Im doing some experiments,can you give me a hint on making it fadein/out?Something like this: $('#item1').hover(function(){ $("#bg").fadeOut(); $("#bg").attr('src',"image1.jpg") $("#bg").fadeIn(); }); Link to comment Share on other sites More sharing options...
jeffman Posted January 5, 2013 Share Posted January 5, 2013 (edited) The braces need to be substituted with closing parenthesis, as the functions are being passed as parameters });}); Yeah. I assumed Morsusy had handled the first, but I should have caught the second. @Morsusy: Your sample code won't work because the script won't wait while the fadeOut method executes. It immediately executes the attribute method and then attempts to fadeIn. Since the image is still faded in, there is no animation to see except for the image change. That's what I assume will happen, anyway. The good news is, the animation methods allow you to pass a function that will execute after the animation is complete. I haven't tried the code below, but it looks like it should work, or be close to working. I have no idea what happens if the user stops hovering before all the animation is done.$('#item1').hover(function() { $('#bg').fadeOut('slow', function() { $("#bg").attr('src',"image1.jpg"); $("#bg").fadeIn(); } );} ); Edited January 5, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
Morsusy2k Posted January 5, 2013 Author Share Posted January 5, 2013 (edited) Works like a charm :PHere is the final code if someone is interested $(document).ready(function(){$('#item1').hover(function() { $('#bg').fadeOut('fast', function() { $("#bg").attr('src',"image1.jpg"); $("#bg").fadeIn(); } );} ); $('#item2').hover(function() { $('#bg').fadeOut('fast', function() { $("#bg").attr('src',"image2.jpg"); $("#bg").fadeIn(); } );} );$('#item3').hover(function() { $('#bg').fadeOut('fast', function() { $("#bg").attr('src',"image3.jpg"); $("#bg").fadeIn(); } );} );$('#item4').hover(function() { $('#bg').fadeOut('fast', function() { $("#bg").attr('src',"image4.jpg"); $("#bg").fadeIn(); } );} );$('#item5').hover(function() { $('#bg').fadeOut('fast', function() { $("#bg").attr('src',"image5.jpg"); $("#bg").fadeIn(); } );} );$("#item1, #item2, #item3, #item4, #item5").mouseleave(function(){ $('#bg').fadeOut('fast', function() { $("#bg").attr('src',"1.jpg"); $("#bg").fadeIn();});});}); Thank you everyone Edited January 5, 2013 by Morsusy2k Link to comment Share on other sites More sharing options...
dsonesuk Posted January 6, 2013 Share Posted January 6, 2013 Add class 'fadeEffect' to each id item, you are not using hover function fully, to prevent overlapping of triggered hover fade effects use stop() assuming item1 will always point to related image file name item1 = image1.jpg, item2 = image2.jpg var imgpath= "../images/revolving/";$(document).ready(function(){$('.fadeEffect').hover(function() {// this is triggered when mouse hovers item areastripfornum=$(this).attr("id").replace("item","") $('#bg').stop(true,true).fadeOut('fast', function() { $("#bg").attr('src',imgpath+'image'+stripfornum+'.jpg'); $("#bg").fadeIn(); });}, function(){ // this is triggered when mouse leaves item area $('#bg').stop(true,true).fadeOut('fast', function() { $("#bg").attr('src',imgpath+'1.jpg'); $("#bg").fadeIn(); }); }); Link to comment Share on other sites More sharing options...
Morsusy2k Posted January 6, 2013 Author Share Posted January 6, 2013 (edited) Hehe,that got me confused xDNvm,okay so i did some experiments and i tried to make font color change also on rollover/hover/mouseenter but its kinda buggy,also i know its possible to make colors fade in/out too but i have no idea how to add that...well this is the far as i got: $('#item1').hover(function() { $('#bg').fadeOut('fast', function() { $("#bg").attr('src',"image1.jpg"); $("#bg").fadeIn(); }); $('#item1').mouseenter(function() { $("#item1").css("color","blue");}); $('#item1').mouseleave(function() { $("#item1").css("color","black");});}); First few times you hover it it wont change :S Edited January 6, 2013 by Morsusy2k Link to comment Share on other sites More sharing options...
dsonesuk Posted January 6, 2013 Share Posted January 6, 2013 never use jquery for styling where css can be used. then don't have to worry if javascript is enabled. #item1 {color:black;}#item:hover {color:blue;} Link to comment Share on other sites More sharing options...
Morsusy2k Posted January 6, 2013 Author Share Posted January 6, 2013 Yeah i know but i want it animated,not simple hover..something like this but this does not work: $("#item1").hover(function(){ $("#item1").animate( {color: "blue"}, "slow" );}); Link to comment Share on other sites More sharing options...
dsonesuk Posted January 6, 2013 Share Posted January 6, 2013 $(document).ready(function(){ $('p').css({'color': 'red'})// define default color here or by css$('p').hover(function(){$(this).stop(true,true).animate({ color: 'blue'}, 'slow');},function(){$(this).stop(true,true).animate({ color: 'red'}, 'slow');}); }); Link to comment Share on other sites More sharing options...
Morsusy2k Posted January 6, 2013 Author Share Posted January 6, 2013 Is there something like else statement for hover command jQuery? Btw it seems it does not work :S Link to comment Share on other sites More sharing options...
dsonesuk Posted January 6, 2013 Share Posted January 6, 2013 BTW, IT DOES WORK, IF you used it correctly. the hover() can use two functions within it, the first represents what is carried out on hover over, the second on hover out or mouse leave. $('p').hover(function(){$(this).stop(true,true).animate({ color: 'blue'}, 'slow');},function(){$(this).stop(true,true).animate({ color: 'red'}, 'slow');}); Link to comment Share on other sites More sharing options...
Morsusy2k Posted January 7, 2013 Author Share Posted January 7, 2013 Sry,I can't make it work,I just copied your original on the page,made a <p>something</p> but nothing happens with it,I also tried $('#item1') (whats in my case) and still noting. No errors are shown tho...:S Link to comment Share on other sites More sharing options...
dsonesuk Posted January 7, 2013 Share Posted January 7, 2013 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/var imgpath= "../images/revolving/";$(document).ready(function(){$('p').css({'color': 'red'})// define here or by css$('p').hover(function(){$(this).stop(true,true).animate({ color: 'blue'}, 'slow');},function(){$(this).stop(true,true).animate({ color: 'red'}, 'slow');}); $('.fadeEffect').hover(function() {stripfornum=$(this).attr("id").replace("item","") $('#bg').stop(true,true).fadeOut('fast', function() { $("#bg").attr('src',imgpath+'image'+stripfornum+'.jpg'); $("#bg").fadeIn(); });}, function(){ $('#bg').stop(true,true).fadeOut('fast', function() { $("#bg").attr('src',imgpath+'rotate.jpg'); $("#bg").fadeIn('fast'); });});});/*--*//*]]>*/</script><style type="text/css"></style></head><body><!--<img src="../images/revolving/image1.jpg" id="item1" class="fadeEffect" alt="" /><img src="../images/revolving/image2.jpg" id="item2" class="fadeEffect" alt="" /><img src="../images/revolving/image3.jpg" id="item3" class="fadeEffect" alt="" /><img src="../images/revolving/image4.jpg" id="item4" class="fadeEffect" alt="" /><img src="../images/revolving/image5.jpg" id="item5" class="fadeEffect" alt="" />--><p id="item1" class="fadeEffect">Item1</p><p id="item2" class="fadeEffect">Item2</p><p id="item3" class="fadeEffect">Item3</p><p id="item4" class="fadeEffect">Item4</p><p id="item5" class="fadeEffect">Item5</p><img src="../images/revolving/rotate.jpg" width="460" height="237" alt="" id="bg" /></body></html> Link to comment Share on other sites More sharing options...
Morsusy2k Posted January 7, 2013 Author Share Posted January 7, 2013 Thanks,sorry for bothering Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now