We Keep Coding

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

Links works only in submenu

I'm trying to modify the following code becouse the links works only in a submenu , but i want to have some links in mainmenu too.
I found that when I use
$menuItems = $listItems.children(‘a.dropdown’);
instead of
$menuItems = $listItems.children( 'a' ),
...links from the main menu work fine , but logically submenu does not open.
Whole code:
var cbpHorizontalMenu = (function() {
var $listItems = $( '#cbp-hrmenu > ul > li' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;
function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
}
function open( event ) {
if( current !== -1 ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
}
var $item = $( event.currentTarget ).parent( 'li' ),
idx = $item.index();
if( current === idx ) {
$item.removeClass( 'cbp-hropen' );
current = -1;
}
else {
$item.addClass( 'cbp-hropen' );
current = idx;
$body.off( 'click' ).on( 'click', close );
}
return false;
}
function close( event ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
current = -1;
}
return { init : init };
HTML:
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul class="nav navbar-nav navbar-right">
<li>O SPOLEČNOSTI</li>
<li>
SLUŽBY
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<p>
<div><ul><li class="">SOCIÁLNÍ SÍTĚ</li></ul></div>
<div><ul><li class="">RESPONZIVITA</li></ul></div>
<div><ul><li class="">TVORBA WEBU</li></ul></div>
<div><ul><li class="">SEO OPTIMALIZACE</li></ul></div>
<div><ul><li class="">PPC</li></ul></div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li></ul></nav>

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

jQuery - the autocomplete properties not getting applied to dynamically created combobox?

Below is the code in which the autocomplete works fine with the first combobox. if i just copy paste the combobox it is working but when the second combobox is created dynamically on button click the autocomplete is not working ?
current code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Combobox</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
height:17px;
background:transparent;
border-radius:0px;
}
.custom-combobox-input {
margin: 0;
padding: 0px 0px;
width:150px;height:17px;
background:transparent;
border-radius:0px;
}
.ui-menu .ui-menu-item {
position: relative;
margin: 0;
padding: 0px 0em 0px 0em;
cursor: pointer;
min-height: 0;
background:transparent;
}
</style>
<script>
function sendvalues()
{
alert();
}
function combo()
{
alert();
$( ".combobox" ).combobox();
}
(function( $ ) {
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children( ":selected" ),
value = selected.val() ? selected.text() : "";
this.input = $( "<input>" )
.appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, "_source" )
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.mousedown(function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.click(function() {
input.focus();
// Close if already visible
if ( wasOpen ) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
},
_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( this.element.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},
_removeIfInvalid: function( event, ui ) {
// Selected an item, nothing to do
if ( ui.item ) {
sendvalues();
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( "option" ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if ( valid ) {
return;
}
// Remove invalid value
this.input
.val( "" )
.attr( "title", value + " didn't match any item" )
.tooltip( "open" );
this.element.val( "" );
this._delay(function() {
this.input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
this.input.autocomplete( "instance" ).term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})( jQuery );
$(function() {
$( ".combobox" ).combobox();
$( "#toggle" ).click(function() {
$( ".combobox" ).toggle();
});
});
</script>
</head>
<body>
<script>
function loada()
{
document.getElementById("two").innerHTML=document.getElementById("one").innerHTML;
}
</script>
<div id="one">
<select class="combobox" id="one" onchange="sendvalues()" onload="combo()">
<option value="">Select one...</option>
<option value="abc">abc</option>
<option value="kkk">kkk</option>
<option value="sd">asf</option>
<option value="abdfac">abasdfsac</option>
<option value="kgfjkgkk">kkyk</option>
<option value="sghkd">asgyjf</option>
<option value="abyuic">abftfjvhjc</option>
<option value="kkkgyjhk">kkgjk</option>
<option value="sml,hud">asnjmf</option>
</select>
</div>
<br><br><br><br>
<button onclick="loada()" >click</button>
<div id="two" onload="">
</div>
</body>
</html>

There are certain points which I observed in your code which are little bit not correct to do with html. Chances are there you would have written in hurry so please ignore the points
Div Id is 'one' and in side selector also having id as one make sure ids are unique.
your loada() function is just doing a copy paste job auto complete binding is missing .
So here I have changed your loada() function replace then it will work.
var counter = 0;
function loada() {
// document.getElementById("two").innerHTML = document.getElementById("one").innerHTML;
$("#one").clone().find('select').addClass('newControl' + counter).appendTo("#two");
$('.newControl' + counter).combobox();
counter++;
}

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>