Re: [jQuery] Using add/remove class vs. show hide for a swap out section?
It would really help if you could post a link to a test page instead of
posting code excerpts. For example, I don't see any HTML code that has
id=link-about and your other links. Is that missing from your page, or did
you just omit it in the code you posted? Are the LI elements supposed to be
those links?
In any case, since I can't help you get the code working, at least I can
help you simplify it. Let me assume that those LI elements are your links.
Then I would change them to this:
ul
li class=clicklink id=link-about # About /li
li class=clicklink id=link-work # Work /li
li class=clicklink id=link-ramblings # Ramblings /li
li class=clicklink id=link-contact # Contact /li
/ul
and I would change your JavaScript - it's not Java, please :-) to:
$(document).ready( function() {
$('li.clicklink').click( function() {
$('div.content').addClass('hide');
$( '#' + this.id.split('-')[1] ).removeClass('hide');
});
});
If that .content class is also used on other elements in your page, then I
would another classname to your four content targets and change the
$('div.content') to use that classname instead.
-Mike
On Tue, Nov 24, 2009 at 7:20 PM, rorourke r...@pixelbleed.net wrote:
I'm mostly a CSS/HTML guy, so delving into jQuery is a bit more then my
normal task list would contain, but I'm happy to suck up any knowledge that
you may be able to impart.
Here is my scenario:
I have four div's each has a different class in additon to the .content
class (which controls font and link styles for each of them), .about, .
work, .ramblings, .contact. Each of these classes is by default shown. But
I've applied a class of .hide to all the ones after .about, which is the
default shown. What I have seems to work for the first link clicked after
page load, but after that nothing is happening. I would like, whenever a
link is clicked to show that sections div and hide the other three. I never
want more then one section showing. This adding classes business or even
just using the .hide() .show() functions doesn't necessarily work because
the java for the ID has to handle every situation on any given click.
Markup looks like this:
ul
li # About /li
li # Work /li
li # Ramblings /li
li # Contact /li
/ul
div class=content about
pYada/p
/div
div class=content work hide
pYada/p
/div
div class=content ramblings hide
pYada/p
/div
div class=content contact hide
pYada/p
/div
Java looks like this:
$(document).ready(function() {
$('#link-about').click(function(){
$('.about').removeClass(hide);
$('.work').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').addClass(hide);
});
$('#link-work').click(function(){
$('.work').removeClass(hide);
$('.about').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').addClass(hide);
});
$('#link-ramblings').click(function(){
$('.about').addClass(hide);
$('.work').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').addClass(hide);
});
$('#link-contact').click(function(){
$('.about').addClass(hide);
$('.work').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').removeClass(hide);
});
});
--
View this message in context:
http://old.nabble.com/Using-add-remove-class-vs.-show-hide-for-a-swap-out-section--tp26506957s27240p26506957.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] Using add/remove class vs. show hide for a swap out section?
Thanks for the help. I think we are getting somewhere.
Here is where the page is being developed: http://banderdash.net/design/
The JavaScript you suggested is in the 'slide.js' file. Found here:
http://banderdash.net/design/js/slide.js
The problem I am running into now is that it appears the hide class is
hiding the navigation. Because my sub-nav is itself inside the div.content
(4 separate times). This was done to ensure the proper active class was
shown automatically as one cycles through the sections. On viewing the page
you might get a better idea of what I am trying to achieve. That is (from
the black portion under the sketches), when a viewer clicks 'about' 'work'
'ramblings' or 'contact that div is swapped for the already present, but
hidden other div's.
Make any sense?
Michael Geary-3 wrote:
It would really help if you could post a link to a test page instead of
posting code excerpts. For example, I don't see any HTML code that has
id=link-about and your other links. Is that missing from your page, or
did
you just omit it in the code you posted? Are the LI elements supposed to
be
those links?
In any case, since I can't help you get the code working, at least I can
help you simplify it. Let me assume that those LI elements are your links.
Then I would change them to this:
ul
li class=clicklink id=link-about # About /li
li class=clicklink id=link-work # Work /li
li class=clicklink id=link-ramblings # Ramblings /li
li class=clicklink id=link-contact # Contact /li
/ul
and I would change your JavaScript - it's not Java, please :-) to:
$(document).ready( function() {
$('li.clicklink').click( function() {
$('div.content').addClass('hide');
$( '#' + this.id.split('-')[1] ).removeClass('hide');
});
});
If that .content class is also used on other elements in your page, then I
would another classname to your four content targets and change the
$('div.content') to use that classname instead.
-Mike
On Tue, Nov 24, 2009 at 7:20 PM, rorourke r...@pixelbleed.net wrote:
I'm mostly a CSS/HTML guy, so delving into jQuery is a bit more then my
normal task list would contain, but I'm happy to suck up any knowledge
that
you may be able to impart.
Here is my scenario:
I have four div's each has a different class in additon to the .content
class (which controls font and link styles for each of them), .about, .
work, .ramblings, .contact. Each of these classes is by default shown.
But
I've applied a class of .hide to all the ones after .about, which is the
default shown. What I have seems to work for the first link clicked after
page load, but after that nothing is happening. I would like, whenever a
link is clicked to show that sections div and hide the other three. I
never
want more then one section showing. This adding classes business or even
just using the .hide() .show() functions doesn't necessarily work because
the java for the ID has to handle every situation on any given click.
Markup looks like this:
ul
li # About /li
li # Work /li
li # Ramblings /li
li # Contact /li
/ul
div class=content about
pYada/p
/div
div class=content work hide
pYada/p
/div
div class=content ramblings hide
pYada/p
/div
div class=content contact hide
pYada/p
/div
Java looks like this:
$(document).ready(function() {
$('#link-about').click(function(){
$('.about').removeClass(hide);
$('.work').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').addClass(hide);
});
$('#link-work').click(function(){
$('.work').removeClass(hide);
$('.about').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').addClass(hide);
});
$('#link-ramblings').click(function(){
$('.about').addClass(hide);
$('.work').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').addClass(hide);
});
$('#link-contact').click(function(){
$('.about').addClass(hide);
$('.work').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').removeClass(hide);
});
});
--
View this message in context:
http://old.nabble.com/Using-add-remove-class-vs.-show-hide-for-a-swap-out-section--tp26506957s27240p26506957.html
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
--
View this message in context:
http://old.nabble.com/Using-add-remove-class-vs.-show-hide-for-a-swap-out-section--tp26506957s27240p26523705.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Using add/remove class vs. show hide for a swap out section?
I'm mostly a CSS/HTML guy, so delving into jQuery is a bit more then my
normal task list would contain, but I'm happy to suck up any knowledge that
you may be able to impart.
Here is my scenario:
I have four div's each has a different class in additon to the .content
class (which controls font and link styles for each of them), .about, .
work, .ramblings, .contact. Each of these classes is by default shown. But
I've applied a class of .hide to all the ones after .about, which is the
default shown. What I have seems to work for the first link clicked after
page load, but after that nothing is happening. I would like, whenever a
link is clicked to show that sections div and hide the other three. I never
want more then one section showing. This adding classes business or even
just using the .hide() .show() functions doesn't necessarily work because
the java for the ID has to handle every situation on any given click.
Markup looks like this:
ul
li # About /li
li # Work /li
li # Ramblings /li
li # Contact /li
/ul
div class=content about
pYada/p
/div
div class=content work hide
pYada/p
/div
div class=content ramblings hide
pYada/p
/div
div class=content contact hide
pYada/p
/div
Java looks like this:
$(document).ready(function() {
$('#link-about').click(function(){
$('.about').removeClass(hide);
$('.work').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').addClass(hide);
});
$('#link-work').click(function(){
$('.work').removeClass(hide);
$('.about').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').addClass(hide);
});
$('#link-ramblings').click(function(){
$('.about').addClass(hide);
$('.work').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').addClass(hide);
});
$('#link-contact').click(function(){
$('.about').addClass(hide);
$('.work').addClass(hide);
$('.ramblings').addClass(hide);
$('.contact').removeClass(hide);
});
});
--
View this message in context:
http://old.nabble.com/Using-add-remove-class-vs.-show-hide-for-a-swap-out-section--tp26506957s27240p26506957.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
