We Keep Coding

Hiding links on browser's statusbar when you mouseover on links for modals

I'm trying to disable the mouse over highlight in the statues bar. I have written this piece of JS code. It work fine. But the problem is with Bootstrap 3 Modals they are broken and not working how should i modify the code ? any ideas ?
$(document).ready(function () {
setTimeout(function () {
$('a[href]').each(function () {
var href = this.href;
$(this).removeAttr('href').css('cursor', 'pointer').click(function () {
if (href.toLowerCase().indexOf("#") >= 0) {
} else {
window.location.href = href;
}
});
});
}, 500);
});
Thanks you,

Add this to your CSS:
a[href] {
cursor: auto !important;
}

responsive jquery nav interaction - issue on resize

Requirement:
Horizontal nav in 900px or above and vertical in 900 below. but in 900 or below, the nav should hide by default and appear only when clicked on the "header"
What I have so far:
http://jsfiddle.net/0rmgpjtr/3/
$(document).ready(function(){
$('.dropdown ul:first').show();
$('.dropdown ul:first').css("display:table");
$('.dropdown li').click(function (e) {
$(this).addClass('active').siblings('li').removeClass('active');
$(this).children('ul').slideToggle('fast');
$(this).siblings('li').find('ul').slideUp('fast');
e.preventDefault();
e.stopPropagation();
});
$(document).on('click', function (event) {
$('.dropdown li').children('ul').slideUp('fast');
});
});
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.ch-logo').bind('click',function(){
$('.dropdown').slideToggle('fast');
})
}else{
console.log("900+");
$('.ch-logo').unbind()
}
}).resize();
Issue:
1. binding and unbinding the header click event is not working
2. when i click on parent link to open subnav, it is flickering after i resize the browser - actually any interaction, starts flickering the menu, may be because its tied to resize function.

http://jsfiddle.net/extca38f/
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.dropdown').hide();
$('.ch-logo').bind('click',function(){
$('.dropdown').toggle();
});
}else{
$('.dropdown').show();
}
}).resize();

Use toggle instead of slidetoggle Demo Here
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.dropdown').hide();
$('.ch-logo').bind('click',function(){
$('.dropdown').toggle('slow');
});
}else{
$('.dropdown').show();
}
}).resize();
Check the differnce between toggle and slidetoggle

Detect window width on the fly in jQuery

I am using a template and it come with a jQuery function to detect the window width, but it only works if you open the window up or refresh the page, not when you adjust the window width.. From what IU have read I need to integrate the resize function into my codebase
$(window).resize(function()
but as my jQuery is limited I'm not sure how to put it in this script
var ww = $(window).width();
/* Menu */
$(document).ready(function() {
"use strict";
$('body').find("#mainmenu li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
}
});
$('body').find(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$('body').find("#mainmenu").toggle();
});
adjustMenu();
});
$(window).load(function () {
$('body').find("#mainmenu").css('pointer-events', 'auto');
});
var adjustMenu = function() {
"use strict";
if (ww < 900) {
$('body').find(".toggleMenu").css("display", "inline-block");
if (!$('body').find(".toggleMenu").hasClass("active")) {
$('body').find("#mainmenu").hide();
} else {
$('body').find("#mainmenu").show();
}
$('body').find("#mainmenu li").unbind('mouseenter mouseleave');
$('body').find("#mainmenu li a.parent").unbind('click').bind('click', function(e) {
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 900) {
$('body').find(".toggleMenu").css("display", "none");
$('body').find("#mainmenu").show();
$('body').find("#mainmenu li").removeClass("hover");
$('body').find("#mainmenu li a").unbind('click');
$('body').find("#mainmenu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
$(this).toggleClass('activelink');
$(this).find("ul").toggleClass('animatedfast');
$(this).find("ul").toggleClass('fadeInUp');
});
$('body').find("#mainmenu ul li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
$(this).find("ul li").toggleClass('animatedfast');
$(this).find("ul li").toggleClass('fadeInLeft');
});
}
};
I can see that the logic is taking place in the adjustMenu function, so would I wrap that in the resize function?

Maybe I'm missing something obvious, but why not pull the whole thing out of
$(document).ready ()
Place it in a function
Function doAllOfThis (
//do everything
);
And then call it on document ready?
$(document).ready(function ({
doAllOfThis();
});
$(widow).resize (function ({
doAllOfThis();
});
I don't see anything that would be an issue. But you could just extract the code with "if ww =" conditions and move that to a function, then do as above with the function.
BETTER SOLUTION
Just noticed the
adjustMenu();
Function is already set for you, so add
$(window).resize(function({
var ww = $(window).width();
adjustMenu();
});

Utilize the resize event.
$(window).resize(function() {
var ww = $(window).width(); // will contain width after resize
// your adjust logic here
});

jQuery mobile - allow only vertical scrolling when side panel is opened?

Referencing this I want to allow only vertical scroll.
The following code will disable all touch moves on a panel.
$(document).on("pageinit", "#form1", function (event) {
$("#navmenu").on("panelopen", function (event, ui) {
$("body").css("overflow", "hidden").on("touchmove", stopScroll);
});
$("#navmenu").on("panelclose", function (event, ui) {
$("body").css("overflow", "auto").off("touchmove");
});
function stopScroll() {
return false;
}
});
How can I use "overflow-x: hidden" with the stopScroll function to allow vertical scroll and disable horizontal?
Thanks.

Have you tried like this
$("html, body").css("overflowX", "hidden");
Better make a css separate for mobile.

$(document).on('panelopen', '[data-role="panel"]',function (event) {
document.ontouchmove = function(e) {
e.preventDefault();
}
}).on('panelclose', '[data-role="panel"]', function (event) {
document.ontouchmove = function(e) {
return true;
}
});

disable link temporarily during quickflip

I am using on my site the plugin Quickflip with tabs on my site .
However if by exemple I click too fast on var2 and then var1 there is a bug.
That is why I am trying to put a timeout of 1s on each click of the tab so that it would wait for the flip to do.
Here is how I call the quickflip function (and tab)
$('document').ready(function () {
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
$('#flip-container').quickFlipper({}, flipid, 1);
return false;
});
});
});
Is there a solution to this please ?

I try to test your code and find out the problem that you mentioned.
[EDIT]
You want tabs can't be clicked until flip animation stop. I check the quickflip lib implementation and find out when div is flipping all the flip content display style will be set to "none". So I implement a "is animating" checking function.
Try this:
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
var isAnimating = true;
$("#flip-container>div").each(function(index){
if($(this).css("display")!=="none"&&index<3){
isAnimating=false;
}
});
if(!isAnimating){
$('#flip-container').quickFlipper({}, flipid, 1);
}
return false;
});
});
[EDIT]
And this is the updated answer jsfiddle demo
Hope this is helpful for you.

There are few solutions that i know can solve your problem.
Have a look at Callback which is used to make another function wait to the other function to finish first before performing, and you can put it together with Unbind function or Event.Prevent
Code may look something like this:
$('document').ready(function () {
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
$(this).$('#flip-navigation li a').unbind('click', handler); //Mod 1
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
//Mod 2 ---- Start
$('#flip-container').quickFlipper({}, flipid, 1, function(){
$(this).$('#flip-navigation li a').bind('click', handler);
});
//Mod 2 ---- End
return false;
});
});
});
I am not entirely sure how to implement callback on the plugin, but here is a link to you that might be able to give you some idea how to implement callback on the quickflip plugin.