We Keep Coding

how to handle hover on mobile?

I need to slightly rebuild this project. I would like to below 991px width, the menu would grow when clicked. The funny thing is that the desktop menu behaves the way I want it for mobile.
When elements have a class .nomobiledropdownhover, they behave as expected
The most important is this fragment, for mobile:
$("#navbarSupportedContent li").hover(
function(){
if (!$(this).hasClass('nomobiledropdownhover')) {
return;
}else{
$(this).children('ul').hide();
$(this).children('ul').slideDown('fast');
$(this).addClass('open ');
}
if(opmenu == 0){
menu_height($(this),'in');
opmenu = 1;
}
},
function () {
if (!$(this).hasClass('nomobiledropdownhover')) {
return;
}else{
$('ul', this).slideUp('fast');
$(this).removeClass('open ');
}
menu_height($(this),'out');
opmenu = 0;
});
}
and this for desktop:
$('.dropdown-toggle').on('click', function(e) {
if ($(this).closest('.dropdown').hasClass('nomobiledropdownhover')) {
$(this).closest('.dropdown').removeClass('open ');
return 0;
}else{
$('.dropdown').find('.dropdown-menu').attr('style', '');
var menuopen = $(this).closest('.dropdown');
// menuopen.find('.dropdown-menu').attr('style', '');
menuopen.find('.dropdown-menu').css('display', 'block');
menuopen.find('.dropdown-menu').css('top', '0');
setTimeout(function(){
$("html, body").stop().animate({scrollTop:menuopen.offset().top}, 300, 'swing', function() {
});
},120);
}
});
I glue it all because it is quite confusing
https://github.com/Mikelinsky/hover-on-mibile/blob/master/assets/js/script.js
Below the width of 991px the menu opens after clicking and closes after clicking somewhere else

I think the main problem is that you are relying on the hover() method, that catch the mouse-enter and mouse-leave event, which are never fired on a touch screen like there is on most mobile devices.
You should likely rely on touch events rather than on click or hover, as suggested in this answer: https://stackoverflow.com/a/11398089/6949810

Remove transparency on menu drop down Javascript

I've been trying to implement a feature that removes the transparency of the dropdown menu on my website so that it is actually readable for visitors.
The code I am currently using, which removes transparency on scroll but not on drop down is:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
});
});
I tried changing it to this (and variations of this) but can't seem to get it to work:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
$('#transmenu').removeClass('transparency');
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
$('#transmenu').addClass('transparency');
});
});
Any help would be greatly appreciated!
Thanks!

Without the html that this is hooking into it's a bit difficult to answer your question.
But given the fact that scrolling gets the job done, the only element I can see that could be preventing the functionality you want is that your selector to add show event handler is either selecting nothing in particular or an element in the DOM that is not the bootstrap dropdown element that triggers 'show.bs.dropdown', which is my reasoning for the first statement.
You can try the following debug code to verify:
// Should log to console with 'selected' if selector works alternatively 'not selected'
console.log($('#transmenu .dropdown').length > 0 ? 'selected' : 'not selected');
// Log to console when show event triggered
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
console.log('triggered');
});
Hope that helps you find a solution. Happy coding!

see the documentation at http://api.jquery.com/on/ and it should become obvious why your fancy named events are never being triggered (without defining any event namespace in the first place).
$('#transmenu .dropdown')
.on('show', function() {})
.on('hide', function() {});
the DOM selector also might be #transmenu.dropdown instead of #transmenu .dropdown (depending if id and class attributes are present on the DOM node to select - or if one selects the parent node by id and there is/are nested node/s with a class attribute present).

how to open a popup on hover event with clickable contant

i am currently working with leaflet.
and i am trying to create a popup with with clickable content.
now i found how i can bind popups on click event with content:
marker.on('click', function(e){
marker.bindPopup("<div />").openPopup();
}
and i found out how to create the popup on hover:
marker.on('mouseover', function(e){
e.target.bindPopup("<div />").openPopup();
}});
marker.on('mouseout', function(e){
e.target.closePopup();
}});
now what i cant seem to do is make the popup stay open in order for the user to click on links inside the popup.
i would appreciate any help.

one approach is this http://jsfiddle.net/cxZRM/98/
basically it's adding a timer to your setup and you only close the popup after an arbitrarily long time has passed so as to give the user some time to interact on your div.
marker.on('mouseover', function(e){
e.target.bindPopup("dsdsdsdsd").openPopup();
start = new Date().getTime();
});
marker.on('mouseout', function(e){
var end = new Date().getTime();
var time = end - start;
console.log('Execution time: ' + time);
if(time > 700){
e.target.closePopup();
}
});
a better approach would be to use http://jsfiddle.net/AMsK9/
to determine your mouse position and keep the popup open while the mouse is still within an area around the popup.

I had the same issue, I wanted a different pop up for mouseover and another one for click, and the problem was that when I hovered out the click pop up closed, so what I did was adding a flag:
var modal = true;
function onEachFeature(feature, Polygon)
{
if (feature.properties && feature.properties.popupContent && feature.properties.modal)
{
Polygon.on('mouseover', function (e) {
Polygon.bindPopup(feature.properties.popupContent);
this.openPopup();
modal = false;
});
Polygon.on('mouseout', function (e) {
if(!modal)
this.closePopup();
});
Polygon.on('click', function (e) {
modal = true;
Polygon.bindPopup(feature.properties.modal).openPopup();
});
}
}

jQuery Scrolling Length

I am working with a script to scroll an element on click. It's working properly, however it either scrolls all the way up, or all the way down. I'm new to jquery, and I'm wondering how to make it scroll a little at at time. For example, clicking to scroll down once will take you down a certain length, clicking again scrolls that length again. Also, sometimes it jitters and bugs out when scrolling back up. Any insight on how to fix this is appreciated as well!
Thanks.
Code below:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5, scrolling;
$('#scroll-up').click(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
}, speed);
});
$('#scroll-down').click(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
}, speed);
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
});
</script>

You're saying you want to scroll little at a time but your code is saying scroll UNTIL mouse leaves. If you want to scroll little at a time why would you write a mouseleave which clearly stating if it's been scrolling stop now!
If you want to scroll up/down a bit on click, you should get rid of setInterval and mouseleave.
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5;
$('#scroll-up').click(function() {
// Scroll the element up
ele.scrollTop( ele.scrollTop() - scroll );
});
$('#scroll-down').click(function() {
ele.scrollTop( ele.scrollTop() + scroll );
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
}
});
});
jsfiddle

Jquery Blur event on div scrolbar

I have a div with scroll bar.
Using Firefox when I click on scroll bar to drag it down to see the div list the blur event is fired and hides my div which I have set to hide when blur is fired.
How can I prevent the blur to fire when the scroll bar is used:
$("#mydiv").blur(function () {
$('#mydiv').fadeOut();
console.log("fadeout blur");
});
I display this div using:
$('#mydiv').fadeIn();
I want the div to hide when its not active but not hide when I try to click on the scroll bar.

May be this is what you are looking for
$(document).ready(function(){
$('#mydiv').fadeIn();
$("body").bind('click', function(ev) {
var myID = ev.target.id;
if (myID !== 'mydiv') {
$('#mydiv').fadeOut();
}
});
});
This will bind the click event with the body and also check the id of the element which triggers the click event. If it doesn't match the DIV, the div will be closed else the div will be always open.

You can do this one:
$(window).scroll(function() {
$('#mydiv').css('display','block');
});

var scrolling = false, scrollingTimeout, blurTimeout;
$(window).scroll(function () {
if (scrollingTimeout) {
clearTimeout(scrollingTimeout);
}
scrolling = true;
scrollingTimeout = setTimeout(function(){
scrollingTimeout = null;
scrolling = false;
}, 300);
});
$("#mydiv").blur(function () {
var that = $(this);
if (!scrolling) {
that.fadeOut();
} else {
if (blurTimeout) {
clearTimeout(blurTimeout);
}
blurTimeout = setTimeout(function () {
blurTimeout = null;
that.focus();
}, 600);
}
});
see jQuery scroll() detect when user stops scrolling and Can I declare logic on jQuery for the start and end of a scrolling event?

Seems your scroll bar is not formed within the div & clicking on it causes call to blur. Please check the css/style used for showing scroll for div is doing what you are expecting (forming scroll bar inside div), if this is the case then use a parent div over both(div & scroll bar) & use focusOut/blur event on parent div containing both.