I just wonder how I can disable and enable a jQuery event? I have this code which is already working under page ready:
$(".panzoom").panzoom({
$zoomIn: $(".zoom-in"),
$zoomOut: $(".zoom-out"),
$zoomRange: $(".zoom-range"),
$reset: $(".reset")
});
<button type="button" id="select">
<img src="img/svg/painter/anchor.svg">
</button>
I want to change it so that when I click in the #select button the .panzoom is temporarily disabled. How can I do this?
Looks like there is already support for this in the panzoom library:
var panzoomDisabled = false;
$('#select').on('click', function() {
if (panzoomDisabled) {
$(".panzoom").panzoom("enable");
} else {
$(".panzoom").panzoom("disable");
}
panzoomDisabled = !panzoomDisabled;
});
<button type="button" id="select">
<img src="img/svg/painter/anchor.svg">
</button>
Related
I have a disabled button and i want it to show a tooltip but change it when i enable it again. How do i get this to work i can only use HTML, javascript and css.
This is the button
<div class="right-item"><button class="button ripple" id="print" onclick="printDiv('qr-code')" disabled="disabled">Drucken</div>
Use title
function toggle() {
var button = document.getElementById('button');
if (button.disabled) {
button.disabled = false;
button.setAttribute('title', 'Enabled title');
} else {
button.disabled = true;
button.setAttribute('title', 'Disabled title');
}
}
<button onclick="toggle()">Toggle enable/disable</button>
<button disabled title="Enabled title" id="button">Hover on me</button>
<button disabled title="Hello">Hover on me</button>
This code will show same tool tip for both disabled or enabled button. Have a function which checks the status of button and apply the title value based on it.
You need to add Javascript when you enable button.
In jQuery:
$('#yourElementId').attr('title', 'your new title');
In Javascript:
var myBtn= document.getElementById("yourElementId");
myBtn.setAttribute('title','mytitle');
I am using jquery to disable a button in materialize css. According to documentation here, the way to disable button is simply by adding a class named 'disabled'.I think by simply add class 'disabled', the button will automatically disabled, but it is not. Here is my code:
html:
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">
jquery:
$('#submit-btn').off().on('click', function(){
$('#submit-btn').addClass('disabled');
});
Try this
$('#submit-btn').removeClass("waves-effect waves-light submit").addClass('disabled');
Working Demo
$(document).ready(function() {
$('#submit-btn').on('click', function() {
$(this).removeClass("waves-effect waves-light submit").addClass('disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">
What about
$('#submit-btn').prop('disabled', true).addClass('disabled');
To disable the button using javascript.
eleme.classList.add('disabled');
To enable the button using javascript.
elem.classList.remove('disabled');
E.g:
let btn = document.getElementById('submit-btn');
btn.classList.add('disabled'); //This will disable the button
to disable button you can use
$("#submit-btn").attr("disabled", "true");
Create a variable which holds the button (say submitBtn), then add an event listener (say on DOMContentLoaded), then have the function disable the button with submitBtn.disabled = true;
I would like to hide the div (which is "hide-div") as soon as the user cliks on the button when there is a navigation to the same page. Please help me on this. Thanks
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>
Using Vanilla JavaScript. Although I recommend using event handler instead of inline JS, this is in view of your code.
Hide the element using style.display
You can redirect the page after hiding the button using window.location
function setLocation(loc) {
document.getElementById('hide-div').style.display = 'none';
window.location = loc;
}
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('http://google.com')"><span>'Add to Cart'</span></button>
</div>
You can do this by simple jquery
<script>
jQuery(document).ready(function($) {
$(".button").click(function(){
$("div").fadeOut();
});
});
</script>
Using jQuery you can do this in your onclick:
$('#hide-div').hide()
http://api.jquery.com/hide/
Use jQuery to hide it:
$('#hide-div button').click(function(){
$(this).parent().hide();
});
I assume you have jQuery added to your page already. So, something like this maybe:
$('#hide-div .button').on('click', function() {
$('#hide-div').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>
I have the following DOM structure.
<div class="purchase-section">
<div class="purchase">
<input type="submit" id="add-to-cart" class="btn" name="add" value="Add to Cart"> <span class="rc-or">Or</span>
<button class="btn rc-button" id="btn-buy-now" onclick="event.preventDefault(); window.location='https://example.com?productId=681';">Buy Now - 3 installment</button>
</div>
</div>
The button element is added by a script which runs after the page has loaded. I need to change the onclick handler for this button. I tried following but it doesn't work.
$(document).ready(function() {
$('.purchase-section').on('change', '.purchase', function(){
$("#btn-buy-now")[0].onclick = null;
$("#btn-buy-now").click(function() { alert("done") });
});
});
Can anyone please help me with this?
Use $("#btn-buy-now").removeAttr("onclick"); to remove onclick completely and then delegate event to dynamically added element.
$("static_parent").on("event", "dynamic_element", function () {
});
$(".purchase").on("click", "#btn-buy-now", function () {
/* code */
});
Try this:
$(document).ready(function() {
$(".purchase-section").find("#btn-buy-now").removeAttr('onclick');
$(".purchase-section").find("#btn-buy-now").click(function(e) {
e.preventDefault();
alert("done");
});
});
However, it depends on when this element is loaded. You will need to ensure your button is already in the DOM before this script executes, otherwise this may not be effective.
Well, in my HTML page I have 6 buttons having values 1,2,3,4,5 and the 6th button has the value "disable".
All I want to do is disable a specific button by clicking the "disable" button using jQuery. For example if I press the 3rd button and then immediately click the disable button, button 3 should be disabled and if i click 4th button and then immediately click the disable button then 4th button should be disabled.
thanx in advance.
Buttons
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="dis">Disable</button>
And some jQuery
$('.btn').on('click', function() {
$(this).addClass('active').siblings('button').removeClass('active');
});
$('.dis').on('click', function() {
$('.btn.active').prop('disabled', true);
});
and a
FIDDLE
You can try this,
$('button').on('click',function(){
// your code;
$(this).prop('disabled',true);
});
HTML
<button class="mybutton">1</button>
<button class="mybutton">2</button>
<button class="mybutton">3</button>
<button class="mybutton">4</button>
<button class="mybutton">5</button>
<button class="disable">Disable</button>
SCRIPT
$(function(){
$('.mybutton').on('click',function(){
$(this).addClass('disableMe');
});
$('.disable').on('click',function(){
$('.disableMe').prop('disabled',true);
});
});
Working Fiddle