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();
});
Related
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!
Is it possible to disable middle mouse click paste in an iframe
<iframe id="ck_id"></iframe>
I have disabled the context menu using:
document.getElementById("ck_id").contentWindow.document.oncontextmenu = function(){alert("Disabled context menu"); return false;};
Use jquery 'mousedown':
$(document).ready(function () {
$("#ck_id").contents().find("body").on('mousedown', function (e) {
if (e.which == 2) {
e.preventDefault();
//Do your work
}
});
});
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 have a javascript popup context menu with a button below it with close. That button when pressed close will continue to the next page. If a user dont click the close button and decides to click outside the popup box it will not redirect the user. What function for javascript can i add if a user click outside the box it will redirect them without clicking the close button inside the box. using a osx-modal-content plugin
How its triggered*
<input type='button' name='osx' value='Click Here To Enter The Website!' class='osx demo'/></a>
plugin page (link)
OSX STYLE DIALOG ** OSX STYLE DIALOG ** OSX STYLE DIALOG **
http://www.ericmmartin.com/projects/simplemodal-demos/
This is something that i have for the close function**
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
This is how you can do stuff on close:
$("#element-id").modal({
onClose: function () {
window.location.href = "http://stackoverflow.com";
}
});
If you had an element added like:
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
Change that to
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal({
onClose: function () {
window.location.href = "http://stackoverflow.com";
}
});
return false;
});
I am trying to achieve the following behavior:
When link "Option" with DivA id is clicked, the DivB should show up with fade in effect. If I click the link "Option" again as well as if clicked anywhere else in the page except of the DivB inside, the DivB should dissapear again.
This is my HTML code:
Option
<div id="DivB">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
This is my JQuery code. It is wrong, if the DivB is hidden and I click anywhere in the document, the DivB appears.
<script type="text/javascript">
$(document).click(function () {
$("#DivB").fadeToggle("200");
});
$("#DivA").click(function () {
e.stopPropagation();
return false;
});
</script>
Where's the mistake? Thanks for help.
Live Demo
$(function() {
$(document).on("click",function (e) {
if (e.target.id=="DivA") {
$("#DivB").fadeToggle(200);
e.stopPropagation();
return false;
}
else if ($("#DivB").is(":visible")) {
$("#DivB").fadeOut(200);
}
});
});
<script>
$(document).on('click', function( evt ) {
evt.stopPropagation();
if ( evt.target.id == 'DivA' || $('#DivB').is(':visible'))
$('#DivB').fadeToggle();
});
</script>
Fiddle: http://jsfiddle.net/nR6e3/1/
$(document).on("click",function () {
if ($("#DivB").is(":visible")){
$("#DivB").fadeOut(200);
}
});
$("#DivA").click(function (e) { // you need place 'e'(for event handling)
$("#DivB").fadeIn(200);
e.stopPropagation();
return false;
});
$(document).mouseup(function(e) {
var container = $("your selector here");
// if the target of the click not the container or not a descendant of that container
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});