One filter would be to check the length of div:visible, if zero no
div's visible
I think there is a lot easier way to accomplish your task without
having to splice for ID's, writing filter tests and without any if
statements at all by using classes for everything you are doing
By adding/removing classes you can create the filters and by using the
index of button clicked , find corresponding info div to display . This
makes jquery so much easier to write , read , and troubleshoot IMO
Take a look at this version of your script. The only markup difference
is to add class =" info" to all your #content div's. Looking at html in
Firebug is helpful for seeing the new classes for better visual
understanding
$(function(){
$("#content div").addClass("info");// add this class so
don't have to splice to find ID, use index to locate instead
$(".button").css({
opacity: 0.3
});
$("#page-wrap div.button").click(function(){
// add/remove info_active class to use as filter for
visible content. Only the visible content will have this class
$(".info_active").fadeOut().removeClass("info_active");
// info_active class added below when this div is made visible
// much easier to index than splice to find ID's since
relationship is one to one
var index= $(".button").index(this);
$(".info").eq(index).fadeIn().addClass("info_active");
//// use the active class to dim the previous button.
Remove class on previous button has to happen before add to new or will
remove from button clicked
$(".button_active").animate({
opacity: 0.5,
borderWidth: 1
}, 600 ).removeClass("button_active");
////highlight css for newly clicked button
$(this).animate({opacity: 1,borderWidth: 5 }, 600
).addClass("active"); div
});
});
Suz T. wrote:
Thankyou for your response, I'll try to clarify what I am trying to
do....I am trying to have the content of a div on a page appear or
disappear based on a click of a link. However I want to start the page
with none of the content in divs being shown, thus I hid the #content
div's in the css.
What is happening now is first time I click on "xx-button" it then
fades in the corresponding "#content div.xx" Then the next click of
say "x1-button" fades in #content div.x1" BUT it does not fade out the
previous "#content div.xx". Same thing happens for the third
"x2-button", the "#content div.x2" is faded in but "#content div.x1"
and "#content div.xx" are still visible which is not what I want.
What I tried to do in the script is test if ALL the divs in "#content
div" are hidden. if true then fade in the corresponding "#content
div.xx" to the clicked "xx-button". This is good and works for the
first condition of the page only. At the next click to "x1-button"
the if statement " appears to return true again. As it appears that
"#content > div" is for any div in #content being hidden versus ALL.
So I am looking to understand how to write the filter/test to check if
ALL the divs in #content being hidden
There may be simpler way to do this... this was the closest I came to
getting it almost where I wanted.
Thanks hope this clears it a bit & thanks in advance for the help.
Suz
Charlie wrote:
this is
confusing, all the #content div's are already hidden by css (
display:none) and you say it's already working . Not very clear what
you are trying to accomplish
$("#content div").hide(); // this will hide every div within #content
using part of your click function below a "filter" like you are asking
about could be
$("#content div:visible").hide();
is that all you are trying to do is hide them?
Suz T. wrote:
Hello I am posting for the first time.. and am resending my message
because it didn't appear to post to the group.
As mentioned below, just starting out with jquery/_javascript_ and need
some help with the script below to have it start with none of the
#content div showing.
I expect this is pretty basic, so thanks in advance for any quick help
you can provide.
Thanks
Suz
SuzT wrote:
Hello I am
a beginner to jquery/_javascript_ and I am trying to use a
script I saw online to replace the content of a div. However I would
like to have the script start with none of the target content showing.
So far it starts correctly however I am not sure how to test/filter
for ALL the divs in #content being hidden which would be the begging
state of the page.
Here is a link to what it is doing now.
http://noworriestech.com/jquery/indext2.html
Here is the code
<script type="text/_javascript_">
$(function(){
$("#home-button").css({
opacity: 0.3
});
$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#page-wrap div.button").click(function(){
$clicked = $(this);
// if the button is not already "transformed" AND is
not animated
if ($clicked.css("opacity") != "1" &&
$clicked.is(":not
(animated)")) {
$clicked.animate({
opacity: 1,
borderWidth: 5
}, 600 );
// each button div MUST have a "xx-button" and the
target div
must have an id "xx"
var idToLoad = $clicked.attr("id").split('-');
if ($("#content > div").is(":hidden")) {
$("#content").find("#"+idToLoad[0]).fadeIn();
}
else {
//we search trough the content for the visible div
and we fade it
out
$("#content").find("div:visible").fadeOut("fast",
function(){
//once the fade out is completed, we start to
fade in the right
div
$(this).parent().find("#"+idToLoad[0]).fadeIn();
})}
}
//we reset the other buttons to default style
$clicked.siblings(".button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
});
});
</script>
Thank you for you assitance in advance.
|
