Hiding a Div behind another Div - jQuery or not jQuery?

[Siberian]

This question relates to another thread. I want to hide a div and keep a div hidden whether it's before or after the DOM loads. I can use hide() to hide the div, the div that is suppose to be hidden, will be hidden behind a div that is half it's size. As I mentioned, if I use hide() then the event is clicked, it won't appear as though it's coming from behind the div, I know this sounds confusing, maybe to some, I can only show the actual page in hope it is becomes clear ?

[hericles]

Yeah, its a bit unclear. You say 'I want to hide a div and keep a div hidden whether it's before or after the DOM loads'. By that do you mean the div is never to be made visible to the user? You could just use CSS visibiliy: hidden for that maybe I'm not getting your question...

[Dani]

You can set the z-index to "layer" divs on top of each other.

[Siberian]

I tried z-index, that works only partially. The div I want hidden is roughly 900px in height, the div it is hiding behind is roughly 500px in height. Until the user clicks on the anchor which runs a script, that 900px div should not be seen, but when it is seen that is where the script has some effect attached so it appears as though it's coming up from behind the 500px div.

This code doesn't work; although it's a direct copy of what is in my actual page, which does work ? Can I place an event within hide(), in other words the div is hidden until the anchor is clicked, which may work.

[Siberian]

The syntax error is because of me placing hide(), didn't mention !

[Siberian]

I updated the code !

[diafol]

I updated the code !

Good for you. Seeing as 95%+ of us haven't seen it anyway, what difference could it possible make? You hide the code away in a link. You give us nothing to work with, not even a link to the page. In order to help you frame your questions in a better way, read this sticky:

https://www.daniweb.com/web-development/php/threads/435023/read-this-before-posting-a-question

It's for the PHP forum, but relevant in general.

[Siberian]

What is wrong with putting a link in a word ? Second, some have suggested not to give a link to the actual page, instead JsFiddle, then as you complained, don't give a link to JsFiddle but instead the actual code.

Instead of me trying to aplease a dozen or so people, which neither you or I would do and instead of passing a link on how to post a message because you or someone else doesn't like the way I write a message or explain something; you have a choice and considering the internet is vast, either choice is fine with me.

You can either suggest what you prefer, whether that be, actual page code for this situation or jsfiddle code. Or if you don't have anything nice to say, don't say nothing at all.

[hericles]

You haven't closed the function

$(".solid a").click(function(event) {
    event.preventDefault();
    $("#block").animate({top: '320px'}, { duration:'200px', easing: 'easeOutBounce' });
});

Add that last }); and the div bounces down. HOw does this relate to the hidden div though? I don't see that here.

[Siberian]

I added added the curly brace and bracket in the updated verion of the code, Jsfiddle didn't update the code, when I choose update.

I know this syntax is wrong, this is the idea, if it's possible why the syntax could be wrong;

    $(".solid a") hide() .click(function(event) {
    event.preventDefault();
    $("#block").animate({top: '320px'}, { duration:'200px', easing: 'easeOutBounce' });
    });

[diafol]

Or if you don't have anything nice to say, don't say nothing at all.

I wasn't being unkind - truly, if I was being nasty, you'd know all about it. I was merely pointing out that as you don't print your code for all to see, your chances of getting help are reduced. Few of us will be clicking a link to see code on another site, unless it's something like a jsfiddle - that is to see the code working. You make no mention in your post that the link was to a jsfiddle.

know this sounds confusing, maybe to some, I can only show the actual page in hope it is becomes clear

Yes the first post was confusing as hell, especially this last line. From reading that I was expecting a link to the page.

This is not the first time that you've posted ambiguous posts, so I was trying to be helpful by pointing you towards a set of guidelines that may help you garner more support. You may feel frustrated, but so will all the contributors out there waiting to help you. It's not a question of appeasing a dozen people, it's about framing your question properly, with enough information.

[Siberian]

I wasn't being unkind - truly, if I was being nasty, you'd know all about it. I was merely pointing out that as you don't print your code for all to see, your chances of getting help are reduced. Few of us will be clicking a link to see code on another site, unless it's something like a jsfiddle - that is to see the code working. You make no mention in your post that the link was to a jsfiddle.

If you hover over the link, it show a thumbnail of jsfiddle, I don't know if that is only on my end ? If it is, this is why the confusion.

Yes the first post was confusing as hell, especially this last line. From reading that I was expecting a link to the page.

The first post did miss a link, my fault. This type of post won't happen again.

What is it that I could explain once again, to get this thread organized ?

[hericles]

Going back to the orignal question, I'd place the second div behind the first, exact same size and location, then there's no need to use hide().
You can animate with jquery to make it bounce out.

[Siberian]

The second div is behind the first, lets call the second div, divB and the first div, divA. DivA is smaller in dimensions then DivB, that is why I mentioned using hide() otherwise divB will be visible, I don't want it visible until the anchor is clicked.

[hericles]

Right, but you mention you want it to look like 'it's coming out from behind the div'. The only way I can visualise that is it 'growing' up out of it, rather than just appearing, which would require it being the same size, or smaller, as div A to begin with. If it is larger right from the start it will always looks as if it just appeared into place. Thats what I take away from your initial description anyway.

[gsudarsan]

try zindex and visibility property.

[Taywin]

Use CSS (display & visibility) to show and hide? z-index is fine, but it does not play well with 2 different size of elements.

[Siberian]

Right, but you mention you want it to look like 'it's coming out from behind the div'. The only way I can visualise that is it 'growing' up out of it, rather than just appearing, which would require it being the same size, or smaller, as div A to begin with. If it is larger right from the start it will always looks as if it just appeared into place. Thats what I take away from your initial description anyway.

The div is always hidden, until you click on the link, that is when the script with a visual effect, display the div !

If you view the actual page, the link is in this thread, you'll see the div behind a red box, but roughly a little more then half of the div is visible instead of it completely hidden behind the red box, until the anchor is clicked.

Use CSS (display & visibility) to show and hide? z-index is fine, but it does not play well with 2 different size of elements.

I've done both of these methods, the problem with these methods is it hides the div permentately, and the script can't override these properties within the style.

[hericles]

is this what you are after:
HTML:

<div class="solid"><a href="">Click me</a></div>
<div id="block"></div>
<div id="red"></div>

CSS:

#block {width:300px;height:300px;background-color:orange;position:relative;top:190px;}
#red {
    width: 300px; 
    height: 300px;
    background-color:red; 
    position:relative;
    top:200px;
    margin-top: -300px;
}

jQuery:

    $(".solid a").click(function(event) {
        event.preventDefault();
        $("#block").animate({top: '100px'}, { duration:'200', easing: 'easeOutBounce' });

    });

You can, of course alter height and animation of #block to suit your needs. If I'm right that is...

[Taywin]

I've done both of these methods, the problem with these methods is it hides the div permentately, and the script can't override these properties within the style.

I am not sure what you mean by that. JavaScript should be able to override element's style in the way that you could either replace the class name or add inline style of the element. The inline style should override whatever defined in the element's CSS class because it has higher priority (unless it is IE which may have unexpected result).

[Siberian]

hericles - I changed the height of #block which closley represents what I want to do, I hope you'll see the problem !
[Link]

[hericles]

No sorry, still don't get it. Is #orange mean to be completely invisible until the bounce out begins?

[Siberian]

hericles - Yes !

[Airshow]

Siberian, read the first line of my signature.

[Siberian]

AirShow - Read what hericles wrote, then read what follows !

If the orange div is suppose to be completely invisible until the bounce out begins, regardless the height of the orange div, what else could that mean ?

[Airshow]

Siberian, it means that an exchange of 22 posts should not be necessary to establish what could and should have been adequately explained in the original post.

Your only hope now is that the clairvoyant and persistent Hericles hasn't lost interest (last post 2 days ago).

[Siberian]

The thread became derailed at one point to get things back on track. If no one wants to contribute within a day, I'll move it elsewhere.