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)

    Can't get both features to work

    Hi,

    I have a jquery based feature in my sidebar at http://www.ephemeralproject.com/about/. This is set up with the following code
    PHP Code:
    <script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory') . '/custom/jquery-ui-personalized-1.5.2.packed.js' ?>"></script>
    I also want to setup this http://css-tricks.com/rotating-feature-boxes/. I have the feature boxes working and everything is fine.

    The only problem is that in order for the feature boxes to work on my site I need to add the following code into my head
    PHP Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    PHP Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    By adding this the feature box now works but the jquery from the sidebar does not work.

    Can anyone advise me on how these can both work together?

    Many thanks

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    jQuery already comes queued in WordPress's wp_head() function so there is no need to call it again, what i suggest you do is take advantage of wp_enqueue_script() which allows you to append your own scripts into the wp_head() function.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh, got ya.

    Sorry, too long on the comp

    All working now

  4. #4
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    D'oh, it wasn't working after all. The jquery for the feature box doesn't work like in this demo http://css-tricks.com/examples/RotatingBlocks/

    PHP Code:
    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_enqueue_scripts''rotate');


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
  •