Tabs with multiple slideshow does not load sliders sometimes - javascript

I have created tabs. There are 3 tab items and tabs content is sliders.When i use these slideshows without tabs it works fine. But when used tabs, the slider of tab2 or tab3 sometimes does not load. It only occurs sometimes. What I have learnt that it loads perfectly on page load when using no tabs, But with tabs I have to hide the other 2 tabs on page load. So when click on these tabs, the slideshow does not appear /load sometimes.It also works fine sometimes. Tabs working fine the text content also.
I have been working on shopify, so using slideshow of theme.
Here is the code for html code for tabs:
<ul class="tabs">
<li>
<a data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#menu2">Tab 2</a>
</li>
<li>
<a data-toggle="tab" href="#menu3">Tab 3</a>
</li>
</ul>
<!-- Code for tabs Contnet -->
<div id="menu1">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image1.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image2.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image3.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu2">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image21.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image22.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image23.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu3">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image31.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image32.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image33.jpg"/>
</div>
</div>
</section>
</div>
Javascript for tabs
<script type="text/javascript">
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
</script>
I am working in shopify and the using the slider of theme, here is the code for slideshow from theme.
var slideshow = {
init: function(){
$('.js-homepage-slideshow').each(function (index, value){
var $homepageSlider = $(this);
var settings = {
slideshowSpeed: $homepageSlider.data('slideshow-speed')*1000,
slideshowTextAnimation: $homepageSlider.data('slideshow-text-animation'),
adaptiveHeight: $homepageSlider.data('adaptive-height')
}
//initiate the slideshow
if (!$homepageSlider.hasClass('flickity-enabled')){
var arrowShow = $homepageSlider.find('.gallery-cell').length === 1 ? false : true;
$homepageSlider.flickity({
adaptiveHeight: settings.adaptiveHeight,
wrapAround: true,
cellAlign: 'left',
imagesLoaded: true,
prevNextButtons: arrowShow,
draggable: arrowShow,
pageDots: usePageDots,
autoPlay: settings.slideshowSpeed,
arrowShape: arrowSize
});
if (settings.slideshowTextAnimation != ''){
var flkty = $homepageSlider.data('flickity');
setTimeout(function() {
$homepageSlider.find('.gallery-cell:nth-child(1) .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
$homepageSlider.on( 'select.flickity', function() {
if($homepageSlider.is(':visible')) {
var currentSlide = flkty.selectedIndex + 1;
setTimeout(function() {
$homepageSlider.find('.caption-content').removeClass('animated ' + settings.slideshowTextAnimation);
$homepageSlider.find('.gallery-cell:nth-child(' + currentSlide + ') .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
}
});
}
}
if ($homepageSlider.find('.gallery-cell').length > 1) {
$homepageSlider.addClass('multi-image');
} else {
$homepageSlider.addClass('single-image');
}
$homepageSlider.find('.gallery-cell').each(function(){
var buttonWidth = 0;
$(this).find('.action_button').each(function(){
$button = $(this);
if($(this).width() > buttonWidth){
buttonWidth = $(this).width();
}
});
$(this).find('.action_button').width(buttonWidth);
});
});
},
unload: function($target){
var $slider = $target.find('.js-homepage-slideshow');
$slider.flickity('destroy');
}
}

Related

Javascript - Carousel managed automatically and with keyboard

I'm developing an automatic and keyboard managed carousel slider but it doesn't respond when I hit the previous or back buttons in the keyboard. It works when I click the previous and next buttons, and changes automatically.
Here is my HTML and Js code:
let currentSlide = 0;
const slides = document.querySelectorAll(".picture")
//carousel
const init = (n) => {
slides.forEach((picture, index) => {
picture.style.display = "none"
})
slides[n].style.display = "block"
}
//left and right buttons
document.addEventListener("DOMContentLoaded", init(currentSlide))
const next = () => {
currentSlide >= slides.length - 1 ? currentSlide = 0 : currentSlide++
init(currentSlide)
}
const prev = () => {
currentSlide <= 0 ? currentSlide = slides.length - 1 : currentSlide--
init(currentSlide)
}
document.querySelector(".buttonleft").addEventListener('click', prev)
document.querySelector(".buttonright").addEventListener('click', next)
//each 3 seconds change picture
setInterval(() => {
next()
}, 3000);
// NAVIGATE WITH KEYS
document.keydown(function(e) {
if (e.keyCode === 37) {
// Previous
$(".buttonleft").click();
return false;
}
if (e.keyCode === 39) {
// Next
$(".buttonright").click();
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-container">
<!-- next and prev buttons -->
<div class="navigation">
<div class="btn buttonleft">
<img src="assets/img/left.png">
</div>
<div class="btn buttonright">
<img src="assets/img/right.png">
</div>
<!-- carousel -->
<div class="carousel">
<div class="logo">
<img src="assets/img/mmlogo.png" alt="Yahoo" class="image">
</div>
<div class="picture fade">
<a href="http://www.yahoo.com" target="_blank">
<img src="assets/img/image1.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.google.com" target="_blank">
<img src="assets/img/image2.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.youtube.com" target="_blank">
<img src="assets/img/image3.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.gmail.com" target="_blank">
<img src="assets/img/image4.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.outlook.com" target="_blank">
<img src="assets/img/image5.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
</div>
</div>
</div>
Any ideas? I don't want to use Bootstrap.
Thanks!

Looks like you're using vanilla javascript, until the last event listener. Looks like jquery.
Make it vanilla js like you did above. It works fine.
Keeping your console tools open will give you a good idea of what's wrong.
document.addEventListener('keydown', (function(e) {
if (e.keyCode === 37) {
// Previous
console.log("prev");
}
if (e.keyCode === 39) {
// Next
console.log("next");
}
}));

Image filter Navigation

I have all the code and seems okay to me but when I click on the navigation links the link is directed to index.html or the landing project. How do I make the links filter the images?
This is the Javascript and html
$(document).ready(function() {
$(".button").click(function() {
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show("2000");
} else {
$(".filter").not("." + name).hide("2000");
$(".filter").filter("." + name).show("2000");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>
I expected my images to filter but they navigation links are not working

You need to prevent the default action of the link and also change your numbers to numbers (remove the quotes around the 2000)
$(document).ready(function() {
$(".button").click(function(e) { // pass the event back into the function
e.preventDefault(); // prevent the link action
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show(2000); // remove quotes
} else {
$(".filter").not("." + name).hide(2000);
$(".filter").filter("." + name).show(2000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>

Javascript doesn't toggle the display of an element

So, I'm trying to obtain multiple slideshows on my website.
I have done almost everything, excepting the fact that when I press a picture, the modal of previews is showing, but the clicked image is not showing up. I have to use the buttons of the slideshow to go through them and make the first one to appear.
**
If you don't want to go along this whole code, here you can see what's happening: http://beta.eduardstefan.com
**
I am not trying to promote myself, I just think that I am not quite easy to understand without the example
So, my question, how can I make the first picture to show up when I press one, or why it's not happening, what is bad with my code?
My html:
<div class="portfolio-slideshow">
<a class="prev" onclick="slide(0,-1)">❮</a>
<div class="slide"> <img src="img/dailyui/008.png" class="slideimg_0" id="0" data-no="0"> </div>
<div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_0" id="1" data-no="0"> </div>
<div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_0" id="2" data-no="0"> </div>
<div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_0" id="3" data-no="0"> </div>
<a class="next" onclick="slide(0,1)">❯</a>
</div>
<div class="portfolio-slideshow">
<a class="prev" onclick="slide(2,-1)">❮</a>
<div class="slide"> <img src="img/dailyui/008.png" class="slideimg_2" id="0" data-no="2"> </div>
<div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_2" id="1" data-no="2"> </div>
<div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_2" id="2" data-no="2"> </div>
<div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_2" id="3" data-no="2"> </div>
<a class="next" onclick="slide(2,1)">❯</a>
</div>
<div class="imgpreview">
<i class="fa fa-close" onclick="closepreview()"></i>
<div class="slidepreview no_0">
<a class="prev" onclick="slide(1,-1)">❮</a>
<div class="slidep"> <img src="img/dailyui/008.png" class="slideimg_1" id="0"> </div>
<div class="slidep"> <img src="img/dailyui/007.jpg" class="slideimg_1" id="1"> </div>
<div class="slidep"> <img src="img/dailyui/006.jpg" class="slideimg_1" id="2"> </div>
<div class="slidep"> <img src="img/dailyui/003.jpg" class="slideimg_1" id="3"> </div>
<a class="next" onclick="slide(1,1)">❯</a>
</div>
<div class="slidepreview no_2">
<a class="prev" onclick="slide(3,-1)">❮</a>
<div class="slidep"> <img src="img/dailyui/008.png" class="slideimg_3" id="0"> </div>
<div class="slidep"> <img src="img/dailyui/007.jpg" class="slideimg_3" id="1"> </div>
<div class="slidep"> <img src="img/dailyui/006.jpg" class="slideimg_3" id="2"> </div>
<div class="slidep"> <img src="img/dailyui/003.jpg" class="slideimg_3" id="3"> </div>
<a class="next" onclick="slide(3,1)">❯</a>
</div>
</div>
SCSS:
.portfolio-slideshow{
width: 30%;
display: flex;
justify-content: space-between;
align-items: center;
}
.slide{
padding:0 35px;
display: block;
img{
display: none;
max-height:40vh;
max-width:100%;
}
}
.prev,.next{
display: flex;
align-items: center;
justify-content: center;
}
.imgpreview{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.9);
justify-content: center;
align-items: center;
padding: 50px;
}
.slidepreview{
display: none;
align-items: center;
justify-content: center;
.slidep{
display: block;
img{
display: none;
max-height: 85vh;
max-width: 85vw;
}
}
And Javascript:
var slideIndex = [0,0,0,0,0,0,0,0]
function showSlides(){
var aux = slideIndex.length;
var i;
for(i=0; i<aux; i+=2) { slide(i,0); }
}
function slide(n,m){
var i;
var aux = document.getElementsByClassName("slideimg_" + n);
var aux2 = aux.length - 1;
if (slideIndex[n] == 3 && m == 1) slideIndex[n] = -1;
if (slideIndex[n] == 0 && m == -1) slideIndex[n] = 4;
slideIndex[n] += m;
if (slideIndex[n] < 0) slideIndex = aux2;
else if (slideIndex[n] > aux2) slideIndex = 0;
for(i=0; i<aux.length; i++){
aux[i].style.display = "none";
aux[i].parentElement.style.display = 'none';
}
aux[slideIndex[n]].style.display = "block";
aux[slideIndex[n]].parentElement.style.display = 'block';
}
function closepreview(){
$('.imgpreview').css("display" , "none");
$('.slidepreview').css("display" , "none")
}
$(document).ready(function() {
$(".slide img").click(function(){
var id = $(this).attr('id');
var no = $(this).attr('data-no');
var no2 = no + 1;
$(".imgpreview").css("display" , "flex");
$(".no_" + no).css("display" , "flex");
$("img#" + id + ".slideimg_" + no2).css("display" , "block");
slideIndex[no2] = id;
});
}).resize();

The IDs must be unique.
Instead of inline event handlers I would suggest to attach them to the js code (separate html from js code).
I removed all IDs and I changed everything in jQuery using:
.index()
.toggle( display )
.nextAll(), .next(), .prev() and .prevAll()
I used a class: active. This class is used to mark the current active element. Moreover, every time I need to move next or prev I move this class to the corresponding element. This class takes track of which img must be shown.
The snippet:
$(document).ready(function() {
//
// Toggle visibility
//
$('.slide:not(.active), .slide:not(.active) img').toggle(false);
$('.slide.active, .slide.active img').toggle(true);
//
// closing preview....
//
$('.imgpreview .fa.fa-close').on('click', function(e) {
$('.imgpreview, .slidepreview').css("display" , "none");
//
// ...remove active class and toggle visibility
//
$('.imgpreview, .slidepreview').find('.active, .active img').toggleClass(false).removeClass('active');
});
//
// on prev....
//
$(".prev").on('click', function(e) {
//
// get the active element and so the previous one
//
var active = $(this).nextAll('.slide.active');
var prev = active.prev('.slide');
if (prev.length == 0) {
//
// if at the beginning take the last one
//
prev = $(this).nextAll('.slide').last();
}
//
// move active class and toggle visibility
//
active.removeClass('active');
prev.addClass('active').find('img').andSelf().toggle(true);
$('.slide:not(.active), .slide:not(.active) img').toggle(false);
});
$(".next").on('click', function(e) {
//
// get the active element and so the next one
//
var active = $(this).prevAll('.slide.active');
var next = active.next('.slide');
if (next.length == 0) {
//
// if at the end take the first one
//
next = $(this).prevAll('.slide').last();
}
//
// move active class and toggle visibility
//
active.removeClass('active');
next.addClass('active').find('img').andSelf().toggle(true);
$('.slide:not(.active), .slide:not(.active) img').toggle(false);
});
$(".slide img").on('click', function(e) {
//
// take the index of curr element in the parent element
//
var idx = $(this).closest('div.slide').index();
var no = $(this).data('no');
$('.imgpreview, .no_' + no).css('display' , 'flex');
$('.no_' + no).children().eq(idx).addClass('active');
$('.no_' + no).find('.slide:not(.active), .slide:not(.active) img').toggle(false);
$('.no_' + no).find('.slide.active, .slide.active img').toggle(true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://beta.eduardstefan.com/css/style.css">
<link rel="stylesheet" href="http://beta.eduardstefan.com/css/font-awesome.css">
<div class="portfolio-slideshow">
<a class="prev">❮</a>
<div class="slide active"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_0" data-no="0"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_0" data-no="0"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_0" data-no="0"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_0" data-no="0"></div>
<a class="next">❯</a>
</div>
<div class="portfolio-slideshow">
<a class="prev">❮</a>
<div class="slide active"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_2" data-no="2"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_2" data-no="2"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_2" data-no="2"> </div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_2" data-no="2"></div>
<a class="next">❯</a>
</div>
<div class="imgpreview">
<i class="fa fa-close"></i>
<div class="slidepreview no_0">
<a class="prev" onclick="slide(1,-1)">❮</a>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_1"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_1"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_1"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_1"></div>
<a class="next">❯</a>
</div>
<div class="slidepreview no_2">
<a class="prev">❮</a>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_3"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_3"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_3"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_3"></div>
<a class="next">❯</a>
</div>
</div>

At least one problem is here:
var no = $(this).attr('data-no');
var no2 = no + 1;
no is a string so if no is "0", then no + 1 is "01", so instead you can do this:
var no = $(this).attr('data-no');
var no2 = Number(no) + 1;
https://codepen.io/anon/pen/MmwdZb?editors=1111
Beyond that, why re-invent the wheel? There are plenty of good slideshow plugins available.

Multiple royalslider index indicator on same page

i have multiple fullscreen royalsliders in main page. I want to get the slide index for each slider.
Is it possible to do this in one code by using for loop or something else?
html is;
<div id="page">
<div id="ref1" class="screen">
<div class="royalSlider rsDefaultInv">
<img src="images/projects/1.jpg" />
<img src="images/projects/1.jpg" />
</div>
<div class="slider-detail">
<div class="box hdd">
<div class="detail-left">Project 1 <span>/BRANDING</span></div>
<div class="detail-right">
<a class="detail-btn fr" href="javascript:void(0)" rel="nofollow"></a>
</div>
<div class="bg"></div>
</div>
</div>
<div class="project-detail">
<p class="big-text">Project 1 info</p>
<a class="link" href="#" title="">WEBSITE</a>
</div>
</div>
<div id="ref2" class="screen">
<div class="royalSlider rsDefaultInv">
<img src="images/projects/2.jpg" />
<img src="images/projects/2.jpg" />
</div>
<div class="slider-detail">
<div class="box hdd">
<div class="detail-left">Project 2 <span>/BRANDING</span></div>
<div class="detail-right">
<a class="detail-btn fr" href="javascript:void(0)" rel="nofollow"></a>
</div>
<div class="bg"></div>
</div>
</div>
<div class="project-detail">
<p class="big-text">Project 2 info</p>
<a class="link" href="#" title="">WEBSITE</a>
</div>
</div>
</div>
and here is js;
jQuery(document).ready(function($) {
var rsi = $('#ref1 .royalSlider, #ref2 .royalSlider').royalSlider({
autoHeight: false,
arrowsNav: true,
globalCaption:false,
arrowsNavAutoHide: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 30,
controlNavigation: 'null',
imageScaleMode: 'fill',
imageAlignCenter: false,
addActiveClass:true,
loop: true,
loopRewind: true,
numImagesToPreload: 4,
keyboardNavEnabled: true,
autoScaleSlider: false,
autoScaleSliderWidth: 640,
autoScaleSliderHeight: 360,
imgWidth: 1920,
imgHeight: 1080
}).data('royalSlider');
$('.screen').each(function() {
var slider = $(this).children();
for (var i = 1; i < $(slider).length; i++) {
var ref = '#ref'+i
var sliderInstance = $(ref) + ' ' + slider.data('royalSlider');
}
if (sliderInstance) {
var slideCounter = $('<div class="sliderCount"></div>').appendTo($(ref + ' ' + '.slider-detail .box .detail-right'))
var updCount = function() {
slideCounter.html( (sliderInstance.currSlideId+1) + ' / ' + sliderInstance.numSlides );
}
sliderInstance.ev.on('rsAfterSlideChange', updCount);
updCount();
}
});
});
Problem solved! The code should be like this;
$('.royalSlider').each(function() {
var slider = $(this);
var sliderInstance = slider.data('royalSlider');
if(sliderInstance) {
var slideCounter = $('<div class="rsSlideCount"></div>').appendTo( slider.next().find('.detail-right') );
var updCount = function () {
slideCounter.html( (sliderInstance.currSlideId+1) + ' of ' + sliderInstance.numSlides );
}
sliderInstance.ev.on('rsAfterSlideChange', updCount);
updCount();
}
});

How to pass content to the next tab by jQuery?

I'm a beginner at jQuery. I would like to create selectable portlet, and when it was clicked then showed the same portlet in the second tab immediately.
This is my JavaScript Code.
$(function () {
$(".frame").sortable({
connectWith: ".frame",
handle: ".portlet-header",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$(".portlet-toggle").click(function () {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
});
});
$(function () {
$(".frame").selectable({
stop: function () {
var result = $("#select-result").empty();
var add = $("#newExam").empty();
var count = 0;
$(".ui-selected", this).each(function () {
if (this.id > 0) {
result.append(this.id + " ");
count = count + 1;
}
});
add.append(count);
}
});
});
And this is my HTML code.
<div id="tabs">
<ul>
<li>Master</li>
<li>Add List <span id="newExam" class="badge" >0</span> </li>
</ul>
<div id="master" class="master">
<p>exam in the collection</p>
<br /><br />
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<div class="frame" style="align-content: center">
<div class="portlet portlet-count" id="1">
<div class="portlet-header">First</div>
<div class="portlet-content">test</div>
</div>
<div class="portlet portlet-count" id="2">
<div class="portlet-header">Second</div>
<div class="portlet-content">test</div>
</div>
<div class="portlet portlet-count" id="3">
<div class="portlet-header">Third</div>
<div class="portlet-content">test</div>
</div>
</div>
</div>
<div id="creation">
</div>
P.S. Master is the first tab, Creation is the second tab.

Categories