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]
Siberian
13
Junior Poster
Recommended Answers
Jump to PostThe 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.
Jump to PostOK, 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 …
Jump to PostI 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.
All 9 Replies
hericles
289
Master Poster
Featured Poster
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.
Siberian
13
Junior Poster
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.
hericles
289
Master Poster
Featured Poster
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.
Siberian
13
Junior Poster
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 ;-)
Siberian
13
Junior Poster
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 ?
hericles
289
Master Poster
Featured Poster
I answered this in my first response. Alter your link href to behref='#'
and that behaviour will stop. Without correct HREF values the page is simply reloading which makes the tutorial div appear again.
hericles
289
Master Poster
Featured Poster
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>
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.
Siberian
13
Junior Poster
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]
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.