All geek questions in one place

Problem with jQuery UI: why do elements move around the screen?

Yes, I know the name sounds a little suspicious. I will try to explain this as best as possible ...

The code below should have a blue divslide down next to red div. (Right to the right - using the position()jQuery UI utility ) The first time the button is pressed, Show the divit works. It also works Hide the div.

Then, when I click to show again div, it is to the right of where it should be! Why is this?!?

Note: You can find a live code example 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" src="jqueryui.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>
+3
source share
4 answers

div... , Chrome IE.

function Hide()
{
    $('#blue').css({ left: 0, top: 0 }).hide();
}
+2
function Show()
{
    $('#blue').position({
            of: $('#red'),
            my: 'left top',
            at: 'right top'})
    .slideDown();
}

, position.

   function Show()
    {
        $('#blue').slideDown();
    }

.

$(function(){
   $('#blue').position({
            of: $('#red'),
            my: 'left top',
            at: 'right top'})
})
function Show()
{
    $('#blue').slideDown();
}

function Hide()
{
    $('#blue').hide();
}
+2

( jQuery), ( display: none), 0. , , .

, , slideDown() .

0

Source: https://habr.com/ru/post/1742220/

More articles:


All Articles