I'm creating a multiple choice quiz where the answer is dragged and placed in a div. I want to make it so that if the correct answer is dragged into the div, then an alert will show up saying "yeah". If the wrong answer is dragged into the div, then the alert will say "noh".
I've tried using an if statement with the condition "hasClass". With the correct answer having the right class. Here is my code:
$(function() {
$(".ui-widget-content").draggable();
$(".ui-widget-content2").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
if ($("div").hasClass("ui-widget-content") === true) {
alert("Yeah");
} else {
alert("noh");
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<p>hello <span id="droppable" class="ui-widget-header"><span></span>
</span>thank you</p>
<div id="draggable" class="ui-widget-content">
<p>vrother</p>
</div>
<div id="draggable" class="ui-widget-content2">
<p>sister</p>
</div>
<div id="draggable" class="ui-widget-content">
<p>dude</p>
</div>
Currently, the if part works (the alert says yeah when the correct answer is dragged). But when the wrong answer is dragged onto the div, nothing happens. I believe there must be something wrong with my else condition.
The problem is that you not targeting the div you dropped, try with:
if($(ui.draggable).hasClass("ui-widget-content") === true) {
alert("Yeah");
} else {
alert("noh");
}
Demo
$(function() {
$(".draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
if ($(ui.draggable).hasClass("ui-widget-content2")) {
console.log("Yeah");
} else {
console.log("noh");
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="ui-widget-content draggable">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
<div class="ui-widget-content ui-widget-content2 draggable">
<p>Drag me to my target ui-widget-content2</p>
</div>
I think the problem comes from the fact that you have hardcoded a selector in your callback:
if($( "div" ).hasClass
Since your first div has the class, you will never enter the else statement.
You should define this selector dynamically:
if($(ui.draggable).hasClass
$(function() {
$(".ui-widget-content").draggable();
$(".ui-widget-content2").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
if ($(ui.draggable).hasClass("ui-widget-content") === true) {
alert("Yeah");
} else {
alert("noh");
}
}
});
});
#droppable {
display: inline-block;
width: 300px;
height: 15px;
background: tomato;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>hello <span id="droppable" class="ui-widget-header"><span></span>
</span>thank you</p>
<div id="draggable" class="ui-widget-content">
<p>vrother</p>
</div>
<div id="draggable" class="ui-widget-content2">
<p>sister</p>
</div>
<div id="draggable" class="ui-widget-content">
<p>dude</p>
</div>
Related
My code does this: when element .pencil is clicked on, it toggles the hidden element .pencilpanel. When clicked outside of this .test element (there are two .test elements), then this .pencilpanel should hide.
However, my problems are that:
1) When the second .test element is clicked on, the first .test element remains visible when it should be hidden. And,
2) When the first .pencil element is clicked on, and its corresponding .pencilpanel is also clicked on, it will hide .pencilpanel, when it's supposed to remain visible. Any element that is currently visible within .test, and if clicked on, should not be hidden, unless that clicked on element lies outside of the current .test element.
So I'm not getting why when a click is made on .pencilpanel, it hides it on this line if(!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {. And the fact that the first .pencilpanel remains visible when it should be hidden whenever another .pencil is clicked on. This is my code:
$(document).ready(function () {
$('.pencil').on('click', function (event) {
event.stopPropagation();
$(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel").toggleClass("displayblock");
});
});
$(document).ready(function () {
$(document).click(function () {
if (!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {
$('.pencilpanel').removeClass("displayblock");
}
});
});
.pencilpanel {
display: none;
}
.displayblock {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
You can use the document.activeElement to check before you close the panels. Please find the modified code.
$(document).ready(function() {
$('.pencil').on('click', function(event) {
event.stopPropagation();
closePanel();
$(this).closest(".test").find(".pencilpanel").toggleClass("displayblock");
});
$(document).on("click", function() {
if (document.activeElement.tagName != 'TEXTAREA')
closePanel();
});
});
function closePanel() {
$('.pencilpanel').removeClass("displayblock");
}
.pencilpanel {
display: none;
}
.displayblock {
display: block;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
$(document).ready(function () {
$('.pencil').on('click', function (event) {
event.stopPropagation();
$('.pencilpanel').removeClass("displayblock");
$(this).parent().siblings().children(".pencilpanel").addClass("displayblock");
});
$(".pencilpanel").click(function () {
event.stopPropagation();
});
$(document).click(function () {
$('.pencilpanel').not(":focus").removeClass("displayblock");
});
});
$(document).ready(function () {
$('.pencilpanel').hide();
$('.pencil').on('click', function (event) {
event.stopPropagation();
var elm=$(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel");
$('.pencilpanel').not(elm).hide();
if(elm.css('display') == 'none') elm.css('display','inline-block');
else elm.css('display','none');
});
$("*").on('click',function (event) {
event.stopPropagation();
if($(this).hasClass("pencil")) return;
if($(this).hasClass("pencilpanel")) return;
if($(this).parent().hasClass("pencilpanel")) return;
$('.pencilpanel').hide();
});
});
.pencil {
cursor: pointer;
}
.pencil, .pencilpanel {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
<br>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
I would like to show some divs, one by one, with a sliding effect from the left or right part of the screen. So far i'm stuck between this
<button id='animer'>animer</button>
<div class="left">from left</div>
<div class="right">from right</div>
<div class="left">from left</div>
<div class="right">from right</div>
<script>
$(function() {
$('.left, .right').hide();
$('#animer').click(function() {
$(".left").toggle("slide", {direction: "left"}, 500);
$(".right").toggle("slide", {direction: "right"}, 500);
});
});
</script>
and that
<button id='animer'>animer</button>
<div class="all">from left</div>
<div class="all">from right</div>
<div class="all">from left</div>
<div class="all">from right</div>
<script>
$(function() {
$('.all').hide();
$('#animer').click(function() {
$('.all').first().show('slow', function showNextOne() {
$(this).next('.all').show('slow', showNextOne);
});
});
});
</script>
But i need this to work no matter the divs order, because the "left" or "right" items will come randomly.
Help will be much appreciated as i am not as competent as i wished in jQuery. ^^
The following uses the all variable to keep a list of all of the divs. When the button is clicked, the slideNext() function is executed, checking the class of the current item to decide on toggle direction, and specifying slideNext (itself) as the function to run when the toggle is complete.
$(function() {
var all = $('.left, .right').hide();
$('#animer').click(function() {
var i = 0;
(function slideNext() {
if (i < all.length) {
var current = all.eq(i);
current.toggle("slide", {
direction: current.hasClass("left") ? "left" : "right"
}, 500, slideNext);
}
i++;
})();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<button id='animer'>animer</button>
<div class="left">from left</div>
<div class="right">from right</div>
<div class="left">from left</div>
<div class="right">from right</div>
You can use index from each() loop for delay and set direction based on condition if current div hasClass() left or not.
$(function() {
$('div').hide();
$('#animer').click(function() {
$('div').each(function(i) {
let dir = $(this).hasClass('left') ? 'left' : 'right';
$(this).delay(i * 1000).toggle('slide', {direction: dir})
})
});
});
h1 {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 18px;
}
body {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<h1>HTML Slider Test</h1>
<button id='animer'>animer</button>
<div class="left">from left</div>
<div class="right">from right</div>
<div class="left">from left</div>
<div class="right">from right</div>
Right now, I can only have one filter active. If I try to click on the other filter, it cancels the first one. How can I make them both stay active?
This is my code:
https://jsfiddle.net/0x43v59b/2/
html:
<div class="header-box">
<div class="header-click">
<h5>Publish Year</h5>
</div>
<div class="no-display">
<p>test1</p>
</div>
</div>
<div class="header-box">
<div class="header-click">
<h5>Condition</h5>
</div>
<div class="no-display">
<p>test2</p>
</div>
</div>
<script>
$('.header-click').on('click', function() {
$parent_filter = $(this).closest('.header-box');
$parent_filter.siblings().find('.no-display').slideUp();
$parent_filter.find('.no-display').slideToggle(500, 'swing');
});
</script>
css:
.header-click {
cursor: pointer;
}
.no-display {
display: none;
}
.header-box {
margin-bottom: 15px;
}
You just need to get rid of this line:
$parent_filter.siblings().find('.no-display').slideUp();
Its checking all siblings with class '.no-display' and sliding them up
<script>
$('.header-click').on('click', function() {
$parent_filter = $(this).closest('.header-box');
//$parent_filter.siblings().find('.no-display').slideUp();
$parent_filter.find('.no-display').slideToggle(500, 'swing');
});
</script>
$('.header-click').on('click', function() {
$(this).parent().find('.no-display').slideToggle(500,'swing');
});
here is the updated jquery function:
$('.header-click').on('click', function() {
$parent_filter = $(this).closest('.header-box');
//$parent_filter.siblings().find('.no-display').slideUp();
$parent_filter.find('.no-display').slideToggle(500, 'swing');
});
You can use this code, works well for your condition:
$('.header-click').on('click', function() {
$parent_filter = $(this).next('.no-display');
if ($parent_filter.is(":hidden")) {
$parent_filter.slideDown();
} else {
$parent_filter.slideUp();
}
});
.header-click {
cursor: pointer;
}
.no-display {
display: none;
}
.header-box {
margin-bottom: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Year Filter -->
<div class="header-box">
<div class="header-click">
<h5>Publish Year</h5>
</div>
<div class="no-display">
<p>test1</p>
</div>
</div>
<!-- Condition Filter -->
<div class="header-box">
<div class="header-click">
<h5>Condition</h5>
</div>
<div class="no-display">
<p>test3</p>
</div>
</div>
All above answers look correct to me, Just one more way to achieve this.
$('.header-click').on('click', function() {
$(this).next(".no-display").slideToggle(500, 'swing');
});
Here is the script i made, hope this is exaclty what you want.
<script>
$(document).ready(function(){
$(document).on('click','.header-click',function(){
$(this).next().slideToggle(500,'swing');
});
});
</script>
I have painted my self into a corner in order to quickly prototype.
What's the best way to refactor the following jQuery code? Its functionality is to toggle between some sidebar navigation items. I need it to be more dynamic in order to be scalable.
Would you add the IDs inside the if statements, in an array and iterate through them? Use variables? Create a function and call it on the html side onClick? No matter what I think of, it stills leads to a bunch of repeating code.
Thank you!
// TOGGLING LEFT NAVIGATION
$('#settingsClick').click(function() {
if( $('#addContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#settingsContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#settingsContainer').slideToggle(350);
}
});
$('#addClick').click(function() {
if( $('#settingsContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#addContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#addContainer').slideToggle(350);
}
});
$('#noteClick').click(function() {
if( $('#settingsContainer, #addContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#noteContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#noteContainer').slideToggle(350);
}
});
$('#logoClick').click(function() {
if( $('#settingsContainer, #addContainer, #noteContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#logoContainer').slideToggle(350);
}
});
$('#themeClick').click(function() {
if( $('#settingsContainer, #addContainer, #noteContainer, #logoContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#themeContainer').slideDown(350);
} else {
$('#themeContainer').slideToggle(350);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="settingsClick">Click Me</a><br>
<div id="settingsContainer">Content...</div>
<br><br>
<a id="addClick">Click Me</a><br>
<div id="addContainer">Content...</div>
<br><br>
<p> Etc... Etc....</p>
You should group using the common CSS class, i.e. header and content. Using the established relationship you can target the others content holder and content associated with the current clicked header element.
$('.container .header').on('click', function() {
//Get the current element
var $this = $(this);
//find the content
var $content = $this.closest('.container').find('.content'); //$this.next()
//get all contents
var content = $('.container .content');
//Slide up others
content.not($content).slideUp(350);
//Slide down
$content.slideToggle(350);
});
.content {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header" id="settingsClick">Click Me</div>
<div class="content" id="settingsContainer">Content...</div>
</div>
<div class="container">
<div class="header" id="addClick">Click Me</div>
<div class="content" id="addContainer">Content...</div>
</div>
<div class="container">
<div class="header" id="noteClick">Click Me</div>
<div class="content" id="noteContainer">Content...</div>
</div>
the best bet would be to do it like so
$(document).on('click', ".trigger", function() {
var sibling_content = $(this).siblings(".content");
if (!sibling_content.hasClass('active')) {
$(".content").slideUp('slow').removeClass('active');
sibling_content.slideDown('slow').addClass('active');
} else {
sibling_content.slideUp('slow').removeClass('active');
}
})
.trigger {
background-color: red;
color: white;
font-size: 16px;
}
.content {
background-color: blue;
color: white;
font-size: 16px;
padding: 20px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
I need to detect click of an element(.menuitem), check the text it contains.
And then based on the attribute(is-checked), hide or show other elements.
I need this only when clicking that other button.
<div class="items">
<div class="menuitem" is-checked="true">
<div class="ytp-menuitem-label">Button 1</div></div>
<div class="menuitem" is-checked="false">
<div class="ytp-menuitem-label">Button 2</div></div>
</div>
<div class="element">some content</div>
<div class="element">some more content</div>
$('.menuitem').click(function () {
if ($('.menuitem').text().trim() === "Button 2"){
if ($('[is-checked="true"]'))
$('.element').css('display', 'block');
if ($('[is-checked="false"]'))
$('.element').css('display', 'none'); }
});
Here's a JSFIDDLE, of what I have:
$('.menuitem').click(function() {
console.log($(this).text().trim())
if ($(this).text().trim() === "Button 2") {
if ($(this).attr('is-checked') == 'true') {
$('.element').css('display', 'block');
} else {
$('.element').css('display', 'none');
}
}
});
.items {
height: 30px;
margin-bottom: 5px;
}
.menuitem {
float: left;
margin-right: 10px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="menuitem" is-checked="true">
<div class="ytp-menuitem-label">Button 1</div>
</div>
<div class="menuitem" is-checked="false">
<div class="ytp-menuitem-label">Button 2</div>
</div>
</div>
<div class="element">some content</div>
<div class="element">some more content</div>
<div class="element">even more content</div>
Use $(this).attr('is-checked') to get the value
Also use $(this).text().trim() to get the text of clicked element
You've got it a tad wrong, your if statement isn't actually looking at the element which was clicked. Try something along these lines:
$('.menuitem').click(function () {
// $(this) is a reference to the element which was clicked
if ($(this).attr('is-checked') == "true")
$('.element').css('display', 'block');
if ($(this).attr('is-checked') == "false")
$('.element').css('display', 'none');
});