LewatN Posted February 24, 2012 Posted February 24, 2012 Hello, We are trying to create a navigation button using jquery, css. We got everything working but we cannot make the images line up on the same line, next to each other to form a single (looking) navigation bar. Code is below Thanks before -------------------------------------------- Code: <!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="scripts/jquery.packed.js"></script> <style type="text/css" media="screen"> * {margin:0;padding:0;list-style:none;} body{font-family:"Trebuchet MS";font-size:13px;padding:2em;} h1{font-size:28px;} div{margin:0 0 2em 0;} p, pre, ul, li{margin:0 0 1em 0;} pre{padding:1em; border:solid 1px #ddd; background:#f8f8f8;} /* BEGIN CSS */ .fadeThisFront { position:relative; display:block; height: 38px; width: 121px; background:url(images/on-off-event-front.png) 0 0 no-repeat; } .hoverFront { position: absolute; top: 0; left: 0; display: none; height: 38px; width: 121px; background:url(images/on-off-event-front.png) 0 -38px no-repeat; } .fadeThis { position:relative; display:block; height: 38px; width: 257px; background:url(images/on-off-event.png) 0 0 no-repeat; } .hover { position: absolute; top: 0; left: 0; display: none; height: 38px; width: 257px; background:url(images/on-off-event.png) 0 -38px no-repeat; } /* END CSS */ </style> <script type="text/javascript"> $(document).ready(function() { // find the div.fade elements and hook the hover event $('.fadeThis').hover(function() { // on hovering over find the element we want to fade *up* var fade = $('> .hover', this); // if the element is currently being animated (to fadeOut)... if (fade.is(':animated')) { // ...stop the current animation, and fade it to 1 from current position fade.stop().fadeTo(500, 1); } else { fade.fadeIn(500); } }, function () { var fade = $('> .hover', this); if (fade.is(':animated')) { fade.stop().fadeTo(500, 0); } else { fade.fadeOut(500); } }); // get rid of the text $('.fadeThis > .hover').empty(); }); </script> <script type="text/javascript"> $(document).ready(function() { // find the div.fade elements and hook the hover event $('.fadeThisFront').hover(function() { // on hovering over find the element we want to fade *up* var fade = $('> .hoverFront', this); // if the element is currently being animated (to fadeOut)... if (fade.is(':animated')) { // ...stop the current animation, and fade it to 1 from current position fade.stop().fadeTo(500, 1); } else { fade.fadeIn(500); } }, function () { var fade = $('> .hoverFront', this); if (fade.is(':animated')) { fade.stop().fadeTo(500, 0); } else { fade.fadeOut(500); } }); // get rid of the text $('.fadeThisFront > .hoverFront').empty(); }); </script> </head> <body> <strong class="fadeThisFront"><span class="hoverFront">This text is hidden</span></strong> <strong class="fadeThis"><img src="images/nav-divider.png" width="2" height="38" /><span class="hover">This text is hidden</span></strong> </body> </html Quote
Administrators Nathan Posted February 24, 2012 Administrators Posted February 24, 2012 Eeek...please either post the file or use the CODE tags around you code so we can easily see it. Quote
LewatN Posted February 24, 2012 Author Posted February 24, 2012 aw. I can't use spoiler for codes any one can help me to edit this post? Quote
LewatN Posted February 24, 2012 Author Posted February 24, 2012 my bad, sorry for ignored preview Quote
Administrators Nathan Posted February 24, 2012 Administrators Posted February 24, 2012 What do you mean? I tried to edit, but the line breaks and such have already been changed so it's just 1 big block of code. Quote
LewatN Posted February 24, 2012 Author Posted February 24, 2012 done, Any ideas/help would be great Quote
Administrators Nathan Posted February 24, 2012 Administrators Posted February 24, 2012 Give this a try, I added "float:left" to your CSS for .fadeThisFront and .fadeThis <!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="scripts/jquery.packed.js"></script> <style type="text/css" media="screen"> * {margin:0;padding:0;list-style:none;} body{font-family:"Trebuchet MS";font-size:13px;padding:2em;} h1{font-size:28px;} div{margin:0 0 2em 0;} p, pre, ul, li{margin:0 0 1em 0;} pre{padding:1em; border:solid 1px #ddd; background:#f8f8f8;} /* BEGIN CSS */ .fadeThisFront { position:relative; display:block; height: 38px; width: 121px; float:left; background:url(images/on-off-event-front.png) 0 0 no-repeat; } .hoverFront { position: absolute; top: 0; left: 0; display: none; height: 38px; width: 121px; background:url(images/on-off-event-front.png) 0 -38px no-repeat; } .fadeThis { position:relative; display:block; height: 38px; width: 257px; float:left; background:url(images/on-off-event.png) 0 0 no-repeat; } .hover { position: absolute; top: 0; left: 0; display: none; height: 38px; width: 257px; background:url(images/on-off-event.png) 0 -38px no-repeat; } /* END CSS */ </style> <script type="text/javascript"> $(document).ready(function() { // find the div.fade elements and hook the hover event $('.fadeThis').hover(function() { // on hovering over find the element we want to fade *up* var fade = $('> .hover', this); // if the element is currently being animated (to fadeOut)... if (fade.is(':animated')) { // ...stop the current animation, and fade it to 1 from current position fade.stop().fadeTo(500, 1); } else { fade.fadeIn(500); } }, function () { var fade = $('> .hover', this); if (fade.is(':animated')) { fade.stop().fadeTo(500, 0); } else { fade.fadeOut(500); } }); // get rid of the text $('.fadeThis > .hover').empty(); }); </script> <script type="text/javascript"> $(document).ready(function() { // find the div.fade elements and hook the hover event $('.fadeThisFront').hover(function() { // on hovering over find the element we want to fade *up* var fade = $('> .hoverFront', this); // if the element is currently being animated (to fadeOut)... if (fade.is(':animated')) { // ...stop the current animation, and fade it to 1 from current position fade.stop().fadeTo(500, 1); } else { fade.fadeIn(500); } }, function () { var fade = $('> .hoverFront', this); if (fade.is(':animated')) { fade.stop().fadeTo(500, 0); } else { fade.fadeOut(500); } }); // get rid of the text $('.fadeThisFront > .hoverFront').empty(); }); </script> </head> <body> <strong class="fadeThisFront"><span class="hoverFront">This text is hidden</span></strong> <strong class="fadeThis"><img src="images/nav-divider.png" width="2" height="38" /><span class="hover">This text is hidden</span></strong> </body> </html LewatN 1 Quote
LewatN Posted February 25, 2012 Author Posted February 25, 2012 thanks alot Nathan ill send it to my friend Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.