WordPress / jQuery

Viewing 15 replies - 1 through 15 (of 33 total)
  • Moderator keesiemeijer

    (@keesiemeijer)

    Put this jquery code in a file and call it “toggle.js” Put this file in a folder in your theme called “js”
    Add this to your theme’s functions.php:

    function my_scripts_method() {
   // register your script location, dependencies and version
   wp_register_script('toggle_script',
       get_template_directory_uri() . '/js/toggle.js',
       array('jquery'),
       '1.0' );
   // enqueue the script
   wp_enqueue_script('toggle_script');
 }
  add_action('wp_enqueue_scripts', 'my_scripts_method');

    Thread Starter Frank1100

    (@frank1100)

    thx, ya I did create a toggle.js in my default themes js folder and copied the linked code to it.
    I also copied the function in the functions.php of the theme appropriately (no errors in dreamweaver).
    The necessary html for the effect is in the post as well the necessary css is added to the core.css file of my theme.

    But it’s acting wired … only the header text of the corresponding section of my post fades in on hover … but it does not fold open the more-content.

    ?

    Th,
    Frank

    Moderator keesiemeijer

    (@keesiemeijer)

    Please provide a link to the page in question

    Thread Starter Frank1100

    (@frank1100)

    pls move cursor below “My test in WordPress” to see header-text fading in https://current02.uptoconcept.com/?p=4

    Moderator keesiemeijer

    (@keesiemeijer)

    toggle.js and jquery are not loaded in this page

    Thread Starter Frank1100

    (@frank1100)

    ah ok … how would I load them ? I didn’t see anything like it in the explanation link of the original demo

    Moderator keesiemeijer

    (@keesiemeijer)

    Did you add the code posted above in your functions.php

    Thread Starter Frank1100

    (@frank1100)

    argh … I was reproducing on simple project and forgot this point … did now but still same. Not coming yet as in original demo.

    here’s my function php, I’ve put it at the end of file https://bin.cakephp.org/view/1219730144

    Moderator keesiemeijer

    (@keesiemeijer)

    Now they both get loaded but toggle.js is not the code I gave you in the link posted above

    Thread Starter Frank1100

    (@frank1100)

    whow great ! now working , sorry I don’t know why I’ve saved it with the other code.

    The header text still fades in / out on hover instead of using a + / – sign and staying text like in the original demo …

    Moderator keesiemeijer

    (@keesiemeijer)

    in your themes stylesheet style.css change this:

    h2.trigger a {
    color: #FFFFFF;
    display: block;
    text-decoration: none;
}

    to this:

    h2.trigger a {
    display: block;
    text-decoration: none;
}

    Thread Starter Frank1100

    (@frank1100)

    gotit … thx for leading through keesiemeijer ya de best ??

    Just for understanding the principle of it and for peeps who diggin’ on the same :

    a) putting a function call inside the functions.php of the theme
    b) saving the jQuery function as an own file example.js under the themes js folder
    c) adding css to themes .css file
    d) adding html to post or page

    pls correc me if wrong

    Moderator keesiemeijer

    (@keesiemeijer)

    a) when using a script that requires another JavaScript file shipped with WordPress (jQuery) always use wp_enqueue_script. This Basically does include your script and the script it depends on (jQuery) if it hasn’t already been included.
    b) You could also just insert the script between <script></script> tags in the <head> section ( just after wp_head() )but be aware that The jQuery library included with WordPress loads in “no conflict” mode: https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers
    (usually replace “$” with “jQuery” in the script)
    c) yes
    d) yes

    Thread Starter Frank1100

    (@frank1100)

    some questions:
    a) you mean jQuery effekts seen on example pages sometimes can call jQuery includes already on board with wordpress and sometimes not ?

    a) what and where is the wp_enqueue_script and what do I do with it ? Do I use existing functions there or do I add functions in there ?

    b) if I insert stuff in the header then it is available on every page of the site … thus maybe not be necessary on every page. Which is probably ok if its only a few, but can get heavy if it’s a lot of different jQuery I want to use over different pages … is that right ?

    b) can I make using a function page based versus site based ?

    Thread Starter Frank1100

    (@frank1100)

    Hi keesiemeijer, what was working on the test page does not work in the final page any more. I have done and re-done all steps several times, but it wouldn’t toggle.

    Any idea what I should check ? I’m with my back to the wall.

    https://current01.uptoconcept.com/toggle-test# (access with: admin xxxyyy)

    This is the code I use :

    My toggle.js:

    jQuery(document).ready(function(){

    //Hide (Collapse) the toggle containers on load
    jQuery(“.toggle_container”).hide();

    //Switch the “Open” and “Close” state per click then slide up/down (depending on open/close state)
    jQuery(“h2.trigger”).click(function(){
    jQuery(this).toggleClass(“active”).next().slideToggle(“slow”);
    return false; //Prevent the browser jump to the link anchor
    });

    });

    My function.php insert:

    /* fh start : jQuery Toggle */

    function my_scripts_method() {
    // register your script location, dependencies and version
    wp_register_script(‘toggle_script’,
    get_template_directory_uri() . ‘/js/toggle.js’,
    array(‘jquery’),
    ‘1.0’ );
    // enqueue the script
    wp_enqueue_script(‘toggle_script’);
    }
    add_action(‘wp_enqueue_scripts’, ‘my_scripts_method’);
    /* fh end : jQuery Toggle */

    My HTML:

    My test in WordPress:
    <h2 class=”trigger”>Toggle Header</h2>
    <div class=”toggle_container”>
    <div class=”block”>
    <h3>Content Header</h3>
    Content Content Content lalala
    </div>
    </div>

    My CSS:

    h2.trigger a {
    color: #6CF;
    display: block;
    text-decoration: none;
    }

    h2.trigger a {
    display: block;
    text-decoration: none;
    }

Viewing 15 replies - 1 through 15 (of 33 total)
  • The topic ‘WordPress / jQuery’ is closed to new replies.