I'm trying to create an FAQ list. The answer displays fine on first click but I want to be able to click on another question and have that answer expand and the other close. Here's the javascript:
$(document).ready(function() {
// hide all the answers
$('.faq li div').hide();
$('.faq li').click(function(){
var question = $(this);
var answer = $(this).find('div');
// if the faq isn't active
if(!$('.faq li').hasClass('active')) {
answer.slideDown();
$(this).siblings('div').slideUp();
question.addClass('active');
}
else {
answer.slideUp();
question.removeClass('active');
}
});
});
The CSS:
ul.faq {
list-style:none;
cursor:pointer;
z-index:1;
}
ul.faq li h3 {
background:#0A5C75 url(../images/faq-inactive.png) right no-repeat;
color:#fff;
padding:20px 50px 20px 10px;
margin-bottom:10px;
border:1px solid #fff;
}
ul.faq li.active h3 {
background:#0A5C75 url(../images/faq-active.png) right no-repeat;
}
ul.faq li div {
background:#FFFFFF;
margin:0px 10px 10px 10px;
padding:20px;
overflow:hidden;
/* added fixed width to stop the jerkyness*/
width:522px;
position:relative;
top:-10px;
box-shadow: inset 0px 4px 4px 0px rgba(63, 70, 76, 0.15), 0px 4px 4px rgba(63, 70, 76, 0.15);
}
and the HTML
<ul class="faq">
<li>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3>
<div>Vivamus rutrum arcu sit amet dolor pulvinar dictum. Etiam porttitor leo eget velit volutpat quis ultricies urna ornare. Quisque ac ultrices est. Ut lobortis malesuada justo, sed blandit sapien bibendum et. Donec vel ante eu orci pellentesque dictum. Phasellus molestie egestas du</div>
</li>
<li>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3>
<div>This is the answer to question 2</div></li>
<li>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3>
<div>This is the answer to question 3</div>
</li>
</ul>
I think I could improve on your code a bit and produce the behavior and also shorten the code by a fair bit.
Notice, I skipped using your active class in order to show how it could be achieved.
Here's a tinker.io for demo I tested it in FF13 and Chrome
$('.faq li div').hide();
$('.faq li').click(function(event) {
var clickedQuestion = event.target;
var answer = $(clickedQuestion).siblings('div');
if($('ul.faq').find('div').is(':visible')){
$('ul.faq').find('div').slideUp();
}
answer.slideDown();
});
Working demo http://jsfiddle.net/e3Bec/ OR http://jsfiddle.net/XGJXM/
Your code is fine only thing is use ==> if (!$(this).hasClass('active')) { instead of if(!$('.faq li').hasClass('active')) { :) Also you don't need this in your first conditional check question.addClass('active');
Rest code should help, :)
code
$(document).ready(function() {
// hide all the answers
$('.faq li div').hide();
$('.faq li').click(function() {
$('div').slideUp();
var question = $(this);
var answer = $(this).find('div');
// if the faq isn't active
if (!$(this).hasClass('active')) {
answer.slideDown();
$(this).siblings('div').slideUp();
//question.addClass('active');
}
else {
answer.slideUp();
question.removeClass('active');
}
});
});
I like that you are not sliding up the element if it is already visible.
Maybe move the .hide into css "display:none", no point waiting for the dom to load to hide them.
$(document).ready(function() {
$('.faq li').click(function(event){
$(this).find('div').not(":visible").slideDown();
$('.faq li div:visible').not($(this).find('div')).slideUp();
});
});
Why not use a Accordion. http://jqueryui.com/demos/accordion/
Related
I have exampled below two div boxes with <h4> headers and followed with <p> with text. In an accordion style, I want to click each title and see the text appear, I've done this by setting the text div container box to max-height: 0; and opacity: 0; then max height a value and opacity 1 on click.
My issue is that I expect the animation to happen simultaneously for both boxes (one that slides up and hides, the other that slides down and appears), However, I get the animation running in order slide up and disappear forwarded by slide down and appear.
How can I get them both at the same time?
document.addEventListener('DOMContentLoaded', function() {
// main click handler for the whole page
document.addEventListener('click', function(event) {
var clickedElem = event.target;
if (clickedElem.matches(".slide-card h4")) {
var activeCards = document.querySelectorAll(".card-active");
if (activeCards) {
for (var i = 0; i < activeCards.length; i++) {
if (activeCards[i]) toggle(activeCards[i], "card-active");
}
}
toggle(clickedElem.parentNode, "card-active");
}
});
});
function toggle(el, elClass) {
if (el.matches("." + elClass)) {
el.classList.remove(elClass);
} else {
el.classList.add(elClass);
}
}
h4 {
cursor: pointer !important;
}
.slide-card {
border: 1px solid white;
padding: 1em;
}
.animated-slides-cards {
background: pink;
padding: 1em;
}
.card-body {
opacity: 0;
max-height: 0;
transition: all 0.75s ease-out;
}
.card-active .card-body {
opacity: 1;
max-height: 400px;
}
<div class="animated-slides-cards">
<div data="0" class="slide-card block-padding margin-bottom-05x card-active">
<h4 class="blue">Harness the power of the crowd</h4>
<div class="grey card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis eros vitae metus sodales eget suscipit purus rhoncus. Proin ultrices gravida dolor, non porttitor enim interdum vitae. Integer feugiat lacinia tincidunt. Nulla laoreet tristique
tristique. Sed elementum justo a nisl elementum sit amet accumsan nisi tempor. Nulla quis eros et massa dignissim imperdiet a vitae purus.</p>
</div>
</div>
<div data="1" class="slide-card block-padding margin-bottom-05x">
<h4 class="blue">Slots straight into your systems</h4>
<div class="grey card-body">
<p>Using simple APIs, SmartCrowd™ connects to your systems and allocates tasks to ambassadors using your existing digital channels. You can opt for full integration or simply use Limitless Live Messenger on your website to maintain a single customer
view.</p>
</div>
</div>
</div>
I am not sure if this is easily possible, but I thought I would ask just in case:
I am using the following CSS rules on a list of text:
{
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
As expected, any text that goes outside the list will be truncated and have an ellipsis placed on the end.
I want to have an active title property for only those list items that trigger the text-overflow rule on the list. So you can hover the mouse over any text that is truncated and see a tooltip of its full text.
Something tells me this is difficult, if not impossible, to do. However I would love to be proven wrong. I am preferably looking for a solution that uses as little JavaScript as possible.
We use a similar, more generic ellipsify, which works perfectly for most cases. We also apply the title attribute (for all elements). Only applying the title if the element ellipsifies, is indeed difficult. The example below assumes that, if the element has the same width as the parent, we should set the title. Without the if statement it would always apply the title.
document.querySelectorAll('.ellipsify').forEach(function (elem) {
if (parseFloat(window.getComputedStyle(elem).width) === parseFloat(window.getComputedStyle(elem.parentElement).width)) {
elem.setAttribute('title', elem.textContent);
}
});
.ellipsify {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
display: inline-block;
}
div {
width: 100px;
}
<div>
<span class="ellipsify">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>
<span class="ellipsify">dolor sit amet</span>
</div>
This is how i approached the solution.
If you don't want to use java-script.
Here is a Link to fiddle: https://jsfiddle.net/fryc4j52/1/
SNIPPET:
.ellipse{
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin:0;
padding:0;
}
.content li{
margin:0;
padding:0;
overflow:hidden;
}
.ellipse:hover{
width: auto;
border: 2px solid #eee;
box-shadow: 0px 3px 10px 0px black;
padding:2px;
white-space: normal;
word-break: break-word;
z-index:5;
}
<ul class="content">
<li class="ellipse">A very looooooooooooooooooooooooooooooooooooooong line.</li>
<li> Other text</li>
<li class="ellipse">A veryvvvvvvvvvvvvvvvvvvvvvvverrrrryyyyyyyyy looooooooooooooooooooooooooooooooooooooong line.</li>
</ul>
document.querySelectorAll('.ellipsis').forEach(function (e) {
if (e.offsetWidth < e.scrollWidth) {
e.setAttribute('title', e.textContent);
} else{
e.removeAttribute('title');
}
});
.ellipsis {
text-overflow: ellipsis;
display: inline-block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
}
You can measure for the presence of overflow with a little JavaScript and only add the title attribute if it the element would have overflowed (had it not been truncated).
Constrain the content with a style.
Copy the content into a hidden test element with the same width.
Don't limit wrapping on the test element, allowing it to overflow.
Compare the heights.
$(".smart-overflow").each(function() {
var elementToTest = $(this),
contentToTest = $(this).text(),
testElement = $("<div/>").css({
position: "absolute",
left: "-10000px",
width: elementToTest.width() + "px"
}).appendTo("body").text(contentToTest);
if (testElement.height() > elementToTest.height()) {
elementToTest.attr("title", contentToTest);
}
});
.smart-overflow {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smart-overflow">
short text
</div>
<div class="smart-overflow">
short text
</div>
<div class="smart-overflow">
Longer text; there should be a tooltip here.
</div>
<div class="smart-overflow">
More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper,
blandit facilisis magna gravida. Nulla a euismod turpis.
</div>
<div class="smart-overflow">
More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper,
blandit facilisis magna gravida. Nulla a euismod turpis.
</div>
<div class="smart-overflow">
short text
</div>
<div class="smart-overflow">
short text
</div>
jQuery used here for conciseness, but certainly not required.
I'm am trying to make multiple boxes, which can expand onclick and close again when clicking on the X. Well first off, the close jquery doesn't work, but that isn't the main thing I'am looking fore, how can I optimize the code, so doesn't become 400-600 hundred lines of the same, just for each box/element.
When click on one box/element, it should expand and so should the content inside - in the order as they come. Then it can be closed again an you would be able to click on another element with the same result - using pretty much the same code.
How can I make the site know, which element has bin click on.
Thanks in advance :)
$(document).ready(function(){
$( ".calendarBox" ).click(function() {
$(".calendarBox").addClass("calendarBoxOpen").delay(2000);
$(".dateTitle").addClass("dateTitleOpen");
$(".dateMonthBox").addClass("dateMonthBoxOpen");
$(".closeMonth").addClass("showMonth");
$(".dateDayBox").addClass("dateDayBoxOpen");
$(".closeDay").addClass("showDay");
$(".dateCloseBtnBox").addClass("dateOpenBtnBox");
$(".closeHr").addClass("showHr");
$(".dayActivitiesInfo").addClass("dayActivitiesInfoOpned");
$(".dayInfoTxt_1May").addClass("dayInfoTxt_1MayOpen");
$(".dayInfoBtnBox_1Maj").addClass("dayInfoBtnBox_1MajOpen");
});
});
$(document).ready(function(){
$( ".dateCloseBtn" ).click(function() {
$(".dayInfoBtnBox_1Maj").removeClass("dayInfoBtnBox_1MajOpen");
$(".dayInfoTxt_1May").removeClass("dayInfoTxt_1MayOpen");
$(".dayActivitiesInfo").removeClass("dayActivitiesInfoOpned");
$(".closeHr").removeClass("showHr");
$(".dateCloseBtnBox").removeClass("dateOpenBtnBox");
$(".closeDay").removeClass("showDay");
$(".dateDayBox").removeClass("dateDayBoxOpen");
$(".closeMonth").removeClass("showMonth");
$(".dateMonthBox").removeClass("dateMonthBoxOpen");
$(".dateTitle").removeClass("dateTitleOpen");
$(".calendarBox").removeClass("calendarBoxOpen");
});
});
.calendarBox { /*This is when closed*/
width:14.28571428571428%;
border:0.5px solid #000;
height:100%;
transition-duration:1s;
}
.calendarBox:hover {
background-color:#8abcc2;
}
.calendarBoxOpen { /*This is when opened*/
width:57.14285714285712%;
}
.calendarDate {
}
.calendarHeader {
display:flex;
}
.dateTitle { /*This is when closed*/
margin-left:15px;
display:none;
transition:ease-in-out;
transition-duration:1s;
}
.dateTitleOpen { /*This is when opened*/
display:block;
}
.dateDayMonthBox {
width:100%;
}
.dateMonthBox { /*This is when closed*/
display:inline-flex;
float:right;
}
.dateMonthBoxOpen { /*This is when Opened*/
margin-left:25px;
}
.closeMonth { /*This is when closed*/
display:none;
}
.showMonth { /*This is when opened*/
display:block;
}
.dateDayBox { /*This is when closed*/
display:inline-flex;
float:left;/*This is when open*/
}
.dateDayBoxOpen { /*This is when opened*/
float:right;
}
.closeDay { /*This is when closed*/
display:none;
}
.showDay { /*This is when opened*/
display:block;
}
.dateCloseBtnBox { /*This is when date is closed*/
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
margin-left:25px;
margin-right:5px;
display:none;
}
.dateOpenBtnBox { /*This is visible, when date open*/
display:block;
}
.dateCloseBtn {
}
.closeHr { /*This is when closed*/
display:none;
}
.showHr { /*This is when opened*/
display:block;
}
/*====Content of the calendar day=====*/
.dateDayInformationBox {
}
.dateDayInformation {
width:100%;
display:inline-flex;
overflow-y:hidden;
}
.dayActivitiesInfo { /*This is when closed*/
height:18px;
width:100%;
margin-left: 15px;
padding-left: 10px;
list-style-type:none;
border-left:2.5px solid purple;
}
.dayActivitiesInfoOpned { /*This is when opened*/
height:100%;
width:50%;
margin-left: 15px;
padding-left: 10px;
list-style-type:none;
border-left:2.5px solid purple;
}
/*====The txt======*/
.dayInfoTitel_1May {
}
.dayInfoTxt_1May { /*This is when closed*/
display:none;
}
.dayInfoTxt_1MayOpen { /*This is when opened*/
display:block;
}
.dayInfoBtnBox_1Maj { /*This is when closed*/
display:none;
}
.dayInfoBtnBox_1MajOpen { /*This is when opened*/
text-align: center;
margin: auto;
display:block;
}
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendarBox">
<div class="calendarDate">
<div class="calendarHeader">
<h3 class="dateTitle">Information</h3>
<div class="dateDayMonthBox">
<div class="dateMonthBox"><h4 class="">1</h4><h4 class="closeMonth">.Maj</h4></div> <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
</div>
<div class="dateCloseBtnBox">
<div class="dateCloseBtn">close</div>
</div><!--The clouse btn-->
</div>
<hr class="closeHr">
<div class="dateDayInformationBox">
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------><div class="close">
close
</div>
<div class="calendarBox" onclick="animateDayOpen_1Maj">
<div class="calendarDate">
<div class="calendarHeader">
<h3 class="dateTitle">Information</h3>
<div class="dateDayMonthBox">
<div class="dateMonthBox"><h4 class="">2</h4><h4 class="closeMonth">.Maj</h4></div> <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
</div>
<div class="dateCloseBtnBox" onclick="animateDayClose_1Maj">
<div class="dateCloseBtn">X</div>
</div><!--The clouse btn-->
</div>
<hr class="closeHr">
<div class="dateDayInformationBox">
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
</div>
</div>
</div>
So, you have multiple boxes that you want to expand/shrink on click. You can give all that boxes one class - boxExpandable for expample, with initial width. Then user clicks on boxExpandable - you should toggle .expanded class with higher width.
If you want some content to be shown only when box is expanded - wrap it in .showWhenExpanded class, like shown below.
$(document).ready(function(){
$('.expandableBox').on('click', function(){
$(this).toggleClass('expanded');
});
});
.box {
margin-bottom: 10px;
padding: 15px;
width: 40%;
border: solid 5px goldenrod;
transition: background-color .4s, width .4s;
}
.box:hover {
background-color: #32cd32;
}
.box.expanded {
width: 80%;
}
.showWhenExpanded {
display: none;
}
.box.expanded .showWhenExpanded {
display: inline-block;
}
<script src="//code.jquery.com/jquery.js"></script>
<div class="content">
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
</div>
See this codepen
I'm working on a little jQuery widget to add to my portfolio/knowledge base. The widget works, and cycles through 5 slides, however, it does not loop back around to slide 1 as it should. It only advances to a blank slide, and the page requires refreshing to move back or forward again. I am a Javascript/jQuery beginner, so I'm sure I'm missing something simple, but I can't figure it out for the life of me. Any assistance is greatly appreciated.
//(document).ready(); makes sure that all elements on the page are
//loaded before loading the script
$(document).ready(function() {
//alert('Doc is loaded');
//specifies speed to change from image to image, in ms
var speed = 500;
//specifies auto slider option
var autoswitch = true;
//Autoslider speed
var autoswitch_speed = 4000;
//Add initial active class
$('.slide').first().addClass('active');
//Hide all slides
$('.slide').hide();
//Show first slide
$('.active').show();
$('#next').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is('slider:last-child')) {
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
$('#prev').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 940px;
height: 350px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#slider img {
width: 940px;
height: 350px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
background: 7f7f7f;
background: rgba(0, 0, 0, 0.5);
}
#prev,
#next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery Content Slider</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>jQuery Content Slider</h1>
</header>
<img src="img/arrow-left.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slider One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide1.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide2.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide3.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide4.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide5.jpg">
</div>
</div>
<img src="img/arrow-right.png" alt="Next" id="next">
</div>
</body>
</html>
var cur = 0, // Start Slide Index. We'll use ++cur to increment index
pau = 2000, // Pause Time (ms)
fad = 500, // Fade Time (ms)
$ga = $('#slider'), // Cache Gallery Element
$sl = $('> div', $ga), // Cache Slides Elements
tot = $sl.length, // We'll use cur%tot to reset to first slide
itv ; // Used to clear on mouseenter
$sl.hide().eq( cur ).show(); // Hide all Slides but desired one
function stopFn() { clearInterval(itv); }
function loopFn() { itv = setInterval(fadeFn, pau); }
function fadeFn() { $sl.fadeOut(fad).eq(++cur%tot).stop().fadeIn(fad); }
$ga.hover( stopFn, loopFn );
loopFn(); // Finally, Start
Add this code in the script. this will enable looping effect. Tried working with your code, but its a little bit complex for me. Try this method, this will work like a charm.
See the DEMO
See the snippet
//(document).ready(); makes sure that all elements on the page are
//loaded before loading the script
$(document).ready(function() {
//alert('Doc is loaded');
//specifies speed to change from image to image, in ms
var speed = 1000;
//specifies auto slider option
var autoswitch = true;
//Autoslider speed
var autoswitch_speed = 4000;
//Add initial active class
$('.slide').first().addClass('active');
//Hide all slides
$('.slide').hide();
//Show first slide
$('.active').show();
$('#next').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is('slider:last-child')) {
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
$('#prev').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
});
var cur = 0, // Start Slide Index. We'll use ++cur to increment index
pau = 1000, // Pause Time (ms)
fad = 500, // Fade Time (ms)
$ga = $('#slider'), // Cache Gallery Element
$sl = $('> div', $ga), // Cache Slides Elements
tot = $sl.length, // We'll use cur%tot to reset to first slide
itv; // Used to clear on mouseenter
$sl.hide().eq(cur).show(); // Hide all Slides but desired one
function stopFn() {
clearInterval(itv);
}
function loopFn() {
itv = setInterval(fadeFn, pau);
}
function fadeFn() {
$sl.fadeOut(fad).eq(++cur % tot).stop().fadeIn(fad);
}
$ga.hover(stopFn, loopFn);
loopFn(); // Finally, Start
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#slider img {
width: 500px;
height: 300px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
background: 7f7f7f;
background: rgba(0, 0, 0, 0.5);
}
#prev,
#next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="container">
<header>
<h1>jQuery Content Slider</h1>
</header>
<img src="http://leedspromoproducts.com/templates//img/thumbnails_prev_button.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slider One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://www.vectordiary.com/isd_premium/048-hot-air-balloon/hot-air-balloon.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://images.china.cn/attachement/jpg/site1007/20110808/000cf1a48f870fa9c75c55.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://cdn.allsteamboat.com/images/content/5418_gBVhd_Hot_Air_Balloon_Rodeo_in_Steamboat_Springs_md.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
</div>
</div>
<img src="http://thehaircraftersco.com/wp-content/uploads/2015/10/next-button.png" alt="Next" id="next">
</div>
</body>
Your operation has the wrong syntax, it should be "is(':last-child'))"
if($('.oldActive').is(':last-child')){
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
You can rewrite your code to use function for easy understanding and reading.
var hwSlideSpeed = 700;
var slideNum = 0;
slideCount = $("#slider .slide").size(); //Count of slides
var animSlide = function(arrow){
$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
if(arrow == "next"){
if(slideNum == (slideCount-1)){slideNum=0;}
else{slideNum++}
}
else if(arrow == "prew")
{
if(slideNum == 0){slideNum=slideCount-1;}
else{slideNum-=1}
}
else{
slideNum = arrow;
}
$('.slide').eq(slideNum).fadeIn(hwSlideSpeed);
}
$('#nextbutton').click(function(){
animSlide("next");
})
$('#prewbutton').click(function(){
animSlide("prew");
})
Hope it helps
I'm trying to emulate this on my design: http://jsfiddle.net/AYRh6/26/
But it's not working, and I can't find anything in the code that may be stopping it.
Must say I'm using code for a toggle effect.
Any help is much appreciated.
Fiddle of my problem: http://jsfiddle.net/Gr8sw/
My HTML is:
<div id="category">
<section id="pushOne" class="slidebox">
<div class="toggle">
<a class="bot" href="#"><img src="01.png" alt="Category 1"/></a>
<a class="top" href="#pushOne"><img src="01.png" alt="Category 1"/></a>
</div>
<div class="box"><h2>Category 1</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis aliquet odio, dictum hendrerit metus egestas non. Ut quis est tellus. Duis luctus elit nec arcu bibendum lacinia. Quisque luctus orci lorem, sit amet consequat enim mollis quis. Nullam dui magna, aliquam non venenatis et, lobortis eget felis.
</div>
</section>
</div>
And my CSS is:
.toggle {
height:230px;
width:230px;
position:relative;
z-index:2;
background:#CECECE;
}
.toggle:hover, .toggle.clicked {background:#F05A24;}
.orange {background#F05A24;}
.toggle img {width:100%;}
#pushOne img {padding-top:20px;}
.toggle a { position: absolute; padding:40px;}
.box {
overflow:hidden;
display:hidden;
opacity:0;
transition: all .4s ease-out;
margin-top:0px;
margin-bottom:20px;
width:230px;
}
.slidebox:target .box {
min-height:100px;
opacity:1;
}
.slidebox {float:left; margin:0 50px 0 0; transition: all 0.2s ease;}
.slidebox:target .top { opacity:0; pointer-events: none;}
#category {margin:0 auto;width:80%;}
Javascript:
$(".toggle").click(function () {
$(this).toggleClass(".clicked");
});</script>
It's surely something that my eye is not catching :(
You havn't specified any css propertiies for the class clicked(the class you want to toggle into)
Remove the dot(.).
$(".toggle").click(function () {
$(this).toggleClass("clicked");
});
Include externel jquery source please
http://code.jquery.com/jquery-1.9.1.js