asaquzzaman Posted August 23, 2011 Report Share Posted August 23, 2011 jQuery toggle direction Please, improve it without css To run this program you should connect your net. <html> <head> <title>Jquery toggle direction</title> <script src="http://code.jquery.com/jquery-latest.js"</script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".toggle").hover(function(){ jQuery(".bottom_left,.bottom_right,.top_left,.top_right").toggle(1000); }); }); </script> <style> .bottom_left { background-color:#EDEDED; border:2px solid #666666; font-size:35px; line-height:1.3em; display:none; padding:10px; position:absolute; text-align:center; width:300px; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:0 0 5px #888888; -webkit-box-shadow:0 0 5px #888888; bottom:385px; right:625px; } .bottom_right { background-color:#EDEDED; border:2px solid #666666; font-size:35px; line-height:1.3em; display:none; padding:10px; position:absolute; text-align:center; width:320px; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:0 0 5px #888888; -webkit-box-shadow:0 0 5px #888888; bottom:385px; left:500px; } .top_left { background-color:#EDEDED; border:2px solid #666666; font-size:35px; line-height:1.3em; display:none; padding:10px; position:absolute; text-align:center; width:300px; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:0 0 5px #888888; -webkit-box-shadow:0 0 5px #888888; top:240px; right:625px; } .top_right { background-color:#EDEDED; border:2px solid #666666; font-size:35px; line-height:1.3em; display:none; padding:10px; position:absolute; text-align:center; width:300px; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:0 0 5px #888888; -webkit-box-shadow:0 0 5px #888888; top:240px; left:500px; } .toggle { position:absolute; z-index:2; cursor:pointer; left:400px; top:170px; text-decoration:underline; } .mishu { position:absolute; font-size:20px; top:350px; left:250px; } </style> </head> <body> <div class="toggle"> <h1>Toggle</h1></div> <div class="mishu">Become fan on my facebook account <a href="http://en-gb.facebook.com/people/Mishu-Asaquzzaman/100000130253126" target="_blank">joy.mishu@gmail.com</a></div> <div class="bottom_left">Bottom to left toggle</div> <div class="bottom_right">Bottom to right toggle</div> <div class="top_left">Top to left toggle</div> <div class="top_right">Top to right toggle</div> </body> </html> View Demo Quote Link to comment Share on other sites More sharing options...
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.
Note: Your post will require moderator approval before it will be visible.