Forums

cssgirl

Question:

I'm using jquery to show/hid content on a website. I have just the part I'm trying to show/hid content with here:

http://dev.cssgirl.com/r/rondaxe/cmc.html

As you see I've got my images cut up and sprited, and the hover actions working and on the top two links (drug product development and process research + development) I have the links hooked up with some jquery to hide some content until their clicked on then it's shown.

Here's what I want to do that I can't quite figure out:

I want those bubbles to stay green when the content is being displayed for it. I know kinda how I can do it (have a class added to that link when it's clicked and the content is showing) but how to I tell the jquery/DOM to do that?

Thanks.
Lindsey

cssgirl

Weird question:

What's up with the jump and content being shown near bottom of circles when clicked in IE6?

chriscoyier

This is how you can tell jQuery to add a class:

$('a.research-dev').addClass(\"active\").click(function() {
	hideAll();
	$('#research-dev').show(400);
	return false;
  });

Then just have the active class replicate the hover class:

.cmc a:hover, .cms a.active {
	background:url(images/cmcon.gif);
	}

You also have a lot of repetitive code, maybe try and put that stuff into it's own function, so hiding all those div's is much easier:

function hideAll() {
	$('#research-dev').hide(400);
	$('#chem-dev').hide(400);
	$('#fermentation').hide(400);
	$('#analytical').hide(400);
	$('#regulatory').hide(400);
	$('#quality').hide(400);
	$('#strategy').hide(400);
	$('#chain').hide(400);
	$('#product-dev').hide(400);
$('a').removeClass(\"active\"); // Also remove class on anchor
  };

pab

ah jquery you make writing scripts so much easier, Lindsey I just got karl Swedberg's book in the mail, I highly recommend it.

Bear Bibault' book is good too.

cssgirl

Thanks Chris and pab. I'll definitely check out those books.

My first real messing around and editing things my way with jquery.

Really appreciate the help!

cssgirl

Ok, sooo hopefully this will be the last question...

I tried this:

$('a.research-dev').addClass(\"active\").click(function() {
   hideAll();
   $('#research-dev').show(400);
   return false;
  });

But it made all the circles green onload. So I tried switching it and adding the active class within the click(function() { like so:

$('a.research-dev').click(function() {
   hideAll();
   $('#research-dev').show(400);
   addClass(\"active\")
   return false;
  });

Make the circles load as blue again, but still not keeping green on click.

So, I tried using "switchClass" instead, with same results. Not staying green. So I'm stuck again.

Here's my jquery:

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
 // (a little sooner than page load)
  $('#product-dev').hide();
  $('#research-dev').hide();
  $('#chem-dev').hide();
  $('#fermentation').hide();
  $('#analytical').hide();
  $('#regulatory').hide();
  $('#quality').hide();
  $('#strategy').hide();
  $('#chain').hide();
  
  function hideAll() {
   $('#research-dev').hide(400);
   $('#chem-dev').hide(400);
   $('#fermentation').hide(400);
   $('#analytical').hide(400);
   $('#regulatory').hide(400);
   $('#quality').hide(400);
   $('#strategy').hide(400);
   $('#chain').hide(400);
   $('#product-dev').hide(400);
$('a').removeClass(\"selected\"); // Also remove class on anchor
  }; 
 
 // toggles the slickbox on clicking the noted link
  $('a.prod-dev').click(function() {
	hideAll();
	$('#product-dev').show(400);
	addClass(\"selected\");
	return false;
  });
 
 
$('a.research-dev').click(function() {
   hideAll();
   $('#research-dev').show(400);
   switchClass('research-dev', 'research-on', 400);
   return false;
  }); 
 
  
  $('a.chem-dev').click(function() {
  hideAll();
	$('#chem-dev').show(400);
	addClass(\"selected\");
	return false;
  });
  
  $('a.fermentation').click(function() {
	hideAll();
	$('#fermentation').show(400);
	addClass(\"selected\");
	return false;
  });
  
  $('a.analytical').click(function() {
	hideAll();
	$('#analytical').show(400);
	addClass(\"selected\");
	return false;
  });
  
  $('a.regulatory').click(function() {
	hideAll();
	$('#regulatory').show(400);
	addClass(\"selected\");
	return false;
  });
  
  $('a.quality').click(function() {
	hideAll();
	$('#quality').show(400);
	addClass(\"selected\");
	return false;
  });
  
  $('a.strategy').click(function() {
	hideAll();
	$('#strategy').show(400);
	addClass(\"selected\");
	return false;
  });
  
  $('a.chain').click(function() {
	hideAll();
	$('#chain').show(400);
	addClass(\"selected\");
	return false;
  });

});

And my CSS/HTML

<html>
<head>
<title>CMC</title>
<style type=\"text/css\">
* {margin:0;padding:0;}
.cmc {
	float:left;
	clear:both;
	background:url(images/cmcbg.gif) center no-repeat;
	width:385px;
	height:381px;
	}
	
.cmc a, cmc a.off {
	text-indent:-99999px;
	position:absolute;
	background:url(images/cmcoff.gif);
	width:90px;
	height:90px;
	}
	
.cmc a:hover, .cmc a.research-on, .cmc a:active {
	background:url(images/cmcon.gif);
	}
	
.cmc a.prod-dev, .cmc a:hover.prod-dev {
	margin-left:95px;
	background-position:-5px 0;
	}
.cmc a.research-dev, .cmc a:hover.research-dev {
	margin-left:195px;
	margin-top:4px;
	background-position:-106px 0;
	}
.cmc a.chem-dev, .cmc a:hover.chem-dev {
	margin-left:275px;
	margin-top:65px;
	background-position:-202px 0;
	}
.cmc a.fermentation, .cmc a:hover.fermentation {
	margin-left:295px;
	margin-top:160px;
	background-position:-295px 0;
	}
.cmc a.analytical, .cmc a:hover.analytical {
	margin-left:250px;
	margin-top:250px;
	background-position:-389px 0;
	}
.cmc a.regulatory, .cmc a:hover.regulatory {
	margin-left:148px;
	margin-top:288px;
	background-position:-481px 0;
	}
.cmc a.quality, .cmc a:hover.quality {
	margin-left:50px;
	margin-top:257px;
	background-position:-575px 0;
	}
.cmc a.strategy, .cmc a:hover.strategy {
	margin-left:3px;
	margin-top:165px;
	background-position:-665px 0;
	}
.cmc a.chain , .cmc a:hover.chain {
	margin-left:23px;
	margin-top:68px;
	background-position:-760px 0;
	}
	
	#blurb {
	position:absolute;
	margin-left:420px;
	margin-top:150px;
	width:200px;
	}
</style>


</style>
<script type=\"text/javascript\" src=\"jquery-min.js\"></script>
<script type=\"text/javascript\" src=\"showhid.js\"></script>

 

</head>
<body>

<div class=\"cmc\">

<a href=\"#\" class=\"prod-dev\">Product Development</a>
<a href=\"#\" class=\"research-dev\">Research Development</a>
<a href=\"#\" class=\"chem-dev\">Chemical Development</a>
<a href=\"#\" class=\"fermentation\">Fermentationt</a>
<a href=\"#\" class=\"analytical\">Analytical</a>
<a href=\"#\" class=\"regulatory\">Regulatory</a>
<a href=\"#\" class=\"quality\">Quality</a>
<a href=\"#\" class=\"strategy\">Strategy</a>
<a href=\"#\" class=\"chain\">Chain</a>

<div id=\"blurb\">
	<div id=\"product-dev\">Lorem ipsum dolor. Set frigilla a.</div>
	<div id=\"research-dev\">Set frigilla a. Lorem ipsum dolor. </div>
	<div id=\"chem-dev\">Lorem ipsum dolor. Lorem ipsum dolor. Set frigilla a.</div>
	<div id=\"fermentation\">Lorem ipsum dolor. Set frigilla a. Lorem ipsum dolor. </div>
	<div id=\"analytical\">Lorem ipsum dolor. Set frigilla a. Lorem ipsum dolor.  Lorem ipsum dolor. </div>
	<div id=\"regulatory\"> Set frigilla a. Lorem ipsum dolor.  Lorem ipsum dolor.  Lorem ipsum dolor. </div>
	<div id=\"quality\">Lorem ipsum dolor. Lorem ipsum dolor.  Set frigilla a.</div>
	<div id=\"strategy\">Lorem ipsum dolor. Set frigilla a. Lorem ipsum dolor. </div>
	<div id=\"chain\">Lorem ipsum dolor. Set frigilla a. Lorem ipsum dolor. </div>
</div>

</div>

What am I doing wrong here?

Demo is here:

http://dev.cssgirl.com/r/rondaxe/cmc.html

chriscoyier

I think I led you astray a little bit. You got close though!

$('a.research-dev').click(function() {
   hideAll();
   $('#research-dev').show(400);
   $(this).addClass(\"active\");
   return false;
  });

That will add the class only when you click, which is what you want I think.

cssgirl

I don't know what I did wrong before. I even looked up the addClass thing on jquery.com and add the $(this) but couldn't get it to work. Whatever though now after I pasted in the way you have shown it does. Many, many thanks ;)!!!

pab

I've had that same issue with jquery

happens once in a blue moon.

cssgirl

Yeah, hopefully with more experience I'll get this down one day ;P

And I got the finished product up finally if you all want to check it out:

http://dev.ketanvakil.com/rondaxe.com/s ... ulting.php
and
http://dev.ketanvakil.com/rondaxe.com/services/

I even figured out the .hover solution for show/hide all by myself :) Practice, practice, practice!

Thanks again guys!

Spunkmeyer

Looks pretty cool! Good work!

cssgirl

Ok, one last question ;) Promise:

If you view either of those pages in IE6/IE7 you will see little black dots when the hover/click effects are taking place (ie: the show/hide). Looks like an IE issue with the redrawing or whatever you call it. Solutions?

At_the_Gates

This always seems to happen in IE when using show/hide - you also get really nasty un-aliased type (ClearType won't apply itself for some reason).

You can workaround it easily by using the sliding effects:

.slideUp()
.slideDown()
.slideToggle()

instead of

.show()
.hide()
.toggle()

James

treehouse : what would you like to learn today?

Forums

jquery show/hide and some other questions