I´m useing a layout like http://masonry.desandro.com/methods.html#layout and is wondering if there is a way to only have one item active at them time. So that when you expand a new item a the one you currently have open goes back to its original form (removes class="is_expanded") . I´ve quite new to programming and don´t really know where to stat to look, tried configuring How do I remove class from previous selection when clicking additional item? but with no luck
classie.toggle( event.target, 'gigante' );
That is the part that does the magic - it adds a class 'gigante' which then makes it 4*4 (or whatever)
If you want to make only one be expanded at a time then
eventie.bind( container, 'click', function( event ) {
// don't proceed if item was not clicked on
if ( !classie.has( event.target, 'item' ) ) {
return;
}
// change size of item via class
$('.item').removeClass('gigante'); // add this line
classie.toggle( event.target, 'gigante' );
// trigger layout
msnry.layout();
});
What the line I added does is remove all 'gigante' class from the items and then the toggle will add that class to the item again.
$('.item') is just a class that every item has.
This answer assumes that only expanded items will be called 'gigante'.
Related
Progress: https://jsfiddle.net/zigzag/jstuq9ok/4/
There are probably a few ways to do this but I have a class called sub that I add to hide a 'nested' Div and then use jQuery to toggle the Glyphicon along with display the 'nested' Div. Some asks:
$('.menu-toggle').click(function() {
$(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
//How to do something like this to traverse the click and structure $(this).parent.find('.sub:first-child').toggle();
$('.sub').toggle();
$('.subsecond').toggle();
});
The nested team structure intended is this:
Adam
Lily
2.1 Sen
2.1.1 Tank
2.2 Another Sen
Justin
What I'm trying to do do is have this traverse through the DOM based on where the click happens to display the sub section under there. I have the content coming from a source system so can't hard code class directly.
Let me know if you have any question.
You can find the next div by using .closest('.row') to get the parent .row and .next('.row') to get the next .row of the parent .row if it has class or not using hasClass() so you can use
$('.menu-toggle').click(function(e) {
e.preventDefault(); // prevent <a> to redirect to the top of the page
$('.row:not(.sub):not(.subsecond)').not($('.sub').prev('.row')).not($('.subsecond').prev('.row')).not($(this).closest('.row')).find('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');
$(this).find('span').toggleClass('glyphicon-menu-down glyphicon-menu-up');
var Nextrow = $(this).closest('.row').next('.row'); // get the next row
if(Nextrow.hasClass('sub')){ // if next row has class sub
$('.sub').not(Nextrow).hide(); // hide all sub but not this one
Nextrow.slideToggle(function(){
if($(this).is(':hidden')){ // check if the .sub is hidden
$('.subsecond').hide(); // hide subsecond
$('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up'); // toggle arrows to the down
}
}); // toggle this sub row
return false;
}
if(Nextrow.hasClass('subsecond')){ // if next row has class subsecond
$('.subsecond').not(Nextrow).hide(); // hide all subsecond but not this one
Nextrow.slideToggle(); // toggle this subsecond row
return false;
}
});
See Example
I'm trying to combine jQuery UI's draggable, droppable, selectable AND sortable libraries, to create a web interface for drag-selecting elements and dropping them into another area. The user will be able to remove items from the droppable area should they need to, and also control/cmd + click to select specific items without dragging.
So far I've made a pretty decent effort, but I'm having issues when it comes to adding "removed" items back into the original list of selectable items. The drag-selecting works well with these items (that are re-created dynamically), but my main problem is when control/cmd + clicking items once they have been added back to the original list.
To recreate the issue, add items to the second droppable area and then remove them (by clicking on them). Once the items are back in the original list, control/cmd + clicking the items you deleted doesn't select them properly, so when you go to drag these items, only one is added (instead of the correct amount).
Here's a jsfiddle: http://jsfiddle.net/b8key7Lw/
And here's the code I'm having difficulty getting to work once the #selectable > div items are dynamically created (around line 45 in the jsfiddle):
$("body").on("click", "#selectable > div", function(e){
if (e.metaKey == false) {
$( "#selectable > div" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
$(this).removeClass("ui-selected");
}
else {
$(this).addClass("ui-selecting");
}
}
$( "#selectable" ).data("ui-selectable")._mouseStop(null);
});
I want to hide and show list items based on their attributed class.
The problem is that certain list items have multiple classes. So if I toggle one class then toggle another, any items with both selected classes will be removed.
I created a demo of my problem: http://jsfiddle.net/a4NkN/2/
Here's the JS CODE:
$('#easy').click(function(){
$(this).toggleClass( "checked" );
$('.easy').toggle();
});
$('#fun').click(function(){
$(this).toggleClass( "checked" );
$('.fun').toggle();
});
$('#silly').click(function(){
$(this).toggleClass( "checked" );
$('.silly').toggle();
});
If you select the "Easy" and "Fun" buttons, Boating will disappear.
How can I get Boating to stay?
This might be a good point to start from. Although you can do this cheaper and cleaner, that gives the idea:
Use an array to save the status of your selection buttons and one corresponding to hold the class names. Whenever your select buttons get clicked, you set all your elements invisible and reset those visible again, that are already selected by other buttons or the currently clicked, which is all saved in the switcher array.
//saves whether button is active
var switcher = [false, false, false];
//holds your classes selectable
var classes = ['easy', 'fun', 'silly'];
$('.toggler').click(function () {
// toogle the select button and save status
var x = $(this).hasClass('checked');
switcher[$(this).data('switch')] = !x;
$(this).toggleClass("checked", !x);
// iterate through your elements to set them active if needed
$('li').each(function () {
var cur = $(this);
cur.addClass('hidden');
$.each(switcher, function (index, data) {
if (data && cur.hasClass(classes[index])) {
cur.removeClass('hidden');
}
});
});
});
Whole solution in this fiddle: http://jsfiddle.net/BMT4x/
You cannot unconditionally toggle elements based on a click on one of the button filters if it is possible for an element to satisfy multiple filters at once. The correct approach is a little more involved.
Since your checked class means that only items corresponding to that button should be shown, do exactly this: toggle them based on the current status of the button. The items should be shown if and only if the corresponding button is checked as a result of clicking it.
$('#easy').click(function(){
$(this).toggleClass( "checked" );
$('.easy').toggle($(this).is(".checked"));
});
This code uses the last version of .toggle, the one accepting a boolean argument.
It can also be done more succintly:
$('.easy').toggle($(this).toggleClass( "checked" ).is(".checked"));
I have an interactive basket whereby the user can drag and drop an item into the basket. However, the same item cannot be placed in the basket twice (but it remains visible, albeit faded), so once it is in the basket, the draggable property must be disabled.
I tried doing this:
$("#product_badges li:not(.on)").draggable({
// Options here
});
However, as this just initiates the draggable() property, the element is still draggable even if I do add the on class to it when it has been dropped.
I therefore cannot see a way of achieving this without having several instances for the draggable property like so:
$("#product_badges li:not(.on)").each(function(){
$(this).draggable({
// Options here
}
});
With the above method I can then call the individual product_badge and disable dragging like so:
This only gets called once the item has been placed into the basket (dropped)
$('.item',$('#product_badges')).draggable('disable');
Is there a better way of achieving this? Can you set an HTML element to only be draggable if it does not have a particular class?
Update
See example here: http://jsfiddle.net/mB6GK/2/
use the cancel property.
$("#product_badges li").draggable({ cancel: ".no" })
fiddle:
http://jsfiddle.net/sGguz/
You could use the start event,
$("#container").draggable({
start: function( event, ui )
{ return !$(ui.helper).hasClass('nodrop'); }});
http://jsfiddle.net/mB6GK/4/
I have a problem... I tried to remove the selected items from dijit.form.MultiSelect when I click on button, but don't work...
Here is the code:
btnRemove = dijit.byId("btnRemove"); // button ID
List= dijit.byId("List"); // ID List of items which I want
// to remove when click on someone item
on(btnRemove , "click", function(evt){ // onClick event
alert(dijit.byId("List").attr("value")); // returns a label of element
// here must be a code to remove a selected item from MultiSelect - but don't work...
List.containerNode.removeChild(dijit.byId("List").attr("value"));
});
all code is in Javascript..
thanks
I solved this problem... if any will need this:
because I didn't find that dijit.form.MultiSelect has a removeChild option, I used a another hidden dijit.form.MultiSelect in which move items from the first MultiSelect...
Code for this is:
btnRemove = dijit.byId("btnRemove");
on(btnRemove, "click", function(evt){
dijit.byId("Removed").addSelected(dijit.byId("List"));
});
where Removed is the ID of hidden MultiSelect and the List is ID of a visible dijit.form.MultiSelect
you can use below code for remove all elements
while (btnRemove.hasChildNodes()) {
btnRemove.removeChild(btnRemove.lastChild);
}