SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery not working (not showing in source code)

    Hi,

    I'm trying to create this http://css-tricks.com/rotating-feature-boxes/

    My code is
    PHP Code:
    function rotator() {

    ?>


    <div id="rotator">

        <div id="block-1" class="active">
            <h2>Subtitle #1</h2>
            <div>
                <h1>Seven Space Frogs Descend On Canada's Largest City</h1>
                <img src="spacefrog.jpg" alt="space frog">
                <p>Commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div>
        </div>

        <div id="block-2" class="non-active-top">
            <h2>Subtitle #2</h2>
            <div>
                <h1>The Power of the Voodoo. Who do? You do.</h1>
                <img src="goblins.jpg" alt="goblins">
                <p>Ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div>
        </div>

        <div id="block-3" class="non-active-bottom">
            <h2>Subtitle #3</h2>
            <div>
                <h1>You May Find Yourself Living in a Shotgun Shack</h1>
                <p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div>
        </div>

    </div>
    <?php
    }

    add_action('thesis_hook_feature_box''rotator');

    function 
    rotate() {
    ?>

        <script>
            // DOM Ready
            $(function() {
            
                var current;
                        
                function rotate() {
                
                    // This seems like a sucky way to do it, but you can't select by classes because they execute in order
                                
                    if (current == 1) {
                        $("#block-1").removeClass().addClass("active");
                        $("#block-2").removeClass().addClass("non-active-top");
                        $("#block-3").removeClass().addClass("non-active-bottom");
                    } else if (current == 2) {
                        $("#block-1").removeClass().addClass("non-active-bottom");
                        $("#block-2").removeClass().addClass("active");
                        $("#block-3").removeClass().addClass("non-active-top");
                    } else {
                        $("#block-1").removeClass().addClass("non-active-top");
                        $("#block-2").removeClass().addClass("non-active-bottom");
                        $("#block-3").removeClass().addClass("active");
                    }
                
                }
                
                $("#rotator div").click(function() {
                
                    // Enables reversing, idea via Andrea Canton: https://twitter.com/andreacanton/status/24954634279849985
                    current = this.id.substr(6);            
                    rotate();
                
                });
            
            });
        </script>
        
    <?php
      
      
    }
    add_action('wp_head''rotator');
    However, I get this http://the-ephemeral-project.com/ (test site). The jquery isn't working and when I try and add the jquery into the head section I get two feature boxes which I don't want. I'm confused why this is happening, any clues?

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Your rotator HTML code is in the <head> of your document, so the first thing you need to do is move it into the <body> element. You can't have page code in the <head> section. (It may just be a simple mistake, but if you view source on that page, you'll see what I mean. )
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Your rotator HTML code is in the <head> of your document, so the first thing you need to do is move it into the <body> element. You can't have page code in the <head> section. (It may just be a simple mistake, but if you view source on that page, you'll see what I mean. )
    Whoops, I was calling the html function notice, rotator and rotate! D'oh!

    Ok, jquery is now showing but still not working. Any clues?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You have a link to the jQuery library and UI library in the head and just before the end of the page. I don't know if that's causing the problem, but having them twice on the page (apart from doubling the download) often causes problems. Make sure those scripts come before any other jQuery code, and don't include them more than once.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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