When you are developing a website with WordPress and support for Unique Page Sidebars WordPress Plugins then you may noticed when add a sidebar all the widget parameters inputs are empty. Something like the below image

default-inputs

Here with this code example you can auto fill the widget parameters.

Step 1: include a javascript for WordPress admin interface.

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'admin-custom-js', get_template_directory_uri() . '/resources/js/custom-admin.js', array( 'jquery' ), '1.2', true );

Step 2: Write below codes on your custom-admin.js

/*
---------------------------------------------------------------------------------------
Auto fill input values for WordPress Unique Page Sidebars when creating a synamic sidebar with default values
---------------------------------------------------------------------------------------
*/

jQuery(document).ready( function($) {

    //Finding all inputs from unique page sidebars when creating a sidebar
    $("input[id^=ups_sidebars]").each( function( k, v ) {

        //Finding current input fields id
        id = $( this ).attr( 'id' );

        //Check if it has a default value already
        if ( $( this ).val() == '' ) {

            //Matching if it is the before_title field
            before_title = id.match(/\bbefore_title/);
            if ( before_title ) {
            $( this ).val( '<h3 class="widget-title">' );
            }

            //Matching if it is the after_title field
            after_title = id.match(/\bafter_title/);
            if ( after_title ) {
            $( this ).val( '</h3>' );
            }

            //Matching if it is the before_widget field
            before_widget = id.match(/\bbefore_widget/);
            if ( before_widget ) {
            $( this ).val( '<div id="%1$s" class="widget %2$s">' );
            }

            //Matching if it is the after_widget field
            after_widget = id.match(/\bafter_widget/);
            if ( after_widget ) {
            $( this ).val( '</div>' );
            }

        }

    });

});

That’s all if everything goes fine you will see a interface as the below image shown when adding a sidebar.
input-pre-values

Note: Don’t forget to widget parameters as your need on javascript what you are using when registering a sidebar for your theme.

When you are using iframe to display any video, for example if you are using youtube iframe video and on your site it has a dropdown menu and your dropdown memu is showing behind the iframe video you can make it top of iframe video with below written jquery code.

(function ($) {
    $ = jQuery;
    $(function () {
        $video = $("#parentocontainer> iframe");
        $srcVal = $video.attr('src');
        appendedVal = $srcVal + "?wmode=opaque";
        //or
        //appendedVal = $srcVal + "&wmode=opaque";
        $video.attr('src',appendedVal);
    });
 })(jQuery);

If you are working with any form or datagrid on which you want to list/display a set of data. Then may be sometimes you need to use multiple checkbox checking and unchecking features with a single checkbox check and uncheck in a form.

You can do it easily with jQuery in 2 steps…
Step1: Give a class name for the checkbox which you want to use as parent of all.


Step2: Write this single line of code on javascript for above added classname.

$('.dcFormCheckboxTh').click(function () {
    $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
});