...

View Full Version : jQuery Help!! Fadeto() not working



craigscott
09-11-2010, 03:09 AM
hey, I am not very experienced with query which is why i am asking for some help. i am creating my portfolio website and i want to use jquery to fade out thumbnails.
I have categories of projects in a <ul> Print, Web, Illustration, Photography and when u click on one list item, i want it to fade out all the thumbnails that aren't print (for example), so only the print related projects are full opacity. Here is my code.

The jquery

<script>
$(document).ready(function() {
$(#printbutton).click(function () {
$(.photo .illus .web).fadeTo("slow", 0.33);
});
});
</script>

And the html


<div id="leftmenu">
<ul>
<li>Projects</li>
<span class="class1">
<li><div class="tinyline"></div></li>
<li><a href="#" id="printbutton">Print</a></li>
<span class="class2">
<li><a href="web.html">Web</a></li>
<span class="class3">
<li><a href="illustration.html">Illustration</a></li>
<span class="class4">
<li><a href="photography.html">Photography</a></li>
</ul>
</div>

Some example thumbnails


<div class="thumbbox" class="illus">
<img src="stairsthumb.jpg">
<div class="thumbinfo">
<ul class="infolist">
<li>Rearranging Structures</li>
<li>Photographic Collage.</li>
</ul>
</div>
</div>


<div class="thumbbox" class="print">
<img src="walkmanthumb.jpg">
<div class="thumbinfo">
<ul class="infolist">
<li>The brief guide to the Walkman</li>
<li>Field Guide Design</li>
</ul>
</div>
</div>

<div class="thumbbox" >
<img src="photographythumb.jpg" id="photo">
<div class="thumbinfo">
<ul class="infolist">
<li>Abandoned Asylum, Epsom</li>
<li>Photograph</li>
</ul>
</div>
</div>


It looks like a really simple function, but its not working and Iv tried everything.
A test page for my site is
www.craigscott.net/test.html

would really appreciate some help
thankyou
Craig

SB65
09-11-2010, 03:37 PM
In the page you link to, the script in your post does not exist, and neither are there any elements that would match ".photo .illus .web".

However, in jQuery you need to wrap your attribute selectors in quotes, so your jQuery code should be:


<script>
$(document).ready(function() {
$("#printbutton").click(function () {
$(".photo .illus .web").fadeTo("slow", 0.33);
});
});
</script>

EDIT: On looking again I realise you are trying to fade out elements that have class photo or illus or web - in which case your code needs to separate these with commas:


<script>
$(document).ready(function() {
$("#printbutton").click(function () {
$(".photo, .illus, .web").fadeTo("slow", 0.33);
});
});
</script>

(Without the commas this will only fade out an element with class web located within an element of class illus, located within an element of class photo). Further, we're still not quite there because you have multiple class attributes on the same element - you have for example:


<div class="thumbbox" class="illus">


which should be written like this:


<div class="thumbbox illus">

craigscott
09-12-2010, 01:21 AM
I knew it would be something really simple, really appreciate it.
However i have just realised, this function breaks the navigation of my site.
for example

if someone is on another page on my site, "about" for example (one which does not contain the thumbnails) they are not going to be able to see the projects.

Do u know what the jquery function would be to load the page then fade out the appropriate thumbnails?

Sorry, i should have thought of this earlier

thanks
craig

SB65
09-13-2010, 09:24 AM
You could assign an appropriate class to the body tag of your page, then use the jQuery .not selector (http://api.jquery.com/not/) to fade out any div which does not match the body class, if that makes sense.

Something like:


$(document).ready(function(){
var $myClass = $("body").attr("class");//read the class assigned to the body
$(".thumbbox").not("."+$myClass).fadeTo("slow", 0.33);//fade out all thumbbox elements which do not have the class assigned to body
});


would do it, assuming that you are assigning "photo", "illus" etc to both the body class for the appropriate page and the thumbbox divs.

(Feel like there should be a slightly more elegant way of writing that second line, but can't think of it...it works OK anyway)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum