Tag: Html5

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>