Jquery and hidden floating divs
I ran into a problem that I actually worked with the last time I worked on a site that I am working on. But I'm redesigning to include other elements and I can't seem to get the jquery part to work.
Basically, I have a html document with a div. these divs have id = "" attached to them so I can call them with jquery. basically what i want to do is show and hide divs that are part of the same html document. these divs move one by one, but I need them to show at different times when the user clicks on the nav. below is a simplified markup where the IDs would be tags to determine which one should be hidden and which ones to show, and the selectors would be in separate list tags I have in the links part.
<body>
<div class="linkbar"></div>
<div class="pages">
<div class="page-one" id="B1"></div>
<div class="page-two" id="B2"></div>
<div class="page-three" id="B3"></div>
<div class="page-four" id="B4"></div>
</div>
<div class="footer"></div>
</body>
another note. almost all of these elements are placed within 1000px width. the part of the pages is a 1000px wide x × X space that I want to fill with the content of the page div.
below is the jQuery markup I put to display first on page load and then subsequent ones after that to show and hide according to the "page" chosen from naivety. # A1-3 is a selector associated with nav links.
$(function() {
$(document).ready(function() {
${"B0").show();
$("div.home").show();
$("div.my-life").hide();
$("div.photos").hide();
$("div.video").hide();
$("div.news").hide();
$("div.contact-me").hide();
});
});
$(function() {
$("#A1").click(function() {
$("#B1").show();
$("#B2").hide();
$("#B3").hide();
$("#B4").hide();
$("#B5").hide();
$("#B6").hide();
});
});
$(function() {
$("#A2").click(function() {
$("#B1").hide();
$("#B2").show();
$("#B3").hide();
$("#B4").hide();
$("#B5").hide();
$("#B6").hide();
});
});
$(function() {
$("#A3").click(function() {
$("#B1").hide();
$("#B2").hide();
$("#B3").show();
$("#B4").hide();
$("#B5").hide();
$("#B6").hide();
});
});
Help? its driving me nuts because it worked last time.
source to share
You have {instead of (in your first selector
$(document).ready(function() {
//${"B0").show();
$("B0").show();
$("div.home").show();
$("div.my-life").hide();
$("div.photos").hide();
$("div.video").hide();
$("div.news").hide();
$("div.contact-me").hide();
});
Edit:
Small javascript bugs like this can be easily found using firebug , an extremely useful javascript debugger and general web development tool for Firefox.
By the way, $(function() {
both $(document).ready(function() {
do the same and there is no need to use them more than once. You can include all your jQuery in one of these.
source to share
The siblings function can help you optimize your code:
<body>
<div class="linkbar">
<a href="javascript:void(0)" class="link" rel="B1">B1</a>
<a href="javascript:void(0)" class="link" rel="B2">B2</a>
<a href="javascript:void(0)" class="link" rel="B3">B3</a>
<a href="javascript:void(0)" class="link" rel="B4">B4</a>
</div>
<div class="pages">
<div class="page-one" id="B1">b1</div>
<div class="page-two" id="B2">b2</div>
<div class="page-three" id="B3">b3</div>
<div class="page-four" id="B4">b4</div>
</div>
<div class="footer"></div>
</body>
JavaScript:
$('.link').click(function(){
$('.pages').find('#'+$(this).attr('rel')).show().siblings().hide();
});
Test it out here: http://jsfiddle.net/SZ7y9/10/
Good luck!
source to share
You have a path to many repetitive patterns in your source code. Try to stick to DRY to help manage your code. However, I refactored your code to show how it can be simplified. try it
$(function() {
$('#nav li a').click(function() {
var page = $(this).attr('rel'); // grab rel attribute
$('.pages').each(function() { // iterate
if ($(this).is(':visible')) { // returns true if visible
$(this).hide();
}
});
$('.' + page).stop(true, true).toggle('slow'); // show page
});
return false;
});
Html
<div class="linkbar">
<ul id="nav">
<li><a href="#" rel="page-one">Page One</a></li>
<li><a href="#" rel="page-two">Page Two</a></li>
<li><a href="#" rel="page-three">Page Three</a></li>
<li><a href="#" rel="page-four">Page Four</a></li>
</ul>
</div>
<div class="pageWrapper">
<div class="page-one pages">One</div>
<div class="page-two pages">Two</div>
<div class="page-three pages">Three</div>
<div class="page-four pages">Four</div>
</div>
<div class="footer"></div>
CSS
.pages {
display: none;
}
source to share