I have 2 buttons in the card, like the below.
<div class = "card">
<button class ="play"> Play </button>
<button class ="pause"> PAuse </button>
</div>
When I press PLay button, Pause should be enabled. Play button should be disabled.
After Pressing Play,If I press Pause button, Play button should be Enabled and Pause button should be disabled.
The one thing, We cannot directly press the Pause button, without pressing the Play button.
How could I write a code to show the conditions Play and Pause in JS.
Could anyone please help?
Thanks
Well, here is the vanilla Javascript version.
Html:
<div class = "card">
<button class ="play"> Play </button>
<button class ="pause"> Pause </button>
</div>
Javascript:
const playButton = document.querySelector('.play');
const pauseButton = document.querySelector('.pause');
// By default make pause button disabled
pauseButton.disabled = true;
playButton.addEventListener('click', () => {
pauseButton.disabled = false;
playButton.disabled = true;
});
pauseButton.addEventListener('click', () => {
playButton.disabled = false;
pauseButton.disabled = true;
});
This will work.
Here is the codepen
Set by default disabled="true" for .pause button and continue with set click event for two buttons
$(".play").on("click", function(){
$(this).prop("disabled", true );
$(".pause").prop("disabled", false );
})
$(".pause").on("click", function(){
$(this).prop("disabled", true );
$(".play").prop("disabled", false );
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "card">
<button class ="play"> Play </button>
<button class ="pause" disabled="true"> PAuse </button>
</div>
If you don't have controll on your DOM and can't add disabled="true" for .pause, you can use $(".pause").prop("disabled", true ) before define events
$(".pause").prop("disabled", true );
$(".play").on("click", function(){
$(this).prop("disabled", true );
$(".pause").prop("disabled", false );
})
$(".pause").on("click", function(){
$(this).prop("disabled", true );
$(".play").prop("disabled", false );
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "card">
<button class ="play"> Play </button>
<button class ="pause"> PAuse </button>
</div>
Consider the following.
$(function() {
$(".btn").click(function(e) {
if ($(this).hasClass("play")) {
$(this).toggleClass("play pause").html("⏸ Pause");
// Trigger Play event
} else {
$(this).toggleClass("play pause").html("⏵ Play");
// Trigger Pause Event
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<button class="btn play">⏵ Play</button>
</div>
This retains the one button yet changes the Class and Content of the button as needed.
Symbol Reference: http://www.scrollseek.com/wd/html_symbols_complete.html
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');
Brief Description: Need to switch the position of the div's when i click on them.
Requirement: If i click on hello,world these 2 should switch , if i click on hello2,world2 those 2 will switch.
Here is my code:
Note - i have switched the div's with a checkbox, note - only the top one is switching, i want to achieve the switching on clicking
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
alert("div swapped");
})
$('#check').change(function () {
//alert('check clicked');
if ($(this).is(':checked')) {
$('#div1').insertAfter($('#div2'));
} else {
$('#div1').insertBefore($('#div2'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="div1">Hello</div>
<div id="div2">World</div>
</div>
<br>
<div>
<div id="div1">Hello2</div>
<div id="div2">World2</div>
</div>
<br>
click me to switch Hello,World<input type="checkbox" name="check" id="check"/>
If i click on hello,world these 2 should switch , if i click on hello2,world2 those 2 will switch.
Please help.
If I get you right this is what you're looking for:
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
alert("div swapped");
})
$('.click').click(function (evt) {
var $div = $(evt.target).closest('.switch');
$div.next('.switch').after($div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
<div class="switch">Hello</div>
<div class="switch">World</div>
</div>
<br>
<div class="click">
<div class="switch">Hello2</div>
<div class="switch">World2</div>
</div>
I'm trying to enable/disable some buttons, using another toggle button.
I'm trying to do it by adding a class 'active' to the buttons, and targeting only the buttons with the class.
Here is an example (That doesn't work):
$('#on-off').on('click', () => {
$('#test').addClass('active');
$('#indication').text('Test is active');
});
$('#test .active').on('click', () => {
$('#result').text('Test was clicked!');
});
<button id='on-off'>Toggle Test</button>
<div id='indication'></div>
<button id='test'>Test</button>
<div id='result'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The full code is here.
You should set the disabled property to enable or disable it. You can use .prop() method
Also note #test .active will not work as its descendant selector and button has no child element.
$('#on-off').on('click', () => {
$('#test').prop('disabled', !$('#test').prop('disabled'));
$('#indication').text('Test is active');
});
$('#test').on('click', () => {
$('#result').text('Test was clicked!');
});
<button id='on-off'>Toggle Test</button>
<div id='indication'></div>
<button id='test'>Test</button>
<div id='result'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a modal which when open gets this jquery statement:
$(".modal-inner").on("click", function(e) {
e.stopPropagation();
});
The trouble is, nested within this modal body, I have a child element that I'm using Clipboard.js on so a user may copy text. HTML as follows:
<div class="modal-inner"> <!-- stopPropagation applied to parent -->
<div class="modal-close" for="modal-1"></div>
<h1>Let's Connect</h1>
<i class="e"></i>
<p>You can reach me at:</p>
<p class="em">
<input id="emailToCopy" value="this.email#gmail.com"/>
<!-- This grandchild's functionality is now disabled -->
<button class="clip-btn" id="thisClip" data-clipboard-action="copy" data-clipboard-target="#emailToCopy" value="clipBtn">copy email</button>
</p>
</div>
The stopPropagation on .modal-inner keeps the modal from closing if the user clicks inside. This in turn disables my button which executes a script when clicked. I need this button to bypass the stopPropagation from the parent element.
You could just check if the button is clicked, and stop propagation conditionally
$(".modal-inner").on("click", function(e) {
if ( $(e.target).closest('#thisClip').length > 0 ) { // this is the button
e.stopPropagation();
}
});
This is probably not elegant but I believe will work:
$(".modal-inner").on("click", function(e) {
if (!$("button").is(":hover")) e.stopPropagation();
});
You may try testing the event target id and tagName:
$('.modal-inner').on("click", function(e) {
//
// you may also use:
// if ( $(e.target).is('#thisClip') ) {
//
if (e.target.id = 'thisClip' && e.target.tagName == 'BUTTON') {
e.stopPropagation();
console.log('You clicked the button: stop propagation');
} else {
console.log('You did not click the button');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-inner"> <!-- stopPropagation applied to parent -->
<div class="modal-close" for="modal-1"></div>
<h1>Let's Connect</h1>
<i class="e"></i>
<p>You can reach me at:</p>
<p class="em">
<input id="emailToCopy" value="this.email#gmail.com"/>
<!-- This grandchild's functionality is now disabled -->
<button class="clip-btn" id="thisClip" data-clipboard-action="copy" data-clipboard-target="#emailToCopy" value="clipBtn">copy email</button>
</p>
</div>
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>