How do I make elements in jQuery Selectable deselected? At this Link it is well documented how to use jQuery Selectable but it is never mentioned how to deselect selected elements again. Any ideas?
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>
<ol id="selectable">
<?php
for($i=1;$i<=9;$i++) {
echo "<li id=\"field_$i\" class=\"ui-state-default\">$i</li>";
}
?>
</ol>
Hold ctrl and click on the elements. It can also be used to make multiple selections.
Related
I have built a product page that has a colour variation select. I'm trying to make it work that when a user selects a colour from the dropdown the slick slider will go to the corresponding slide.
I have added data-attr to each slick slide that contain the colour name and use this to the slide index.
The slickgoto function works when I move it outside of the change function.
$( "#pa_colour" ).change( function() {
var prod_color = $( "#pa_colour option:selected" ).val();
var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;
$( ".slider-for" ).slick( 'slickGoTo', slide_index, false);
});
Thanks
No sure the false is necessary. Have you tried:
$('.slide-for').slick('slickGoTo', slide_index);
Otherwise I would adjust it to:
var slideshow = $( ".slider-for" );
slideshow.slick({ ... });
$( "#pa_colour" ).change( function() {
var prod_color = $( "#pa_colour option:selected" ).val();
var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;
slideshow.slick( 'slickGoTo', slide_index );
});
Hope this helps.
I'm very new beginner to jquery and I'm using the 'Selectable, Serialize' interaction from jQuery UI.
The interaction shows the index value that the user has selected, but I would like to know how to instead of displaying the index value, display the content that the user has selected.
so actually its like this
SCRIPT::
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
HTML::
<ol id="selectable">
<li class="ui-widget-content">Watermelon</li>
<li class="ui-widget-content">Orange</li>
<li class="ui-widget-content">Guava</li>
<li class="ui-widget-content">Apple</li>
<li class="ui-widget-content">Banana</li>
</ol>
The result shown is "You've selected: #1."
But I would like the result to be displayed as "You've selected: Watermelon"
Thanks in advance. :)
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
//this is set by jQuery to be the current item in the each iteration
//so wrap this in the $.jQuery object and then you will be able to call the jQuery method
//text() to get the text value
result.append( " " + $(this).text());
});
}
});
I am currently trying to figure out how to convert this codes to work for table td cells in a column. I seek help with regards to this.
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
replace the var index line in the code with this:
var index = $( "#selectable td" ).index( this );
Make sure the table has an id #selectable
I have had a look about the site and found some code and tried it out but its not working in any shape or form.
I am wanting to count the number of DIVs that's placed into another DIV by the user dragging and dropping but only to count the 'correct' ones then if all the correct ones are in the DIV display an alert saying well done then rest the 'game'. Also need to show how many more is needed to go to 'win'.
This is what I have so far:
JS:
$('.drop').each(function(){
var n = $(this).children('.draggable').length;
$(".count").text("There are " + n + " divs inside parent box detail.");
if(n == 2){
alert("You got them all right! :)");
}
});
HTML:
<div class="foods">
<div class="draggable" id="draggable"><img src="images/fish.png" id="draggable"></div>
<div class="draggable" id="draggable"><img src="images/stone.png"></div>
<div class="wrong"><img src="images/tree.png"></div>
</div>
<div class="foods">
<div id="droppable" class="drop">
<p>Drop here</p>
</div>
</div>
<div class="foods">
<span class="count"></span>
</div>
JS Fiddle of the code: http://jsfiddle.net/JRLZK/
The problem is the duplicate IDs you are giving. I used class instead of id, but you can apply your own logic there.
$( "#droppable" ).droppable({
drop: function( event, ui) {
if($(ui.draggable).hasClass("draggable")){
$( this )
.find( "p" )
.html( "Correct! :)" );
} else {
$( this )
.find( "p" )
.html( "Wrong! :(" );
}
}
});
Demo
Update
Here is a workaround for the count
var div = $("<div />"); //a temp container
$( "#droppable" ).droppable({
drop: function( event, ui) {
ui.draggable.clone().appendTo(div);
if(div.children(".draggable").length == 2) {
alert('correct');
}
}
});
Demo
This should do it with your logic.
$(function() {
var n = 0;
$( ".draggable" ).draggable();
$( ".wrong" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui) {
console.log($(ui));
if($(ui.draggable).hasClass("draggable")){
$( this )
.find( "p" )
.html( "Correct! :)" );
n++;
$(".count").text("There are " + n + " divs inside parent box detail.");
if(n == 2){
alert("You got them all right! :)");
}
} else {
$( this )
.find( "p" )
.html( "Wrong! :(" );
}
}
});
});
I am trying to develop a simple drag and drop 'game'. In simple terms all you do is drag and drop various items into a area and it will say correct or wrong depending on the item dragged. This is what I have so far and its not working at all and I dont know why. My knowledge of JS and jQuery leaves a lot to be desired too.
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#wrong" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
var currentId = $(this).attr('id');
if (currentId == "draggable") {
$( this )
.addClass( "highlight" )
.find( "p" )
.html( "Correct! :)" );
} else {
$( this )
.find( "p" )
.html( "Wrong! :(" );
}
}
});
});
</script>
Now that I have it working I need more instances of the draggable images but when I add more the the new ones that have been added don't work.
http://jsfiddle.net/KcruJ/9/
var currentId = $(this).attr('id');
if (currentId == "draggable")
...
Will never result true, as $(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable[1]
Try:
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable")
...
This works: http://jsfiddle.net/T6nu3/2/
$(this).attr('id');
Will always return droppable.
You need to access the dragged element:
$(ui.draggable).attr('id');
Take a look at the jQuery UI Documentation for more information.
Code:
$(function() {
$("#draggable").draggable();
$("#wrong").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable") {
$(this).addClass("highlight").find("p").html("Correct! :)");
} else {
$(this).find("p").html("Wrong! :(");
}
}
});
});
haha well, Alex seems to have this one on lock.
There's the answer: http://jsfiddle.net/aGqHh/1/