I am trying to wrap two divs around every 3 pieces of content generated from an API call. It should look like this:
<div class="carousel-inner">
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (1)
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (2)
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (3)
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (4)
</div>
</div>
</div>
</div>
</div>
I have worked on this all day and I can't seem to get it right. Also, I may not be using the most efficient method. I am hoping that someone can tell me what I am doing wrong and how to fix it... also, I am open to any advice as far as streamlining my code. So, with this search 4 pieces of content are returned, and every set of 3 should be wrapped in two divs (item carousel-item and row), but in my attempt below, it seems to be wrapping correctly, but it surrounds 4 instead of three and then brings back a duplicate piece of content for the 4th, I also have an extra div at the end... yikes :)
What I have it doing so far:
<div class="carousel-inner">
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (1)
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (2)
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (3)
</div>
</div>
</div>
***this div should not be here, should have stopped at 3***
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (4)
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (4)
</div>
</div>
</div>
</div>
</div>
</div>
***extra div shows up at end***
</div>
Here is the code I used:
jQuery.each(ws_ftr, function(index, ftr) {
if(index % 3 === 0){
jQuery('.carousel-inner').append('<div class="item carousel-item active"><div class="row">');
}
jQuery('.row').append('<div class="col-sm-4"><div class="thumb-wrapper"><div class="img-box">Content Here</div></div></div>');
if(index % 3 === 0){
jQuery('.row').append('</div></div>');
}
your code should be like
function createColumnsList(arr) {
var html = '<div class="row">';
//or another code to start your row like $.append or smth
$.each(arr, function(index, item) {
if (index % 3 == 0 && index != 0) {
html += '</div><div class="row">';
//end and start your row
}
html += '<div class="column">' + item + '</div>';
// output your content from array
});
html += "</div>";
//end row
return html;
}
Change it to fit your needs. Hope it will help you :)
Related
The following solution works, but I would like to keep adding elements for the entire month.
When I remove the dates that are ="none" the previous dates start stacking on top of each other.
Is there a way to simplify the javascript so I wouldn't have to keep adding each date to the if-else statements to hide and show them?
function selectDate() {
var x = document.getElementById("start").value;
if (x == "2022-03-21") {
document.getElementById("2022-03-21").style.display = "flex";
document.getElementById("2022-03-22").style.display = "none";
document.getElementById("2022-03-23").style.display = "none";
}
else if (x == "2022-03-22") {
document.getElementById("2022-03-22").style.display = "flex";
document.getElementById("2022-03-21").style.display = "none";
document.getElementById("2022-03-23").style.display = "none";
}
else if (x == "2022-03-23") {
document.getElementById("2022-03-23").style.display = "flex";
document.getElementById("2022-03-21").style.display = "none";
document.getElementById("2022-03-22").style.display = "none";
}
}
<section>
<div class="container ">
<div class="row">
<div class="col">
<input type="date" id="start" onchange="selectDate()">
</div>
</div>
<div class="row" id="2022-03-21" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>1</h4>
</div>
<div class="col">
<h4>2</h4>
</div>
</div>
</div>
</div>
<div class="row" id="2022-03-22" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>3</h4>
</div>
<div class="col">
<h4>4</h4>
</div>
</div>
</div>
</div>
<div class="row" id="2022-03-23" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>5</h4>
</div>
<div class="col">
<h4>6</h4>
</div>
</div>
</div>
</div>
</div>
</section>
I'm not sure what you mean by
When I remove the dates that are ="none" the previous dates start stacking on top of each other.
I don't see that happening in your snippet.
That said, you can simplify the code that hides/shows the div, and not have to hard code in the dates.
Give each element that you are wanting to show/hide a common class name, for example output
Select them all in a NodeList collection using document.querySelectorAll('.output')
Then with the .forEach() on that collection, you can loop through each one and change the display to none.
Then find the element that matches the date selected
If it is not null, then you can change the display to 'flex'
Personally I prefer to use document.querySelector() or document.querySelectorAll() method when selecting elements.
However, you'll notice that in step 4 above, I didn't. Since the ID begins with a number, it is better to use document.getElementById() rather than document.querySelector(). You can still do it, but it requires some string manipulation. See this post here: Using querySelector with IDs that are numbers
document.querySelector(`#start`).addEventListener(`change`, function(e) {
// Get every element with the 'output' class &
// loop through each one & change the display to 'none'
document.querySelectorAll(`.output`).forEach(el => el.style.display = `none`);
// get the element that matches the value of the date selected
const dispElm = document.getElementById(this.value);
// if the element exists, then change the display to 'flex'
if (dispElm) {
dispElm.style.display = `flex`;
}
});
<section>
<div class="container">
<div class="row">
<div class="col">
<input type="date" id="start">
</div>
</div>
<div class="row output" id="2022-03-21" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>1</h4>
</div>
<div class="col">
<h4>2</h4>
</div>
</div>
</div>
</div>
<div class="row output" id="2022-03-22" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>3</h4>
</div>
<div class="col">
<h4>4</h4>
</div>
</div>
</div>
</div>
<div class="row output" id="2022-03-23" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>5</h4>
</div>
<div class="col">
<h4>6</h4>
</div>
</div>
</div>
</div>
</div>
</section>
I have a lots of articles that have 1, 2, 3 or 4 pictures. On mobile I created a carousel. All images all on the same line and I have a count that is 0. And when I press on the right button(for example) that count it will be -100 and all images will have a left: -100 and so on. The problem is that, let's say, I press on the button from one article that count will be -100. but after I go to another article and if I press again the count is not -100 and is -200. How can I reset that count when I change the article. The code is something like:
var c = 0;
$('.plus').on('click', function(){
c += 100
$(this).siblings('.num').text(c)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article">
<div class="minus">Minu</div>
<div class="plus">Plus
</div><div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu2</div>
<div class="plus">Plus2
</div><div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu3</div>
<div class="plus">Plus3
</div><div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu4</div>
<div class="plus">Plus4
</div><div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu5</div>
<div class="plus">Plus5
</div><div class="num">0</div>
</div>
Here's what I cooked up for you.
$('.plus').on('click', function(){
c = Number($(this).siblings('.num').text()) + 100;
$(this).siblings('.num').text(c)
});
$('.minus').on('click', function(){
c = Number($(this).siblings('.num').text()) - 100;
$(this).siblings('.num').text(c)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article">
<div class="minus">Minu</div>
<div class="plus">Plus</div>
<div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu2</div>
<div class="plus">Plus2</div>
<div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu3</div>
<div class="plus">Plus3</div>
<div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu4</div>
<div class="plus">Plus4</div>
<div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu5</div>
<div class="plus">Plus5</div>
<div class="num">0</div>
</div>
The Plus button will add to the total displayed for the current article and Minus will subtract from it. Every article has it's own c value that can't be changed by a button from a different article.
I hope that's what you are looking for.
Add an on('click', function() {...}) handler to your "change the article" button. If this button is just another article's text, then give them all a common class and a common class onclick handler.
HTML...
<span class="article">Article 1</span>
<span class="article">Article 2</span>
<span class="article">Article 3</span>
jQuery...
$('.article').on('click', function() {
c = 0;
});
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Condition</strong></div>
<div class="SameClass-value" itemprop="condition">New</div>
</div>
<div class="row">
<div class="SameClass"><strong>Color</strong></div>
<div class="SameClass-value" itemprop="color">Black</div>
</div>
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
**<div class="SameClass-value" itemprop="qty"> 5 </div>**
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
I have multiple divs that has the same class and 'itemprop' attribute and I need to be able to create a function that will return the Quantity (which in the example above is '5')
the catch here is that the structure you see above changes in other pages. In the example above, the Condition and the Color shows but on other pages those do not appear which means the structure changes except the class name and the attribute value of the 'itemprop'. See below:
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
**<div class="SameClass-value" itemprop="qty"> 5 </div>**
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
How do I get the Quantity into a JavaScript function and return the value of 5? Without having to edit the code of the site itself?
I have been playing with this but I am sure this is completely and utterly incorrect.
function () {
var x = document.getElementsByClassName("SameClass").getAttribute("itemprop");
if (x = 'price')
{
var a = document.getElementsByClassName("SameClass").getAttribute("itemprop").innerText;
return a;
}
}
The following might work for you:
function getQty() {
var arr=document.getElementsByClassName("SameClass-value");
for(var i=0;i<arr.length;i++)
if (arr[i].getAttribute("itemprop") == 'qty') return arr[i].innerHTML;
}
Or, even shorter, you can do
function getQty() {
return document.getElementsByClassName("SameClass-value")
.find(d=>d.getAttribute("itemprop") == 'qty').innerHTML;
}
Sorry for the repeated edits. It's been a long day for me today and I was trying to quickly put something together on my little smartphone.
If the classes don't change, you can select all the relevant elements then get the value from the one you need.
function getQty() {
var qty;
document.querySelectorAll("div.SameClass-value").forEach(function(element) {
if (element.getAttribute("itemprop") === "qty") {
qty = element.innerText;
}
});
return qty;
}
console.log(getQty());
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Condition</strong></div>
<div class="SameClass-value" itemprop="condition">New</div>
</div>
<div class="row">
<div class="SameClass"><strong>Color</strong></div>
<div class="SameClass-value" itemprop="color">Black</div>
</div>
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
<div class="SameClass-value" itemprop="qty"> 5 </div>
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
</div>
I have many sets of div and I'm trying to copy the content of a specific span into another one and repeat the same operation for all my divs.
Here is my html code:
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
And my jQuery code is:
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere').clone(true, true).contents().appendTo('span.ContentGoesHere');
});
It almost works, right now what I get in my span.ContentGoesHere is: This is my content 1This is my content 2This is my content 3 - and it's the same content for all but the content needs to be specific to each div.item.
Thank you for your help.
Try The code below
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere')
.clone(true,true).contents()
.appendTo($(this).find('span.ContentGoesHere'));
});
To See The demo in jsFiddle
Click here to see Demo In JsFiddle
Try the code bellow.
$("div.item").each(function(i) {
var content = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(content);
});
If you type your function like this:
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
Then the end result will looks like this:
This is my content 1
This is my content 1
This is my content 2
This is my content 2
This is my content 3
This is my content 3
See snippet for the working code.
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
See it working
Your way
$("div.item").each(function(i) {
var targetElement = $(this).find('span.ContentGoesHere');
var sourceHtml = $(this).find('span.ContentComesFromHere').clone().contents()
sourceHtml.appendTo(targetElement);
});
Simpler way
$("div.item").each(function(i) {
var contents = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(contents);
});
In your case you need find the source and target both by $(this).find()
Just replace to .appendTo($(this).find('span.ContentGoesHere')); into your JS code and I hope it will be work.
How to combine JQuery.show() whit mine working animation so I can display text.
I would like to achieve the same effect like here on this working example .But I don't want to use "data" prefix for displaying text, I want to use jquery.show(). I am having trouble understanding where and how to put mine text for each button and showing it on the middleBubble.
Only difference between mine example and this one, is that mine middleBubble is toggling.
How can I make this work's and implement jquery show() library in working animation?
HTML for mine example:
<section class='circle-animation'>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm">
<div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
<div id="middlepapir" class="jumbotron">
<div class="row">
<img class="papir img-responsive" src="img/circle/11.png" alt="">
<div class="row">
<div class="move1 col-sm-4 col-xs-4 col-md-push-4">
<img class="position1 round" src="img/circle/off/home-all-icon-off.png">
</div>
</div>
<div class="row">
<div class="move2 col-sm-4 col-xs-4 col-md-push-1">
<img class="position2 round" src="img/circle/off/home-cover-icon-off.png">
</div>
</div>
<div class="row">
<div class="move3 col-sm-4 col-xs-4 col-md-push-7">
<img class="position3 round" src="img/circle/off/home-design-icon-off.png">
</div>
</div>
<div class="row">
<div class="move4 col-sm-4 col-xs-4">
<img class="position4 round" src="img/circle/off/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="move5 col-sm-4 col-xs-4 col-md-push-8">
<img class="position5 round" src="img/circle/off/home-marketing-icon-off.png">
</div>
</div>
<div class="row">
<div class="move6 col-sm-4 col-xs-4 col-md-push-1">
<img class="position6 round" src="img/circle/off/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="move7 col-sm-4 col-xs-4 col-md-push-4">
<img class="position7 round" src="img/circle/off/home-special-icon-off.png">
</div>
</div>
<div class="row">
<div class="move8 col-sm-4 col-xs-4 col-md-push-7">
<img class="position8 round" src="img/circle/off/home-vip-icon-off.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Jquery for HTML section:
// jQuery script for are Circle div whit Scroll Reveal Script
$(document).ready(function(){
/*==========================================
SCROLL REVEL SCRIPTS
=====================================================*/
window.scrollReveal = new scrollReveal();
/*==========================================
WRITE YOUR SCRIPTS BELOW
=====================================================*/
$('.round').click(function(){
$('.papir').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
});
});
});
This is more difficult to examine without your CSS, however, it seems that you missed the layout that your example used. They have a separate area for the main text called id="middleBubble". This is the area that the text is being replaced in.
They are performing the replacement here:
$("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>");
where "this" is the element (in this case the image) that has been hovered over. The data is stored in the data-bubble1 and data-bubble2 attributes. You could store it there (the replacement text for each section) or you could store it as a keyed JSON object and use the id of the image to key which values to use. I would recommend the later, but to each their own.