Using jQuery in this plugin

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author wipeoutmedia

    (@wipeoutmedia)

    Hi Marek,

    Let me give you a quick jQuery example:

    Firstly create a code block, call it “Slider Test – HTML” and add this code:

    <div class="show_hide"><a href="#">Show/hide</a></div>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="hideMe">hide</a></div>

    There is no need to assign this HTML code block because we will output it with a shortcode.

    Then create another code block for your CSS and call it something like “Slider Test – CSS”, then and add this code:

    <style type="text/css">
.slidingDiv {
    height:300px;
    background-color: #ededed;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}
</style>

    You will want to assign this to the Page or Post that you created for your jQuery script – let’s say it was called “Slider Test”.

    Next you create you last code block, which is a JavaScript block for your jQuery, call it something like “Slider Test – JS”, and add this code:

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.js"></script>
<script type='text/javascript'>
$(window).load(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
        $(this).next().slideToggle();
    });

    $('.hideMe').click(function(){
        $(this).parent().slideUp();
    });
});
</script>

    Make sure all of your code blocks are saved and then go into your “Slider Test” page or post and add this shortcode in the editor.
    [cjtoolbox name='Slider Test - HTML' ] [/cjtoolbox]

    And update your page/post and view it. You are now running a jQuery script on your website.
    Hope that helps.

    Regards,
    Damian Baker

    Plugin Author wipeoutmedia

    (@wipeoutmedia)

    Hi Marek,

    Let me give you a quick jQuery example:

    Firstly create a code block, call it “Slider Test – HTML” and add this code:

    <div class="show_hide"><a href="#">Show/hide</a></div>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="hideMe">hide</a></div>

    There is no need to assign this HTML code block because we will output it with a shortcode.

    Then create another code block for your CSS and call it something like “Slider Test – CSS”, then and add this code:

    <style type="text/css">
.slidingDiv {
    height:300px;
    background-color: #ededed;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}
</style>

    You will want to assign this to the Page or Post that you created for your jQuery script – let’s say it was called “Slider Test”.

    Next you create you last code block, which is a JavaScript block for your jQuery, call it something like “Slider Test – JS”, and add this code:

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.js"></script>
<script type='text/javascript'>
$(window).load(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
        $(this).next().slideToggle();
    });

    $('.hideMe').click(function(){
        $(this).parent().slideUp();
    });
});
</script>

    Make sure all of your code blocks are saved and then go into your “Slider Test” page or post and add this shortcode in the editor.
    [cjtoolbox name='Slider Test - HTML' ] [/cjtoolbox]

    And update your page/post and view it. You are now running a jQuery script on your website.
    Hope that helps.

    Regards,
    Damian Baker

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Using jQuery in this plugin’ is closed to new replies.

Tags