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
Related
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).
I am having an issue with my slideToggle function. Once pressed it opens up the way I need it to. But when I scale the browser to test the responsive flow to the site the slideToggle still stays active instead of sliding down. I tried a few functions but nothing seems to work. Below is the scrip I am using without the code to slide down when it hits a specific screen resoultion. How would I go about fixing this issue?
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120' }, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function () {
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Code
http://jsfiddle.net/wyze/XqUp4/4/
Try if this works for you. I have added to check whether the width is 780(you can change it), when the panel to slide down. Try adding this in you fiddle and check if this works
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#footerPanel').slideToggle(400);
}
}
});
I am trying to remove certain functionality when the screen is at certain widths. I was wondering if you could tell me why this doesn't work?
http://jsbin.com/ALAYOru/1/edit
I remove the 'has-sub-menu' class when the screen goes below 700px but it still executes the mouseover event.
Thanks!
Or this.
function isWindowSmall()
{
if(window.innerWidth < 700px) return true;
else return false;
}
$(".some-btn").on('click',function()
{
if(isWindowSmall()){
//do something for small windows
}
else{
//do something else for big windows
}
});
That is becauase what this is doing is.
$(".has-sub-menu").mouseenter(function(){
$(this).css('background-color','red');
}).mouseleave(function(){
$(this).css('background-color','transparent');
});
This goes and finds all of the elements with the class of .has-sub-menu and then it attaches the event listener, so this listener will be applied forever, what you could do is something like this.
$("body").on({
mouseenter: function(){
$(this).css('background-color','red');
},
mouseleave: function(){
$(this).css('background-color','transparent');
}
}, '.has-sub-menu');
This will check to see if the element has the class every time it is clicked
Demo: http://jsbin.com/ALAYOru/6/edit
Note: in the demo, you might have to make the output window bigger than 720px and then refresh to see the proper effect.
You can add a function to check the screen size and remove the onmouseover event listener.
function check_screen() {
if(window.innerWidth < 700px)
{
whateveryourelementiscalled.removeEventListner('onmouseover', //whatever your mouseover function was);
}
}
try this.
window.onresize = function () {
if(window.innerWidth < 700) {
// your code here
}
}
Im having trouble getting this to work, so obviously i'm doing something wrong... I created a fade-in hover state on the submenus of my menu, which works perfectly, but when I scale down to mobile view the effect is still relevant, which I do not want as mobile devices don't have hover state. so I rapped my function in a jquery(window).resize function but then it does not work at all.
jQuery(window).resize(function() {
var w = jQuery(window).width();
if (w <= 768 ) {
jQuery('nav.main-nav li').each(function() {
var submenu = jQuery(this).find('ul:first');
jQuery(this).hover(function() {
submenu.css({opacity: 1});
submenu.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeIn(300, function() {
jQuery(this).css({overflow:'visible', height:'auto', display: 'block'});
});
},
function() {
submenu.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeOut(300, function() {
jQuery(this).css({overflow:'hidden', display:'none'});
});
});
});
}
});
Instead of using jQuery(window).width();,
try using document.documentElement.clientWidth
I'm having a problem with my dropdown after in the midst of calling onResize. On a fresh page load the drop-down nav acts correctly but if you resize the browser and click the drop-down for the sub nav, it moves fast and doesn't stay open.
Here's a Live Demo.
Here's just the JS:
var res;
onResize = function() {
var responsive_viewport = $(window).width();
var mobile_menu = $('nav div span');
var mobile_list = $('nav div #main-nav');
if (res){ clearTimeout(res)};
res = setTimeout(function(){
console.log("resize triggered");
if (responsive_viewport <= 1024) {
mobile_menu.add(mobile_list).click(function(event) {
mobile_list.slideToggle('fast', 'swing', function() {
mobile_list.toggleClass('active');
});
event.stopPropagation();
});
$(document).click(function() {
if (mobile_list.hasClass('active')) {
mobile_list.slideToggle('fast', 'swing', function() {
mobile_list.removeClass('active');
});
}
});
}
if (responsive_viewport <= 768) {
console.log('on mobile');
nextvid.addClass('mobile');
} else {
nextvid.removeClass('mobile');
}
},200);
}
$(document).ready(onResize);
$(window).bind('resize', onResize);
Thanks!
What's happening is every time you resize the window (and I guess counting pageload) you bind to the event of clicking on the item. So when you resize the window once, the event fires twice and the dropdown opens then closes. If you resize the window again, the drop down now opens, closes, then opens again. So long story short you should bind only once! If you then want to change the binding (like if they switch to mobile view) you should then unbind then rebind a different way.
Best of luck!