Develop Reference

Disable and Enable click event on div from button type

I'm building Simon colors game with jQuery and I'm trying to disable the click event while the game is off or the player clicked on the wrong color. I'd read on the internet about the .prop('disalbe', true) and about .attr('disabled', 'disabled') but rn both of them didn't work for me. I'm using divs and not buttons elements
<div class="container" id="container">
<div class="row">
<div type="button" id="green" class="btn green">
</div>
<div type="button" id="red" class="btn red">
</div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow">
</div>
<div type="button" id="blue" class="btn blue">
</div>
</div>
</div>
allButtons.click(function() { // CLICK EVENT LISTENER
const userChosenColour = this.id;
userClickedPattern.push(userChosenColour);
const userButton = $(`#${this.id}`);
userButton.fadeTo(100, 0.1, function() { $(this).fadeTo(500, 1.0); });
makeSound(this.id)
if (checkAnswer(userClickedPattern.length)) { // CONDITIONS TO CHECK THE CURRENT CLICK
if (userClickedPattern.length === gamePattern.length) {
title.text('Success')
setTimeout(function() {nextSequence()}, 1000);
}
return true;
} else {
// allButtons.attr('disabled',true);
title.text('Wrong');
makeSound('wrong');
flashBackground();
allButtons.prop('disabled', true);
setTimeout(function() {resetGame()}, 500);
return false;
}
});
rn the result is nothing happen. thank you for your help here !

You can set the CSS property pointer-events to none to prevent clicks.
allButtons.css('pointer-events', 'none'); // Disable clicks
allButtons.css('pointer-events', ''); // Re-enable

show and hide select options don't work on modal

I'm creating a website using flask, HTML, CSS, and Javascript. I would like to add a function that shows a hidden div when selecting a specific option(In this case, if users select '2' the hidden div is shown). However, this function doesn't work.
The first-page userssee
if select 1, show nothing
if select 3, show a hidden div. But it doesn't work
Please help it :( Thank you!
<style>
.hidden{
display: none;
}
.show{
display: block;
}
</style>
<div class="modal fade" id="modalupdate{{data.id}}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal">×</button>
<h4 class="modal-title">Update Information</h4>
</div>
<div class="modal-body">
<form action="{{ url_for('update_ticket') }}" method="POST" id="update_form">
<select id="location">
<option value="val1">1</option>
<option value="val2">2</option>
</select>
<div class="hidden" id="val22">hello</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#modalupdate{{data.id}}').on('hide.bs.modal', function() {
$(this).find('#update_form').trigger('reset');
$(this).find('#val22').trigger('reset');
});
$('select#location').on('change', function() {
if ($(this).val() == "val2") {
$("div#val22").removeClass("hidden");
$("div#val22").addClass("show")
} else {
$("div#val22").removeClass("show");
$("div#val22").addClass("hidden")
}
});
});
</script>

I am not a jQuery person, but it seems there is a lot of syntactical error in the code. It's the same with your "onChange" event and "Queryselector".
I have done the minimal changes in the syntax and get the result you want, you can definitely correct the rest of the code according to the standard that jQuery follows. -
here the corrected code [the onChange event for select#location querySelector]-
<script>
$(document).ready(function() {
let data = {
id: 2
};
$(`#modalupdate${data.id}`).on('hide.bs.modal', function() {
$(this).find('#update_form').trigger('reset');
});
$('select#location').on('change', function() {
if ($(this).val() == "val2") {
$("div#val22").show();
} else {
$("div#val22").hide();
}
});
});
</script>
Hope it helps.

Some Buttons and Hover Effect Disabled

I created an onboarding walkthrough tour for use in a SaaS App that is being loaded with A/B testing software. The tour automatically begins on initial page load. The user can close the tour at any time. I have used localStorage so the browser will recall at what point the user exits the page and that tour will start again at the further point in the tour. I also have a "replay" button that is disabled when the tour is running and enabled when the tour is finished or closed. The replay button's selector is ".tstour-replay". I am animating the movement of the tour steps by adding a class that is using CSS3 #keyframes rules and then delaying the removal of the class so that the animation will repeat if the user goes back and uses that Next animation again. Those are referred to as "popover-ani1", "popover-ani2" and so on.
I am having an issue that is not consistently happening so I cannot find a pattern that explains why it's happening. Sometimes, the Next and Back buttons of the individual tour modals, referred to in the code as #popoverid1, #popoverid2, and so on or #popoverback1, #popoverback2, and so on, will be disabled. They do not respond to clicks and they both have CSS hover effects that do not work properly. However, the close button, .popover-close, always works. I cannot figure out why sometimes the Next and Back buttons are just completely unclickable and lose their interactivity while the Close button is always fine.
I am fairly new to JavaScript and jQuery.
Here's my JavaScript code:
function tourFunction() {
$(".tstour-replay").addClass("tstour-replay-disable");
$("#tstour-start").click(function(){
//if clicked, do nothing
});
$("#popoverid1").click(function() {
$(".popover1").addClass("popover1-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover1").removeClass("popover1-ani");
}, 250);
});
$("#popoverid2").click(function() {
$(".popover2").fadeOut(50);
$(".popover3").delay(50).fadeIn(50);
});
$("#popoverback2").click(function() {
$(".popover2").addClass("popoverback2-ani").delay(200).fadeOut(50);
$(".popover1").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover2").removeClass("popoverback2-ani");
}, 250);
});
$("#popoverid3").click(function() {
$(".popover3").addClass("popover3-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popover3-ani");
}, 250);
});
$("#popoverback3").click(function() {
$(".popover3").addClass("popoverback3-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popoverback3-ani");
}, 250);
});
$("#popoverid4").click(function() {
$(".popover4").addClass("popover4-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popover4-ani");
}, 250);
});
$("#popoverback4").click(function() {
$(".popover4").addClass("popoverback4-ani").delay(200).fadeOut(50);
$(".popover3").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popoverback4-ani");
}, 250);
});
$("#popoverid5").click(function() {
$(".popover5").addClass("popover5-ani").delay(200).fadeOut(50);
$(".popover6").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popover5-ani");
}, 250);
});
$("#popoverback5").click(function() {
$(".popover5").addClass("popoverback5-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popoverback5-ani");
}, 250);
});
$("#popoverid6").click(function() {
$(".popover6").addClass("popover6-ani").delay(200).fadeOut(50);
$(".popover7").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popover6-ani");
}, 250);
});
$("#popoverback6").click(function() {
$(".popover6").addClass("popoverback6-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popoverback6-ani");
}, 250);
});
}
function tourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
$(".tstour-replay").addClass("tstour-replay-disable");
$(".popover1").fadeIn("fast");
});
}
function disableTourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
}
//END FUNCTIONS
$(".popover-btn-start").click(function() {
$(".tour-container").fadeOut();
$(".popover7").fadeOut();
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
tourReplay();
});
$(".popover-close").click(function(){
$(".tour-container").fadeOut();
$(".popover").fadeOut();
tourReplay();
});
//BEGIN FUNCTION TRIGGERS
var trigger_flag = localStorage.getItem('tstour');
if (!trigger_flag) {
disableTourReplay();
$(".popover1").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '1') { //clicked next1
disableTourReplay();
$(".popover2").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '2') { //clicked next2
disableTourReplay();
$(".popover3").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '3') { //clicked next3
disableTourReplay();
$(".popover4").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '4') { //clicked next4
disableTourReplay();
$(".popover5").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '5') { //clicked next5
disableTourReplay();
$(".popover6").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '6' || '7') { //got to last popover, finished tour or closed out
tourReplay();
}
//END FUNCTION TRIGGERS
//BEGIN LOCAL STORAGE SET
$(document).on("click", "#popoverid1", function(e){
localStorage.setItem('tstour', '1');
});
$(document).on("click", "#popoverid2", function(e){
localStorage.setItem('tstour', '2');
});
$(document).on("click", "#popoverid3", function(e){
localStorage.setItem('tstour', '3');
});
$(document).on("click", "#popoverid4", function(e){
localStorage.setItem('tstour', '4');
});
$(document).on("click", "#popoverid5", function(e){
localStorage.setItem('tstour', '5');
});
$(document).on("click", "#popoverid6", function(e){
localStorage.setItem('tstour', '6');
});
$(document).on("click", ".popover-btn-start", function(e){
localStorage.setItem('tstour', '7');
});
$(document).on("click", ".popover-close", function(e){
localStorage.setItem('tstour', '7');
});
And here is the HTML
<div class="tour-centered">
<div id="tstour-start" class="tstour-replay">How Does This Work?</div>
<div class="popover popover1">
<div class="popover-right">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Employees On Your Calendar</div>
<div class="popover-body">Here's Jane Deaux, a sample employee. I preloaded some events for her in your calendar.</div>
<div class="popover-footer">
<div class="popover-progress">1 of 6</div>
<div class="popover-buttons">
<div class="popover-next" id="popoverid1">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover2">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Calendar Events</div>
<div class="popover-body">Notice Jane's name on the calendar. Each listing is a scheduled or pending calendar event.
<br />
<br />Hover your mouse over her name to quickly see the event details.</div>
<div class="popover-footer">
<div class="popover-progress">2 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback2">Back</div>
<div class="popover-next" id="popoverid2">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover3">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add a New Calendar Event</div>
<div class="popover-body">Double-click on any day to create a new calendar event. Use Jane to try it out and deduct hours from her time-off banks.
<br /><br />Give it a try. I'll wait right here until you're done.<br /></div>
<div class="popover-footer">
<div class="popover-progress">3 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback3">Back</div>
<div class="popover-next" id="popoverid3">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover4">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Create More Calendar Events</div>
<div class="popover-body">Great job! You can also click this icon to create more calendar events.</div>
<div class="popover-footer">
<div class="popover-progress">4 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback4">Back</div>
<div class="popover-next" id="popoverid4">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover5">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Customize Your Calendar</div>
<div class="popover-body">Visit Preferences to customize your calendar event codes, create time-off plans, and much more.</div>
<div class="popover-footer">
<div class="popover-progress">5 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback5">Back</div>
<div class="popover-next" id="popoverid5">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover6">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add More Employees</div>
<div class="popover-body">When you're ready, add more of your employees and create calendar events for them.
<br />
<br />The more employees you load and track, the easier it is to avoid scheduling conflicts.</div>
<div class="popover-footer">
<div class="popover-progress">6 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback6">Back</div>
<div class="popover-next" id="popoverid6">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover7">
<div class="popover-content-final">
<div class="popover-title-final">Ready to Take Back Your Time?</div>
<div class="popover-btn-start">Start Tracking!</div>
<div class="popover-help">
<a href="https://tracksmart.zendesk.com/hc/en-us/requests/new" target="_blank">
I Need Some Help
</a></div>
</div>
</div>
</div>

Hide button if div empty

I've been trying to hide a button when a div is empty with no luck, why is the div empty? because via back-end wordpress i'm inserting a shortcode in it.
this is the code:
<head>
<script src="jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() { if ( $(".whatever").parents("#content").length == 1 ){
$('input#bt23').show();
}else { $('input#bt23').hide();
});
</script>
</head>
<body>
<div id="content">
///empty
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" /></body>
That's pretty much it, trying to get the button to disappear if there's no other div insider #Content, any ideas?
I just noticed that, maybe just maybe the div is not empty, it looks like it's empty but i think is filled with space.
So rather than comparing empty with filled, how would it be to compare filled with text and a specific div inside it?
like this:
<div class="content">
<div style="whatever">
<div class="video-wrapper" style="padding-bottom:56.2222222222%;">

Check for text or html:
Without content
$(document).ready(function() {
if ( $("#content").text() ){
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
With content
$(document).ready(function() {
if ( $("#content").text() ){
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">Content here</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
With spaces only
$(document).ready(function() {
if ( $("#content").text().trim() ){
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"> </div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
Checking for a specific div
We can be a little creative here. Let's say we're looking for the .video_wrapper div inside the content. We can simply query for it, and if it's not found, the returned length will be zero, causing the input to hide.
$(document).ready(function() {
console.log($("#content .video-wrapper"));
if ($("#content .video-wrapper").length > 0) {
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="content">
<div style="whatever">
<div class="video-wrapper"></div>
</div>
</div>
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
Checking for a specific div - plain JS
function windowReady() {
if (document.querySelector("#content .video-wrapper")) {
document.getElementById('bt23').style.display = "block";
} else {
document.getElementById('bt23').style.display = "none";
}
};
window.onload = windowReady;
<div id="content">
<div class="content">
<div style="whatever">
<div class="video-wrapper"></div>
</div>
</div>
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />

You trying to accomplish something like this?
$(document).ready(function() {
if ( $("#content").html() == '' )
{
$('input#bt23').hide();
}
else {
$('input#bt23').show();
}
});

well first of all this should be handled server sided in PHP, you should check there if any contend comes out. failing to do that there is a jquery solution.
if($.trim($("#content").text()) == ""){$("#bt23").hide();}

Reset bootstrap modal

So, I am using bootstrap's modal.
I want to make a wizard style modal and came up with the following solution:
div snippets:
<div class="modal-instance hide fade" id="step1">
<div id="stepa">
...
</div>
</div>
<div id="stepb" style="display: none;">
...
</div>
Upon pressing a button in step-a step-b is loaded.
javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.
But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() {
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?

It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
<div class="step step1">
<h1>Step 1</h1>
<button class="btn next">Next</button>
</div>
<div class="step step2">
<h1>Step 2</h1>
<button class="btn previous">Previous</button>
<button class="btn next">Next</button>
</div>
<div class="step step3">
<h1>Step 3</h1>
<button class="btn previous">Previous</button>
<button class="btn done" data-dismiss="modal">Done</button>
</div>
</div>
<style type="text/css">
#myModal > .step { display: none; }​
</style>
<script type="text/javascript">
$(function() {
showStep(parseInt($('#myModal').data('step')) || 1);
$('#myModal .next').on('click', function () {
showStep(parseInt($('#myModal').data('step')) + 1);
});
$('#myModal .previous').on('click', function () {
showStep(parseInt($('#myModal').data('step')) - 1);
});
$('#myModal').on('hidden', function() {
showStep(1);
});
function showStep(step) {
$('#myModal').data('step', step);
$('#myModal > .step').hide();
$('#myModal > .step' + step).show();
}
});​
</script>
http://jsfiddle.net/7kg7z/5/