Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help!! Fadeto() not working

    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
    Code:
    <script>
    $(document).ready(function() {
    $(#printbutton).click(function () {
    $(.photo .illus .web).fadeTo("slow", 0.33);
    });
    });
    </script>
    And the html

    Code:
    <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

    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    Code:
    <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:

    Code:
    <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:

    Code:
    <div class="thumbbox" class="illus">
    which should be written like this:

    Code:
    <div class="thumbbox illus">
    Last edited by SB65; 09-11-2010 at 02:54 PM.

  • Users who have thanked SB65 for this post:

    craigscott (09-12-2010)

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    thankyou so much!

    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

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You could assign an appropriate class to the body tag of your page, then use the jQuery .not selector to fade out any div which does not match the body class, if that makes sense.

    Something like:

    Code:
    $(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)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •