Develop Reference

How to add different image slideshow in html on the same page?

From API I’m getting array of images and when requesting the API second time I’m getting another array of different images. When press the button I want to add an images array to the bootstrap gallery and when press again I want to add second array into another gallery. I don’t understand how reuse the same bootstrap html template and create different image galleries in the same html page.
API object:
{
"title": "rodeo",
"author": "consectetur",
"images": [
"http://example/photo.jpg",
"http://example/photostwo.jpg",
"http://example/photosone.jpg"
],
"year": "1998"
}
<div>
<div id="container"></div>
<button id="dataBtn"></button>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
function test(){
const carouselItem = document.querySelector('.carousel-item');
function create(element) {
return document.createElement(element);
}
function append(parent, el) {
return parent.appendChild(el);
}
for (image of data.images) {
let img = create('img');
img.classList.add(‘d - block’, ‘w - 100’);
img.src = image;
append(carouselItem, img);
}
}
test();
document.getElementById("dataBtn").addEventListener("click", test);

With bootstrap, those tasks would be much more easier using jQuery Framework! As you are mentioning only Javascript in your Question' tags, This is a method showing how we could do it is in pure Javascript that you could easily include in your project.
We clone the Carousel container, then we fill the dynamically added clones with new pictures.
//An initial status we could check later
var initial = true;
//A global counter that could be used to distinguish between non-DOM duplicates
let i = 0;
function test() {
//Here A random array of pics would be used
//Just to simulate an API call
var rand = Math.floor(Math.random() * Math.floor(2));
var pix = JSON.parse('{"data":[{"title":"rodeo","author":"consectetur","images":["https://images.unsplash.com/photo-1533522688752-ef641aa0607b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1550543941-281cef85c281?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1565291707930-351bfd98e772?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60"],"year":"1998"},{"title":"Flasher","author":"Photo Addict","images":["https://images.unsplash.com/photo-1516724562728-afc824a36e84?ixlib=rb-1.2.1&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1505739998589-00fc191ce01d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1516962126636-27ad087061cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=125&q=80","https://images.unsplash.com/photo-1518890414976-bb41382be43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=80"],"year":"2020"},{"title":"Domotics","author":"iOting","images":["https://images.unsplash.com/photo-1528255671579-01b9e182ed1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1505739998589-00fc191ce01d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1494351416886-f6b4ed2a1d68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1547938094-b000547cbeb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60"],"year":"2020"}]}');
const carouselItem = document.querySelector('.carousel-item');
function create(element) {
return document.createElement(element);
}
function append(parent, el) {
return parent.appendChild(el);
}
var model = document.getElementById('carouselExampleControls');
function duplicate() {
i++;
//We clone the default laoded Gallery container
var clone = model.cloneNode(true);
clone.id = "cloneGallery" + i;
model.parentNode.appendChild(clone);
//We identify the dynamically newly added picture container
var clItem = document.getElementsByClassName('carousel-item')[i];
//We empty it... so we could replace by new pics
clItem.innerHTML = '';
for (image of pix.data[rand].images) {
var img = create('img');
img.classList.add('d-block', 'w-100');
img.src = image;
append(clItem, img);
}
}
if (initial) {
for (image of pix.data[rand].images) {
var img = create('img');
img.classList.add('d-block', 'w-100');
img.src = image;
append(carouselItem, img);
}
} else {
duplicate();
}
initial = false;
}
document.getElementById("dataBtn").addEventListener("click", test);
<div>
<div id="container"></div>
<button id="dataBtn">Add Pictures!</button>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Try it..
Result Size: 497 x 476
<html>
<title>Multiple slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
​
<h2 class="w3-center">Manual Slideshow</h2>
​
<div class="w3-content w3-display-container">
<img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides1" src="img_lights.jpg" style="width:100%">
<img class="mySlides1" src="img_mountains.jpg" style="width:100%">
<img class="mySlides1" src="img_forest.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">❯</button>
</div>
​
<div class="w3-content w3-display-container">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)">❯</button>
</div>
​
<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showDivs(1, 0);
showDivs(1, 1);
​
function plusDivs(n, no) {
showDivs(slideIndex[no] += n, no);
}
​
function showDivs(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
​
</body>
</html>
​

jquery each selector and ajax not producing the right results

I am trying to simplify my code but running into issues where it is not working when it place in an each loop.
Here is what I am trying to do:
- html has n parent DIV that generates a report via an AJAX call to pull data
- each div respective to report utilizes a data attribute to define which report to pull
- based no the results of the report, it should populate the html with the respective results.
HTML Code (to simplify, using n = 2):
<div class="widget-box widget-hits card no-border bg-white no-margin" data-widget-report="widget-hits">
<div class="container-xs-height full-height">
<div class="row-xs-height">
<div class="col-xs-height col-top">
<div class="card-header top-left top-right">
<div class="card-title text-black hint-text">
<span class="font-montserrat fs-11 all-caps">Weekly Hits
<i class="far fa-chevron-right p-l-5"></i>
</span>
</div>
<div class="card-controls">
<ul>
<li>
<a data-toggle="refresh" class="card-refresh text-black" href="#">
<i class="far fa-circle fa-xs"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-xs-height ">
<div class="col-xs-height col-top relative">
<div class="row">
<div class="col-sm-6">
<div class="p-l-20 widget-total">
<h3 class="no-margin p-b-5"></h3>
<p class="small hint-text m-t-5">
<span class="label m-r-5">%</span>
</p>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="widget-chart"></div>
</div>
</div>
</div>
</div>
<div class="widget-box widget-sales card no-border bg-white no-margin" data-widget-report="widget-sales">
<div class="container-xs-height full-height">
<div class="row-xs-height">
<div class="col-xs-height col-top">
<div class="card-header top-left top-right">
<div class="card-title text-black hint-text">
<span class="font-montserrat fs-11 all-caps">Weekly Sales
<i class="far fa-chevron-right p-l-5"></i>
</span>
</div>
<div class="card-controls">
<ul>
<li>
<a data-toggle="refresh" class="card-refresh text-black" href="#">
<i class="far fa-circle fa-xs"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-xs-height ">
<div class="col-xs-height col-top relative">
<div class="row">
<div class="col-sm-6">
<div class="p-l-20 widget-total">
<h3 class="no-margin p-b-5"></h3>
<p class="small hint-text m-t-5">
<span class="label m-r-5">%</span>
</p>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="widget-chart"></div>
</div>
</div>
</div>
</div>
JS:
$('.widget-box').each(function() {
$widget_report = $(this).data('widget-report');
if ($widget_report !== undefined) {
$.ajax({
type: 'get',
url: '/admin/reports/' + $widget_report,
dataType: 'json',
success:
function(data) {
if (data.success) {
var labelsData = [];
var seriesData = [];
var trend = data.trend * 100;
widget_class = '.' + $widget_report + ' .widget-chart';
console.log(widget_class);
$(this).find('.widget-total h3').text(data.total);
$(this).find('.widget-total p span').text(trend + '%');
trend_span = $(this).find('.widget-total p').children('span');
if(data.trend > 0) {
$(this).find('.widget-total p span.label').addClass('label-success');
$(this).find('.widget-total p').text('Higher');
}
else {
$(this).find('.widget-total p span.label').addClass('label-important');
$(this).find('.widget-total p').text('Lower');
}
$(this).find('.widget-total p').prepend(trend_span);
$.each(data.values, function(key, value){
date = new Date(value.label + 'T00:00:00');
labelsData.push(date.getMonth() + 1 + '/' + date.getDate());
seriesData.push(value.value);
});
chartData = {
labels: labelsData,
series: [seriesData]
}
alert(widget_class);
new Chartist.Bar(widget_class, chartData, {
axisX: {
showGrid: false
},
axisY: {
showGrid: false,
showLabel: false
}
});
}
}
});
}
});
Here are the problems I've encountered:
$(this).find('.widget-total h3').text is not updating the respective DIV group
widget_class for some reason is always returning the last DIV group... even if the last DIV group was returning data.success = false. Ex: above would return widget-sales twice and not widget-hits and then widget-sales.
I am scratching my head on this one... I am able to get this to work without the .each loop and distinctively create one for each... but was hoping to make this universal and allow the control rely on the data-widget-report attribute on the html.
Is this the proper approach?
Any help / direction is appreciated...

Add var in front of widget_class and $widget_report so they are scoped to the function instead of global. I think that will fix your problem. Right now $widget_report gets replaced by the last widget even before the ajax calls are completed.
As for the $(this) not working, you have to assign it to a variable before you make the ajax call.
$('.widget-box').each(function() {
var widgetBoxElement = $(this);
var $widget_report = $(this).data('widget-report');
if ($widget_report !== undefined) {
$.ajax({
type: 'get',
url: '/admin/reports/' + $widget_report,
dataType: 'json',
success:
function(data) {
if (data.success) {
// use widgetBoxElement here instead of $(this)
}
}
});
}
});

call Load more function for active tab

I'm trying to develop a load more function for a specific tab pane, in this case, the active tab pane. I'm having issues with this jquery function because I'm calling the load more in the end of all tabs, and in my JS function I can't figure out how to load after the pane that is active, in which the button was clicked. This way I keep loading the questions in the last pane, but I couldnt print without var lastItem = $('div.question-col .question-summary:last');
$(document).ready(function () {
$(".load-more").on('click', function (e) {
var tab = $(this).data('tab');
var next_page = $(this).data('next-page');
console.log(next_page);
console.log(tab);
$.get($(this).data('url') + '?tab=' + tab + '&page=' + next_page, function (data) {
addNewQuestions($.parseJSON(data));
});
$(this).data('next-page', parseInt(next_page) + 1);
});
siteStats();
});
function addNewQuestions(objects) {
$.each(objects, function (i, object) {
console.log(object);
var lastItem = $('div.question-col .question-summary:last');
var newLine = lastItem.clone(true);
var newObject = newLine.find('.question-info');
updateTitleAndLink(newObject.find('.summary a'), object);
updateCreationDate(newObject.find('.question-updated-at'), object);
updateQuestionAnswers(newObject.find('.question-answers'), object);
updateAnswerCount(newObject.find('.answers-count'), object);
updateViewsCount(newObject.find('.views-count'), object);
updateVotesCount(newObject.find('.votes-count'), object);
updateSolvedStatus(newObject.find('.status'), object)
lastItem.after(newLine);
});
}
The update functions are not relevant to this case, I guess.
<div id="tabs" class="tab-content">
<ul>
<li>Recent Questions</li>
<li>Unanswered Questions</li>
<li>Top Scored Questions</li>
</ul>
{if empty($recent_questions)}
<div class = "col-sm-12" style = "text-align: center"><strong>No questions to load!</strong></div>
{/if}
{if !empty($recent_questions)}
<div id="recent_questions" class="question-col">
<!-- Questions come here -->
<div class = "load-more"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "recent_questions">
<a id="loadMore">
Load More...
</a>
</div>
</div>
{/if}
<div id="unanswered_questions">
<!-- Questions come here -->
<div class = "load-more"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "unanswered_questions">
<a id="loadMore">
Load More...
</a>
</div>
</div>
<div id="top">
<!-- Questions come here -->
<div class = "load-more"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "top_scored_questions">
<a id="loadMore">
Load More...
</a>
</div>
</div>
//Questions come here - Question template
<div class="question-summary narrow">
<div class="question-info col-md-12">
<div class="votes">
<div class="votes-count">
<span title="{$question['votes_count']} votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span>
</div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="answers-count">
<span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="views-count">
<span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary question-title">
<h3>
<a href="{questionUrl($question['publicationid'])}"
data-base-question-url = "{questionUrl('')}"
style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
My question is: is there any way to put my loaded content after the last item of the active pane?
Kind regards

On window re-size challenge using the Isotope masonry view

Here is my dilemma i have two views which work fine on toggle I have the Isotope and Masonry view, this works fine the challenge was to have the masonry view re size certain images depending on the view port, which I did using the below code.
$(function(){
var $container = $('#container');
// add randomize the size of images on the selected class//
$container.find('.element').each(function(){
var $this = $(this),
number = parseInt( $this.find('.number').text(), 10);
if (number % 1 === 0 ){$this.addClass('width2');}
if (window.matchMedia("(max-width: 599px)").matches) {
if ( number % 5 === 3) {
$this.addClass('height2');}
}
if (window.matchMedia("(min-width: 600px) and (max-width:1023px)").matches) {
if ( number %12 % 5 === 2) {
$this.addClass('height2');}
}
if (window.matchMedia("(min-width: 1024px)").matches) {
if ( number %10 % 10 === 5) {
$this.addClass('height2');}
}
});
I make this work by assigning a number to an element using the below
var $l = document.getElementsByClassName("number");
for(i=0; i < 40; i++){ $l[i].innerHTML = i + 1;}
what this does it ads a number to the class "number", I use the top code to return that number and I use modulus to assign a class to the returned numbers.
All of this works fine, if I open a browser window at the given size in my code the class is added to the assigned number range, now my issue is I have to make this work on window re-size which is where I am stuck, is there an easier way to accomplish what I am trying to do or any tips will be greatly appreciated.
here is a bit of the HTML code
<div id="container">
<div class="element item audio hd phone">
<p class="number"></p>
<div class="element_holder bar">
<div class="thumb">
<div class="p-darkblue status opacity">
<i class="fa fa-comments"></i> Available
<div class="modelfeatures">
<span><i class="fa fa-volume-up"></i></span>
<span data-cat="hd" class="hd">HD</span>
<span><i class="fa fa-mobile"></i></span>
</div>
</div>
<!-- hover over effect on masonary view -->
<div class="overlay1">
<div class="p-darkblue col-lg-12 opacity">
<i class="fa fa-comments"></i>Available
<div class="modelfeatures">
<span><i class="fa fa-volume-up"></i></span>
<span class="hd">HD</span>
<span><i class="fa fa-mobile"></i></span>
</div>
<div class="model_name">kinkykat</div>
<div class="rating rating_margin">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-full"></i>
</div>
</div>
</div>
<!-- end of overlay -->
<img class="backdrop" src="image source" alt="Kikykat - Available">
<div class="flame">
<div class="flame1"><i class="fa fa-fire"></i></div>
<div class="flame2"><i class="fa fa-firefox"></i></div>
<div class="flame3"><i class="fa fa-fire"></i></div>
</div>
</div>
</div>

after reading a few doc's regarding isotop found the below solution
// init Isotope
$(window).ready(function(){
var $element_holder = $('.element_holder');
$element_holder.hide();
var $container = $( '.element' );
$container.imagesLoaded(function(){
$element_holder.fadeIn();
$container.isotope({
itemSelector: '.element_holder',
layoutMode: 'fitRows',
fitRows: {
gutter: 1,
columnwidth: '.element_holder',
}
});
});
the issue was the gutter which was not set. :('

Dragging an element to the right cause the original one to be shifted to the left

I'm using JQuery-UI draggable to move an element around. The things is when I drag an element to the right, the underlying list of elements gets dragged to the left!
Here is the DOM of the rendered list:
<div id="result" class="list-group">
<div class="list-group" data-reactid=".0">
<a id="sink" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$1etg">
<h4 class="list-group-item-heading" data-reactid=".0.$1etg.$14dd">
<i class="fa fa-star" data-reactid=".0.$1etg.$14dd.$1crq">Spout</i>
</h4>
<p class="list-group-item-text" name="Spout" data-reactid=".0.$1etg.$24yv">Data source</p>
</a>
<a id="forex" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$1mfb">
<h4 class="list-group-item-heading" data-reactid=".0.$1mfb.$1epm">
<i class="fa fa-dollar" data-reactid=".0.$1mfb.$1epm.$1b42">Composable type</i>
</h4>
<p class="list-group-item-text" name="Composable type" data-reactid=".0.$1mfb.$210d">Composable type</p>
</a>
<a id="read_portfolio" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$k4i">
<h4 class="list-group-item-heading" data-reactid=".0.$k4i.$a1i">
<i class="fa fa-search" data-reactid=".0.$k4i.$a1i.$mqj">Read portfolio</i>
</h4>
<p class="list-group-item-text" name="Read portfolio" data-reactid=".0.$k4i.$1pqw">Read a portfolio</p>
</a>
<a id="constituents_valuation" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$11ub">
<h4 class="list-group-item-heading" data-reactid=".0.$11ub.$1r31">
<i class="fa fa-cogs" data-reactid=".0.$11ub.$1r31.$1omt">Constituents valuation</i>
</h4>
<p class="list-group-item-text" name="Constituents valuation" data-reactid=".0.$11ub.$bca">Compute the valuation of constituents</p>
</a>
<a id="get_constituents" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$n2d">
<h4 class="list-group-item-heading" data-reactid=".0.$n2d.$jho">
<i class="fa fa-eye" data-reactid=".0.$n2d.$jho.$nn1">Portfolio constituents</i>
</h4>
<p class="list-group-item-text" name="Portfolio constituents" data-reactid=".0.$n2d.$1870">Get the constituents of a portfolio</p>
</a>
</div>
</div>
Here is how the plugin is used:
$(".list-group-item").draggable({
cursor: "move",
cursorAt: { top: -10, left: -10 },
helper: function (event) {
var coords = getCrossBrowserElementCoords(event);
var id = event.currentTarget.getAttribute('id');
// draw a temporary element
dragged = $.extend({}, $scope.components[id]);
dragged['id'] = id + '-' + randomKey();
dragged['x'] = coords.x;
dragged['y'] = coords.y;
dragged['selected'] = true;
$rootScope.$broadcast(Config.events.add_node, dragged);
return $("<div class='fa fa-" + dragged.icon + "' style='font-size:xx-large'></div>");
},
// Triggerent on mouse move while holding the item
drag: function(event, element) {
//TODO trigger add_node event
var coords = getCrossBrowserElementCoords(event);
dragged['x'] = coords.x;
dragged['y'] = coords.y;
$rootScope.$broadcast(Config.events.update_node, dragged);
},
// Triggered once a the mouse is released
stop: function(event, element) {
var coords = getCrossBrowserElementCoords(event);
// if within the slider then remove the temporary node
var width = parseInt($("#sidebar-wrapper").css('width'), 10);
if(coords.x < width) {
$rootScope.$broadcast(Config.events.remove_node, dragged);
}
dragged = null;
}
});
The rendered clone is appended to the end of list-group.
Below is how it looks like, Any pointer to the issue will be welcome.

maybe it has to do with Cursor At? I think when you first start the drag, Jquery UI will move the helper element to the specified location in Cursor At, creating the illusion of it jumping left?

I fixed the problem by using appendTo attribute of draggable to attach the element to the #result parent, and then controlling when it is hidden or shown in drag function.