How do I add jquery plugins to specific div?

  • Firts of all, sorry for my english.

    Hello, I’m fairly new with jquery and I can’t find a proper answer to what I need.
    The thing is, I want to use a jquery plugin but I can’t get it to work…

    The plugin name is Sticky (https://stickyjs.com/).

    1 – I put the script in the JS folder
    2 – I put the following code in functions.php:

    wp_register_script(‘sticky’, get_template_directory_uri() . ‘/js/jquery.sticky.min.js’, array(‘jquery’), ”, true);

    wp_enqueue_script(‘sticky’);

    And here’s my problem. What should I do to make the plugin with a specific div?? Stupid question, I know.

    Should I change the .js file (changing default things to certain div id)?
    Should I use a script in CSS for the # selector?
    Is it something else I’m missing?

    I’m working with a child-theme, by the way.

    Please explain me like you’re talking to a 5 year old ??
    Thanks in advance!

    EDIT:

    Here’s the code I want to stick (just some ads in the sidebar)

    // html

    <div id=”stick-it”>
    <div id=”sky-ad”>
    <script>
    (ADSENSE CODE)
    </script>
    </div>
    </div>

    //CSS

    #sky-ad {
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    haight: 600px;
    float: none;}

    • This topic was modified 8 years, 3 months ago by yelksoma.
    • This topic was modified 8 years, 3 months ago by Jan Dembowski.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Priyanka Behera

    (@priyankabehera155)

    Can please tell me is there any error is coming like WARNING etc?

    If you can’t find any error then please turn the debug on and check it once. To turn on debug file path :

    /projectname/wp-config.php

    Then in wp-config file find for WP_DEBUG and replace “false” to true.

    define(‘WP_DEBUG’, true);

    If you are getting any error please mention it.

    Once, check in the browser firebug console.

    Thank you

    Moderator bcworkz

    (@bcworkz)

    At the very least, add this to your page that has the div you want to “stick”:

    <script>
  jQuery(document).ready(function(){
    $("#stick-it").sticky({topSpacing:0});
  });
</script>

    If you add this to a WP edit screen, you must have unfiltered_html capability or it’ll be stripped out of the content. It’s best added as page template code, but it’s OK in content.

    If still no luck, then do as priyankabehera155 suggests.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I add jquery plugins to specific div?’ is closed to new replies.