ThemeShaper Forums » Thematic

[closed]

jQuery scripts issue

(8 posts)
  • Started 3 years ago by Iceman
  • Latest reply from helgatheviking
  • This topic is resolved
  1. Iceman
    Member

    I was trying to follow instruction from this http://flowplayer.org/tools/demos/tooltip/dynamic.html
    but it's frustating... i couldn't do... two days working and nothing.

    Well, i will try to describe step by step what i want e what i did:

    I have a custom menu, generated by this at function.php, sure:
    (don't care about the links, it's only for testing purposes)

    //custom menu
    function childtheme_menu() { 
    
    ?>
    <div id="menu">
    <ul class="sf-menu">
    <li class="<?php if (is_front_page) { ?>
    current_page_item<?php
    }
    else {?>
    page_item<?php
    }?>
    "><a>" title="Homepage">Home</a>
    
    <li class="<?php if (is_page('about')) { ?>
    current_page_item<?php
    }
    else {?>
    page_item<?php
    }?>
    "><a>/about/" title="About This Blog">About Us</a>
    
    <li class="<?php if ( is_page('advertising') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a>/advertising/" title="Advertise on My Blog">Advertise</a>	
    
    <li class="<?php if ( is_page('contact') ) { ?>current_page_item<?php } else { ?>page_item<?php }
    ?>"><a>/contact/" title="Contact Me">Contact</a>
    
    </div> <?php
    
    }
    add_filter( 'wp_page_menu', 'childtheme_menu' );

    Until here, no problems. They start here. Following the instructions from the developer, i did this:

    1. Downloaded the images (lazy to create new images at this moment :), and placed then in my desired folder;

    2. Css rules to my style.css. This:

    .tooltip {
    display:none;
    background:transparent url(library/images/tips/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff;
    }
    /* override the arrow image of the tooltip */
    .tooltip.bottom {
    background:url(library/images/tips/black_arrow_bottom.png);
    padding-top:40px;
    height:55px;
    }
    .tooltip.bottom {
    background:url(library/images/tips/black_arrow_bottom.png);
    }

    3. Generated my .js here http://flowplayer.org/tools/download/index.html, and placed it in my desired folder; then called it this way:

    // calling tips script
    function tipscripting() {?>
    <script src="library/js/jquery.tools.min.js" type="text/javascript"></script>
    <?
    }
    add_action('wp_head','tipscripting');

    And finally the code to show the balloon tips. This one didn't worked in none way i tried to use; always returns an errot like "Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$'".

    // initialize tooltip
    $("#menu a[title]").tooltip({
    
       // tweak the position
       offset: [10, 2],
    
       // use the "slide" effect
       effect: 'slide'
    
    // add dynamic plugin with optional configuration for bottom edge
    }).dynamic({ bottom: { direction: 'down', bounce: true } });

    I really don't know where to put it. Hope someone can read this and find a solution to everyone who's interested in this baloon tips.

    Posted 3 years ago #
  2. ok i think you are getting a parse error b/c of the $ which is JAVASCRIPT/JQUERY but not kosher for php. at least as far as i can tell form your above code, you aren't calling your jquery properly. check out my post on another thread about jquery:

    http://forums.themeshaper.com/topic/jplayer-and-thematic#post-16884

    you'd insert what you have above $("#menu) etc... where i have

    $("#jplayer1").jPlayer( {
        ready: function () {
          this.element.jPlayer("setFile", "../mp3/elvis.mp3"); // Defines the mp3
        }
      });

    so:

    function my_in_head(){ //calls the plugin, in a WP-friendly way 
    
    ?>
    <script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict();
    jQuery(document).ready(function($){
    
    // initialize tooltip
    $("#menu a[title]").tooltip({
    
       // tweak the position
       offset: [10, 2],
    
       // use the "slide" effect
       effect: 'slide'
    
    // add dynamic plugin with optional configuration for bottom edge
    }).dynamic({ bottom: { direction: 'down', bounce: true } });
    
    });
    /* ]]> */
    </script><?php }
    
    add_action('wp_head', 'my_in_head');
    Posted 3 years ago #
  3. Iceman
    Member

    Thanks for the answer!
    Unfortunately, is not working (at least to me)...
    I tested this one you described, and like the demo page, tried inserting the code just after the post footer, using <b>wp_page_menu</b> instead of <b>wp_head</b>. But unsuccessful.

    What i'm trying to get is exactly this: http://flowplayer.org/tools/demos/tooltip/dynamic.html but even following the source code, i couldn't make the code work.

    Posted 3 years ago #
  4. sorry dude. i've had more than my share of issues trying to get something from flowplayer to work... so much so that i eventually dumped their tabs for someone else's, so i feel your pain.

    are you enqueuing jquery? i didn't see that in your post...

    function my_init_method() {
    
    	//use google's jquery
    if (!is_admin()){
    	wp_deregister_script( 'jquery' );
    	wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
    	wp_enqueue_script('jquery');
    	}
    
    }    
    
    add_action('template_redirect', 'my_init_method');

    i add it to template_redirect b/c i had some other conditions that needed to know which template was being applied, but it also works on wp_head. additionally i would probably enqueue the tooltip script this way too.

    when i use jquery, i always try to test something super simple to make sure that jquery is set up correctly. for instance, inside the document.ready function i might use

    $('body').css('backgroundColor','red');

    if the background doesn't turn red then you know that the jquery isn't set up right, so your tooltips will never work.

    Posted 3 years ago #
  5. Iceman
    Member

    Oh yeah, i forgot to mention this step. I was using this:

    //JQuery
    function reinit_jQuery() {
    	if (!is_admin()) {
    		wp_deregister_script('jquery');
    		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
    		wp_enqueue_script('jquery');
    	}
    }
    add_action('init', 'reinit_jQuery');

    But it's not working anyway :(

    I'll try other ways some more hours...

    Posted 3 years ago #
  6. did you try the background color test? it helps isolate the problem. any chance this is live?

    Posted 3 years ago #
  7. Iceman
    Member

    Viking the omniscient! Thank you very much! I'll give you credit in my theme when it get ready! :)

    Well, my problem is solved (at least the one we're discussing here)! I believe was doing a stupid error: using a wrong relative path to the scripts. Now i'm using absolute paths and it's working.

    The Bg color didn't worked, i ain't sure why... maybe overlapped for some other css rule from style.css? i don't know...
    I put the code in the same function of the custom menu. This way:

    //custom menu
    function childtheme_menu() {
    ?>
    <div class="menu" id="menu">
    <ul class="sf-menu">
    <li class="<?php if (is_front_page) { ?>
    current_page_item<?php
    }
    else {?>
    page_item<?php
    }?>
    "><a href="<?php echo get_option('home') ?>" title="Back to home page">Home</a></li>
    
    <li class="<?php if (is_page('about')) { ?>
    current_page_item<?php
    }
    else {?>
    page_item<?php
    }?>
    "><a href="<?php echo get_option('home') ?>/about/" title="About This Blog" >About</a></li>
    
    <li class="<?php if ( is_page('advertising') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/advertising/" title="Advertise on My Blog">Advertise</a></li>	
    
    <li class="<?php if ( is_page('contact') ) { ?>current_page_item<?php } else { ?>page_item<?php }
    ?>"><a href="<?php echo get_option('home') ?>/contact/" title="Contact Me">Contact</a></li>
    
    </ul>
    </div>
    
    <script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict();
    jQuery(document).ready(function($){
    
    // initialize tooltip
    $("#menu a[title]").tooltip({
       // tweak the position
       offset: [10, 2],
    
       // use the "slide" effect
       effect: 'slide'
    
    // add dynamic plugin with optional configuration for bottom edge
    }).dynamic({ bottom: { direction: 'down', bounce: true } });
    
    });
    /* ]]> */
    </script>
    
    <?php
    }
    add_filter( 'wp_page_menu', 'childtheme_menu' );

    And, of course, the jQuery and jQuery tools, using absolute path:

    //calling tips
    function callscripts() {?>
    
    <script src="http://tutoriart.atbhost.net/tutoriart/wp-content/themes/tutoriarttheme/library/js/jquery.tools.min.js" type="text/javascript"></script>
    <?
    
    }
    add_action('wp_head','callscripts');
    
    //use google's jquery
    function my_init_method() {
    
    if (!is_admin()){
    	wp_deregister_script( 'jquery' );
    	wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
    	wp_enqueue_script('jquery');
    	}
    }
    add_action('init', 'my_init_method');

    Working fine... now just have to write some css rules to put everything in places, cause it's a mess, the balloon is appearing out of position. But this isn't a Thematic issue.

    Posted 3 years ago #
  8. well i'm glad it is working! i dont know what is up w/ the background color, that should override any CSS rules... but it is also sort of moot as it was just designed to see if jquery was installed properly, which now that you can see the tooltips it clearly is.

    i would probably enqueue the tooltip plugin script...

    function my_init_method() {
    
    if (!is_admin()){
    	wp_deregister_script( 'jquery' );
    	wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
    	wp_enqueue_script('jquery');
            wp_enqueue_script('tooltips', get_bloginfo('stylesheet_directory') . '/library/js/jquery.tools.min.js');
    
    	}
    }
    add_action('init', 'my_init_method');
    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.