Thankyou for your response, I'll try to clarify what I am trying to
doI 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
statementappears 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.
