We Keep Coding

Headhensive missing dropdown menu when cloning

I have a website which uses Headhesive, superfish and i18next. I have a header which has a navigation bar. On this navigation bar, the 2nd navItem has a drop-down menu.
The Headhensive clones the whole header but missing the drop-down menu.
This is the main menu
<nav id="main-menu" data-easing="easeInOutExpo" data-speed="1250">
<ul>
<li>
<a href="#home">
<div data-i18n="nav.home">Home</div>
</a>
</li>
<li>
<a href="#service">
<div data-i18n="nav.services.title">Title</div>
<ul>
<li>
<a href="#service">
<div data-i18n="nav.services.ourservices">Our Services</div>
</a>
</li>
<li>
<a href="#how">
<div data-i18n="nav.services.howwework">How We Work</div>
</a>
</li>
</ul>
</a>
</li>
</ul>
</nav>
As you can see that the ul is the drop-down menu.
And here is the code to use Headhensive:
initHeadhesive: function() {
if( headerEl.hasClass( 'sticky' ) ) {
var options = {
offset: 200,
offsetSide: 'top',
classes: {
clone: 'header-clone',
stick: 'header-stick',
unstick: 'header-unstick'
},
onInit: function () {
main_menu_clone = $( '#header.header-clone #main-menu' );
menu_trigger_clone = $( '#header.header-clone #menu-trigger' );
main_menu_clone.superfish({
popUpSelector : 'ul',
delay : 250,
speed : 350
});
if( menu_trigger_clone.length > 0 ) {
menu_trigger_clone.on( 'click', ( function() {
$( this ).toggleClass( 'open' );
main_menu_clone.toggleClass( 'display-menu' );
}));
}
$( main_menu_clone ).find( 'ul' ).on( 'click', function( e ) {
if ( $( e.target.tagName.toLowerCase() ).is( 'div' ) ) {
var element = $( main_menu_clone ),
divScrollToAnchor = $( e.target ).parent().attr('href'),
divScrollSpeed = element.attr('data-speed'),
divScrollOffset = SPHERE.header.topScrollOffset(),
divScrollEasing = element.attr('data-easing');
if( !divScrollSpeed ) { divScrollSpeed = 1250; }
if( !divScrollEasing ) { divScrollEasing = 'easeInOutExpo'; }
if( $( divScrollToAnchor ).length > 0 ) {
element.find( 'li' ).removeClass( 'current' );
element.find( 'a[href="' + divScrollToAnchor + '"]' ).parent( 'li' ).addClass( 'current' );
$( 'html,body' ).stop( true ).animate({
'scrollTop': $( divScrollToAnchor ).offset().top - Number( divScrollOffset )
}, Number( divScrollSpeed ), divScrollEasing );
}
if( windowWidth < 991 ) {
menu_trigger_clone.toggleClass( 'open', false );
main_menu_clone.toggleClass( 'display-menu', false );
}
return false;
}
});
},
};
// Initialise with options
var stickyHeader = new Headhesive( '#header', options );
}
},
I have seen my submenu which has "Our Services" and "How We Work" in the original header, but not in the cloned header.

Anchor Link to open a specific Tab on a Page (cbpFWTabs)

I've been using tabs from codrops Tab Styles Inspiration and I need to be able to open specific tabs on urls.
Basically if I wanted to open tab3, I would link www.google.com/index#tab3.
Here is my code:
<div class="tabs tabs-style-topline">
<nav>
<ul>
<li><span>Overview</span></li>
<li><span>Register</span></li>
<li><span>Exhibitors</span></li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-topline-1">Test 1</section>
<section id="section-topline-2">Test 2</section>
<section id="section-topline-3">Test 3</section>
</div><!-- /content -->
</div><!-- /tabs -->
And here is the javascript:
;( function( window ) {
'use strict';
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function CBPFWTabs( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
CBPFWTabs.prototype.options = {
start : 0
};
CBPFWTabs.prototype._init = function() {
// tabs elems
this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
// content items
this.items = [].slice.call( this.el.querySelectorAll( '.content-wrap > section' ) );
// current index
this.current = -1;
// show current content item
this._show();
// init events
this._initEvents();
};
CBPFWTabs.prototype._initEvents = function() {
var self = this;
this.tabs.forEach( function( tab, idx ) {
tab.addEventListener( 'click', function( ev ) {
ev.preventDefault();
self._show( idx );
} );
} );
};
CBPFWTabs.prototype._show = function( idx ) {
if( this.current >= 0 ) {
this.tabs[ this.current ].className = this.items[ this.current ].className = '';
}
// change current
this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
this.tabs[ this.current ].className = 'tab-current';
this.items[ this.current ].className = 'content-current';
};
// add to global namespace
window.CBPFWTabs = CBPFWTabs;
})( window );
Sorry I'm not much a jquery guy and have been trying to find a solution all day and made an account just to ask this. Thanks in advance for your help.

Maybe just listen to window.hashchange event do the trick, no click handlers on nav > li > a!. The jQuery way:
$(function(){
$(window).on('hashchange', function(e) {
var hash = window.location.hash;
// first reset classes
$('nav li').removeClass('tab-current');
$('.content-wrap section').removeClass('content-current');
$('nav li a[href="' + hash + '"]').parents('li').addClass('tab-current');
$('section[id="' + hash.replace('#', '') + '"]').addClass('content-current');
});
});

multiple instances of a jquery Vertical show case slider

I'm just using a vertical show case slider here is my source code :
var Slider = (function() {
var $container = $( '#ps-container' ),
$contentwrapper = $container.children( 'div.ps-contentwrapper' ),
// the items (description elements for the slides/products)
$items = $contentwrapper.children( 'div.ps-content' ),
itemsCount = $items.length,
$slidewrapper = $container.children( 'div.ps-slidewrapper' ),
// the slides (product images)
$slidescontainer = $slidewrapper.find( 'div.ps-slides' ),
$slides = $slidescontainer.children( 'div' ),
// navigation arrows
$navprev = $slidewrapper.find( 'nav > a.ps-prev' ),
$navnext = $slidewrapper.find( 'nav > a.ps-next' ),
// current index for items and slides
current = 0,
// checks if the transition is in progress
isAnimating = false,
// support for CSS transitions
support = Modernizr.csstransitions,
transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
// its name
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
init = function() {
// show first item
var $currentItem = $items.eq( current ),
$currentSlide = $slides.eq( current ),
initCSS = {
top : 0,
zIndex : 999
};
$currentItem.css( initCSS );
$currentSlide.css( initCSS );
// update nav images
updateNavImages();
// initialize some events
initEvents();
},
updateNavImages = function() {
// updates the background image for the navigation arrows
var configPrev = ( current > 0 ) ? $slides.eq( current - 1 ).css( 'background-image' ) : $slides.eq( itemsCount - 1 ).css( 'background-image' ),
configNext = ( current < itemsCount - 1 ) ? $slides.eq( current + 1 ).css( 'background-image' ) : $slides.eq( 0 ).css( 'background-image' );
$navprev.css( 'background-image', configPrev );
$navnext.css( 'background-image', configNext );
},
initEvents = function() {
$navprev.on( 'click', function( event ) {
if( !isAnimating ) {
slide( 'prev' );
}
return false;
} );
$navnext.on( 'click', function( event ) {
if( !isAnimating ) {
slide( 'next' );
}
return false;
} );
// transition end event
$items.on( transEndEventName, removeTransition );
$slides.on( transEndEventName, removeTransition );
},
removeTransition = function() {
isAnimating = false;
$(this).removeClass('ps-move');
},
slide = function( dir ) {
isAnimating = true;
var $currentItem = $items.eq( current ),
$currentSlide = $slides.eq( current );
// update current value
if( dir === 'next' ) {
( current < itemsCount - 1 ) ? ++current : current = 0;
}
else if( dir === 'prev' ) {
( current > 0 ) ? --current : current = itemsCount - 1;
}
// new item that will be shown
var $newItem = $items.eq( current ),
// new slide that will be shown
$newSlide = $slides.eq( current );
// position the new item up or down the viewport depending on the direction
$newItem.css( {
top : ( dir === 'next' ) ? '-100%' : '100%',
zIndex : 999
} );
$newSlide.css( {
top : ( dir === 'next' ) ? '100%' : '-100%',
zIndex : 999
} );
setTimeout( function() {
// move the current item and slide to the top or bottom depending on the direction
$currentItem.addClass( 'ps-move' ).css( {
top : ( dir === 'next' ) ? '100%' : '-100%',
zIndex : 1
} );
$currentSlide.addClass( 'ps-move' ).css( {
top : ( dir === 'next' ) ? '-100%' : '100%',
zIndex : 1
} );
// move the new ones to the main viewport
$newItem.addClass( 'ps-move' ).css( 'top', 0 );
$newSlide.addClass( 'ps-move' ).css( 'top', 0 );
// if no CSS transitions set the isAnimating flag to false
if( !support ) {
isAnimating = false;
}
}, 0 );
// update nav images
updateNavImages();
};
return { init : init }; })();
and in html here is my code :
{% for i,menu in zipped_data %}
<div class="ps-contentwrapper">
<div class="ps-content">
<p></p>
</div>
<div class="ps-content">
<p></p>
</div>
<div class="ps-content">
<p></p>
</div>
<div class="ps-content">
<p></p>
</div>
</div><!-- /ps-contentwrapper -->
<div class="ps-slidewrapper">
<div class="ps-slides">
{% for photo in photos_list|lookup:i %}
<div style="background-image:url('{{photo.get_display_url }}');"></div>
{% endfor %}
</div>
<nav>
<a href="#" class="ps-prev" ></a>
<a href="#" class="ps-next" ></a>
</nav>
</div><!-- /ps-slidewrapper -->
</section><!-- /ps-container -->
{% endfor %}
How can I make multiple instances of this slider on the same page .
so I want multiple instances of the section but it's not working
If any body can help me in this please

Make bootstrap carousel bullets slide another carousel

Based on the code from codrops from this page: Codrops article , I wanted to add the product slider into a bootstrap carousel.
I have added a codepen here
This is the javascript code that makes the bottles animation work:
(function() {
var support = { animations : Modernizr.cssanimations },
animEndEventNames = {
'WebkitAnimation' : 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
},
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
component = document.getElementById( 'products' ),
items = component.querySelector( 'ul.itemwrap' ).children,
current = 0,
itemsCount = items.length,
navNext = document.getElementById( 'move-right' ),
navPrev = document.getElementById( 'move-left' ),
navOne = document.getElementById( 'bullet-sl' )
isAnimating = false;
function init() {
navNext.addEventListener( 'click', function( ev ) { ev.preventDefault(); navigate( 'next' ); } );
navPrev.addEventListener( 'click', function( ev ) { ev.preventDefault(); navigate( 'prev' ); } );
}
function navigate( dir ) {
if( isAnimating ) return false;
isAnimating = true;
var cntAnims = 0;
var currentItem = items[ current ];
if( dir === 'next' ) {
current = current < itemsCount - 1 ? current + 1 : 0;
}
else if( dir === 'prev' ) {
current = current > 0 ? current - 1 : itemsCount - 1;
}
var nextItem = items[ current ];
var onEndAnimationCurrentItem = function() {
this.removeEventListener( animEndEventName, onEndAnimationCurrentItem );
classie.removeClass( this, 'current' );
classie.removeClass( this, dir === 'next' ? 'navOutNext' : 'navOutPrev' );
++cntAnims;
if( cntAnims === 2 ) {
isAnimating = false;
}
}
var onEndAnimationNextItem = function() {
this.removeEventListener( animEndEventName, onEndAnimationNextItem );
classie.addClass( this, 'current' );
classie.removeClass( this, dir === 'next' ? 'navInNext' : 'navInPrev' );
++cntAnims;
if( cntAnims === 2 ) {
isAnimating = false;
}
}
if( support.animations ) {
currentItem.addEventListener( animEndEventName, onEndAnimationCurrentItem );
nextItem.addEventListener( animEndEventName, onEndAnimationNextItem );
}
else {
onEndAnimationCurrentItem();
onEndAnimationNextItem();
}
classie.addClass( currentItem, dir === 'next' ? 'navOutNext' : 'navOutPrev' );
classie.addClass( nextItem, dir === 'next' ? 'navInNext' : 'navInPrev' );
}
init(); })();
Everything is good when I'm using the arrows to go to the next slide, but what I'm trying to accomplish is to make it work with the bullet navigation on the bottom. Right now the bullet navigation only moves the slides from the bootstrap carousel and I find the code from codrops to be too difficult to understand for me.

Here is a very simplified version of what you're trying to do
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slide', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
#import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');
#myCarousel {
margin-top: 40px;
}
.carousel-linked-nav,
.item img {
display: block;
margin: 0 auto;
}
.carousel-linked-nav {
width: 120px;
margin-bottom: 20px;
}
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="http://tympanus.net/Development/ItemTransitions/img/9.png" alt="" />
</div>
<div class="item">
<img src="http://tympanus.net/Development/ItemTransitions/img/10.png" alt="" />
</div>
<div class="item">
<img src="http://tympanus.net/Development/ItemTransitions/img/11.png" alt="" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
<li class="active">•
</li>
<li>•
</li>
<li>•
</li>
</ol>

How to reload a page on slider navigation click

I've a problem with this slider: I want to make it slider reload the page after I'm clicking the link "next/prev" in the slider or hte thumbnail.
Can someone help me ?
$(function() {
// ======================= imagesLoaded Plugin ===============================
// https://github.com/desandro/imagesloaded
// $('#my-container').imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images
// callback function gets image collection as argument
// this is the container
// original: mit license. paul irish. 2010.
// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
$.fn.imagesLoaded = function( callback ) {
var $images = this.find('img'),
len = $images.length,
_this = this,
blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
function triggerCallback() {
callback.call( _this, $images );
}
function imgLoaded() {
if ( --len <= 0 && this.src !== blank ){
setTimeout( triggerCallback );
$images.off( 'load error', imgLoaded );
}
}
if ( !len ) {
triggerCallback();
}
$images.on( 'load error', imgLoaded ).each( function() {
// cached images don't fire load sometimes, so we reset src.
if (this.complete || this.complete === undefined){
var src = this.src;
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
// data uri bypasses webkit log warning (thx doug jones)
this.src = blank;
this.src = src;
}
});
return this;
};
// gallery container
var $rgGallery = $('#rg-gallery'),
// carousel container
$esCarousel = $rgGallery.find('div.es-carousel-wrapper'),
// the carousel items
$items = $esCarousel.find('ul > li'),
// total number of items
itemsCount = $items.length;
Gallery = (function() {
// index of the current item
var current = 0,
// mode : carousel || fullview
mode = 'carousel',
// control if one image is being loaded
anim = false,
init = function() {
// (not necessary) preloading the images here...
$items.add('<img src="images/ajax-loader.gif"/><img src="images/black.png"/>').imagesLoaded( function() {
// add options
_addViewModes();
// add large image wrapper
_addImageWrapper();
// show first image
_showImage( $items.eq( current ) );
});
// initialize the carousel
if( mode === 'carousel' )
_initCarousel();
},
_initCarousel = function() {
// we are using the elastislide plugin:
// http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
$esCarousel.show().elastislide({
imageW : 65,
onClick : function( $item ) {
if( anim ) return false;
anim = true;
// on click show image
_showImage($item);
// change current
current = $item.index();
}
});
// set elastislide's current to current
$esCarousel.elastislide( 'setCurrent', current );
},
_addViewModes = function() {
// top right buttons: hide / show carousel
var $viewfull = $(''),
$viewthumbs = $('');
$rgGallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) );
$viewfull.on('click.rgGallery', function( event ) {
if( mode === 'carousel' )
$esCarousel.elastislide( 'destroy' );
$esCarousel.hide();
$viewfull.addClass('rg-view-selected');
$viewthumbs.removeClass('rg-view-selected');
mode = 'fullview';
return false;
});
$viewthumbs.on('click.rgGallery', function( event ) {
_initCarousel();
$viewthumbs.addClass('rg-view-selected');
$viewfull.removeClass('rg-view-selected');
mode = 'carousel';
return false;
});
if( mode === 'fullview' )
$viewfull.trigger('click');
},
_addImageWrapper= function() {
// adds the structure for the large image and the navigation buttons (if total items > 1)
// also initializes the navigation events
$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );
if( itemsCount > 1 ) {
// addNavigation
var $navPrev = $rgGallery.find('a.rg-image-nav-prev'),
$navNext = $rgGallery.find('a.rg-image-nav-next'),
$imgWrapper = $rgGallery.find('div.rg-image');
$navPrev.on('click.rgGallery', function( event ) {
_navigate( 'left' );
return false;
});
$navNext.on('click.rgGallery', function( event ) {
_navigate( 'right' );
return false;
});
// add touchwipe events on the large image wrapper
$imgWrapper.touchwipe({
wipeLeft : function() {
_navigate( 'right' );
},
wipeRight : function() {
_navigate( 'left' );
},
preventDefaultEvents: false
});
$(document).on('keyup.rgGallery', function( event ) {
if (event.keyCode == 39)
_navigate( 'right' );
else if (event.keyCode == 37)
_navigate( 'left' );
});
}
},
_navigate = function( dir ) {
// navigate through the large images
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( current + 1 >= itemsCount )
current = 0;
else
++current;
}
else if( dir === 'left' ) {
if( current - 1 < 0 )
current = itemsCount - 1;
else
--current;
}
_showImage( $items.eq( current ) );
},
_showImage = function( $item ) {
// shows the large image that is associated to the $item
var $loader = $rgGallery.find('div.rg-loading').show();
$items.removeClass('selected');
$item.addClass('selected');
var $thumb = $item.find('img'),
largesrc = $thumb.data('large'),
title = $thumb.data('description');
$('<img/>').load( function() {
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
$loader.hide();
if( mode === 'carousel' ) {
$esCarousel.elastislide( 'reload' );
$esCarousel.elastislide( 'setCurrent', current );
}
anim = false;
}).attr( 'src', largesrc );
},
addItems = function( $new ) {
$esCarousel.find('ul').append($new);
$items = $items.add( $($new) );
itemsCount = $items.length;
$esCarousel.elastislide( 'add', $new );
};
return {
init : init,
addItems : addItems
};
})();
Gallery.init();
/*
Example to add more items to the gallery:
var $new = $('<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>');
Gallery.addItems( $new );
*/
});
Here is the code for the view
<noscript>
<style>
.es-carousel ul{
display:block;
}
</style>
</noscript>
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
Previous Image
Next Image
</div>
{{/if}}
<div class="rg-image"></div>
<div class="rg-loading"></div>
<div class="rg-caption-wrapper">
<div class="rg-caption" style="display:none;">
<p></p>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="container">
<div class="header">
<span>« Previous Demo: </span>Elastislide
<span class="right_ab">
Images by Shermeee
CC BY 2.0
<strong>back to the Codrops post</strong>
</span>
<div class="clr"></div>
</div><!-- header -->
<div class="content">
<h1>Responsive Image Gallery <span>A jQuery image gallery with a thumbnail carousel</span></h1>
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->
</div><!-- content -->
</div><!-- container -->
Sorry if my English is not so good, but I really need to solve this.

Well I have no idea why would you do that, but if you want to reload the page every time you click on the Next and Prev buttons, including the Thumbnail you could do something like this:
$(document).ready(function() {
$('.es-nav span, .es-carousel img').on('click', function() {
location.reload();
});
});
This will reload the page when you click on the nav or an image in the thumbnail area.