On my site links in submenu (parent element - TERAPIA MANUALNA) do not work. The problem only appears after left click. Right click and 'open in new tab' works great. What cause the problem? I am using Divi template.
My site
$('.menu-item-has-children').on('click', function(e) {
$('menu-item-has-children').toggleClass("submenu-open"); //you can list several class names
e.preventDefault();
});
This code is causing that the up level link "Terapia manualna" won't open on left click... It is because the call of "e.preventDefault();" stops the following of the link!
I can't find the problem with the submenu links that fast and easy, but I guess that this has something to do with this function:
(function($) {
function setup_collapsible_submenus() {
var $menu = $('#mobile_menu'),
top_level_link = '#mobile_menu > .menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ( $(this).is(top_level_link) ) {
$(this).attr('href', '#');
$(this).next('.sub-menu').addClass('hide');
}
if ( ! $(this).siblings('.sub-menu').length ) {
$(this).on('click', function(event) {
$(this).parents('.mobile_nav').trigger('click');
});
} else {
$(this).on('click', function(event) {
event.preventDefault();
$(this).next('.sub-menu').toggleClass('visible');
});
}
});
}
There again is a "prevent default" on all children of the submenu as far as i can see...
Try to change that and test again!
Related
I have a pop up menu that appears when the users name is hovered over using onmouseeneter and the menu disapeers when onmouseleave is triggerd.
The problem i have is that on occasion the mouseleave is not triggered and the menu stays showing, which is ok but i require another check to see if mouse is within the div on mouse move. and also a click event to close the div if the click is outside of the div.
How can i check weather a click or a mousemove is within a div or not.
I have tried the following with no luck. allthough the code is fine i require another way.
<div id='overlay' class='overlay' style='display:none;'
onmouseover='showoverlay();' onmouseleave='removeoverlay();'> </div>
function showoverlay() {
var overlay=document.getElementById("overlay");
overlay.style.display="block";
overlay.style.zIndex="999";
overlay.style.opacity="1";
}
function removeoverlay() {
var overlay = document.getElementById("overlay");
overlay.style.opacity="0";
overlay.style.display="none"
overlay.style.zIndex="-999";
}
$(document).ready(function(){
$(document).mouse(function(e)
{
var subject = $("#overlay");
if(e.target.id != subject.attr('id') &&
!subject.has(e.target).length)
{
removeoverlay();
}
});
});
You can use is jQuery function like so:
$(function() {
$('ul').on('click', function (event) {
let target = $(event.target);
let handle = $(this).find('i');
let checkbox = $(this).find('input[type=checkbox]');
if (false === target.is(handle) && false === target.is(checkbox)) {
checkbox.prop('checked', !checkbox.prop('checked'));
}
});
});
I have a button that opens up a pop-up window for a contact form, but the pop-up is not scrolling on mobile, so I was just thinking that it might be easier to change the button for mobile only. Is there a way to plug in some code to make this work for now?
The code for the button is:
<a class="book-now call-popup" href="booking-form.html" title="">Book Now</a>
where if I take out "call-popup" it disables the popup and takes you to the url. Any way to set this up so that on mobile the "call-popup" is turned off/disabled?
EDIT:
Added the following
function checkWidth() {
if ($(window).width() < 758) {
$('#popup').removeClass('call-popup');
} else {
$('#popup').addClass('call-popup');
}
}
$(window).resize(checkWidth);
and
<a id="popup" class="book-now" href="booking-form.html" title="">Book Now</a>
But it is not working. I mean, when I inspect the page, it IS working correctly, but it is still calling the popup even when the class has been removed for some reason. And strangely enough, it is working on my fiddle, but not my site:
http://jsfiddle.net/5SM9u/51/
EDIT 2: Since it was asked, here is the popup js
/*=================== Book Now Popup ===================*/
$(".call-popup").on("click", function() {
$(".booking-popup").fadeIn();
return false;
});
$(".booking-popup").on("click", function() {
$(this).fadeOut();
return false;
})
$(".popup-inner, .datepicker").on("click", function(e) {
e.stopPropagation();
});
$(".booking-popup .close-btn").on("click", function() {
$(".booking-popup").fadeOut();
});
/*=================== Popup ===================*/
$(".call-popup-alert").on("click", function() {
$(".popup").fadeIn();
return false;
});
$(".popup").on("click", function() {
$(this).fadeOut();
return false;
})
$(".simple-popup-inner").on("click", function(e) {
e.stopPropagation();
});
$(".popup .close-btn").on("click", function() {
$(".popup").fadeOut();
});
When you click on 'financial roadshows' for example, it opens. But when I click again, it closes temporarily and then opens again. I tried looking for the answer, but I'm just a gigantic noob when it comes to this one. I hope someone can help me out!
This is the code I used:
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
wrapper = $('#services_blocks'),
link = $(this);
$('.open_div.selected').next(".desc_div").slideUp('slow', function() {
$(this).prev().removeClass('selected');
});
link.addClass("selected").next(".desc_div").slideDown("slow");
});
});
and here is my JSfiddle:
http://jsfiddle.net/59f29b1L/
This can be done much easier with jQuery's slideToggle.
http://api.jquery.com/slidetoggle/
$(".open_div").click(function(){
$(this).next(".desc_div").stop().slideToggle( "slow" );
});
Try it out: http://jsfiddle.net/59f29b1L/6/
To fire the click event only once take a look at this answer.
<script>
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected');
$(this).addClass("selected").next(".desc_div").slideUp("slow", function() {
$(this).prev().removeClass('selected');
});
}
else{ $(this).addClass("selected").next(".desc_div").slideDown("slow");
}
});
});
</script>
Fiddle : jsfiddle
The drop down works here , hope it helps.
Changes :
$('.open_div.selected').next(".desc_div.down").slideUp('slow', function() {
$(this).prev().removeClass('selected');
$(this).removeClass('down').addClass('up');
});
link.addClass("selected").next(".desc_div.up").slideDown("slow", function() {
$(this).removeClass('up').addClass('down');
});
and also added a class in the html
<div class="desc_div up">
It can be done as simple as this!! Cheers..
jQuery(document).ready(function($){
$(".desc_div").hide();
$(".open_div").click(function(){
$(this).next().slideToggle("slow");
});
});
FIDDLE:
$('.open_div').click(function(){
$('.desc_div').toggle().toggleClass('selected');
});
i changed your fiddle over here: http://jsfiddle.net/59f29b1L/8/
first of all, you have to change the html.
make all open_divs wrap around your desc_div.
then use this code:
$(document).ready(function () {
$(".desc_div").hide(); // this is used to initally hide all desc_div
$(".open_div").click(function () { // define the click function
$(".desc_div", this).stop().slideToggle("slow"); //slide up/down depending on current state
});
});
you can change the line
$(".desc_div").hide();
to
$(".desc_div:gt(0)").hide();
Updated script of yours brother. I only add few changes on slide up script. Hope this will help.
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
wrapper = $('#services_blocks'),
link = $(this);
$('.open_div.selected').next(".desc_div").slideUp('slow', function() {
$(this).prev().removeClass('selected');
});
if($(this).next(".desc_div").css('display')=='none'){
link.addClass("selected").next(".desc_div").slideDown("slow");
}
});
});
DEMO FIDDLE
On One click of button, it shows the div and on another click it hides the div.
<button type="button" id="first">Click Me!</button>
<div id="something">Something</div>
<script>
$(document).ready(function(){
$('#something').hide();
$prevIndex = 0;
$i = 0;
$('#first').click(function(){
var index = $('#first').index($(this));
if(index == $prevIndex)
{ // if same
$i = $i;
}else{ // if not same
$i = 0;
}
if ($i % 2 === 0) {
/* we are even */
/* do first click */
$('#something').show();
} else {
/* we are odd*/
/* do second click */
$('#something').hide();
}
$i++;
$prevIndex = index;
});
});
</script>
I'm new to Mootools and I have found that I have to use the click element but I'm not 100% sure where I am meant to put it in the below code:
function setInStockOption (labels, e) {
active = false;
labels.some (function (item,index) {
if(item.hasClass ('selected')) {
if(item.hasClass ('unavailable')) {
item.removeClass('selected');
item.addClass ('unselected');
active = true;
} else {
return true;
}
}
if(active) {
if (!item.hasClass ('unavailable')) {
e.target = this;
item.fireEvent ('click', e);
active = false;
return true;
}
}
});
}
window.addEvent('load', function(e) {
var labels = $$('div.option-radios label.radio');
setInStockOption(labels, e);
});
I basically need to add the class selected on click instead. At the moment this script is adding the selected class to the first child of Radio in the html and then when you click on others it'll add the class selected. I basically want all the classes to be unselected when the page loads
.
Any ideas?
You'll want something like this:
window.addEvent('domready', function(e) {
$$('div.option-radios label.radio').each(function(label, i) {
label.addEvent('click', function(event) {
event.target.toggleClass('selected');
});
});
});
Note that this uses the Array.each method instead of Array.some. The latter doesn't do what you expect. It then registers a click event on every label which simply toggles the selected class on the event target.
Then you can add other initialization code to the each loop and more logic to the click event handler.
I also used the domready event which is usually preferred over load since it fires earlier.
Here's a fiddle to play around with.
I have tried everything possible.. unminified all javascript, still can't get the map to load properly inside the tab.
Trying to use this custom code too with no success
jQuery('.tabs-shortcode > ul').bind('tabsshow', function(e, ui) {
if (ui && ui.panel) {
jQuery('.mapp-canvas', ui.panel).each(function() {
var id = jQuery(this).attr('id');
if (id) {
window[id].resize();
}
});
}
});
webpage: http://bit.ly/UTHskS
thanks in advance,
Andy
I think you might need to trigger the Resize event to the map when the tab opens.
google.maps.event.trigger(map, "resize");
I didn't try though, this code would solve the problem.
Please try this code.
jQuery('.tabs-shortcode > ul').bind('tabsshow', function(e, ui) {
if (ui && ui.panel) {
jQuery('.mapp-canvas', ui.panel).each(function() {
var id = jQuery(this).attr('id');
if (id) {
window[id].resize();
}
setTimeout(function(){
if (mapp0) {
google.maps.event.trigger(mapp0.getMap(), "resize");
}
}, 1000);
});
}
});