I want make slide show.
its my code:
java script =>
setInterval(function () {
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
var activeIMG = document.querySelector('.active_slider');
activeIMG.classList.remove('active_slider');
if (activeIMG.nextElementSibling ) {
activeIMG.nextElementSibling .classList.add('active_slider');
} else {
activeIMG.parentElement.firstElementChild.classList.add('active_slider')
}
}, 5000);
.active_slider{
display: inline;
}
.current{
color: red;
}
<div id="slider" class="dk-box mrg-bottom">
<div id="dk-slider-div" class="slides center">
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem active_slider">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<footer>
<ul class="tabs">
<li class="tabItem current">
<a>
Slide 1
</a>
</li>
<li class="tabItem">
<a>
Slide 2
</a>
</li>
<li class="tabItem">
<a>
Slide 3
</a>
</li>
</ul>
</footer>
</div>
</div>
buttons was active and changed after 5 sec but image doesn't change
active_slider = active slider
current = active button
how can i make auto change for slider
i want add class for active and remove class for hide
if cant with class i can active with style { display: inline; }
Try something like this, it will run every 3 second and set the class active to the next element.
setInterval(function(){
var slider = $(".slider");
var active = slider.find(".active");
var sliderCount = slider.find("li").length;
var index = active.index();
active.removeClass("active");
if (index < sliderCount - 1){
active.next().addClass("active")
} else {
slider.find("li:first").addClass("active")
}
}, 3000);
.active{
color: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<li class="slide1">
<img src"image.png" alt="1">
</li>
<li class="slide2 active">
<img src"image.png" alt="2">
</li>
<li class="slide3">
<img src"image.png" alt="3">
</li>
</div>
Your html is invalid, there is = missing after class, should be class="slide1 active". To invoke function after some time you can use setInterval() adn to modify classes you can modify classList
property:
var x = 1000;
setInterval(function () {
var activeLi = document.querySelector('li.active');
activeLi.classList.remove('active');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('active');
} else {
activeLi.parentElement.firstElementChild.classList.add('active')
}
}, x);
.active {
color:red
}
<div class="slider">
<li class="slide1 active">
<img src"image.png">
</li>
<li class="slide2">
<img src"image.png">
</li>
<li class="slide3">
<img src"image.png">
</li>
</div>
On every interval it removes class active from element and checks if element has sibling element (by checking nextElementSibling existence). Depending on it, active class is attached to either sibling or first element (parentElement.firstElementChild).
Related
I have 2 lists of items. One is an ordinary <ul> and the other is a grid of images wrapped in <div>s.
I am looking to highlight the item hovered on both lists that will work in both directions.
So if I hover over <li>Apple, both the <li>Apple & <div>Apple get highlighted. And this should also work in the other direction, if I hover over the <div>Apple, both the <div>Apple and <li>Apple is highlighted.
Notes:
I am able to add the unique class name to any element. Either the <li> & <div> or the <a> within.
Highlighting can be either as an .active class or inline styling.
Similar to the below question but works in both directions:
Jquery 'Highlight' element with the same class
<ul>
<li class="app-hover-select">
<a class="item-1" href="">Apples</a>
</li>
<li class="app-hover-select">
<a class="item-2" href="">Pears</a>
</li>
<li class="app-hover-select">
<a class="item-3" href="">Bananas</a>
</li>
<li class="app-hover-select">
<a class="item-4" href="">Pineapples</a>
</li>
</ul>
<div class="wrapper">
<div class="app-hover-select">
<a class="item-1" href="">
<img scr="">
Apples
</a>
</div>
<div class="app-hover-select">
<a class="item-2" href="">
<img scr="">
Pears
</a>
</div>
<div class="app-hover-select">
<a class="item-3" href="">
<img scr="">
Bananas
</a>
</div>
<div class="app-hover-select">
<a class="item-4" href="">
<img scr="">
Pineapples
</a>
</div>
</div>
My current jQuery with current HTML:
jQuery('.app-hover-select > a').hover(function() {
var appClass = jQuery(this).attr("class");
jQuery(appClass).toggleClass('active');
});
My logic is:
On hover of .app-hover-select > a
var appClass = Get the class
Add class active to all elements with the class appClass
In case you want this:
Try this-
jQuery(".app-hover-select > a").hover(function () {
const listOfItems = this.parentElement.parentElement;
const listItem = this.parentElement;
const i = Array.from(listOfItems.children).indexOf(listItem);
jQuery("ul .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
jQuery(".wrapper .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
});
We need to be able to hide and show elements based on currently hovered element. We have tried the following below, but it does not add the is-active class and remove it based on what other element is on hover.
How can we hide and show elements based on the current hovered element?
Goal (based on example below):
when you hover over some under first, display <div class="two" id="some-link">some link</div> using is-active class
when you hover over path under first, <div class="two" id="some-link">some linke</div> should not display (remove is-active class), and <div class="two" id="path-link">path link</div> should display (add is-active class)
Current issue:
is-active class is not being removed when on hover element is changed
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
first
<div class="one">
<ul>
<li data-at="some-link" id="two">
some
</li>
<li data-at="path-link" id="two">
path
</li>
<li data-at="another-one" id="two">
another one
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
second
<div class="one">
<ul>
<li>
another some
</li>
<li>
another path
</li>
</ul>
</div>
</li>
<li id="one">
third
<div class="one">
<ul>
<li>
third some
</li>
<li>
third path
</li>
</ul>
</div>
</li>
</ul>
First your .find() is using the wrong selector. You have find('is-active') which is an element name selector, you wanted a css class selector ie .is-active.
el_parent.find('.is-active').removeClass('is-active');
Note for removeClass() you don't use a css selector you just use a class name hence why you don't need the dot in that call
Now if you wanted to also have the class removed on hovering out of the element as well then you need to add an event listener for that, and call removeClass from there. .hover() uses a second argument for setting such an event listener callback.
$('li#two').hover(onHoverCallback,function(){
//code for finding the right element
$(el_sel).removeClass('is-active');
})
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
},function(){
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
$(el_sel).removeClass("is-active");
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
first
<div class="one">
<ul>
<li data-at="some-link" id="two">
some
</li>
<li data-at="path-link" id="two">
path
</li>
<li data-at="another-one" id="two">
another one
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
second
<div class="one">
<ul>
<li>
another some
</li>
<li>
another path
</li>
</ul>
</div>
</li>
<li id="one">
third
<div class="one">
<ul>
<li>
third some
</li>
<li>
third path
</li>
</ul>
</div>
</li>
</ul>
I want make slide show.
its my code:
java script =>
setInterval(function () {
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
var activeIMG = document.querySelector('.active_slider');
activeIMG.classList.remove('active_slider');
if (activeIMG.nextElementSibling ) {
activeIMG.nextElementSibling .classList.add('active_slider');
} else {
activeIMG.parentElement.firstElementChild.classList.add('active_slider')
}
}, 5000);
.active_slider{
display: inline;
}
.current{
color: red;
}
<div id="slider" class="dk-box mrg-bottom">
<div id="dk-slider-div" class="slides center">
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem active_slider">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<footer>
<ul class="tabs">
<li class="tabItem current">
<a>
Slide 1
</a>
</li>
<li class="tabItem">
<a>
Slide 2
</a>
</li>
<li class="tabItem">
<a>
Slide 3
</a>
</li>
</ul>
</footer>
</div>
</div>
buttons was active and changed after 5 sec but image doesn't change
active_slider = active slider
current = active button
how can i make auto change for slider
i want add class for active and remove class for hide
if cant with class i can active with style { display: inline; }
<a class="clickCount active_slider" elementtype="1" data-position="0" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="" data-position="1">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="" data-position="2">
<img src="/f15468d9.jpg" class="slideItem">
</a>
var position = 0;
setInterval(function () {
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
position++;
if (position == 3){
position = 0;
}
$('.clickCount').each(function(){
if($(this).attr("data-position") == position){
$(this).addClass('active_slider');
}else{
$(this).removeClass('active_slider');
}
}); }, 1000);
I have aded a data-position attribute for the loop
I think you shout put the active class to the "a" wrapping the img.
setInterval(function () {
ChangePos(true);
}, 6000);
position = 0;
function ChangePos(Next){
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
changePosData(Next);
$('.clickCount').each(function(){
if($(this).attr("data-position") == position){
$(this).addClass('active_slider');
}else{
$(this).removeClass('active_slider');
}
});
function changePosData(Next){
if(Next == true){
console.log('forrward');
position++;
if (position == 3){
position = 0;
}
}else{
console.log('back');
if (position == 0){
position = 3;
}
position--;
}
}
}
$('.btnC2').on('click', function(){
ChangePos(true); // for the next BTN
});
$('.btnC').on('click', function(){
ChangePos(false); // for the prev BTN
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="slider" class="dk-box mrg-bottom">
<div id="dk-slider-div" class="slides center">
<!-- <section> -->
<a class="clickCount active_slider" elementtype="1" data-position="0" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="" data-position="1">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="" data-position="2">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<!-- </section> -->
<button type="button" class="btnC" name="button"> ASD</button>
<button type="button" class="btnC2" name="button"> ASD</button>
<footer>
<ul class="tabs">
<li class="tabItem current">
<a>
Slide 1
</a>
</li>
<li class="tabItem">
<a>
Slide 2
</a>
</li>
<li class="tabItem">
<a>
Slide 3
</a>
</li>
</ul>
</footer>
</div>
</div>
I want to make the dropdown close when clicking anywhere in a document, currently it only closes when I click on the dropdown menu itself. Here's what I currently have of the HTML and JQuery:
HTML:
<div class="user-menu">
<div id="dropdown" class="ddmenu">
<img src="#" class="user-menu-pic" alt="">
<span>Name Lastname</span>
<img src="images/dropdown-icon.png" class="right dropdown-icon" width="30" height="30" alt="">
<ul>
<li>My Profile</li>
<li>Change profile picture/background</li>
<li>Settings</li>
<li>Change password</li>
<li>Sign Out</li>
</ul>
</div>
</div>
Jquery:
$('#dropdown').on('click', function (e) {
e.preventDefault();
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).children('ul').slideUp('fast');
} else {
$(this).addClass('open');
$(this).children('ul').slideDown('fast');
}
});
I think you are looking for something like this:
JSFiddle : DEMO
$('#dropdown').on('click', function (e) {
e.preventDefault();
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).children('ul').slideUp('fast');
} else {
$(this).addClass('open');
$(this).children('ul').slideDown('fast');
}
});
$(document).mouseup(function (e) {
var container = $("#dropdown");
if (!container.is(e.target) // if the target of the click isn't the container...
&&
container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.children('ul').slideUp('fast');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="user-menu">
<div id="dropdown" class="ddmenu">
<img src="#" class="user-menu-pic" alt=""> <span>Name Lastname</span>
<img src="images/dropdown-icon.png" class="right dropdown-icon" width="30" height="30" alt="">
<ul>
<li>My Profile
</li>
<li>Change profile picture/background
</li>
<li>Settings
</li>
<li>Change password
</li>
<li>Sign Out
</li>
</ul>
</div>
</div>
Note : Actually it doesn't need two clicks, it's working with very first click. But you can see that when you click on Menu(very first time), so it is already open(i.e. Already slideDown) and does not have class open. So it executes the loop which returns false for hasClass("open"). Now in that loop we say menu to slideDown, which is already in the slideDown State.
If you want better explanation do me a favor add class="ddmenu open" to your html like this: <div id="dropdown" class="ddmenu open"> and then try it again.
I have a page full of images something like this, more or less:
<div class="category">
<ul class="grid">
<li class="item first">
<span><img src="/pic1-1.jpg" data-hover="/pic1-2.jpg" width="243" height="243" /></span>
<h2 class="product-name">PIC1</h2>
</li>
<li class="item">
<span><img src="/pic1.jpg" width="243" height="243" /></span>
<h2 class="product-name">PIC2</h2>
</li>
<li class="item last">
<span><img src="/pic3-1.jpg" data-hover="/pic3-2.jpg"width="243" height="243" /></span>
<h2 class="product-name">PIC3</h2>
</li>
</ul>
For each item in the list, I'd like to have a second image that only shows on mouse hover if another image has been provided for that list item in the html.
How might I do this in the html and the corresponding javascript?
You can try this:
$(function () {
$('img').each(function () {
$(this).data('original', this.src)
}).mouseenter(function () {
$(this)
.attr('src', $(this).data('hover'))
.animate({
marginTop: 0,
marginRight: 0,
marginLeft: 0,
borderWidth: 10
}, 'fast')
}).mouseleave(function () {
$(this)
.attr('src', $(this).data('original'))
.animate({
marginTop: 20,
marginRight: 10,
marginLeft: 10,
borderWidth: 0
}, 'fast')
})
})
working fiddle
With javascript arrays you can make like this
<script>
var a=0;
function show_next()
{
var imgg = new Array();
imgg[0] = "pic1.jpg";
imgg[1] = "pic2.jpg";
imgg[2] = "pic3.jpg";
if (a>imgg.length-1)
{
a=0;
}
document.getElementById("image").src=imgg[a];
document.getElementById("show").title=imgg[a];
document.getElementById("show").href=imgg[a];
document.getElementById("show_2").href=imgg[a];
document.getElementById("name_image").innerHTML=imgg[a];
a=a+1;
}
</script>
<div class="category">
<ul class="grid">
<li class="item first">
<span><img src="" width="243" height="243" id="image" / ></span>
<h2 class="product-name" ><span id="name_image">PIC1</span></h2>
</li>
</ul>
$(".image").on('hover', function(event) {
$(this).attr('src',$(this).next().data('src'));
}
The code above will execute each time you hover one of the images of the page and then fetchs the data attribute form the next element of that image:
<image class="image" src="yourock.jpg">
<span style="display:none" data-src="yousuck.jpg"></span>
With plain javascript it would be something like:
In head section add this:
<script language="javascript" type="text/javascript">
function swapimg(img)
{
/* If second image is not provided stop execution */
if(img.getAttribute('data-hover') == '') return;
var currentSRC = img.src;
img.src = img.getAttribute('data-hover');
img.setAttribute('data-hover', currentSRC);
}
</script>
Then in your code add onmouseover and onmouseout
<div class="category">
<ul class="grid">
<li class="item first">
<span><img src="/pic1-1.jpg" data-hover="/pic1-2.jpg" onmouseover="swapimg(this);" onmouseout="swapimg(this);" width="243" height="243" /></span>
<h2 class="product-name">PIC1</h2>
</li>
<li class="item">
<span><img src="/pic1.jpg" width="243" height="243" onmouseover="swapimg(this);" onmouseout="swapimg(this);" /></span>
<h2 class="product-name">PIC2</h2>
</li>
<li class="item last">
<span><img src="/pic3-1.jpg" data-hover="/pic3-2.jpg"width="243" height="243" onmouseover="swapimg(this);" onmouseout="swapimg(this);" /></span>
<h2 class="product-name">PIC3</h2>
</li>
</ul>
</div>