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.

Drag and Drop to a specific area

I have tried to create a game where the user will have to place each card in a specific order. I can drag and drop the names into the dropable area but how will i be able to assign a specific card to a specific slot.
Here is my js code:
var correctCards = 0;
$( init );
function init() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '250px',
width: 0,
height: 0
} );
// Reset the game
correctCards = 0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
// Create the pile of shuffled cards
var cards = ["Aiba", "Ninomiya", "Ohno", "Sakurai", "Matsumoto"];
cards.sort( function() { return Math.random() - .5 } );
for ( var i=0; i<cards.length; i++ ) {
$('<div>' + cards[i] + '</div>').data('img',i ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
var slots = [ ' ', ' ', ' ', ' ', ' '];
for ( var i=1; i<=slots.length; i++ ) {
$('<div>' + slots[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'name' );
var cardNumber = ui.draggable.data( 'name' );
// If the card was dropped to the correct slot,
// change the card colour, position it directly
// on top of the slot, and prevent it being dragged
// again
if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go
if ( correctCards == 10 ) {
$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
} );
}
}

If you give a unique id to each div where a card is (so for example cardSlot1, cardSlot2...), you could use document.getElementById('cardSlot1').value to get the name of the card back.
It would look similar to this:
for ( var i=0; i<cards.length; i++ ) {
$('<div id="cardSlot'+i+'">' + cards[i] + '</div>').data('img',i ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}

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++;
}

Why does my progress bar shows full progress value before it start loading

I made a progress bar using jQuery UI. here is the link to see it: DEMO
It works well, just there is a problem. At the code I have setTimeout( progress, 2000 ); which means it has to wait 2 seconds before it stars. But during this time it shows the background of .ui-progressbar-value which must be visible when the whole progress is completed. After 2 seconds it hides and to progress stars as normal.
Interestingly when I tried it on JSFiddle, it did not show this class and worked perfectly. So in browsers only have this problem. Here is the JSFiddel link
and this is my js code:
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "100%" );
$(".loader").delay(1000).fadeOut(750);
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 100 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 2000 );
});
And CSS:
.enterance{
position:absolute;
overflow:hidden;
left:0;
top:0;
background-color:black;
width:100%;
height:100%;
z-index:10;
color:rgba(255,255,255,1.00);
}
.enterance .loader{
position:absolute;
width:600px;
height:500px;
top:50%;
left:50%;
margin:-250px 0 0 -300px;
}
.ui-progressbar-value {
background:url(http://goo.gl/V9dAfn) no-repeat;
width:600px;
height:429px;
border:0;
}
.ui-progressbar{
background:url(http://goo.gl/rBH0N1) no-repeat;
background-size:cover;
width:600px;
height:429px;
border:0;
}
.ui-progressbar .ui-progressbar-value{margin:0;}
.progress-label{
font-size:90px;
font-family: 'News Cycle', sans-serif;
color:#FFFFFF;
right:0px;
position:absolute;
}
So how can I NOT show this .ui-progressbar-value while it's waiting for 2 seconds? And Additionally, how can I add a fadeIn effect to this? like when page loads the image fades in ?
Thanks in advance.

Try this (can't be sure unless you had a fiddle of the issue):
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "100%" );
$(".loader").delay(1000).fadeOut(750);
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 100 ) {
setTimeout( progress, 100 );
}
}
progressbar.progressbar( "value", 0 );
setTimeout( progress, 2000 );
});

Try removing the "$(function()" and running just the plain code?
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "100%" );
$(".loader").delay(1000).fadeOut(750);
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 100 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 2000 );
Cant really work on it cuz it doesnt affect the fiddle right?

If Conditions on jquery ui slider

I am trying to apply if..elseif.. condition on multiple UI sliders. Practically I want that certain slider show/hide depending on the ui.value but the if condition is not working correctly. A fiddle can be found here : http://jsfiddle.net/XWRDZ/
Code below:
HTML
<div id="label">Postpaid</div><br />
<div id="slider-range-max"></div>
<br />
<div id="slider-range-max-2"></div>
JS
<script>
var packageselection = 0;
$(window).load(function() {
$('#slider').hide();
$('#slider-range-max-2').hide();
});
$(function() {
var labelArr = new Array("Postpaid", "Hybrid", "SIM Only");
$( "#slider-range-max" ).slider({
min: 0,
max: 2,
value: 0,
step: 1,
change: function( event, ui ) {
$("#label").html(labelArr[ui.value]);
packageselection = ui.value;
if ( packageselection = 1 ){
$('#slider-range-max-2').show();
}
else if ( packageselection = 2 ){
$('#slider-range-max-2').hide();
}
}
});
});
$(function() {
$( "#slider-range-max-2" ).slider({
min: 1,
max: 3,
value: 1,
slide: function( event, ui ) {
}
});
});
</script>
Thanks so much for your help guys!

equal to is == or === not = (thats declaration)
if ( packageselection == 1 ){
$('#slider-range-max-2').show();
}
else if ( packageselection == 2 ){
$('#slider-range-max-2').hide();
}