How to set default active slide in Swiper JS - javascript

I have HTML
<div class="swiper-container instance-0" data-id="nav-slider">
<ul class="swiper-wrapper nav-content__list">
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/stories">
<span class="link__text">
Stories
</span>
</a>
</li>
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/multimedia">
<span class="link__text">
Multimedia
</span>
</a>
</li>
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/press-releases">
<span class="link__text">
Press releases
</span>
</a>
</li>
</ul>
</div>
My js:
const $navSlider = $('[data-id="nav-slider"]');
const $swiperInstances = [];
const $currentPath = window.location.pathname;
$navSlider.each(function (index, sliderElement) {
const $this = $(this);
$this.addClass(`instance-${index}`);
$swiperInstances[index] = new Swiper(sliderElement, {
slidesPerView: 'auto',
watchOverflow: true,
initialSlide: '2',
});
});
But initialSlide don't work for me.
$swiperInstances[index].slideTo(2) don't work too
I need set the default item in the swiperslider

you need to use .slideTo() in afterInit() event.
documentation

Related

create a const for each item of an array in jquery

I'm trying to create a const or a var for each array item using jQuery, below is my HTML
<div class="taxonomy-list">
<input type="hidden" id="filters-category">
<ul class="category-list ">
<li><a href="javascript:;" class="filter-link portfolio-cat-item cat-list_item active" data-slug="" data-id=""
data-taxtype="">All </a></li>
<li>
<a href="javascript:;" class="filter-link cat-list_item" data-slug="uncategorized" data-taxtype="category"
data-id="1">
Category </a>
<span class="remove"><i class="fas fa-times"></i></span>
</li>
</ul>
<input type="hidden" id="filters-post_tag">
<ul class="post_tag-list ">
<li><a href="javascript:;" class="filter-link portfolio-cat-item cat-list_item active" data-slug="" data-id=""
data-taxtype="">All </a></li>
<li>
<a href="javascript:;" class="filter-link cat-list_item" data-slug="tag-1" data-taxtype="post_tag"
data-id="3">
Tag 1 </a>
<span class="remove"><i class="fas fa-times"></i></span>
</li>
</ul>
</div>
and below is the js I'm trying to use
$('.taxonomy-list input').each(function(index, value) {
const tax_name = [jQuery('.taxonomy-list input')]
for (let i = 0; i < tax_name.length; i++) {
console.log(`tax-${index}: ${this.id}`);
}
});
What I'm willing to get is in below format
const tax_0 = jQuery('#filters-category').val().split(',');
const tax_1 = jQuery('#filters-post_tag').val().split(',');
there will be more tax-i coming up, so I need to create a new const for each of them

jquery page counter, pagination

I have a problem with the next code
scorm
In the previous image you can see a scorm with a list of pages on the left and a counter down at the center.
$(document).ready(function(){
$(".ViewerPagination__fullpage").html($("li.liItem").size());
$(".ViewerPagination__page").text(1);
$("li.liItem").on( "click", function(){
var numpag = $("li.liItem").index(this);
$(".ViewerPagination__page").text(numpag+1);
$('a.nav_delante').on( "click", function(){
var summa = ++numpag;
$(".ViewerPagination__page").text(summa+1);
if (summa === $("li.liItem").length) {
$(".ViewerPagination__page").html($("li.liItem").size());
$('a.nav_delante').off();
}
});
$('a.nav_atras').on( "click", function(){
var rest = --numpag;
$(".ViewerPagination__page").text(rest-1);
if (rest === 1) {
$(".ViewerPagination__page").text(1);
$('a.nav_atras').off();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--this is the html code that I use for the list:-->
<ul class="uItem">
<li title="text1" class="liItem ">
<div class="divItem notattempted selected" data-pag="001">
<span class="spanItem">
<a class="aItem">text1</a>
</span>
</div>
</li>
<li title="text2" class="liItem ">
<div class="divItem notattempted" data-pag="002">
<span class="spanItem">
<a class="aItem">text2</a>
</span>
</div>
</li>
<li title="text3" class="liItem ">
<div class="divItem notattempted" data-pag="003">
<span class="spanItem">
<a class="aItem">text3</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="004">
<span class="spanItem">
<a class="aItem">text4</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="005">
<span class="spanItem">
<a class="aItem">text5</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="006">
<span class="spanItem">
<a class="aItem">text6</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="007">
<span class="spanItem">
<a class="aItem">text7</a>
</span>
</div>
</li>
</ul>
<!--this is the html code that I use for the counter:-->
<a class="nav_atras" href="#" alt="Anterior" title="Anterior">
<button class="buttMoodle" style="height: 20px;" ></button>
</a>
<div class="ViewerPagination__container">
<span class="ViewerPagination__page"></span>
<span class="ViewerPagination__points">ยท</span>
<span class="ViewerPagination__fullpage"></span>
</div>
<a class="nav_delante" href="#" alt="Siguiente" title="Siguiente">
<button class="buttMoodle" style="height: 20px;"></button>
</a>
If you click on the item of the list, it works fine, but i have problems with the next and back buttons, it does not work until you select an item from the list and sometimes they work badly since they start counting -1, -2 when you press the back button and they go past the number of items in the list with the forward button.
Can someone help me to solve this problem with a best code? thanks.
i just uploaded the scorm, you can see it online following the next link, you only have to loging, I know, it is boring, but it is the only way that I can show you this, so I am waiting for your help.
https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=6aeec00f-7333-4537-a3f3-da6ac52e1fb3
Thanks in advance.

Jquery event.preventDefault() not working

I want my menu to show and hide list items on click by default they are hide. The problem is my menu is generated in admin section so it auto assigns url of website to it if i set URL field of particular link to null in menu options. so when i click it reloads home page.
What i want is that when i click any parent li it should stop generating default event so used prevent default. but in my case it is not working and it reloads the page after showing list items of there parent.
Here is a fiddle
Fiddle
Html
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">Massachusetts Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Burlington Mall, MA</span>
</li>
<li class=" "><span class="menu-title">Burlington Mall, MA - Cart</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New Jersey Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Brunswick Square Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Garden State Plaza, NJ</span>
</li>
<li class=" "><span class="menu-title">Menlo Park Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Ocean County Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Rockaway Townsquare, NJ</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New York Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Galleria at White Plains, NY</span>
</li>
<li class=" "><span class="menu-title">Manhattan, NY-Toys 'R' Us </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">North Carolina Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">CrabTree Valley, NC</span>
</li>
<li class=" "><span class="menu-title">Fayetteville, NC</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
JS:
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
event.preventDefault();
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
}
});
Css
li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
display: none;
}
li
{
padding:10px;
position: relative;
margin:auto;
}
Here is a working example: http://jsfiddle.net/hk1w89zw/
Not sure what you were trying to acheive with the id prop. In general it's better to set the onClick event on a link (<a>-tag) instead of the li. and use following jQuery code:
$("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) {
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).closest('.parent').find('.dropdown-mega.level2').show();
});
maybe you want something like this
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
window.location.href="location_of_the_filehere";
}
event.preventDefault();
});
Catch the event when its trigger out
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
event.preventDefault();
}
I have to admit that I got your code wrong.
Here is a https://jsbin.com/gigowopijo/3/edit?html,js,console,output (JSBin).
First you don't have a list with the id "#li_menu169". Add it to the ul element
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu"><div class="mega-col-inner">
<ul id="li_menu169">
Later on you're showing and hiding the same elements which is a bit confusing. Therefore I would recommend hiding all inner elements first and than showing the inner elements of "this" stuff.
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).attr('id');
if (id === 'yes' && typeof id !== undefined) {
console.log("I'm there");
//i want to prevent
} else {
console.log("i'm here");
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).find('.dropdown-mega.level2').show();
//redirect
}
});
Within the JSbin it is working as you expect.

How to click on the element using jQuery which generates dynamic ID on the click of the element?

<div class="scrolling-items-wrapper">
<div class="menu" style="max-height: 105px;">
<div class="scrolling" style="width: 196px; max-height: 105px;">
<div class="scrolling-content">
<ul >
<li data-menuid="ABC_1">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_1</span>
</a>
</li>
<li data-menuid="ABC_2">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_2</span>
</a>
</li>
<li data-menuid="ABC_3">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Manual click :
Whenever that element is clicked manually it generates a dynamic ID.
Using jQuery :
I want to click a particular element suppose ABC_1 using jQuery.
When it is clicked it should generate the Dynamic ID.
Did you try this?
$( "li[data-menuid='ABC_1']" ).click()
If it doesn't work here is a list of all jquery selectors: https://api.jquery.com/category/selectors/
If you have al element with ID ABC_123, you can do this:
$(document).ready(function() {
$("#ABC_123").click(function () {
var newId = "ABC_"+new Date().getTime();
this.id= newId;
});
});
This will change the id of the element by adding the date in miliseconds. Then, do what you want with the new ID.

How to select the element in javascript?

the dom as the following:
<li class="category51">
<a class="drop" href="#">Data</a>
<div class="dropdown_2column align_left ">
<div class="col_1">
<ul>
<li class="level1">
<a href="#">
<span class="level1">Solutions1</span>
</a>
</li>
<li class="level1">
<a href="#">
<span class="level1">Solutions</span>
</a>
</li>
</ul>
</div>
</div>
</li>
i want to get Solutions1 and Solutions a lable. how should i do?i using:
var link = document.getElementsByClassName("category51").document.getElementsByTagName(ul).document.getElementsByTagName(li).document.getElementsByTagName(a).
what i want to achieve:
i want to disable the link by javascript.so i must bind an event to the a lable, now, i don't know how to locate it.
You could use Document.querySelecorAll.
var eles = document.querySelectorAll('li.level1 a'),
i;
for (i = 0; i < eles.length, i++) {
eles[i].onclick = function() {
//...
};
}

Categories