-1

When clicking on any of the menu items on my page, for example; clicking on the word blog, calls up the "tutorials" div, when only clicking the word "tutorials" should call up the "tutorials" div. Second issue is the #reachme div should be completely hidden behind the footer and only become visible when the word "reachme" is clicked, the second part of that action works, but as for it being completely hidden, not so !
[Link]

3
Contributors
9
Replies
49
Views
3 Years
Discussion Span
Last Post by Siberian
0

The tutorial div appears when the page first loads.
As you have no URL in your HREF all that happens on clicking a link is that the page reloads, showing the tutorial div again.

0

Look at the div reachme, half of the reachme div is showing below the footer tag, the other have above the footer tag (or red box) I want it to be completely invisible, until and only until the word "reachme" is clicked.

0

OK, this problem again. The div behind clearly needs to be the same size as the footer to start off. There simply isn't any other way to hide it unless you want to set its visibility to hidden.
So you need to make it move up and extend its size at the same time for the effect you want.
If I get some time I'll play around and see if I can get the effect right. Be good practise.

0

So you need to make it move up and extend its size at the same time for the effect you want.
If I get some time I'll play around and see if I can get the effect right. Be good practise.

That is the goal. It seems like the same problem, but it isn't, now you understand ;-)

0

Why is every anchor in the menu (top of the page) calling the event div#tutorials, it is because I have one event for two anchors ?

0

I answered this in my first response. Alter your link href to be
href='#'
and that behaviour will stop. Without correct HREF values the page is simply reloading which makes the tutorial div appear again.

0

And is this what you wanted for the reach me div?

<html>
<head>
    <script src='jquery.js'></script>
    <script src='jquery-ui.js'></script>
    <style>
        .container{
            height: 500px;
            width: 100%;
            padding-bottom: 100px;
        }
        .footer {
            height: 100px;
            width: 300px;
            z-index: 100;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 50;
        }
        .behind {
            height: 100px;
            width: 300px;
            z-index: 10;
            background-color: blue;
            position: absolute;
            bottom: 0;
            left: 50;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div id='container'>
    <a href='#' id='begin'>expand div</a>
    <div class='footer'></div>

    <div class='behind'>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
        <p>some content </p>
    </div>
</div>
<script>
$(document).ready(function() {
    $('#begin').click(function() {
       $( ".behind" ).animate({
        bottom: 150,
        height: 300
      }, { duration:'500', easing: 'easeOutBounce' }, function() {
        // Animation complete.
      }); 
    });
});
</script>
</body>
</html>
0

Sorry, but this thread is unintelligible to the passing contributor.
Could the OP please post the underlying code. References to #reachme and tutorials div are totally lost on us. As for having "one event / two anchors", posting the code should illuminate the issue. Otherwise this thread could become another rambling affair of 40 posts or more.

0

hericles - I did some changes to your code. The red footer was exactly touching the bottom of the browser, the actual page has the footer moved from the bottom, this is where the problem is, the blue box is seen below the footer (red) when it should be invisible and only visible until "expand div" is clicked.
Unless you know a better idea, how would you chain scale and the ease effect ?
[Link]

Edited by Siberian

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.