jQuery UI problem: why do the elements go flying around the screen?
Posted
by George Edison
on Stack Overflow
See other posts from Stack Overflow
or by George Edison
Published on 2010-04-22T04:47:41Z
Indexed on
2010/04/22
4:53 UTC
Read the original article
Hit count: 212
Yes, I know the title sounds a little suspicious. I will try to explain this the best I can...
The code below is supposed to have the blue div slide down beside the red div. The first time you hit the Show the div button, it works. Also, the Hide the div works.
Then when I click to show the div again, it appears to the right of where it is supposed to be! Why is this?!?
Note: You can find a live example of the code here
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo</title>
<style type='text/css'>
#red {
background-color: red;
width: 200px;
height: 150px;
position: absolute;
}
#blue {
background-color: blue;
width: 150px;
height: 200px;
position: absolute;
display: none;
}
#tester_1 {
top: 300px;
left: 300px;
position: absolute;
}
#tester_2 {
top: 350px;
left: 300px;
position: absolute;
}
</style>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript'>
function Show()
{
$('#blue').position({
of: $('#red'),
my: 'left top',
at: 'right top'}).slideDown();
}
function Hide()
{
$('#blue').hide();
}
</script>
<body>
<div id='red'></div>
<div id='blue'></div>
<button id='tester_1' onclick='Show()'>Show the <kbd>div</kbd></button>
<button id='tester_2' onclick='Hide()'>Hide the <kbd>div</kbd></button>
</body>
</html>
© Stack Overflow or respective owner
