I have HTML like:
<div class="form-container-ingredients">
<div id="removable-ingredient-container-1">
... other elements
</div>
<div id="removable-ingredient-container-2">
... other elements
</div>
<div id="removable-ingredient-container-3">
... other elements
</div>
</div>
So this represents a number of rows, and each row contains the same elements. I also have buttons to add new rows and remove rows. This works.
Now I would like to add the possibility to move rows, for example, move removable-ingredient-container-1 after removable-ingredient-container-3.
Does anyone has an example or tutorial on how to do that in jQuery, based on my example?
Thank you,
L
jQueryUI has a sortable plugin that you can use to achieve that effect cleanly and easily.
Related
I have a JSON with multiple products. All these products are defined by data. I would like to loop through this JSON and place these products side by side on a web page to compare them together. I think of a structure first organized in columns and then rows :
So far I can do this easily with HTML divs and flexboxes. Something like :
<div style="display:flex">
<div id="Sidebar">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
<div id="Product_A">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
<div id="Product_B">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
<div id="Product_C">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
</div>
But, if one of the product features contains a long string, I would like the height of all adjacent cells of the other products and the sidebar to fit also in height.
I know I can achieve a such structure with an HTML table, but it's not convenient to dynamically add/remove products or make them draggable as tables are first organized in rows. I would like to be able to add products, remove products, drag them, filter them, sort them... I think that a table structure is not suitable.
My questions :
If using tables, is there a way to first organize a table in columns then rows?
If using divs or flexboxes, how can I align all the product lines in height?
Any other good idea to structure such content or use javascript to achieve this easily?
You can achieve this with using max-height and iterate products in div or ul>li.
Show code to get more help.
Probably put a min-height on the product container and then iterate through your json with something like.
products.map(product =>
<div>
<span> product.name </span>
</div>
)
The product container div should adapt its own contents if the json data is longer than what you are waiting.
I'm dynamically creating jQuery UI sliders, using the following code in a forEach loop:
// Sets an id for the slider handles, gives them a custom class (makes them appear as circles, centers them)
$("#slideRange" + i).find(".ui-slider-handle").attr("id","slideHandle" + i).addClass("customSliderHandle");
// These two lines set the times below the slider handles.
$("#timeSlider" + i).find(".slideStartLabel").text(startTime);
$("#timeSlider" + i).find(".slideEndLabel").text(endTime);
This successfully makes the following slider, with variable times, for every iteration:
What I'd like to do, instead of showing the times below the circular handles, is have the times appear in the middle of the handles. The end result would look like this (photoshopped):
The times will then update, according to the slider values, within the "slide" event callback.
My question is: how do I assign unique id's to the two slider handles, so that I can then set their text independently in the "slide" callback? The code I wrote above gives both handles the same id. Using this id to set text to a handle will only apply to the first handle, leaving me no way to change the text of the second. Using find(), get(), or just $(".ui-slider-handle") are all ways of getting an array of the slider handles, but when I try attr("id","uniqueId") on one of the elements of that array, I get "(...).method(...) is not a method".
Or is assigning unique id's the wrong approach, here? Is there a jQuery or vanilla Js way of setting attributes of one element at a time, when searching by class and getting potentially multiple results?
Also, for context: I'm using find() because I'm using clone() on a markup shell, then appending it to a central div. Here's the shell:
<!-- This hidden div will be cloned, customized, and appended onto .modal-body -->
<div id="timeslotShell" class="timeslot row" style="display:none">
<div class="container-fluid slotContents" id="slotContents">
<span class="col-md-4"> Listing <div class="slotNumber listNum">*Listing No.*</div>: From <div class="slotNumber startNumber slotStartShell"> *Start Time* </div> until
<div class="slotNumber endNumber slotEndShell"> *End Time* </div> </span>
<div class="col-md-8">
<button type="button" class="btn btn-md btn-info slotButton">
Choose A Time From Within These Hours
</button>
</div>
<div id="timeSliderShell" class="collapse timeSlider">
<br><br>
<div id="slider-range" class="slideRange row"></div>
<div id="slideLabels" class="slideLabels slideRange row">
<div class="slideStartLabel"></div><div class="slideEndLabel"></div>
</div>
</div>
</div>
<br><br>
</div>
Cool -- as luck with have it, I found the answer shortly after posting this. Check this post if you're dealing with a similar issue:
Slider Value Display with jQuery UI - 2 handles
All that's needed, in the .find() calls, is
.find(".ui-slider-handle:first").text(value1);
for the first handle and then
.find(".ui-slider-handle:last").text(value2);
for the second.
I'm still pretty new to JQuery and JavaScript as a whole, so bear with me. I tried searching the web for an answer to my question and experimented a little bit, but I'm coming up dry. Anyway, is there a way to store multiple CSS classes in an array with JavaScript?
I'm writing some simple JQuery for a friend's portfolio website such as this:
$('.item.two').click(function(){
$('.content.item, .current.item').show();
$('.content.item, .content.item, .content.item, .current.item, .current.item, .current.item').hide();
$('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
$('.item.two').fadeTo(0, 1.0);
});
All this is doing is hiding certain elements and only showing them when their corresponding icon is clicked on. This is also turning the opacity from 50% off the main class to 100% when clicked on.
There's nothing wrong with the code itself, it serves its intended purpose. But is there a way to clean this code up a bit by just holding those classes into a reusable array? I feel like it should be possible, but I'm not sure how.
Thanks!
EDIT: Sorry, I wasn't clear that I'm actually using 4 different classes to hide or show. So instead of the previous bit it's actually
$('.item.two').click(function(){
// this is the content i want to show on click
$('.content.itemTwo').show();
// this is the content that i want to hide/remain hiding on click
$('.content.itemOne, .content.itemThree, .content.itemFour').hide();
// these are icons representing the content
$('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
$('.item.two').fadeTo(0, 1.0);
});
Also, here is my HTML some of you are requesting. Like I said, what I'm trying to make happen, happens. I just feel like there's a better way of making it happen.
<!-- these are icons representing the written content-->
<div class="item one">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<div class="item two">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<div class="item three">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<div class="item four">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<!-- this is the written content to be shown upon clicking corresponding icon -->
<div class="content itemOne">
<h3>itemOne</h3>
<p>....</p>
</div>
<div class="content itemTwo">
<h3>itemTwo</h3>
<p>...</p>
<div class="content itemThree">
<h3>itemThree</h3>
<p>...</p>
</div>
<div class="content itemFour">
<h3>itemFour</h3>
<p>....</p>
</div>
Looking at it now, I probably don't need the extra selectors on the .content or .item.
If I correctly understood , you are trying to change the element that is clicked.
$('.item.two').click(function(){
// there is no reason to show and then hide all
$('.content.item, .current.item').hide();
$('.item').not(this).fadeTo(0, 0.5);
$(this).fadeTo(0, 1.0);
});
check if this works for you
Edit another approch could be using index suffix in classes in loop
eg
you could use class1, class2, class3 instead.
$('.item.two').click(function(){
// this is the content i want to show on click
$('.content.itemTwo').show();
// this is the content that i want to hide/remain hiding on click
$('.content.itemOne, .content.itemThree, .content.itemFour').hide();
// these are icons representing the content
$('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
$('.item.two').fadeTo(0, 1.0);
});
to
for(var i=1;i<=4;i++){
$('.item.'+i).click(function(){
// this is the content i want to show on click
$('.content.class'+i).show();
// this is the content that i want to hide/remain hiding on click
$('.content class').hide();
// these are icons representing the content
$('.item').not(this).fadeTo(0, 0.5);
$(this).fadeTo(0, 1.0);
});
}
Hope you can get approch from it
Use the push method like
var arrayClass = [];
$('.item.two').click(function() {
arrayClass.push($(this));
});
alert(arrayClass);
You mean you are trying to select a list of items using jQuery because you have been using a lot of clases? You can do this by using jquery index, with eq and the this selector.
Here is a full description on how to use the index feature to make your code shorter
http://api.jquery.com/index/
You do not have to repeat same class over and over and do not need to store classes in array.
Change
$('.content.item, .content.item, .content.item, .current.item, .current.item, .current.item').hide();
To
$('.content.item').hide();
You can store classes in string instead of array in this case $('.item.one, .item.three, .item.four')
classesSet = ".item.one, .item.three, .item.four";
$(strClassesSet).fadeTo(0, 0.5);
I have a positioning issue with my in expression engine. click Here On the following link I am looping elements with <div id="services-container"> I have noticed it loops fine on the first row however begins to misalign on the second row. I have made attempts to use the switch="" tag to create an individual class for each loop, see below:
{exp:channel:entries channel="services" dynamic="no" sort="asc|desc"}
<div id="services-container" class="{switch='1|2|3|4|5|6'}">
<div class="service-content">
<img src="{service_image}" alt="banner" alt="{alt}" class="service-banner">
<p>{service_head_line}</p>
{service_listed_items}
<ul class="service-credentials">
<li>{service_list_1}</li>
<li>{service_list_2}</li>
<li>{service_list_3}</li>
</ul>
<ul class="service-credentials">
<li>{service_list_4}</li>
<li>{service_list_5}</li>
<li>{service_list_6}</li>
</ul>
View related projects »
{/service_listed_items}
</div><!--service-content-->
</div><!--SERVICES CONTAINER-->
{/exp:channel:entries}
When i try to class these classes out in my style sheet nothing is happening. Does anyone know what i am doing wrong?
This involves ExpressionEngine but also css. Basically you are trying to create a grid with 3 items in each row, correct ?
Each of these "row" has to adopt a float containment strategy, since it only contains 3 floated items. The way I would go about it using the switch parameter:
{exp:channel:entries channel="services" dynamic="no" orderby="date" sort="asc"}
{if "{switch='one|two|three'}" == "one"}<div class="row">{/if}
<div class="item">
...code...
</div>
{if "{switch='one|two|three'}" == "three" || count == total_results}</div>{/if}
{/exp:channel:entries}
That code would include a div with a class of row every three items in that loop.
Then, if your items are floated, your rows must have some sort of float clearing strategy to contain them like overflow:hidden; or a clearfix method.
I'm tinkering a bit with jquery to show a hidden div when a link is clicked. This should be fairly simple, but there's a flaw to it in this case. I have the following markup:
<div class="first-row">
<div class="week">
<p>Uge 2</p>
<p>(08-01-11)</p>
</div>
<div class="destination">
<p>Les Menuires</p>
<p>(Frankrig)</p>
</div>
<div class="days">4</div>
<div class="transport">Bil</div>
<div class="lift-card">3 dage</div>
<div class="accommodation">
<p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
<p>4-pers. værelse m. bad/toilet</p>
</div>
<div class="order">
<p>2149,-</p>
<p class="old-price">2249,-</p>
</div>
<div class="hotel-info">
<!-- The div I want to display on click -->
</div>
</div>
When I click the "show-info" link I want the "hotel-info" div to display.
My backend devs don't want me to use ids (don't ask me why..) and the above markup is used over and over again to display data. Therefore I need to be able to access the "hotel-info" div in the "first-row" div where the link is clicked.
I've tried to do something like:
$(document).ready(function() {
$('.show-info').click(function() {
var parentElement = $(this).parent().parent();
var lastElementOfParent = parentElement.find(".show-hotel");
lastElementOfParent.show();
});
});
But without a result :-/ Is this possible at all?
Any help is greatly appreciated!
Thanks a lot in advance!
Try this:
$('.show-info').click(function() {
$(this).closest('.accommodation').siblings('.hotel-info').show();
});
Even better imo, as it would be independent from where the link is in a row, if every "row div" has the same class (I assume only the first one has class first-row), you can do:
$(this).closest('.row-class').find('.hotel-info').show();
Reference: .closest, .siblings
Explanation why your code does not work:
$(this).parent().parent();
gives you the div with class .accommodation and this one has no descendant with class .hotel-info.
It is not a good idea to use this kind of traversal for more than one level anyway. If the structure is changed a bit, your code will break. Always try to use methods that won't break on structure changes.
You're right in not using an ID element to find the DIV you want :)
Use closest and nextAll
Live demo here : http://jsfiddle.net/jomanlk/xTWzn/
$('.show-info').click(function(){
$(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});