My issue is, that when the bar is pressed on my phone, it does nothing. When clicked on PC at the same resolution, it works without an issue. I'm not sure what to do, I haven't seen a fix anywhere else.
Here is the site that it is used on so you can see the issue first hand: http://www.briansamu.com
// This the jQuery
$(document).ready(function() {
$(".burger-nav").on("click", function() {
$("header nav ul").toggleClass("open");
// The open class sets the height of the UL to: height: auto;
});
});
Thank you advance.
Click functions for phones are different from that of browsers. To fix these issues use Hammer Js which help in handling all click for mobile.
Is this issue is with iphone or ipad?
if this is the case try button instead of <a> tag
Related
I have a small issue with Micah Godbolt's Responsive Multi-level Navigation with active parent links. It works great, except if the page loads slowly and you are hovering over the global nav, it can sometimes show two dropdowns. I'm guessing this is cause the javascript is not loading quick enough. Was wondering if anybody knew of an easy fix.
Here is the site I am using it on : http://library.buffalo.edu
If you refresh the page and hover over the links before the page fully loads, you see the problem screenshot of issue
I assume you are hiding your dropdowns with javascript so you could add style="display: none" on your divs or css and use hover function.
you havent post your html but here's example
$(".parent").mouseover(function() {
$(this).next("ul").show();
});
$(".parent").mouseleave(function() {
$(this).next("ul").hide();
})
or you can replace those with one click function and use jQuery toggleClass to toggle a class that have display: block on it
Below function will work. Try this
$(".nav-global li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
In my template I include a tool to show a pop-under when it is in tablet devices and other pop-under when it is other devices( cellphone, desktop,etc )
I tested and work perfect with banner, but when I try to use pop-under does not work, and I don';t know how fix it, If somebody can help me, thanks..
}
if(is_tablet==1) {
$("#tablet-ad-space").show();
$("#mobile-ad-space").remove();
}
else {
$("#tablet-ad-space").remove();
$("#mobile-ad-space").show();
}
Use hide() function insted of remove() because remove() remove element from DOM.
This works on a desktop browser, but not on my iOS mobile phone. I tried adding 'touchstart' and looked at this post's solution to check how other's got it to work, but it still isn't working. Any suggestions as to other options? I also tried adding e.preventDefault() - and added e to function(), but that didn't work as well.
I have tried:
$('body').on('click touchstart', '.myContainer', function() {
$(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
});
Edit:
It appears there may be something else going on, I changed the code to be as general as possible and it is not firing the event on iOS, but working in my chrome emulator:
$(document).on('click touchstart', 'body', function() {
alert('hi');
});
Additional update:
I have added the following code to my script.js file:
$('body').css('display', 'none');
As expected, the screen goes blank on my desktop browser for both local and on heroku, but when I test on mobile, the screen is not blank. It looks like js isn't working properly.
Images attached:
Answer: the reason it wasn't working on iOS Safari is because in my js page I was using ES6, specifically 'let' which is [not supported currently][1]. Changed to ES5 and the issue disappeared.
$('body').on('click', '.dashboard_leftNav_category a', function() {
var link = $(this).attr('showSection'); //changed from let link
var show = $('[section="'+link+'"]');
$('[section]').hide();
$('body').find(show).fadeIn();
$('html,body').scrollTop(0);
});
You have two options:
Reset your mobile browser's history because your browser's cache reads the old source.
Change the name of your source file in the desktop and refresh your page again.
This should help you. Instead of binding it to the body element, bind the event to the document.
$(document).on('click touchstart', '.myContainer', function() {
$(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
});
Also try changing adding the following style to myContainer class
cursor : pointer;
Put e.preventDefault(); inside your javascript function.
I'm self-taught when it comes to web design and so I really am stuck here because I don't have the framework for understanding the problem. My website (sealinesd.com) is OK EXCEPT the parent links should be disabled AT ALL TIMES. Right now it works like this:
-- when the regular non-responsive menu is up, the parent links are disabled thanks to the plugin I use (code below).
-- when you hover on the non-responsive menu and the parents are disabled, and THEN you make the browser smaller, the responsive items you hovered on before are still disabled.
-- when you go straight to the responsive menu without first hovering on the parents in non-responsive mode, the parent links are NOT disabled.
I have very little knowledge of jquery and DOM so I was unable to fix the plugin. I tried to target the mean-menu (used in responsive mode) and use document.ready to make sure it wasn't executing too early, or something, but neither worked for me. Please advise. I thank you kindly in advance.
The code for the plugin I use to disable parent links is right below.
Plugin Name: Advanced Disable Parent Menu Link
Description: A plugin which allows you to disable parent menu link.
Author: Kapil Chugh
Plugin URI: http://kapilchugh.wordpress.com/
Version: 1.0
add_action('wp_footer', 'advanced_disable_parent_menu_link');
function advanced_disable_parent_menu_link () {
wp_print_scripts('jquery'); ?>
<script type="text/javascript">
if (jQuery("ul li.page_item:has(ul.children)").length > 0) {
jQuery("ul li.page_item:has(ul.children)").hover(function () {
jQuery(this).children("a").removeAttr('href');
jQuery(this).children("a").css('cursor', 'default');
jQuery(this).children("a").click(function () {
return false;
});
});
} else if (jQuery("ul li.menu-item:has(ul.sub-menu)").length > 0) {
jQuery("ul li.menu-item:has(ul.sub-menu)").hover(function () {
jQuery(this).children("a").removeAttr('href');
jQuery(this).children("a").css('cursor', 'default');
jQuery(this).children("a").click(function () {
return false;
});
});
}
</script> <?php
}
I tried this code too and it didn't work. I'm frustrated. Don't know how to target that damn responsive menu.
wp_print_scripts('jQuery'); ?>
<script type="text/javascript">
jQuery(document).ready(function () {
if (jQuery("nav.mean-nav > li:has(ul.children)").length > 0) {
jQuery(".mean-nav > ul > li:has(ul.children)").hover(function () {
jQuery(this).children("a").click(function(evt) {
evt.preventDefault();
});
jQuery(this).children("a").css('cursor', 'default');
}
});
I took a look at your site. It appears to be built from a template that has created its own responsive functionality.
Personally, I would suggest that you look into using Bootstrap to build your own pages. Bootstrap is extremely easy to implement once you understand the 12 column grid system.
Bootstrap has responsive menus with dropdowns like this all rolled in out of the box and it works great, see this example
You could easily duplicate the look of your template using bootstrap in very little time and there are TONS of resources online to help you.
Anyway, that said, if you want to to stop a click on a link from navigating to the link's href location you can use .preventDefault(); like this:
// prevent navigation when clicking links with the class preventDefault
$(document).on('click', '.preventDefault', function(e){
e.preventDefault();
});
// just to show that other events still make it through
$('#test').click(function(){
$('#result').append('click detected<br>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click this link<br>
<div id="result"></div>
Hopefully this is the last time I will need to ask for your guys help: Website 3six-d.co.uk
Everything if fine on the normal website, issueshowever appear when I try to use it on mobiles.
http://mobiletest.me/iphone_5_emulator/#u=http://3six-d.co.uk/index.html
I'm giving that link to show you, but the same occurrence happens on my phone aswell.
This is the relevant code in the .js file (I could be wrong but I think it is)
$(function() {
var trigger = $('#responsive-nav');
menu = $('#main-nav ul');
$(trigger).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
$(this).toggleClass('nav-visible');
});
$(window).resize(function(){
var windowW = $(window).width();
if(windowW > mobileRes && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
A weird ocurance was, that initially the jQuery was being called at the end of the html and it worked fine, but it was necessary to move it to the top for Fancybox and other scripts I am running. That is what is causing the problem, as soon as the following code is at the stop of the HTML document, the navigation menu stops working on mobiles and tablets:
<script type="text/javascript" src="js/jquery.min.js"></script>
Any ideas guys, would really appreciate some help!
did you try using a timeout to see if it's a race condition?