Tag: Html5

Play Pause Vimeo or YouTube multiple video JavaScript

have found a solution to starting/pausing multiple Vimeo and YouTube videos from separate buttons

YouTube


<a href="javascript:void callPlayer(&quot;whateverID&quot;,&quot;playVideo&quot;)">Start</a> &bull; <a href="javascript:void callPlayer(&quot;whateverID&quot;,&quot;pauseVideo&quot;)">Pause</a> &bull; <a href="javascript:void callPlayer(&quot;whateverID&quot;,&quot;stopVideo&quot;)">Stop</a> - Hover over the links to see the called function




<div id="whateverID"><iframe width="640" height="390" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div>




<a href="javascript:void callPlayer(&quot;whateverID1&quot;,&quot;playVideo&quot;)">Start</a> &bull; <a href="javascript:void callPlayer(&quot;whateverID1&quot;,&quot;pauseVideo&quot;)">Pause</a> &bull; <a href="javascript:void callPlayer(&quot;whateverID1&quot;,&quot;stopVideo&quot;)">Stop</a> - Hover over the links to see the called function




<div id="whateverID1"><iframe width="640" height="390" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/AkwVg9viC-g?enablejsapi=1"></iframe></div>




function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
// Frame exists,
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
}

Vimeo

Single video (simpler) version here: <a href="https://codepen.io/filipbech/pen/cbaxq">https://codepen.io/filipbech/pen/cbaxq</a>


<iframe width="560" height="315" src="//player.vimeo.com/video/5705212?api=1&player_id=video1" id="video1"></iframe>
<button class="play" data-id="video1">Play</button>
<button class="pause" data-id="video1">Pause</button>



<iframe width="560" height="315" src="//player.vimeo.com/video/5705212?api=1&player_id=video2" id="video2"></iframe>
<button class="play" data-id="video2">Play</button>
<button class="pause" data-id="video2">Pause</button>




Red background means "playing"... 
<i>(try clicking either "native" or "custom" controls, to see that both work as expected)</i>

/* Grabbing objects to play with */
var playButtons = $('.play'),
    pauseButtons = $('.pause');

/* Helper function to send a message to Vimeo-iframe */
function vimeoPost(action, value, target) {
	var data = { method: action };
	if (value) {
		data.value = value;
	}
	target.contentWindow.postMessage(JSON.stringify(data), '*');
};

/* When clicking the playButton, send a "play"-message to given iframe*/
playButtons.click(function() {
  var iframe = document.getElementById(this.dataset.id);
  vimeoPost('play',null,iframe);
});

/* When clicking the pauseButton, send a "pause"-message to given iframe */
pauseButtons.click(function() {
  var iframe = document.getElementById(this.dataset.id);
  vimeoPost('pause',null,iframe);
});

/* When a message is received, deal with it */
window.addEventListener('message', function(event) {
  /* Get message and sender from the event */
  var message = JSON.parse(event.data);
  var sender = document.getElementById(message.player_id);
 
  /* If the message.event is "ready", then send a message to add eventlisteners for play and pause also */
  if(message.event == "ready") {
 	vimeoPost('addEventListener','play',sender);
   vimeoPost('addEventListener','pause',sender);
  }
  
  /* Because of the above, we will start receiving events when video is played or paused - we will toggle a class, just to show it visually */ 
  if(message.event == 'play') {
		sender.classList.add('playing');    
  }
  if(message.event == 'pause') {
    sender.classList.remove('playing');
  }
  
}, false);

YouTube Vimeo

Advertisements

WordPress custom taxonomy custom hierarchical

Custom taxonomy hierarchical with ul li list and checkbox and radio button.


function get_product_taxonomie($taxonomies = 'product_category', $input_type = 'radio', $input_class = 'categoryCheck') {function get_product_taxonomie($taxonomies = 'product_category', $input_type = 'radio', $input_class = 'categoryCheck') { $selected_term = ''; $selected_term_open = ''; if($taxonomies == 'product_category'){ $selected_term = get_query_var('cats'); $selected_term_open = get_query_var('cats'); if(empty($selected_term)){ $selected_term = get_queried_object()->term_id; $selected_term_open = get_queried_object()->term_id; } } else if($taxonomies == 'product_brand'){ $selected_term = get_query_var('brands'); $selected_term_open = get_query_var('brands'); if(empty($selected_term)){ $selected_term = get_queried_object()->term_id; $selected_term_open = get_queried_object()->term_id; } } $selected_term = explode(',', $selected_term); $args = array( 'orderby'           => 'name',  'order'             => 'ASC', 'hide_empty'        => false,  'fields'            => 'all', 'parent'            => 0, 'hierarchical'      => true, 'child_of'          => 0, 'pad_counts'        => false, 'cache_domain'      => 'core' ); $terms = get_terms($taxonomies, $args); $return .= '<ul class="'.$taxonomies.'">';    foreach ( $terms as $term ) { $subterms = get_terms($taxonomies, array( 'parent'   => $term->term_id, 'hide_empty' => false )); $has_sub = ""; if( is_array($subterms) && !empty($subterms) ){ $has_sub = " has-children"; if(in_array_r($subterms, 'term_id', $selected_term_open)){ $has_sub .= " open"; } } $checked = ''; if(in_array($term->term_id, $selected_term)){ $checked = 'checked'; } // return terms (working) $return .= sprintf( '<li id="category-%1$s" class="toggle%6$s"><label><input type="%3$s" value="%1$s" name="%4$s" class="%5$s" %7$s><span>%2$s</span></label>', $term->term_id, $term->name, $input_type, $term->taxonomy, $input_class, $has_sub, $checked #7 ); if( is_array($subterms) && !empty($subterms) )        $return .= '<ul class="children">';
foreach ( $subterms as $subterm ) { $checked = ''; if(in_array($subterm->term_id, $selected_term)){ $checked = 'checked'; } $return .= sprintf( '<li id="category-%1$s" class="toggle"><label><input type="%3$s" value="%1$s" name="%4$s" class="%5$s" %6$s><span>%2$s</span></label>', $subterm->term_id, $subterm->name, $input_type, $term->taxonomy, $input_class, $checked # 6 ); $return .= '</li>'; //end subterms li } if( is_array($subterms) && !empty($subterms) )        $return .= '</ul>'; //end subterms ul $return .= '</li>'; //end terms li } //end foreach term $return .= '</ul>'; return $return;}
/** add current page active class */function in_array_r($array, $key, $val) {    foreach ($array as $item){ if (isset($item->$key) && $item->$key == $val){ return true; } } return false;}

jQuery equal height based on rows listing


// =========================
// Equal height of Box base design.
// =========================
equalheight = function (container) {
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
jQueryel,
topPosition = 0;
jQuery(container).each(function () {
jQueryel = jQuery(this);
jQuery(jQueryel).height('auto')
topPostion = jQueryel.position().top;

if (currentRowStart != topPostion) {
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = jQueryel.height();
rowDivs.push(jQueryel);
} else {
rowDivs.push(jQueryel);
currentTallest = (currentTallest < jQueryel.height()) ? (jQueryel.height()) : (currentTallest);
}
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}

// =========================
// Call Equal height function
// =========================
jQuery(window).load(function() {
equalheight('.class_name');
});
jQuery(window).resize(function(){
equalheight('.class_name');
});

WordPress li nav menu set in 2 columns

WordPress li nav menu set in 2 columns

We can customized wp_nav_menu using walker class.

below snippet to set menu in 2 columns. Add in functions.php file.


class DW_Walker_Nav_Menu extends Walker_Nav_Menu {

var $current_menu = null;
var $break_point = null;

function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {

global $wp_query;

if( !isset( $this->current_menu ) )
$this->current_menu = wp_get_nav_menu_object( $args->menu );

if( !isset( $this->break_point ) )
$this->break_point = ceil( $this->current_menu->count / 2 ) + 1;

$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';

$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

if( $this->break_point == $item->menu_order )
$output .= $indent . '</li></ul><ul><li' . $id . $value . $class_names .'>';
else
$output .= $indent . '<li' . $id . $value . $class_names .'>';

$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

Lastly, you’ll also need to set you wp_nav_menu call to use a custom walker, which also means you’ll need to pass the args as an array, here’s an example.


wp_nav_menu( array(
'menu' => 'your-menu-id',
'walker' => new DW_Walker_Nav_Menu
) );

CSS Text Overflow with Ellipsis

Sometimes text will have to be clipped. For instance when it overflows the element’s box. When this happens, you want to leave a visual “hint” to the user that text has been clipped. This is were the text-overflow-props come in. The most common way to use it is the ellipsis character: “…”

We can render an ellipsis (“…”) to represent clipped text. from billow property.

Put this code in style seet.

.box
{
white-space:nowrap;
width:12em;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid #000000;
}

Put this code in html code.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s

 

Page loader jquery

Page loader to use all data load first after display the details.

Put This JS Code in js file or page header

$(window).load(function() {

$(“.loader”).fadeOut(“slow”);

})

Put This Code CSS file

<style>

.loader {

position: fixed;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

z-index: 9999;

background: url(‘/wp-content/themes/bluedomus-git/include/England/tpl/page-loader.gif’) 50% 50% no-repeat rgb(249,249,249);

}

Put This Code Html Page

HTML 5 how to drag and drop

Let us add Drag and Drop event  using HTML5.

  • Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location.
  • In HTML5, drag and drop is part of the standard, and any element can be draggable.

Below is the code for html file.

<!DOCTYPE HTML>
<html>
<head>

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}

<link href=”scro.css” rel=”stylesheet” type=”text/css”>
</head>
<body>

<br>
<img id=”drag1″ src=”dre.png” draggable=”true” ondragstart=”drag(event)” width=”356″ height=”89″>

</body>
</html>