ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

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 12 years ago #
2. 

   helgatheviking
   Moderator

   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 12 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 12 years ago #
4. 

   helgatheviking
   Moderator

   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 12 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 12 years ago #
6. 

   helgatheviking
   Moderator

   did you try the background color test? it helps isolate the problem. any chance this is live?

   Posted 12 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 12 years ago #
8. 

   helgatheviking
   Moderator

   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 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.