asaquzzaman Posted August 23, 2011 Report 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
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.