WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] jQuery in category templates (6 posts)

  1. jon morts
    Member
    Posted 2 years ago #

    So I've built a carousel and managed to implement in a page template... pretty please with my skills... then tried to up my game by using it in a category-template and it doesn't work.

    I know how to set up category templates so I've got that checked. I haven't bothered to enqueue my scripts as it only works with the page template when the scripts are pulled out in the body just before the function. I read about using javascript in posts at: http://codex.wordpress.org/Using_Javascript but I don't understand how to call a function or how to convert the plugin I've manually inserted to a function that callable in wordpress.

    Basically, can anyone please help me by explaining how category templates treat jquery differently to page templates? The carousel on the page template shows the most recent post as a 'hero' then carousels the rest of the posts, then I want to click on the individual posts to make that one the hero.

    I apologies for this long and boring, badly explained plee for help I just can't see the light. Please help!! Jon

  2. keesiemeijer
    moderator
    Posted 2 years ago #

    I haven't bothered to enqueue my scripts

    Maybe try it.
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    Sometimes a script is depending on another script to be executed first (e.g. jQuery). This way if jQuery is already enqueued (by plugins or a theme) your script is not doing it again and causing conflicts.

    if you want your script to only load on category pages you could do something like this in your functions.php

    function my_scripts_method() {
       // register your script location, dependencies
       wp_register_script('my_custom_script',
           get_template_directory_uri() . '/js/my_custom_script.js',
           array('jquery'));
       // enqueue the script
       wp_enqueue_script('my_custom_script');
    }
    if(is_category()){
    add_action('wp_enqueue_scripts', 'my_scripts_method');
    }

    And remove the call to your scripts from your theme's template files.

    What jQuery script are you trying to incorporate (link please)?

  3. jon morts
    Member
    Posted 2 years ago #

    Thanks keesiemeijer for getting back to me so quickly. The jquery I'm using is http://ryrych.github.com/rcarousel/examples/html.html . I've enqueued my scripts now and removed the links in the body, it still works in the page template file but doesn't work in the single-template file. The source code for both looks almost 100% identical... and ...

    I've just looked closer and I can see some little question marks in the function like this: .css(? "backgroun... but the question mark is inside a diamond.

    I've removed all the white space that has caused these question marks AND IT WORKS!! I'm still not sure why the white space caused issues in the category template and not the page template - would be great to know if anyone does know?

    Thanks for making me enqueue - always the way. One other thing... When the page loads all my images are stacked (not floated) for a split second then they ping into a carousel. If you know how to prevent this that would be awesome. Even on the carousel here: http://ryrych.github.com/rcarousel/examples/html.html if you refresh a few times it gets that flicker as well. Maybe its an on page load thing?

    Thanks again

    Jon

  4. keesiemeijer
    moderator
    Posted 2 years ago #

    The flickering is because first all the HTML is loaded. After that's done javascript is used (rcarousel) to hide parts of the HTML.

    I also tried it with enqueuing the scripts and it works: http://pastebin.com/kNU7bVjf

    The white space issue is probably due to saving files in a text editor in the wrong character set. Use a decent editor like nodepad++ for windows or textwrangler for mac. Set the character set to utf-8

  5. jon morts
    Member
    Posted 2 years ago #

    keesiemeijer you're too good. I've enqueue my script so it's not inline, I never knew how to do that before but I can do that again moving forward. And now not even a blink of dodgy HTML.

    Another cheat I tried (but isn't necessary if you do it the correct way) is to find an element that get restyled in the jquery function and make it invisible so it only appears once the function has run. But probably bad practice but may have a good use somewhere.

    I use dreamweaver to edit my text maybe not the best idea, I'm not sure.

    keesiemeijer - thanks again - I've learnt loads

    Let me know if I need to make this as resolved or something

    Best

    Jon

  6. keesiemeijer
    moderator
    Posted 2 years ago #

    Well done. I'm glad you found a solution. You can make this topic resolved with the dropdown on the top right of this page (when logged in).

    I don't know Dreamweaver, but I'm sure you can set the encoding (charset) of the documents you save somewhere.

Topic Closed

This topic has been closed to new replies.

About this Topic