I built a basic Jquery Slider for myself and had a few problems with it.
The automatic slide itself works perfectly, but when I try to navigate with my arrows, for example switching left and right, the whole system doesn't work. I hope someone can understand it.
Here's the index.html:
<div id="slider">
<div id="no">
<div class="slide active-slide" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
</div>
<div id="arrow-left" class="btn"><</div>
<div id="arrow-right" class="btn">></div>
<div id="loader"><div id="bar"></div></div>
</div>
Script:
$('#slider').hover(function(){
$('.btn').fadeIn(300);
}, function(){
$('.btn').fadeOut(300);
});
startSlide();
function startSlide() {
var currentSlide = $('.active-slide')
$('#bar').css('width', '0');
$('#bar').animate({width:'100%'}, 4000, function(){
if($('.active-slide').next().hasClass('slide')) {
$('.active-slide').removeClass('active-slide').next().addClass('active-slide');
startSlide();
} else {
$('.active-slide').removeClass('active-slide');
$('.slide').first().addClass('active-slide');
startSlide();
}
});
$('#arrow-right').click(function(){
$('#bar').stop();
if($('.active-slide').next().hasClass('slide')) {
$('.active-slide').removeClass('active-slide').next().addClass('active-slide');
startSlide();
} else {
$('.active-slide').removeClass('active-slide');
$('.slide').first().addClass('active-slide');
startSlide();
}
});
$('#arrow-left').click(function(){
$('#bar').stop();
if($('.active-slide').prev().hasClass('slide')) {
currentSlide.removeClass('active-slide');
currentSlide.prev().addClass('active-slide');
startSlide();
} else {
currentSlide.removeClass('active-slide');
$('.slide').last().addClass('active-slide');
startSlide();
}
});
}
Related
After a long research I found a solution to add a custom scrollbar to a DIV element.
It's called SimpleBar. Docs can be found here.
The HTML structure and JS code is pretty simple:
Working demo
<div class="gallery" data-simplebar data-simplebar-auto-hide="false">
<div class="item"><img src="https://via.placeholder.com/250x150/0000FF" /></div>
<div class="item"><img src="https://via.placeholder.com/350x150/FF0000" /></div>
[...]
</div>
With data-simplebar I can add a custom scrollbar to any DIV.
There is just one thing I couldn't solve.
I want to add prev/next arrows to the scroll element.
The buttons should jump to the prev/next element in the DIV which is next to the left/right side of the div and not yet scrolled (partially) over.
And the JS should work for every slider instance on the site. Like the SimpleBar itself. There is no need for extra code per scroll container.
Is there anything I could use in jQuery?
EDIT: I found this answer and fiddle. I added the code to my example and changed it to left/right. It's not exactly what I need but I thought it could be a starting point. Unfortunately it doesn't work properly.
You can use the following code. Note that the scrolling depends on the viewport, so that once there's no more right width to go to, it won't have more room to move.
const DIRECTION = { PREV: 1, NEXT: 2 };
$(document).ready(function () {
$('.container').each(function (index, containerItem) {
var $gallery = $(containerItem).find('.gallery');
const simpleBar = new SimpleBar($gallery[0], {
autoHide: false,
scrollbarMaxSize: 50
});
var $scroller = $(simpleBar.getScrollElement());
$(containerItem).find('.scrollLeft').on('click', function () {
scroll(DIRECTION.PREV, $scroller);
event.preventDefault(); // prevents anchor jump on click
});
$(containerItem).find('.scrollRight').on('click', function () {
scroll(DIRECTION.NEXT, $scroller);
event.preventDefault();
});
$scroller.scroll(function () {
setButtonsVisibility($scroller);
});
});
});
function scroll(direction, $scroller) {
var $active = $scroller.find('.active');
var $target = direction == DIRECTION.PREV ? $active.prev() : $active.next();
if ($target.length) {
$scroller.animate({
scrollLeft: $target[0].offsetLeft
}, 2000);
$active.removeClass('active');
$target.addClass('active');
}
}
function setButtonsVisibility($scroller) {
var scrollLeft = $scroller.scrollLeft();
isScrollerStart($scroller, scrollLeft);
isScrollerEnd($scroller, scrollLeft);
}
function isScrollerStart($scroller, scrollLeft, $button) {
var $prevButton = $scroller.closest('.container').find('.scrollLeft');
if (scrollLeft == 0) {
$prevButton.css('visibility', 'hidden');
} else {
$prevButton.css('visibility', 'visible');
}
}
function isScrollerEnd($scroller, scrollLeft) {
var $nextButton = $scroller.closest('.container').find('.scrollRight');
var scrollWidth = $scroller[0].scrollWidth; // entire width
var scrollerWidth = $scroller.outerWidth() // visible width
if (scrollLeft >= scrollWidth - scrollerWidth) {
$nextButton.css('visibility', 'hidden');
} else {
$nextButton.css('visibility', 'visible');
}
}
.container {margin: 0 auto 2rem; max-width: 960px;}
.gallery {padding-bottom: 2rem; margin-bottom: 2rem;}
.gallery .simplebar-content {display: flex;}
.gallery .item {margin-right: 1rem;}
.simplebar-scrollbar:before {background: red !important;}
.simplebar-track.simplebar-horizontal {background: #eee !important;;}
.buttons {display: flex; justify-content: space-between; width: 100%; margin-bottom: 2rem;}
.buttons a {padding: 0.5rem; background: #ddd; text-decoration: none; color: #000;}
.scrollLeft { visibility: hidden; }
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css">
<div class="container">
<h2>Slider</h2>
<div class="gallery">
<div class="item active"><img src="https://via.placeholder.com/150x30/110000" /></div>
<div class="item"><img src="https://via.placeholder.com/450x30/3300FF" /></div>
<div class="item"><img src="https://via.placeholder.com/350x30/992244" /></div>
<div class="item"><img src="https://via.placeholder.com/400x30/0000FF" /></div>
</div>
<div class="buttons">
<a class="scrollLeft" href="#"><strong>Prev</strong> (remove if first)</a>
<a class="scrollRight" href="#"><strong>Next</strong> (remove if last)</a>
</div>
</div>
<div class="container">
<h2>Slider</h2>
<div class="gallery">
<div class="item active"><img src="https://via.placeholder.com/150x30/110000" /></div>
<div class="item"><img src="https://via.placeholder.com/450x30/3300FF" /></div>
<div class="item"><img src="https://via.placeholder.com/350x30/992244" /></div>
<div class="item"><img src="https://via.placeholder.com/400x30/0000FF" /></div>
</div>
<div class="buttons">
<a class="scrollLeft" href="#"><strong>Prev</strong> (remove if first)</a>
<a class="scrollRight" href="#"><strong>Next</strong> (remove if last)</a>
</div>
</div>
I'm making collapsible/expandable divs, similar to accordions, where if I click a specific title, contents related to the title will appear. And if I click on a different title, previously opened contents will close before revealing the current contents for the recently clicked title, so that only one contents section is open at a time. I've got that sorted out.
<div class="container">
<div class="title">ONE</div>
<div class="content">Content One</div>
</div>
<div class="container">
<div class="title">TWO</div>
<div class="content">Content Two</div>
</div>
<div class="container">
<div class="title">THREE</div>
<div class="content">Content Three</div>
</div>
<div class="container">
<div class="title">FOUR</div>
<div class="content">Content Four</div>
</div>
However, I'm trying to make it so that all divs can be collapsed and all contents hidden. I'm having a really hard time figuring that part out. Here's what I have so far:
$(".title").click(function () {
$content = $(this).next();
if (!($content.is(":visible"))) {
$(".content").slideUp("fast");
$content.slideToggle(200);
}
});
DEMO: http://jsfiddle.net/2skczuze/
I'm fairly new with Javascript so I can't figure out how to make an expanded div to collapse without opening another div.
Step1 :Collapse all content divs except the current one.
Step2 : Toggle the visiblility of the current content div.
$(".title").click(function () {
$(".content").not($(this).next()).slideUp();
$(this).next().slideToggle();
});
Fiddle
You can use:
$(".title").click(function () {
$(this).next().slideToggle('fast').parent().siblings().find('.content').slideUp('fast');
});
Working Demo
Just add and else condition to your code :
$(".title").click(function () {
$content = $(this).next();
if (!($content.is(":visible"))) {
$(".content").slideUp("fast");
$content.slideToggle(200);
} else {
$content.slideToggle(200);
}
});
JSFIDDLE: http://jsfiddle.net/ghorg12110/2skczuze/3/
All you need is to extract one line of code from your if statement:
$(".title").click(function () {
$content = $(this).next();
$(".content").slideUp("fast"); // It is outside of if now
if (!($content.is(":visible"))) {
$content.slideToggle(200);
}
});
Here is the Demo: http://jsfiddle.net/2skczuze/5/
Try this DEMO
Just add an if statement, when the next content is visible:
$(".title").click(function () {
$content = $(this).next();
if (!($content.is(":visible"))) {
$(".content").slideUp("fast");
$content.slideToggle(200);
} else {
$content.slideUp("fast");
}
});
If you want to make an expanded div collapse without opening another div
then can be do in this way
$(".title").click(function () {
$content = $(this).next();
if (($content.is(":visible"))) {
$content.slideToggle(200);
}
if (!($content.is(":visible"))) {
$(".content").slideUp("fast");
$content.slideToggle(200);
}
});
Is this what you want? Just add an else block and toggle the element again.
Html
<div class="container">
<div class="title">ONE</div>
<div class="content">Content One</div>
</div>
<div class="container">
<div class="title">TWO</div>
<div class="content">Content Two</div>
</div>
<div class="container">
<div class="title">THREE</div>
<div class="content">Content Three</div>
</div>
<div class="container">
<div class="title">FOUR</div>
<div class="content">Content Four</div>
</div>
Css
.container {
width:300px;
margin-bottom:5px;
border:1px solid #d3d3d3;
text-align:center;
}
.container .title {
background-color:#00ffcc;
width:auto;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
background-color: #f0f0f0;
display: none;
padding : 5px;
}
Javascript
$(".title").click(function () {
$content = $(this).next();
if (!($content.is(":visible"))) {
$(".content").slideUp("fast");
$content.slideToggle(200);
}
else
{
$content.slideToggle(200);
}
});
http://jsfiddle.net/2skczuze/1/
I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is
when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.
on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %
I am trying this code .
my html is
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
my js is
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/
JS
var action = 1;
$("#show-tag").click(function () {
if ( action == 1 ) {
$("#tag-div" ).animate({'width':'0%',});
$('#tags-left').animate({'width':'90%'});
action = 2;
} else {
$("#tag-div" ).animate({'width':'45%',});
$('#tags-left').animate({'width':'45%'});
action = 1;
}
});
CSS
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
overflow:hidden; /* This property is added just to hide overflowing content */
}
first of all .. put left and right div in same div and in css
CSS
.col-md-12 {
white-space: nowrap;
overflow: hidden;
height:200px;
}
and you can use animate() method in js
JS
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//$('#tags-left').css('width','0%');
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').animate({'width':'45%'},500);
} else {
$('#tags-left').animate({'width':'100%'},500);
}
});
});
DEMO HERE
you can just play around that to get the exact action you need
Optimized #Nilesh Mahajan's answer.
Found a problem with it when clicking on the button continuously.
// Caching
var $tagsLeft = $('#tags-left'),
$tagDiv = $('#tag-div');
var tagLeftWidth,
tagDivWidth;
$("#show-tag").on('click', function () {
var $this = $(this);
$this.prop('disabled', true).addClass('disabled'); // Disable the button
tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
tagDivWidth = $tagDiv.width() ? '0%' : '45%';
$tagDiv.animate({
'width': tagDivWidth
}, function() {
$this.prop('disabled', false).removeClass('disabled'); // Enabling button
});
$tagsLeft.animate({
'width': tagLeftWidth
});
});
Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/
Try this html:
<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>
and this javascript:
$("#show-tag").click(function (e) {
if($("#tag-right").width() == 0) {
$("#tag-left").animate({
width: '0'
});
$("#tag-right").animate({
width: '90%'
});
} else {
$("#tag-left").animate({
width: '90%'
});
$("#tag-right").animate({
width: '0'
});
}
});
jsfiddle
<div id="slider-wrapper">
<div id="slider">
<div class="sp" style="background: blue;">akjdfalfkdj</div>
<div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
<div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>
<div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
</div>
</div>
<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>
CSS
#slider-wrapper {width:500px; height:200px;}
#slider {width:500px; height:200px; position:relative;}
.sp {width:500px; height:200px; position:absolute;}
#nav {margin-top:20px; width:100%;}
#button-previous {float:left;}
#button-next {float:right;}
JQUERY
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
}
else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
}
else{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
I have the above jquery slider all i need to have a timeout function which the slider slides automatically and as well i need it to slide according to the prev and next buttons. Thanks in advance
DEMO
To use the timeout function goes like this:
setInterval(function(){
//your function you want to timeout
},1000);
1000 milliseconds = 1 second
Try this
Use clearInterval(tId) to stop and run() to start again if you want to pause when next/prev is clicked
Live Demo
var tId;
function run() {
tId=setInterval(function() { $("#button-next").click()},1000);
}
$(function() {
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$sp = $(".sp");
$('.nav').click(function () {
var which = this.id.replace("button-", ""),
next = which == "next",
$oldActive = $('.active');
if (next) {
if ($oldActive.index()==$sp.length-1) {
$('.sp').first().addClass('active');
} else {
$oldActive.next().addClass('active');
}
} else {
if ($oldActive.index()==0) {
$('.sp').last().addClass('active');
} else {
$oldActive.prev().addClass('active');
}
}
$oldActive.removeClass('active');
$('.sp').fadeOut();
$('.active').fadeIn();
});
run();
});
I think you would want to use the jQuery.animate function. Something like this:
$(".active").animate({width:"100%"},750);
This assumes that the sliders have a default css property of width: 0%.
Edit: new fiddle http://jsfiddle.net/qnM3x/1/
I've setup a jQuery function that changes the body background colour when a certain div comes into view, e.g. the body background colour is black, when #block-three (that contains black text), the body background colour changes to white, and changes back when this goes out of view. This works fine, it's just very sudden though, I'm looking for a much smoother transition between background colours, fading between colours as you scroll (if possible).
jsFiddle demo: http://jsfiddle.net/neal_fletcher/TB53d/
HTML:
<div id="block-one" class="block">
<div class="inner-block">Test</div>
<div class="inner-block"></div>
<div class="inner-block"></div>
</div>
<div id="block-two" class="block">
<div class="inner-block">Test</div>
</div>
<div id="block-three" class="block">
<div class="inner-block">Test</div>
<div class="inner-block"></div>
</div>
<div id="block-four" class="block">
<div class="inner-block">Test</div>
<div class="inner-block"></div>
<div class="inner-block"></div>
</div>
<div id="block-five" class="block">
<div class="inner-block">Test</div>
<div class="inner-block"></div>
<div class="inner-block"></div>
</div>
jQuery:
var blockHeight = [];
$(".block").each(function () {
blockHeight.push($(this).height());
});
function hoverCurrentItem() {
var sIndex = 0;
var totalHeight = 0;
var scrolled = $(window).scrollTop();
for (var i in blockHeight) {
totalHeight += blockHeight[i];
if (totalHeight > scrolled) {
break;
} else {
sIndex++;
}
}
var $sItem = $(".block").eq(sIndex);
if (!$sItem.hasClass("selected")) {
$(".selected").removeClass("selected");
$sItem.addClass("selected");
}
if ($("#block-three").hasClass("selected")) {
$("body").css("background-color", "white");
} else {
$("body").css("background-color", "black");
}
}
hoverCurrentItem();
$(window).scroll(function (e) {
hoverCurrentItem()
});
Any suggestions would be greatly appreciated!
You could use transition with CSS:
body {
background-color: black;
transition:all 1s;
}
The Demo Fiddle