Member Avatar for Siberian

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
  • 172 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Siberian

Recommended Answers

All 9 Replies

Member Avatar for hericles

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.

Member Avatar for Siberian

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.

Member Avatar for hericles

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.

Member Avatar for Siberian

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 ;-)

Member Avatar for Siberian

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 ?

Member Avatar for hericles

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.

Member Avatar for hericles

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>
Member Avatar for diafol

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.

Member Avatar for Siberian

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
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.