ThemeShaper Forums » Thematic

[closed]

Adding Javascript to header (Just couldn't make it works!)

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

    Hi guys,

    I'm a noob in programming and thematic, so please bear with me if I ask something stupid :P

    I am trying to make a tab navigation on a custom page template, and am following this tutorial http://justintadlock.com/archives/2007/11/07/how-to-create-tabs-using-jquery.

    According to the tutorial, I should inject 2 Javascripts file to the header. I googled around, searching this forum and following the wiki guide, but somehow I just couldn't make the tab works. I've tried it using another theme, a blank one, where I can just hardcoded the scripts into the header, and it works.

    One of the method (I've tried a lot) I used was from Ian himself, found it on this forum, where he demonstrated (and I copy pasted it) injecting a JS file to the header so everytime the header loaded the user gets a message "Hello thematic user" or something like that (works, although of course, not what I want). Since I want this tab to display only on a custom page (homepage) I try to combine it with a conditional "if".

    Here are two of my codes (I was / am experimenting with plenty of codes :P):

    <?php
    function ruby_jqueried_scripts() {
    if (is_page('5')){?>
    <script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/jquery.js'; ?>"></script>
    <?php }}
    add_action('thematic_head_scripts','ruby_jqueried_scripts');
    ?>
    <?php
    function ruby_tabs_scripts() {
    if (is_page('5')){?>
    <script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/tabs.js'; ?>"></script>
    <?php }}
    add_action('thematic_head_scripts','ruby_tabs_scripts');
    ?>

    ######
    I was trying to use two separate functions, one for JQuery and one for "tabs.js"
    ######

    And:

    <?php
    function ruby_tabs_scripts() {
    if (is_page('5')){?>
    <script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/jquery.js'; ?>"></script>
    <script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/tabs.js'; ?>"></script>
    <?php }}
    add_action('thematic_head_scripts','ruby_tabs_scripts');
    ?>

    ####
    Try to inject 2 scripts at once. Of course these were on two separate occasion.
    ####

    More info:

    - I am using this conditional-action (if - add_action) on CSS (custom CSS for homepage), and it works.
    - I've checked all the paths, file names and also the code seems to be valid (no error message generated)
    - Again, I tried this methods using a different theme and it works. I just copy-pasted the codes, except I just hardcoded the file directly into the header.
    - I've also tried wp_enqueue_script(), and still not works.

    So, help please :)

    Oh, and another noob question. IIRC, wordpress has built-in JQuery, do we still need another copy in our js directory?

    Thanks in advance!

    Posted 8 years ago #
  2. almour
    Member

    Solved.. I guess.. I use view source and the script is there, along with thematic's superfish, dropdowns etc. I did injected it, now to make the script works..

    Posted 8 years ago #
  3. almour
    Member

    Oh, if anyone knows how to make tabs in thematic's child, it would be greatly appreciated, thanks :)

    Posted 8 years ago #
  4. almour
    Member

    I'm so sorry, apparently this is still open case.. a real noob here guys :P

    i'm using google chrome and according to the console tab:

    failed to load resource: server response with a status of 404 (Not found) tabs.js //my script.

    this is my current code:

    function tabbed_home(){
    if(is_front_page()){?>
    <script type="text/javascript" src="<?php bloginfo("template_url");?>/tabs.js"></script>
    <?php }}
    add_action('wp_head', 'tabbed_home');

    Posted 8 years ago #
  5. Could it be the ("template_url")needs to be ('stylesheet_directory') ? This should go in your functions.php file, I'd avoid editing the thematic files.

    function tabbed_home(){
     if(is_front_page()){?>
     <script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/tabs.js"></script>
    <?php }}
    add_action('wp_head', 'tabbed_home');
    Posted 8 years ago #
  6. almour
    Member

    Hi d_rec, thank you for your reply :)

    Unfortunately it doesn't work. But judging by the error message generated by the dev tools, I *do* believe this is about the script address. I believe it means the wp page (header) has requested the script but it couldn't find it ..? Or in other words, the functions has successfully tell the header to look for the js file. I've tried several methods to write the script's address, but so far nothing works.

    My file structure is kinda like this:
    .. wpcontent/themes/
    ...........parent-theme (thematic)
    ...........child-theme (my current theme)
    ...................js (directory, right under the child-theme, the usual structure)
    .........................tabs.js (the file)
    And I am using / calling this from my child theme's funtions . php.

    Sorry for the noob question guys.. I have no idea the correct way to write the address. Some site says it's echo bloginfo, *just* bloginfo, stylesheet_directory, templatepath.. and nothing works.. lol :P

    Posted 8 years ago #
  7. Looking the code you posted you forgot to put the /js before your script's filename

    Posted 8 years ago #
  8. almour
    Member

    Hi joperron, thank you for your reply :)

    It is now solved, I guess.. Well, it still isn't working :P but I got a new error message now,"uncaught typerror: Property "$" of object [Object DOMWindow] is not a function".

    I guess that means the header really found the script now, but somehow the script has conflict with it..

    Just in case another noob run into this problem, here's my code:

    function tabbed_in_head(){
    if(is_front_page()){?>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/js/tabs.js"></script>
    <?php }}
    add_action('wp_head', 'tabbed_in_head');

    Thanks again!

    Posted 8 years ago #
  9. you are running into a jquery conflict where wordpress doesn't recognize $ unless you tell it to. this is rarely documented in plugin scripts and nothing works until you figure it out. it isn't a tough solution but man, it is a pain in the ass.

    this is what i use to add jquery to my site

    function my_in_head(){ ?>
    
    	<script type="text/javascript">
    	//<![CDATA[
    
    		jQuery.noConflict();
    		jQuery(document).ready(function($) { //this says $ is a variable
    
                           //jquery functions $('#something').something();
    
    		}); //end document ready functions
    
    	/* ]]> */
    	</script>
    
    <?php }
    add_action('wp_head', 'my_in_head');
    Posted 8 years ago #
  10. almour
    Member

    Ok.. for some reason I can't post my long version of reply to this thread :P

    Hi Helga, thank you for your reply, I really appreciate it :)

    Being a noob, I'm having problems filling that empty spaces in those codes.. (I've tried several times) do you have links / source where can I learn more regarding this issue?

    Posted 8 years ago #
  11. no i don't have links, sorry. i can't remember where i figured that out... somewhere on here i think.

    you need to BOTH: 1. load jquery and the appropriate plugins and 2. add the jquery scripts that call the plugin. you've seemingly got part 1 solved and part 2 is the $('something').doSomething() placeholder... which is different depending on what jquery commands you are running. went to your link on tadlock's site and it would appear that this is what your ultimate code should look like there:

    function my_in_head(){ ?>
    
    	<script type="text/javascript">
    	//<![CDATA[
    
    		jQuery.noConflict();
    		jQuery(document).ready(function($) { //this says $ is a variable
    
    // setting the tabs in the sidebar hide and show, setting the current tab
    	$('div.tabbed div').hide();
    	$('div.t1').show();
    	$('div.tabbed ul.tabs li.t1 a').addClass('tab-current');
    
    // SIDEBAR TABS
    $('div.tabbed ul li a').click(function(){
    	var thisClass = this.className.slice(0,2);
    	$('div.tabbed div').hide();
    	$('div.' + thisClass).show();
    	$('div.tabbed ul.tabs li a').removeClass('tab-current');
    	$(this).addClass('tab-current');
    	});
    
    }); //end document ready functions
    
    	/* ]]> */
    	</script>
    
    <?php }
    add_action('wp_head', 'my_in_head');
    Posted 8 years ago #
  12. ok i looked more closely at justin's site and realized that he is adding the above jquery as tabs.js and NOT as a function the way i have done.

    i am leaving the above post b/c that is a common way to add jquery to your site. but in following the example.. i think you should try everything inside the <script> tag and paste that into tabs.js

    jQuery.noConflict();
    jQuery(document).ready(function($) { //this says $ is a variable
    
    // setting the tabs in the sidebar hide and show, setting the current tab
    	$('div.tabbed div').hide();
    	$('div.t1').show();
    	$('div.tabbed ul.tabs li.t1 a').addClass('tab-current');
    
    // SIDEBAR TABS
    $('div.tabbed ul li a').click(function(){
    	var thisClass = this.className.slice(0,2);
    	$('div.tabbed div').hide();
    	$('div.' + thisClass).show();
    	$('div.tabbed ul.tabs li a').removeClass('tab-current');
    	$(this).addClass('tab-current');
    	});
    
    }); //end document ready functions
    Posted 8 years ago #
  13. almour
    Member

    Helga, you're a miracle worker! Thank you very much!

    It works now, and I think I'm gonna use this and moving on with the next task.

    Out of curiosity, what we put in function is the whole tabs.js file.. Umm.. Is this the way it suppose to be? (it works, that's for sure) Don't get me wrong, it works, it is all that matters for me..

    For experiment purpose, I deleted tabs.js file and the code is still working. Not what I was expecting when I started this.. but hey, it works! lol

    Thanks again Helga :)

    EDIT: Sorry, didn't see your latest post until I posted this (was experimenting)

    Good suggestion, I do think that I should see different approaches regarding this issue (I still have many things to learn)

    Posted 8 years ago #
  14. glad you got yourself sorted out. and as you noticed it doesn't have to be both in the function and in the tabs.js since that's redundant

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.