CODEWITHSUNDEEP
javascriptjqueryhtmlcss
LUVSON
LUVSON

Reputation: 3

Hidden div is moving when it's shown

+++++i add mention+++++

thanks guys for your answers, but, i think, i missed something to write more.

when i click the button to show the div(#pop), it works right at the scroll on the top.

but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.

so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)

=================================================================================

Here are my codes.

I have a floating menu and one button of them works for showing a div id = pop, which is floating too.

I want to hide the div #pop when window starts, and when the button's clicked, it shows.

So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.

HTML

<div class="menu">
    <a href="#scrolltop"><img src="btnUp.png"></a><br/>
        <img src="btnMe.png" id="pop_bt"><br/>
    <a href="#scrollbottom">
        <img src="btnDown.png">
    </a>    
</div>

<div id="pop">
    <div>
        POP UP
    </div>
</div>

CSS

#pop{
    display: none;
    width: 300px;
    height: 400px;
    background: #3d3d3d;
    color: #fff; 
    position: absolute;
    bottom :10%;
    left: 30%;
    z-index: 3;
}

Javascript

$(document).ready(function(){
    var boxtop = $('.menu').offset().top;
    $(window).scroll(function(){ 
        $('.menu').stop();
        $('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800); 
    });  
});

$(document).ready(function() {
    $('#pop_bt').click(function() {
        $('#pop').show();
    });
    $('#pop').click(function() {
        $('#pop').hide();
    });
});

$(document).ready(function(){
    var boxtop = $('#pop').offset().top;
    alert(boxtop);
    $(window).scroll(function(){ 
        $('#pop').stop();
        $('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800); 
    });  
});

Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.

Can anyone help me?

Upvotes: 0

Views: 213

Answers (3)

DenicioCode
DenicioCode

Reputation: 9336

Display none is removing your button from the layout. Same on .hide(). Use opacity 0 to hide the dig but keep it in your browser.

Upvotes: 1

Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

use this... 

 $(document).ready(function()
    {
     $("#pop").hide();
    $("#button_id").click(function()
    {
      $("#pop").show();
    });
    });

is this you actually need?

Upvotes: 0

RaviH
RaviH

Reputation: 3584

In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:

$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);

It sets a top value and moves the layer to some other place. It should work fine if you remove that.

Upvotes: 0

Related Questions