Count Visible Element Using Jquery

Count Visible Element Using Jquery

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Count Visible Element:Jquery</title>
<script type="text/javascript" src=" " >
<div class="item-list">
<div class="item" style="display:block;">item 1</div>
<div class="item" style="display:block;">item 2</div>
<div class="item" style="display:none;">item 3</div>
<div class="item" style="display:none;">item 4</div>

Extract text after hash # in the href part from a tag


<a href="#tab1">Any tab1 Label</a>
<a href="#tab2">tab2 Label</a>
<a href="#tab3">Any tab3 Label</a>


function tellMyName() {


Alert the values of all inputs with same class

If all your inputs share the same class say “class1” then you can select all such inputs using this

var inputs = $(".class1");

Then you can iterate over the inputs any way you want.

for(var i = 0; i < inputs.length; i++){


Hide virtual keyboard on clicking outside the input fields in iphone.

var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
//return “iOS”;
‘use strict’;
var hideKeyboard = function () {
$(‘.site-wrapper’).on(‘touchend’, function (e) {
if (!$(‘input’).length) {
$(this).attr(‘tabindex’, ‘0’).focus();
console.log(‘keypad closed’);


$(function () {
console.log(‘iphone found’);

Note: Adding the attribute TABINDEX=0 to any element forces the TAB key to stop at a location.

Change Slug of a Custom Post Type

Whenever custom post types are created, URL rewrite rules are written to the database. Depending on which action triggers the creation of the custom post type (such as the init action), WordPress will flush the rewrite rules and restore the custom post type’s slugs regardless of what changes you attempt to make.

That said, you can provide custom slugs for the custom post types. The following example assumes that you have a custom post type of movies and that you’re attempting to change the /zodin-products/ slug to /products/.

function add_custom_rewrite_rule() {

// First, try to load up the rewrite rules. We do this just in case
// the default permalink structure is being used.
if( ($current_rules = get_option(‘rewrite_rules’)) ) {

// Next, iterate through each custom rule adding a new rule
// that replaces ‘zodin-products’ with ‘products’ and give it a higher
// priority than the existing rule.
foreach($current_rules as $key => $val) {
if(strpos($key, ‘zodin-products’) !== false) {
add_rewrite_rule(str_ireplace(‘zodin-products’, ‘products’, $key), $val, ‘top’);
} // end if
} // end foreach

} // end if/else

// …and we flush the rules

} // end add_custom_rewrite_rule
add_action(‘init’, ‘add_custom_rewrite_rule’);

Now, you’ll have two ways to access your zodin-products:



jQuery function on keyboard zoomin zoomout

Below is the script to run jQuery function on using keyboard ‘Ctrl + “+”‘,’Ctrl + “-“‘ and ‘Ctrl + “0”‘

jQuery(window).on(‘keypress keydown’,function(e){
if((e.which == 61 && 17) || (e.which == 43 && 17) || (e.which == 45 && 17) || (e.which == 48 && 17) || (e.which == 96 && 17)){
// 17 is Ctrl Keycode
//Ctrl + “+” is pressed, 61 is for =/+ and 43 is for Numpad + key
//Ctrl + “-” is pressed, 45 is for -/- and 45 is for Numpad – key
//Ctrl + “0” is pressed, 48 is for )/0 and 96 is for Numpad 0 key

jQuery: Find the tallest element in a loop

find the tallest of the DIV’s and set the other div’s to the same height, creating all equal height DIV’s.

var maxHeight = -1;
jQuery('.looped_div').each(function() {
maxHeight = maxHeight > jQuery(this).height() ? maxHeight : jQuery(this).height();
jQuery('.looped_div').each(function() {

WordPress Quicktags API

The Quicktags API allows you to include additional buttons in the Text (HTML) mode of the WordPress editor.


QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

Parameters of QTags.addButton()

id (string, required):
A unique ID which will be the HTML ID value for the Quicktag button. (Keep in mind that the ID value for each button will be automatically prepended with the string ‘qt_content_’.)

display(string) (required):
The html value for the button.

arg1(string) (required):
Either a starting tag to be inserted like “<span>” or a callback that is executed when the button is clicked.

arg2(string) (optional):
Ending tag like “</span>”. Leave empty if tag doesn’t need to be closed (i.e. “<hr />”).

access_key(string) (optional):
Shortcut access key for the button.

title(string) (optional):
The html title value for the button.

priority(int) (optional):
A number representing the desired position of the button in the toolbar. 1 – 9 = first, 11 – 19 = second, 21 – 29 = third, etc.

instance(string) (optional):
Limit the button to a specific instance of Quicktags, add to all instances if not present.


// add more buttons to the html editor
function triumph_add_quicktags() {
    if (wp_script_is('quicktags')){
<script type="text/javascript">
QTags.addButton( 'eg_paragraph', 'para', '<p>', '</p>', 'p', 'Paragraph tag', 1 );
QTags.addButton( 'eg_hr', 'hrline', '<hr />', '', 'h', 'Horizontal rule line', 201 );
QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'Preformatted text tag', 111 );
QTags.addButton( 'eg_div1', 'divClass1', '<div class="class1">', '</div>', 'd1', 'div class class1', 111 );
QTags.addButton( 'eg_div2', 'divClass2', '<div class="class2">', '</div>');
add_action( 'admin_print_footer_scripts', 'triumph_add_quicktags' );

(Note: to avoid a Reference Error we check to see whether or not the ‘quicktags’ script is in use.)

Snapshot of the result:


Change woocommerce shipping price calculating with a custom number

Requirement: i want to multiply woocommerce shipping price by a custom number which can be either dynamic value or a static value.

The main filter we’ll be hooking into is woocommerce_package_rates.

Copy and paste the code below in your theme’s functions.php file

function sk_shipping_rate( $rates ) {
	$pbc_exchange_rate = 0.015;
  // Loop through each rate
  foreach ( $rates as $rate ) {
    // Store the previous cost in $cost
    $cost = $rate->cost;
    // Adjust the cost as needed
    $rate->cost = $cost * $pbc_exchange_rate;
  return $rates;
add_filter( 'woocommerce_package_rates', 'sk_shipping_rate', 10 );


Change and Update WordPress URLS in Database When Site is Moved to new Host

Use the code as below and swap in your old and new URLs, no

trailing slashes. Also if necessary change the table prefix

values where applicable (ie wp_ )

UPDATE wp_options SET option_value = replace(option_value, 

'http://www.oldurl', 'http://www.newurl') WHERE option_name = 

'home' OR option_name = 'siteurl';

UPDATE wp_posts SET guid = replace(guid, 


UPDATE wp_posts SET post_content = replace(post_content, 

'http://www.oldurl', 'http://www.newurl');

UPDATE wp_postmeta SET meta_value = replace