Dropdown menu doesn't work on chrome mobile - javascript

I'm developing this site, which is almost completed, but there is a problem. the menu under "Products" can't be viewed on Chrome on mobile. It seems to work fine on the default Android and IOS browsers. Can anyone help please?

I figured it out via javascript. On mobile, one click open menu, second click redirect you. :)
var state;
$(".dropdown > a").click(function (event) {
var isMenu = $(this).parent().find('ul').text();
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
if (isMenu == "") {
href = $(this).attr('href');
window.location = href;
} else {
if (!state) {
state = true;
return false;
} else {
state = false;
href = $(this).attr('href');
window.location = href;
}
}
} else {
var href = $(this).attr('href');
window.location = href;
}
});

Related

How to fix: Script Causing Page Refresh (return false; not working)

I have two javascript functions. The one shows and hides div's by their ID. This has been working fine until now. I have since added some code I found online that prevents iOS from opening links in a new window (when in fullscreen mode). Since adding this new code everytime I click on a div to show/hide it, the functions fires but then the page refreshes. Any help?
I have tried to put return false in every conceivable place.
I changed my onclick to 'return function();'.
I changed it to 'function();return false'.
I placed return false inside both functions.
(function(document,navigator,standalone) {
//Code by Irae Carvalho http://about.me/irae
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
if('href' in curnode ) {
e.preventDefault();
location.href = curnode.href;
}
return false;
},false);
}
})(document,window.navigator,'standalone');
function showHidden(id) {
var div = document.getElementById(id);
if (div.style.display == 'none') {
div.style.display = '';
}else{
div.style.display = 'none';
}
return false;
}
<!-- The code below is in my php file -->
<a onclick="showHidden('divID')">
Clicking on the link fires the showHidden function correctly but then it also refreshes the page. I need the event listener to prevent iOS from opening links in a new window when in fullscreen mode but I also don't want the click listener to fire when I use the showHidden function, or at the least not refresh the page.
The reason it is changing pages is because you are not preventing the default action of a link click, which is in this case loading a different page. You can do this by invoking e.preventDefault() when the link is clicked.
Here is an example:
(function(document,navigator,standalone) {
//Code by Irae Carvalho http://about.me/irae
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
if('href' in curnode ) {
e.preventDefault();
location.href = curnode.href;
}
return false;
},false);
}
})(document,window.navigator,'standalone');
function showHidden(id) {
var div = document.getElementById(id);
if (div.style.display == 'none') {
div.style.display = '';
}else{
div.style.display = 'none';
}
return false;
}
var links = document.querySelectorAll('a');
links.forEach(function (el) {
el.addEventListener('click', function (e) {
e.preventDefault();
var divID = this.getAttribute('hide-id');
showHidden(divID)
})
})
<a hide-id="div1">Click here</a>
<div id="div1">
This is content
</div>
<br />
<br />
<a hide-id="div2">Click here</a>
<div id="div2">
This is content
</div>
The best solution I found to this was to add a check in the eventlistener to check if the href tag was not empty:
if(curnode.href != '' )
And only after that firing the redirect:
location.href = curnode.href;

Safari trigger pop state twice and when page load

$(function ($) {
if (window.history && window.history.pushState) {
window.addEventListener("popstate", function (event) {
var hashLocation = location.hash;
var hashSplit = hashLocation.split("#!/");
var hashName = hashSplit[1];
if (hashName !== '') {
var hash = window.location.hash;
if (hash === '') {
var agree = confirm("Are you sure you want to leave?");
if (agree) {
'do something
} else {
'do something
}
}
}
});
window.history.pushState('forward', null, './Payment.aspx');
}
I would like to call the webmethod when user click browser's back button. These code working fine at all other browser except on Safari 5.1.7. The confirmation message should popup when user click browser back button but now popup when page load. Is it possible for me to used the current code to achieve this?

what is the best and perfect solution to disable hover on mobile devices like iphone using jquery?

i have a big problem with the hover event on mobile phone like iphone, and you have tap two time to go to some link i find a code on internet to disable hover the code:
$(document).ready(function() {
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});
});
that code is work fine but is come with another problem, the problem is any link with target="_blank" This has its flaws. If you click a link with target="_blank" it will open in the same window AND in a new window.
any one can give me a perfect solution to disable hover effect from iphone or any mobile device,
thank you
You can try this:
$(document).ready(function() {
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
if (el.attr('target') == '_blank') {
window.open(link);
} else {
window.location = link;
}
return false;
});
});

Javascript Event.originalEvent.path IE8 error

This code is for collapsing a panel in bootstrap.
e.originalEvent.path in IE is not working.
$(document).on('click', '.panel-heading.clickable', function(e) {
var $this = $(this);
if($(e.originalEvent.path[0]).attr("href") != "#" && $(e.originalEvent.path[0]).is("a") && !$this.hasClass('panel-collapsed')){
return false;
}
if (!$this.hasClass('panel-collapsed')) {
$this.parent().children('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.parent().children('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
}
);
It is working on google chrome but in IE it does not work.
Is there available workaround for e.originalEvent.path?
Thanks!

Add to favourites/bookmarks bar in Safari (CMD +D)

From much research, I have found nothing that supports the idea that Safari even supports this feature. From how much API there is for Safari, I can't believe that they wouldn't allow this to be embedded with their browser.
If anyone has any ideas of how this can be achieved without using some horrible plugin that doesn't actually work, it would be greatly appreciated.
So far, I have taken care of the main browsers by using this:
$("#bookmark").click(function() {
var url = this.href;
var title = this.title;
if($.browser.mozilla) {
window.sidebar.addPanel(title, url,"");
} else if($.browser.msie || $.browser.webkit) {
window.external.AddFavorite(url, title);
if($.browser.safari) {
alert("Balls");
}
} else if($.browser.opera ) {
$(this).attr("href", url);
$(this).attr("title", title);
$(this).attr("rel", "sidebar");
$(this).click();
} else {
//alert("Please press CTRL+D and click the link to bookmark it in your browser.");
}
return false;
});
Unfortunately Safari does not allow you to add a bookmark through javascript (along with IE6/IE8) and possibly a few others. It's some sort of attempt at fighting off spam/unwanted websites adding bookmarks to your browser onload.
Try a script like this, it's pretty much all you can do...
$("a.bookmark").click(function(e) {
if ($.browser.opera == false) {
e.preventDefault();
var url = this.href;
var title = this.title;
if ($.browser.mozilla == true) {
window.sidebar.addPanel(title, url, '');
return false;
} else if($.browser.msie == true) {
window.external.AddFavorite( url, title);
return false;
} else {
alert('Please use CTRL + D to bookmark this website.');
}
}
});
Info from Apple forums (https://discussions.apple.com/thread/1364657?start=0&tstart=0)

Categories

Resources