Jump to content

Recommended Posts

Posted

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

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...