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!
Related
Please Guys i need assist with this project:
I am a bit confused rn, i wanted this piece of code to display a specific styled div modal designed for a specific browser. What i want is: if browser is firefox modal displays "On My Way Home", styled with a class .home. else if my browser is chrome, display a modal "Home Now"
Thanks
$(function(){
function modal() {
var options = {
trigger: '.lp-download-btn',
selectorClose: '.close',
selectorContent: '#j-download-instructions',
selectorLinks: 'a',
chromes: '.chrome'
};
var $body = $(options.selectorContent);
var $chromeBrowser = $(options.chromes);
$('body').on('click', options.trigger, function() {
$body.css({
height: '100%',
width: '100%',
visibility: 'visible'
});
})
$body.on('click', function(e){
if (this == e.target) {
$body.hide();
return false;
}
});
$body.on('click', options.selectorClose, function(){
$body.hide();
return false;
});
$body.on('click', function() {
$chromeBrowser.css({
display: 'block'
})
})
}
function browserDetection() {
// IE or not
if (navigator.userAgent.search("MSIE") >=0 ){
return modal();
}
// Chrome browser
else if (navigator.userAgent.search("Chrome") >= 0) {
return modal();
}
// Firefox Browser
else if (navigator.userAgent.search("Firefox") >= 0) {}
// Safari browser
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {}
// Opera browser
else if (navigator.userAgent.search("Opera") >= 0) {}
}
browserDetection();
});
You can perform user agent sniffing to possibly detect which browser someone is in, although it does have drawbacks https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent but in this case you can use that to do what you would like.
My following code is working fine in windows desktop browser but this code not working in iPhone Safari browser.
Code:
$(document).on("keydown", ".iselectinput", function(e) {
if (e.keyCode == 8 && $(this).val() == '') {
$(this).prev().find("li.ioption:last").remove();
}
});
$(document).on('click', ".iselect .dropdown-menu a", function() {
var loc1 = $(this).parent().prev().prev();
var loc2 = $(this);
var loc3 = loc1.find("li.ioption");
var isInList2 = !!$(loc3).filter(function() {
return $(this).text() == loc2.text();
}).length;
if (!isInList2) {
loc1.append('<li class="ioption">' + $(this).text() + '<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>');
loc2.remove();
}
});
How to convert this code to iPhone safari browser support code. I think jQuery prev() and .filter not working in iPhone safari browser.
I have some code for a mega navigation and I need it to hover to drop the menu on desktop and click to the drop the menu on mobile.
Here is a snippet of code that I'm having problems with:
if( $('js-full-menu').hasClass('js-touch-menu') ) {
(function(megaNavTray){
menu.on('click', function(e){
e.preventDefault();
var wasOpen = megaNavTray.hasClass('is-active');
megaNavTrays.find('.js-mega-nav-tray').removeClass('is-active');
if(!wasOpen) {
megaNavTray.addClass('is-active');
megaNavTrays.addClass('is-active');
} else {
megaNavTrays.removeClass('is-active');
}
});
})(megaNavTray);
} else {
(function(megaNavTray){
menu.hoverIntent( function(){
megaNavTray.addClass('is-active');
megaNavTrays.addClass('is-active');
var wasOpen = megaNavTray.hasClass('is-active');
megaNavTrays.find('.js-mega-nav-tray').removeClass('is-active');
if(wasOpen) {
megaNavTray.addClass('is-active');
megaNavTrays.addClass('is-active');
} else {
megaNavTray.removeClass('is-active');
}
});
})(megaNavTray);
var fullNav = $('.js-full-menu');
fullNav.hoverIntent( function() {}, function() {
$('.js-mega-nav-tray').removeClass('is-active');
megaNavTrays.removeClass('is-active');
});
}
Basically the problem is that with the if else statement removed leaving only the following code, the preventdefault works fine. Using the full code above the links direct to their pages instead of dropping the meganav on click.
(function(megaNavTray){
menu.on('click', function(e){
e.preventDefault();
var wasOpen = megaNavTray.hasClass('is-active');
megaNavTrays.find('.js-mega-nav-tray').removeClass('is-active');
if(!wasOpen) {
megaNavTray.addClass('is-active');
megaNavTrays.addClass('is-active');
} else {
megaNavTrays.removeClass('is-active');
}
});
})(megaNavTray);
Any ideas why the if / else would be stopping the preventdefault from working?
Thanks in advance!
if( $('js-full-menu').hasClass('js-touch-menu') )
should be
if( $('.js-full-menu').hasClass('js-touch-menu') )
you forgot the . in the class selector.
I may be wrong, but try putting
function(event)
instead of
function(e)
Solved an issue for me in FF the other day.
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;
}
});
I have the following bookmark Javascript.
function bookmark(title, url) {
if(document.all) { // ie
window.external.AddFavorite(url, title);
}
else if(window.sidebar) { // firefox
window.sidebar.addPanel(title, url, "");
}
else if(window.opera && window.print) { // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click(); // this.title=document.title;
}
}
AND HTML
<a href="javascript:bookmark('title of the page', 'http://www.domain.com');" class="bookmark" >
And the problem is that is working only in Internet Explorer. Is not working in firefox, opera, chrome. Also i heard that firefox have deprecated the function window.sidebar.addPanel, is there any way to fix all of this? PLEASE NO JQUERY.
Here's how to use the answer from How do I add an "Add to Favorites" button or link on my website? without the jQuery event binding.
function bookmark(title, href) {
if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(title,href,'');
} else if(window.external && ('AddFavorite' in window.external)) { // IE Favorite
window.external.AddFavorite(href,title);
} else if(window.opera && window.print) { // Opera Hotlist
this.title=title;
return true;
} else { // webkit - safari/chrome
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
}
There are some problem with the above solution.
window.sidebar.addPanel("", "","");
The above code may not work in all Mozilla Firefox versions.
So I wrote the bookmaking code as below.
It will work fine in all browsers except webkit - safari/chrome.
Add "a" tag as shown below
<a id="BookmarkMe" href="">Bookmark</a>
And used below Jquery
$(function () {
$('#BookmarkMe').click(function (e) {
var bTitle = document.title, bUrl = window.location.href;
if ($.browser.mozilla || $.browser.opera) { // Mozilla Firefox or Opera
if (window.sidebar.addPanel) {
e.preventDefault();
window.sidebar.addPanel(bTitle, bUrl, "");
}
else {
$('#BookmarkMe').attr("href", bUrl);
$('#BookmarkMe').attr("title", bTitle);
$('#BookmarkMe').attr("rel", "sidebar");
}
} else if ($.browser.msie) { // IE Favorite
e.preventDefault();
window.external.AddFavorite(bUrl, bTitle);
} else { // webkit - safari/chrome
e.preventDefault();
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
});
});