How to automatically advance items on a click? - javascript

I'm looking for a way to advance a list automatically on a click. For example, if there's five items in a list how do I automatically advance those items until the end? Right now, it advances when the end button is clicked, I'm looking for a way to click a button once and then advance automatically until the end.
My code so far:
var n = $(".slider-slide-wrap").length,
width = 500,
newwidth = width * n;
var n = $(".slider-slide-wrap2").length,
width = 500,
newwidth = width * n;
$('.slide-wrap').css({
'width': newwidth
});
$('.slide-wrap2').css({
'width': newwidth
});
$(".slider-slide-wrap").each(function (i) {
var thiswid = 500;
$(this).css({
'left': thiswid * i
});
});
$(".slider-slide-wrap2").each(function (i) {
var thiswid = 500;
$(this).css({
'left': thiswid * i
});
});
$('.slider-wrap2').scroll(function () {
var scrollLeft = $(this).scrollLeft();
$(".slider-slide-wrap2").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();
if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
}
});
});
$('#end').click(function() {
event.preventDefault();
var $next = $('.slide-wrap .shown').next();
var $next2 = $('.slide-wrap2 .shown').next();
var curr = $('.rundown-items .current').parent(); //find .current's parent
var $children = $('.rundown-items').children();
var firstcal = $children.length;
var actual = firstcal - 9;
$children.each(function (i) {
if (i < actual) {
$(this).addClass('scrollup')
}
});
setTimeout(function(){
if ($next.length) {
$('.slider-wrap').animate({
scrollLeft: $next.position().left
}, 0);
}
if ($next2.length) {
$('.slider-wrap2').animate({
scrollLeft: $next2.position().left
}, 200);
}
if (curr.next().length > 0) {
$('.rundown-items').animate({scrollTop: '+=35px'}, 400);
curr.children('.current').contents().unwrap(); // remove .current
curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
};
}, 150);
});
.slider-wrap2{position:relative;width:500px;height:60px;overflow-y:hidden;overflow-x:hidden;padding-top:5px;text-align:center;z-index:99999999999}
.slide-wrap2{position:relative;height:60px;top:0;left:0}
.slider-slide-wrap,.slider-slide-wrap2{position:absolute;width:500px;height:100%}
.shown .single {width:1024px;height:576px;overflow-y: scroll;overflow-x:hidden;padding:0 17px 0 0;box-sizing: content-box;margin:0}*/
.shown .single li{overflow-y: scroll;overflow-x:hidden;padding-right: 17px;box-sizing: content-box;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="end">End</button>
<div class="slider-wrap2">
<div class="slide-wrap2">
<div class="slider-slide-wrap2 shown"></div>
<div class="slider-slide-wrap2">item 1</div>
<div class="slider-slide-wrap2">item 2</div>
<div class="slider-slide-wrap2">item 3</div>
<div class="slider-slide-wrap2">item 4</div>
<div class="slider-slide-wrap2">item 5</div>
</div>
</div>

You can trigger the click event by checking the index of the current element:
.......
if ($next2.length) {
$('.slider-wrap2').animate({
scrollLeft: $next2.position().left
}, 200);
if($next2.index() <= 5) // check the index
$('#end').trigger('click'); // trigger the event
}
.......
Also, do not forget to pass the event in the callback function:
$('#end').click(function(event) {
var n = $(".slider-slide-wrap").length,
width = 500,
newwidth = width * n;
var n = $(".slider-slide-wrap2").length,
width = 500,
newwidth = width * n;
$('.slide-wrap').css({
'width': newwidth
});
$('.slide-wrap2').css({
'width': newwidth
});
$(".slider-slide-wrap").each(function (i) {
var thiswid = 500;
$(this).css({
'left': thiswid * i
});
});
$(".slider-slide-wrap2").each(function (i) {
var thiswid = 500;
$(this).css({
'left': thiswid * i
});
});
$('.slider-wrap2').scroll(function () {
var scrollLeft = $(this).scrollLeft();
$(".slider-slide-wrap2").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();
if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
}
});
});
$('#end').click(function(event) {
event.preventDefault();
var $next = $('.slide-wrap .shown').next();
var $next2 = $('.slide-wrap2 .shown').next();
var curr = $('.rundown-items .current').parent(); //find .current's parent
var $children = $('.rundown-items').children();
var firstcal = $children.length;
var actual = firstcal - 9;
$children.each(function (i) {
if (i < actual) {
$(this).addClass('scrollup')
}
});
setTimeout(function(){
if ($next.length) {
$('.slider-wrap').animate({
scrollLeft: $next.position().left
}, 0);
}
if ($next2.length) {
$('.slider-wrap2').animate({
scrollLeft: $next2.position().left
}, 200);
if($next2.index() <= 5)
$('#end').trigger('click');
}
if (curr.next().length > 0) {
$('.rundown-items').animate({scrollTop: '+=35px'}, 400);
curr.children('.current').contents().unwrap(); // remove .current
curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
};
}, 150);
});
.slider-wrap2{position:relative;width:500px;height:60px;overflow-y:hidden;overflow-x:hidden;padding-top:5px;text-align:center;z-index:99999999999}
.slide-wrap2{position:relative;height:60px;top:0;left:0}
.slider-slide-wrap,.slider-slide-wrap2{position:absolute;width:500px;height:100%}
.shown .single {width:1024px;height:576px;overflow-y: scroll;overflow-x:hidden;padding:0 17px 0 0;box-sizing: content-box;margin:0}*/
.shown .single li{overflow-y: scroll;overflow-x:hidden;padding-right: 17px;box-sizing: content-box;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="end">End</button>
<div class="slider-wrap2">
<div class="slide-wrap2">
<div class="slider-slide-wrap2 shown"></div>
<div class="slider-slide-wrap2">item 1</div>
<div class="slider-slide-wrap2">item 2</div>
<div class="slider-slide-wrap2">item 3</div>
<div class="slider-slide-wrap2">item 4</div>
<div class="slider-slide-wrap2">item 5</div>
</div>
</div>

Related

Change opacity of a particular div, on mouse hover, and add a text label

My Question is: Change opacity of a particular div, on mouse hover, and add a text label, to display which div is being hovered and changed opacity.
My Solution so far- I have changed the opacity, but for all the divs(HISTOGRAM, basically).
Problem- Want to change for a particular div, on HOVER.
HTML File
<head>
<title>Statistical Histograms</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="boxes.css">
<!-- <script src="alter.js"></script> -->
</head>
<body>
<script type="text/javascript" src="box.js"></script>
<form>
Number:<input type="text" id="number"/><br>
<input type="button" id="button1" value="Draw" onClick="draw()"/><br>
<input type="button" id="button2" value="Change Color" onClick="color()"/><br>
<div id="histContainer" style="position: relative;"> </div>
<!-- <input type="button" id="color_change" style="float: right;" value="Change Color" /> -->
</body>
JavaScript File
function draw()
{
var nums = document.getElementById("number").value.split(",");
console.log(nums);
var w = 40;
var factor = 20;
var n_max = Math.max.apply(parseInt, nums);
var h_max = factor * n_max;
console.log("h max is " + h_max);
console.log("n max is " + n_max);
//var h_max = Math.max(h);
//var a = parseInt(nums);
//var create = document.getElementById("shape");
for (var i = 0 ; i <= nums.length ; i++)
{
//var x = parseInt(nums[i]);
//var final_width = w / x;
var x_cor = (i+1) * w;
//var y_cor = i * w * 0.5;
var h = factor * nums[i];
console.log(x_cor);
console.log(h);
//console.log(h_max);
var change = document.getElementById("histContainer");
//change.className = 'myClass';
var bar = document.createElement("div");
bar.className = 'myClass';
//var c_change = document.createElement("div2");
//change.appendChild(c_change);
change.appendChild(bar);
console.log(change);
//change.style.x.value = x_cor;
//change.style.y.value = y_cor;
bar.style.position = "absolute";
bar.style.top = (h_max - h) + "px";
//bar.style.transform = "rotate(-1deg)"
bar.style.left = i*w*1 + "px";
bar.style.backgroundColor = "rgba(1,211,97,0.6)";
bar.style.opacity = "1.0";
bar.style.width = w + "px";
bar.style.height = h + "px";
//var color1 = document.getElementById("histContainer");
//var bar_color = document.createElement("div");
//color1.appendChild(change);
//bar.style.color = "rgba(1,211,97,0.6)";
}
}
$(document).ready(function() {
$("#histContainer").bind("mouseover", function() {
var shade = $("#histContainer").css("opacity");
$("#histContainer").css("opacity", "0.7");
$("#histContainer").bind("mouseout", function() {
$("#histContainer").css("opacity", shade);
});
//$("histContainer").css("opacity", "0.4");
});
});
Add a class to all divs you would like to attach the hover event to, e.g.
<div class="histogram" id="histogram1"></div>
<div class="histogram" id="histogram2"></div>
<div class="histogram" id="histogram3"></div>
<div class="histogram" id="histogram4"></div>
Then use jquery's hover function to capture the event:
$(document).ready(function() {
$('.histogram').hover(
function() { // handler in
$( this ).css('opacity', 0.7);
// Additional actions (display info, etc.)
}, function() { // handler out
$( this ).css('opacity', 1);
// Additional actions (hide info, etc.)
}
);
})
Use CSS for this.
CSS:
#hover-content {
display:none;
}
#hover-me:hover #hover-content {
display:block;
}
#hover-me:hover {
opacity: 0.8;
}
HMTL:
<div class="container">
<div id="hover-me">
<span>Hover Me</span>
<div id="hover-content">
This content is visible only when you mouse hover the parent div and it has no transition.
</div>
</div>
</div>
Shouldn't you use CSS for that? Give a equal class to your divs and then just do :
.your_div : hover {
opacity: 0.8;
}
check out this snippet if you want only backgroundto be opaque try rgba()
$(document).ready(function() {
$('.histogram').hover(
function() {
$( this ).css('opacity', '0.7');
}, function() {
$( this ).css('opacity', '1');
}
);
})
.histogram{
height:40px;
width:40px;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
.yell{
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="histogram red" >1</div>
<div class="histogram blue">2</div>
<div class="histogram green">3</div>
<div class="histogram yell" >4</div>
Use this javascript instead. It works.
function draw()
{
var nums = document.getElementById("number").value.split(",");
var w = 40;
var factor = 20;
var n_max = Math.max.apply(parseInt, nums);
var h_max = factor * n_max;
for (var i = 0 ; i <= nums.length ; i++)
{
var x_cor = (i+1) * w;
var h = factor * nums[i];
var change = document.getElementById("histContainer");
var bar = document.createElement("div");
bar.className = 'myClass';
change.appendChild(bar);
bar.style.position = "absolute";
bar.style.top = (h_max - h) + "px";
bar.style.left = i*w*1 + "px";
bar.style.backgroundColor = "rgba(1,211,97,0.6)";
bar.style.opacity = "1.0";
bar.style.width = w + "px";
bar.style.height = h + "px";
}
}
$(document).ready(function() {
$(document).on("mouseover",".myClass", function(index,el) {
$(this).text($(this).index());
var shade = $(this).css("opacity");
$(this).css("opacity", "0.7");
$(document).on("mouseout",".myClass", function() {
$(this).css("opacity", shade);
});
});
});

Creating a jQuery vertical scroll loop

I'm trying to write a jQuery script that will continually scroll these <p> tags within their <div> parent. I got the idea from this site.
function shuffle(){
$('#wrapper > p').each(function(){
h = ($(this).offset().top + 130);
if( h > 500 ){
console.log(h);
$(this).css ('top', 0 );
return;
}
if( h == 270 ){
$(this).addClass('current' );
}
if( h == 360 ){
$(this).removeClass('current' );
}
$(this).animate({
top: h,
easing: 'easeIn'
}, 500, '');
if( h > 1350 ){
$(this).css ('top', 0 );
}
});
window.setTimeout(shuffle, 2500);
}
var i = 0;
$('#wrapper > p').each(function(){
starter = $(this).css('top', ((i * 90) ) + 'px' );
starterWhite = ($(this).offset().top + 130);
if((i*90) == 270)
$(this).addClass('current');
$(this).css('top', starter );
i++;
});
window.setTimeout(shuffle, 2000);
#wrapper {
height: 500px;
overflow: hidden;
position: relative;
}
p {
position: absolute;
margin: 0;
padding: 0;
}
.current {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
Problem is when I try to make it scroll the <p> tags overlap, and the highlighted tag doesn't change. Any idea how to make it work? Here's a JSFiddle of what I got so far.
Check this out:
// Constants, you can play with it
var STEP = 90;
var CURRENT_INDEX = 3;
// Variables for calculating
var currentTop = STEP * CURRENT_INDEX;
var nextForCurrentTop = STEP * (CURRENT_INDEX + 1);
var $numbers = $('#wrapper > p');
// In this case = 7
var count = $numbers.length;
var secondToLastTop = STEP * (count - 1);
$numbers.each(function(i) {
var $this = $(this);
$this.css('top', i * STEP + 'px');
if (i === CURRENT_INDEX) {
$this.addClass('current');
}
});
window.setTimeout(shuffle, 2000);
function shuffle() {
$numbers.each(function() {
$this = $(this);
// Calculating the new position of the element
h = parseInt($this.css('top')) + STEP;
// In this case = 540
if (h > secondToLastTop) {
$this.css('top', 0);
return;
}
// In this case visually = 3rd element
if (h === currentTop) {
$this.addClass('current');
}
// In this case visually = 4th element
if (h === nextForCurrentTop) {
$this.removeClass('current');
}
$this.animate({
top: h,
easing: 'easeIn'
}, 500, '');
});
window.setTimeout(shuffle, 2500);
}
#wrapper {
height: 500px;
overflow: hidden;
position: relative;
}
p {
position: absolute;
margin: 0;
padding: 0;
}
.current {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
I improved and commented code from your example, removed magic numbers. You can play with constants.

jQuery slider with buttons is buggy

This the html:
<div id = "slideshow">
<div id="slideshowWindow">
<div class="slide"><img src="slideshow.jpg" alt="" /></div>
<div class="slide"><img src="DSC_8185.jpg" alt="" /></div>
<div class="slide"><img src="DSC_8211.jpg" alt="" /></div>
<div class="slide"><img src="OrganicSoilad.jpg" alt="" /></div>
<div class="slide"><img src="DSC_8243.jpg" alt="" /></div>
<input style = "display: none;" value = "" id="hide"/>
</div>
Everything seems to work fine except for the prev() button. It just bugs out if you click it more than once. It gets all buggy. I'm relatively new to jquery and if anyone has any insight on how to stop the slider from sliding while on hover that would also be helpful.
the javascript:
$(document).ready(function() {
$(".content").mouseenter(function(){
$( ".arrows" ).fadeIn(100);
});
$('.content').mouseleave(function(){
$( ".arrows" ).fadeOut(700);
});
var currentPosition = 0;
var $hide = $('#hide');
$hide.val(currentPosition);
var slideWidth = 1140;
var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval;
var speed = 5000; slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
currentPosition = $('#hide').val();
if(currentPosition == numberOfSlides - 1)
{
currentPosition = 0; $hide.val(currentPosition);
} else {
currentPosition++; $hide.val(currentPosition);
}
moveSlide();
}
function moveSlide() {
$current = $('#slidesHolder').css('padding-left');
$current_num = $current.replace('px' , '');
$padding = $current_num;
$('#slidesHolder').animate({'paddingLeft': $padding});
/* alert($padding); */
/*alert($('#slidesHolder').css('padding-left')); */
$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
$('#media').html(currentPosition);
}
});
function next()
{
currentPosition = $('#hide').val();
slideWidth = 1140;
++currentPosition; if(currentPosition > 4){currentPosition =0;}
$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
$('#hide').val(currentPosition)
$('#media').html(currentPosition);
}
function prev()
{
currentPosition = $('#hide').val();
slideWidth = 1140;
$left = 1140;
if(currentPosition == 0)
{
currentPosition = 5;
}
else
{
if($('#slidesHolder').css('padding-left') == '1140px')
{
$left = $left + $left;
}
$('#hide').val(currentPosition);
$('#slidesHolder').animate({'paddingLeft' : $left});
if(currentPosition == 0)
{
currentPosition = 4;
}
else{
--currentPosition;
}
$('#hide').val(currentPosition);
$('#media').html(currentPosition);
}
}

only first element in jquery each loop getting updated

Hi I am just trying to do an each loop on elements containing the class front but only first element is getting updated for some reason please help. May be it is a silly mistake but i am unable to find it.
jsfiddle:
http://jsfiddle.net/sVTCK/7/
HTML:
<div class="wrapper">
<div class="front"></div>
<div class="front"></div>
<div class="front"></div>
<div class="front"></div>
<div class="front"></div>
<div class="front"></div>
</div>
jquery:
function setSlide(rows, dimension) {
var topPos = 0;
var leftPos = 0;
$(".front").each(function(i, e) {
topPos++;
if (i % rows === 0) {
topPos = 0;
leftPos++;
}
var position = topPos * dimension + " " + (leftPos - 1) * dimension;
e.style.backgroundPosition = position;
e.innerHTML = e.style.backgroundPosition;
});
}
setSlide(3,200);
css:
.front{
width:200px;
height:200px;
background:url(some image);
border:1px solid black;
float:left
}
.wrapper{
overflow:hidden;
width:610px;
}
function setSlide(rows, dimension) {
var topPos = 0;
var leftPos = 0;
$(".front").each(function(i, e) {
topPos++;
if (i % rows === 0) {
topPos = 0;
leftPos++;
}
var position = topPos * dimension + 'px ' + (leftPos - 1) * dimension +'px';
e.style.backgroundPosition = position;
e.innerHTML = e.style.backgroundPosition;
});
}
setSlide(3,200);
THE WORKING DEMO.
ok I've refractored the javascript stlightly into jquery since your using it and moved from the vanilla javascript:
function setSlide(rows, dimension) {
var topPos = 0;
var leftPos = 0;
var front = $('.front');
$.each(front, function(index, val) {
topPos++;
if (index % rows === 0) {
topPos = 0;
leftPos++;
}
var position = topPos * dimension + "px, " + (leftPos - 1) * dimension + 'px';
$(this).css('backgroundPosition', position);
$(this).append(position);
});
}
setSlide(3,200);
http://jsfiddle.net/sVTCK/18/
If you can tell us what your trying to do with the if statement it would help to add the background-position...
You should be reallying on jQuery if you have it in page since it'll be quicker and you should also be caching your variables

Multiple sliders sliding at the same time when only the active one should be sliding

I have multiple sliders, each in its own section->article. My problem is this: When I hit the next or previous button on one of the sliders all sliders start sliding at the same time.
html:
<section id="section01">
<article class="article01">
<div class="wrapper">
<ul class="slider">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
<img class="previous" src="images/arrow-transparent.png">
<img class="next" src="images/arrow-transparent.png">
</article>
</section>
css
.wrapper{
height: 342px;
margin: 0 auto;
overflow: hidden;
width: 918px;
}
.slider{
height: 342px;
position: relative;
width: 5000px;
}
.slide{
float: left;
height: 342px;
position: relative;
width: 306px;
}
js
/* slider */
$(function(){
var i = 0;
$('.previous').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li');
i = --i -2 % currentSlides.length;
if(i - 3 >= -3) {
$('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = 0;
}
});
$('.next').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li'),
current = i;
i = ++i + 2 % currentSlides.length;
if(i + 3 < currentSlides.length) {
$('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = current;
}
});
});
How do I fix this?
This is because you are selecting all slider class elements so this will animate them all.
What if you select slide instead?
$(function(){
var i = 0;
$('.previous').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li');
i = --i -2 % currentSlides.length;
if(i - 3 >= -3) {
$('.slide').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = 0;
}
});
I decided to completely ditch the javascript code from my original post and ended up using this instead:
$(function() {
$('article .wrapper').each(function(){
var slider = $(this).find('.slider'),
parent = $(this),
step =855,
left = parseInt(slider.css('left'), 10),
max = parent.width() - slider.width(),
min = 0;
parent.find(".previous").click(function() {
if (left < 0) {
var newLeft = left + step;
left = (newLeft<min) ? newLeft : min;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
parent.find(".next").click(function() {
if (left > max) {
var newLeft = left - step;
left = (newLeft>max) ? newLeft : max;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
});
});
I also slightly modified widths of several elements in css and now it all works like a charm.

Categories

Resources