Can anyone point the issue why I am unable to get the alert popup on first click? It works only every second click (i.e. doesn't work on odd number click and works on even number click).
HTML:
<div class="slider">
<div class="slider-box ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 50%;"></a>
</div>
</div>
jQuery:
$(document).ready(function() {
$("a.ui-slider-handle").click(function() {
alert('test');
});
});
I also tried but didn't work
$(document).ready(function() {
$("a.ui-slider-handle").mousedown(function() {
alert('test');
});
});
Hmm... have you tried to prevent the default anchor behavior? http://jsbin.com/IfirEBOj/2/edit
$("a.ui-slider-handle").click(function( event ) {
event.preventDefault();
alert('test');
});
In any case you should get familiar with some debugging tool and see what errors it throws. If any...
add: return false; to your command
$(document).ready(function() {
$("a.ui-slider-handle").click(function() {
alert('test');
return false;
});
});
Have you tried to void the href attribute?
$(document).ready(function(){
$("a.ui-slider-handle").attr('href', 'javascript:void(0)').click(function(){
alert('test');
});
});
Try this:
<div id="slider"></div>
$(document).ready(function () {
$("#slider" ).slider();
$("#slider").on('click','a',function () {
alert('test');
});
});
check the fiddle:
http://jsfiddle.net/3zEX5/2/
UPDATE:
I think you are clicking on the div first and then the anchor tag comes near it i.e the small slider button. so you are feeling as it is working on odd click, if you can clearly tell you requirment then we can suggest you some way
Related
I want to prevent magnificPopup dialog from displaying when I click a button and when no checkboxes are checked.
Here is what I have tried already:
$('[id$=DeleteSelectedItems]').click(function (evt) {
if ($("#datatable :checked").length == 0) {
evt.preventDefault();
$.magnificPopup.remove(); //prevent dialog popup if no checkbox selected
}
});
The above code is doing what I want except $.magnificPopup.remove(); is not a valid function.
So although $.magnificPopup.remove(); prevents the popup from showing, (because it breaks the JavaScript!) it is not a valid function and I get an error in my console when testing this. I have tried $.magnificPopup.destroy(); and $.magnificPopup.stop(); but they are also not valid.
Many thanks for any help you can provide with this!
Thanks for your replies. I ended up using $.magnificPopup.close(); but, importantly, I put my code after the initialisation of magnific popup. Previously, I had it before the initialisation. Stupid mistake! So my working jQuery is:
// initialise magnific popup
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true
});
//don't fire the delete button if no checkbox selected in table with id of datatable
$('[id$=DeleteSelectedItems]').click(function (evt) {
if ($("#datatable :checked").length == 0) {
evt.preventDefault();
$.magnificPopup.close(); //prevent dialog popup if no checkbox selected
}
});
Many thanks for pointing me in the right direction! : )
Maybe evt.preventDefault(); is enough to stop the popup showing, and you can remove the line of code $.magnificPopup.remove(); avoiding in this way the error in the console.
This is how to destroy magnificPopup according to the HTML markup in the snippet below:
$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');
// initialize magnificPopup
function initMagnificPopup() {
$('.thumbs').magnificPopup({
type: 'image',
delegate: 'a',
gallery: {
enabled: true
}
});
}
// destroy magnificPopup
function destroyMagnificPopup() {
$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<button type="button" onclick="initMagnificPopup()">initialize magnificPopup</button>
<div class="thumbs">
<a href="https://picsum.photos/id/237/800.jpg" target="_blank">
<img src="https://picsum.photos/id/237/100.jpg">
</a>
<a href="https://picsum.photos/id/1003/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1003/100.jpg">
</a>
<a href="https://picsum.photos/id/1011/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1011/100.jpg">
</a>
<a href="https://picsum.photos/id/1025/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1025/100.jpg">
</a>
</div>
<button type="button" onclick="destroyMagnificPopup()">destroy magnificPopup</button>
I'm working on this theme and I wanted to create this simple nav that would fadeIn on click and fadeOut on click.
<div id="mobile-nav">
<a class="exit"></a>
<div class="logo"></div>
<div class="center">
<li class="skincare">Skincare</li>
<li class="makeup">Makeup</li>
<li class="kits">Kits</li>
<li class="help">Help</li>
</div>
</div>
<script>
$(function() {
$('.exit').click(function(){
$('#mobile-nav').fadeOut();
});
}
</script>
However it doesn't seem to work when I try it out. Other types of script like swiper.js works, but this simple script doesn't work. Is there anything wrong with what I'm doing? I've been checking for errors and jQuery is loading as well.
Live preview here - http://magazine.eldecosmetics.com/
It should be
$(function() {
$$('.exit').invoke('observe', 'click', function() {
$('#mobile-nav').toggleClass('fadedOut');
});
});
Your code is
$(function() {
$$('.exit').invoke('observe', 'click', function() {
$('#mobile-nav').toggleClassName('fadedOut');
});
}
In Magento try to avoid jquery conflicts you must use jQuery instead of $ symbol.
For example i have mentioned the correct coding
jQuery(function(){
$$('.exit').invoke('observe', 'click', function() {
jQuery('#mobile-nav').toggleClass('fadedOut');
});
});
Hope it will helps to you guys.
here is my code
$(document).ready(function(){
$("#work").click(function(){
$("#container").load("about/work.html");
});
$("#profile").click(function(){
$("#container").load("profile.html");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a id="work" href="">work</a></li>
<li><a id="profile" href="">profile</a></li>
</ul>
<div id="container"></div>
when i click on work or profile requested page just flashes in container div and sometime stays in but if i run same script on button click it loads page without any problem. How can i make it work with li ?
Add event.preventDefault
$(document).ready(function(){
$("#work").click(function(event){
event.preventDefault(); //changed here
$("#container").load("about/work.html");
});
$("#profile").click(function(event){
event.preventDefault(); //changed here
$("#container").load("profile.html");
});
});
There are 2 things to be changed here.
1) Try not leaving your href value empty. If you do then the browser will redirect to the same page. Give it a value # if possible href="#"
2) There is preventDefault() function missing from your <a> click event
$(document).ready(function(){
$("#work").click(function(e){
e.preventDefault();
$("#container").load("about/work.html");
});
$("#profile").click(function(e){
e.preventDefault();
$("#container").load("profile.html");
});
});
try to on click
$(document).ready( function() {
$("#work").on("click", function() {
$("#container").load("about/work.html");
});
});
I'm have a function which shows a div when the user types something but it interferes with a page where I have an input. I would like to disable the script when the part of the page with the div that holds the inputs is visible so that when the user is typing in the input the .editPro doesn't show().
HTML
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;">
<input type='text' />
</div>
<div class="editPro" style="width:100%;height:100%;position: fixed;display:none;background:red;"></div>
<div id='edit'>edit</div>
JAVASCRIPT
$('#edit').click(function (event) {
$(".green").show("slow");
});
$(document).keypress(function (event) {
$(".editPro").show("slow");
});
here is a Fiddle to illustrate the problem
Just check the target node. If it is not an input, then execute your script
$(document).keypress(function (event) {
if(event.target.nodeName !== "INPUT"){
$(".editPro").show("slow");
}
});
Fiddle
I have done some changes in your code hope this helps
try this FIDDLE
http://jsfiddle.net/venkat_asman/Un8yv/2/
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;z-index:100;">
</div>
<div class="editPro" style="width:100%;height:100%;position:fixed;display:none;background:red;z-index:100;"></div>
<div id='edit'>edit</div>
<input style="z-index:1000;display:none;position:fixed;" type='text' />
and JS is
$('#edit').click(function(event){
$(".green").show("slow");
$("input").show();
$('#edit').hide();
});
$(document).keypress(function(event){
$(".editPro").show("slow");
});
I'm not sure if I understand the question correctly, but maybe this is what you are looking for (it prevents the red div from appearing when you type inside a <input/>):
$('input').keypress(function (event) {
event.stopPropagation();
});
http://jsfiddle.net/Un8yv/1/
How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.
You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin
Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});
Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});
Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);