ThemeShaper Forums » Thematic

[closed]

How to add jQuery?

(12 posts)
  • Started 13 years ago by initialsbr
  • Latest reply from tarpontech
  • This topic is resolved
  1. initialsbr
    Member

    I'm new to jQuery in Wordpress and trying to make it work in Thematic. I want to do this...

    http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/

    But it's not working. I've placed the CSS in my style.css file and this in the functions.php...

    //Call absolute background jquery
    function childtheme_bg_jquery() {
    ?>
    <script type="text/javascript"
    src="<?php bloginfo("template_url"); ?>/js/jQuery.fullBg.js"></script>
    <?php
    }
    add_action('thematic_before', 'childtheme_bg_jquery');

    // Place absolute background
    function childtheme_bg_begindiv() {
    ?>
    <div id="maincontent">
    <?php
    }
    add_action('thematic_before', 'childtheme_bg_begindiv');

    function childtheme_bg() {
    ?>
    <img src="http://localhost:8888/diamondigloo/wp-content/themes/diamondigloo/images/diamondigloobackgroundcrop.jpg" alt="" id="background"/>
    <?php
    }
    add_action('thematic_after', 'childtheme_bg');

    function childtheme_bg_enddiv() {
    ?>
    </div>
    <?php
    }
    add_action('thematic_after', 'childtheme_bg_enddiv');

    What am I doing wrong?

    Posted 13 years ago #
  2. I'd be curious to hear how you get this resolved as I don't know anything about jquery but would like to start implementing some of its features eventually.

    First I am guessing that your script needs to go in the header.

    function my_in_head(){ {?>
    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jQuery.fullBg.js"></script>
    
    <?php }
    add_action('wp_head', 'my_in_head');

    thematic already has a #wrapper div that serves in the same capacity as #maincontent so I dont think you need to add an extra div. Just apply your #maincontent css to #wrapper.. and following their instructions I'd try putting the background image on the thematic_before hook.

    function childtheme_bg() {
    ?>
    <img src="http://localhost:8888/diamondigloo/wp-content/themes/diamondigloo/images/diamondigloobackgroundcrop.jpg" alt="" id="background"/>
    <?php
    }
    add_action('thematic_before', 'childtheme_bg');

    the part about calling the jquery function is the part I don't understand yet. Hopefully this will help move you in the right direction. When you figure it out, please let me know.

    Posted 13 years ago #
  3. I believe that Thematic already calls jquery for use in the menus.

    You can do a Google search about using WordPress and Jquery, but this tip might be useful:

    The snippets of jQuery code you’ll find while out and about on the net make extensive use of the shortcut $ to express the jQuery global object. This isn’t going to work in WordPress, so at all times we use jQuery(document).ready(function($) – and then it will work. Once inside the function, we can use $ as a shortcut.

    Posted 13 years ago #
  4. very helpful tip there, devin. I don't think i saw that mentioned anywhere in my googling earlier.

    so in the op's case.. the plugin says to call

    jQuery(function($) {
      $("#background").fullBg();
    });

    would that then become ??

    jQuery(document).ready(function($) {
      $("#background").fullBg();
    });

    and does this code inserted into the head?

    Posted 13 years ago #
  5. initialsbr
    Member

    Okay. So I'm back at work. Thanks for the replies. As suggested, I've made a couple of adjustments. I'm now using #wrapper as my #maincontent. This is now the CSS...


    .fullBg {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    }

    #wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    }

    But the jQuery part is still confusing me. I've tried several things and nothing seems to work. This is what I now have in the functions.php...


    //Background jquery
    function childtheme_fullbg() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    $("#background").fullBg();
    });
    </script>
    <?php
    }
    add_action('wp_head', 'childtheme_fullbg');

    //Background
    function childtheme_background() {
    ?>
    <img src="<?php bloginfo('template_url'); ?>/images/background.jpg" alt="" id="background" />
    <?php
    }
    add_action('thematic_before', 'childtheme_background');

    HELP!

    Posted 13 years ago #
  6. well i battled jquery all day today to get a tab effect going in my theme options.. so i know the frustration. and i am not sure why i thought today was a good day to tackle this.. but i think i have it. i can't get the image to be fixed so you are on your own there....

    <?php
    
    function background() {  //adds as first thing in body tag, before #wrapper
    echo '<img src="'. get_bloginfo('stylesheet_directory') . '/images/wallpaper.jpg" alt="" id="background" />';
     }
    
    add_action('thematic_before', 'background');
    
    function add_scripts(){ //adds jquery library and background plugin scripts to head
    wp_deregister_script( 'jquery' );
    wp_register_script(   'jquery' , 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');  //uses the google-hosted jquery library
    wp_enqueue_script('jQuery_tools', get_bloginfo('stylesheet_directory') . '/background.js'); //calls the plugin script code
    }
    
    add_action('init','add_scripts');
    
    function my_in_head(){ //adds the function that calls the plugin, in a WP-friendly way 
    
    ?>
    <script type="text/javascript">
    
    jQuery(document).ready(function(){
      jQuery("img#background").fullBg();
    
    });
    
    </script><?php }
    add_action('wp_head', 'my_in_head');

    some step by step explanations for future people looking to do jquery in wp/thematic

    1. jquery library is only called in the admin section. nothing will ever work on the "front-end" until you add that script library in the head section.

    (function($) {
      $.fn.fullBg = function(){
        var bgImg = $(this);		
    
        function resizeImg() {
          var imgwidth = bgImg.width();
          var imgheight = bgImg.height();
    
          var winwidth = $(window).width();
          var winheight = $(window).height();
    
          var widthratio = winwidth / imgwidth;
          var heightratio = winheight / imgheight;
    
          var widthdiff = heightratio * imgwidth;
          var heightdiff = widthratio * imgheight;
    
          if(heightdiff>winheight) {
            bgImg.css({
              width: winwidth+'px',
              height: heightdiff+'px'
            });
          } else {
            bgImg.css({
              width: widthdiff+'px',
              height: winheight+'px'
            });
          }
        }
        resizeImg();
        $(window).resize(function() {
          resizeImg();
        });
      };
    })(jQuery)

    copy the above code into a text editor and save it as background.js In my example this file is in the stylesheet's base directory.

    3. in the same function that is queuing up jquery, queue up this background.js script

    4. create the small function to add the <script> in the head that executes the plugin.

    5. load the image in on the thematic_before hook. i had to use php echo as it wouldn't work the way you had it. also be sure that the location and name of the file match your image source. it is early am, and i spent 5 min wondering why it wasn't working when i was inserting background, but my file was called wallpaper. I only noticed that the element had a height suddenly attached to it and realized that jquery must finally be working.

    i think that's it. i had better stop, before anyone starts thinking i know anything about jquery. hope it helps. if you figure out the fixed background thing (his css didn't work for me), post back here as i am curious now.

    Posted 13 years ago #
  7. initialsbr
    Member

    I can't get it to work. Here's what I'm trying now...

    http://kimili.com/journal/flexible-scalable-background-image

    Same principle. I think I'm having the same problem, which is not knowing how to call a.js file for use on my site. Following this new method, I have copied the CSS in the example and I have this in my functions.php file...


    //jQuery
    function my_init() {
    if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
    wp_enqueue_script('jquery');

    // load a JS file from my theme: js/flexibg.js
    wp_enqueue_script('flexibg', 'http://localhost:8888/marconiband/wp-content/themes/marconi/js/flexibg.js');
    }
    }
    add_action('init', 'my_init');

    //Flexi Background
    function flexibg() {
    ?>
    <script type="text/javascript" src="http://localhost:8888/marconiband/wp-content/themes/marconi/js/flexibg.js"></script>
    <?php
    }
    add_action('wp_head', 'flexibg');

    I see how you've called the plugin above but how would you alter that to call any kind of jQuery plugin?

    Sorry to jump around with techniques. Just trying to get at some universal here.

    Posted 13 years ago #
  8. well i don't really know the first thing about jquery. well... i guess that is not true any more, but still i am sooo not an expert. but what i do know is most written in my previous post.

    1. you must load the jquery library. i wouldn't bother w/ the if is_admin statement. the backend uses jquery too so you may as well use google's version.

    2. you must queue up the script to the plugin... you have done that 2x in your example instead of one time and then in the flexibg function adding the script that seems to ACTIVATE things.

    3. you need to add the activation script. i am sure that is not what it is called, but i dont know what it is called either. it is the bit that calls the function, and tells it which items to perform its action on.

    <script type="text/javascript">
    
    jQuery(document).ready(function(){
      jQuery("img#background").fullBg();
    
    });
    
    </script><?php }
    add_action('wp_head', 'my_in_head');

    in my previous example it was this bit above. basically what that bit is saying is "once the document is loaded and scriptable... perform the fullBg script on the img with the ID of background."

    In the example you are referencing now... you do not have this bit of "action" code. you never tell the plugin to GO and so it doesn't. from your link it would look like to me (again take w/ lots of salt) that everything above:

    $(document).ready(flexiBackground.initialize);

    would go into a js file that you'd enqueue. and then you'd CALL that plugin script with the following:

    `
    function in_my_head() { ?>
    <script type="text/javascript">

    jQuery(document).ready(flexiBackground.initialize); //this is what activates everything and is what you are missing.

    </script>
    <?php }
    add_action('wp_head', 'my_in_head');

    i wouldn't give up on your first method. that definitely worked for me.

    Posted 13 years ago #
  9. gideonvd
    Member

    I am doing the same thing atm. I wrote my own script but you can just get a jquery plugin to do it for you. I recommend jquery.backstretch. Just include the script in your header.php below the </head> like you normally would with any jquery plugin. Jquery uses $ to define it's functions but since thematic runs jquery.no.conflict you will have to replace those with jQuery. E.g:

    </head>
    
    <script src="your jquery plugin path"></script>
    <script>
    jQuery(document).ready(function(){
    jQuery.backstretch("path to image", {speed: 150});
    });
    </script>

    This is bad practice since we shouldn't edit any thematic files but it works.

    Posted 13 years ago #
  10. initialsbr
    Member

    Gave up for a while. Then tackled it again and got it to work. Here's what I did...

    This is the technique...

    http://kimili.com/journal/flexible-scalable-background-image

    The CSS in the example is good as-is. This is what I put in my function.php file.


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

    //Flexi Background
    function flexibg() {
    ?>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://localhost:8888/marconiband/wp-content/themes/marconi/js/flexibg.js"></script>
    <?php
    }
    add_action('thematic_after', 'flexibg');

    It works just like the website describes. The only thing I'm unsatisfied with is the image kind of flashes at the original size and then expands to resize. Any suggestions on how to deal with that?

    Haven't tried the previous technique with this functions.php code but I plan to in the hopes this kind of code works consistently. Thanks for everyone's input!

    Posted 12 years ago #
  11. initialsbr
    Member

    I was just revisiting this and tried gideonvd's method. It's way better than all the other options and it actually works! Here's what I put in my functions.php file...


    //Background
    function background() { ?>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="/jquery.backstretch.min.js"></script>
    <script src="path_to_js_file/jquery.backstretch.min.js"></script>
    <script>
    jQuery(document).ready(function(){
    jQuery.backstretch("path_to_image/image.jpg", {speed: 400});
    });
    </script>
    <?php }
    add_action('thematic_before', 'background');

    I tried loading this with 'thematic_after' and it affected the way Cufon loaded. When I load it at 'thematic_after' no problems. B

    One neat perk of this plugin is that by changing the "speed", the background will fade in at different rates. Nice.

    Thanks so much for everyone's patience. If anyone has anything to contribute to safeguard the function I just included, let me know.

    Posted 12 years ago #
  12. I've never gotten any custom jQuery to work in thematic by adding the calls above the header area of thematic. I always have to stick it in thematic_before or lower. I don't know what the repercussions of this, seo or otherwise are, but I can tell you that i've got several production sites working this way, using multiple jQuery plugins, so far with no ill effects.

    The way you've got it working is identical to what I do. The only 2 cents i'll add is don't stick jQuery calls such as the one you've provided in separate files that you plan to tack on to functions.php with an 'include' line. It doesn't work. I wasted much of my last Saturday trying to diagnose the 'why's' of this, only to give up and keep it all in functions.php.

    If there's a better or "right" way to add jquery somewhere other than thematic_before or lower, i'd just love for someone to share the love and explain how to get it working in wp_head.

    Posted 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.