Auto Fill Input Fields for Unique Page Sidebars

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.

z-index of dropdown menu vs iframe (youtube) video issue

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);

checking and unchecking multiple checkbox using jquery on datagrid

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);
});