Wordpress + JQuery UI Tabs + Dynamically changing Width of Tabs - javascript

I'm trying to setup a tabbed pane (via jQuery) on one of my pages in a WordPress site. I have the tabs working and for the most part, it looks how I want it at this stage. There's one issue though - setting the width of the tabs so that each tab's span is long enough that all of them combined is equal to the space of the pane. Now this normally wouldn't be too hard, but the thing is I don't know how many tabs will be there in the end (my client is unsure).
Here's the CSS I'm using via Jetpack's Custom CSS functionality:
.ui-tabs-nav {
font-size: larger;
font-weight: bold;
background: none;
height: 30px;
/*To stop nav block scaling of tab size*/
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
border: none;
background: none;
}
.ui-tabs .ui-tabs-nav li {
display: inline;
border: none;
margin: 0 0 -5px;
background: none;
}
.ui-tabs-anchor {
color: #000034;
}
ul.ui-widget-header, ul.ui-widget-content, ul.ui-state-default, ul.ui-state-hover {
background: none;
border: none;
}
.ui-tabs-active a {
text-decoration: none;
background: none;
color: #222222;
position: relative;
z-index: 5;
}
And some javascript to adjust the width of the tabs:
jQuery(document).ready(function($) {
var numTabs = $('#tabs li').length;
var tabWidth = 100 / numTabs;
var tabPercent = tabWidth + "%";
var liArray = $('#tabs li');
var i;
for (i = 0; i < liArray.length; i++) {
liArray[i].style.width = tabPercent;
}
});
And finally, some HTML:
<div id="tabs">
<ul class="ui-widget-header ui-corner-top">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="tabs1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
So yeah, with these snippets in mind - how do I use Javascript to dynamically apply a style to my tabs so that the width of them all combined = 100% of the pane?
Thanks!

Change the li to a block element so you can set its width.
jQuery(document).ready(function($) {
$("#tabs").tabs();
var numTabs = $('#tabs li').length;
var tabWidth = 98 / numTabs; // using 98 because sometimes using 100 will cause last element to get "bumped" down below the first element.
var tabPercent = tabWidth + "%";
$('#tabs li').each(function () {
$(this).css("width", tabPercent);
$(this).css("display", "inline-block");
});
});
http://jsfiddle.net/bwzhLzco/1/

Related

hovering on one element while scrolling

how to hover on one element when scrolling. If you don't know how it's done, please tell me at least what it's called. There is a similar effect here. link
searched on many forums. Because I don't know what it's called, that's why I couldn't find it
If you want to know how it works I leave you my implementation of this feature (not perfect) with some comments
//add event on scroll on the window element and trigger scrollLeftAnimation function
window.addEventListener("scroll", scrollLeftAnimation);
function scrollLeftAnimation() {
//get each element who have scrollLeftAnimation class
let scrollLeftAnimationElements = document.querySelectorAll(".scrollLeftAnimation");
//for each scrollLeftAnimation element, call updateAnimation
scrollLeftAnimationElements.forEach(SectionElement => updateAnimation(SectionElement));
function updateAnimation(SectionElement) {
let ContentElement = SectionElement.querySelector(".animationContent");
//get the top value of element
//for reference see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
let y = ContentElement.getBoundingClientRect().y;
//get a pourcent of scrolling
let pourcent = Math.abs(SectionElement.getBoundingClientRect().y / (SectionElement.clientHeight - ContentElement.clientHeight));
let ContentOverflowElement = SectionElement.querySelector(".animationContentOverflow");
//get the scroll left available distance
let ContentOverflowElementLeftScrollDistance = ContentOverflowElement.scrollWidth - ContentOverflowElement.clientWidth;
if (y == 0) {
//if element is sticky then scroll left = (max scroll left available distance) * (pourcent of scrolling)
ContentOverflowElement.scrollLeft = ContentOverflowElementLeftScrollDistance * pourcent;
} else if (y > 0) {
//if element is bellow, then scroll left = 0
ContentOverflowElement.scrollLeft = 0;
} else {
//if element is above, then scroll left = max scroll left available distance
ContentOverflowElement.scrollLeft = ContentOverflowElementLeftScrollDistance;
}
}
}
section {
height: 100vh;
}
/*Main CSS*/
section.scrollLeftAnimation {
/*The more the ratio between the height of
.scrollLeftAnimation compared to .animationContent
the more it will be necessary to scroll*/
height: 300vh;
}
section.scrollLeftAnimation .animationContent {
/* using sticky to keep the element inside the window*/
position: sticky;
top: 0;
height: 100vh;
}
.animationContent .animationContentOverflow {
height: 25vh;
overflow: hidden;
}
/*CSS for card element*/
.animationContent ul {
margin: 0;
padding: 0;
height: 100%;
white-space: nowrap;
}
.card {
border: 1px solid black;
height: 100%;
width: 35vw;
background-color: gray;
display: inline-block;
}
.card + .card {
margin-left: 50px;
}
.card:first-child {
margin-left: 25px;
}
.card:last-child {
margin-right: 25px;
}
<section style="background-color: darkorchid;">Regular section 1</section>
<section class="scrollLeftAnimation" style="background-color: deeppink;">
<div class="animationContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. In fermentum posuere urna nec.</p>
<div class="animationContentOverflow">
<ul>
<li class="card">card 1</li>
<li class="card">card 2</li>
<li class="card">card 3</li>
<li class="card">card 4</li>
</ul>
</div>
</div>
</section>
<section style="background-color: violet;">Regular section 4</section>
<section style="background-color: silver;">Regular section 5</section>
<section class="scrollLeftAnimation" style="background-color: peru;">
<div class="animationContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. In fermentum posuere urna nec. Posuere ac ut consequat semper viverra nam libero justo laoreet. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Rhoncus dolor purus non enim praesent elementum facilisis leo. Turpis tincidunt id aliquet risus feugiat in ante metus.</p>
<div class="animationContentOverflow">
<ul>
<li class="card">card 1</li>
<li class="card">card 2</li>
<li class="card">card 3</li>
<li class="card">card 4</li>
</ul>
</div>
</div>
</section>
<section style="background-color: orange;">Regular section 7</section>

How do I add a JavaScript event handler so that when the user moves the mouse cursor onto the content element a timeout timer starts?

Here is what I am trying to do,
I want to add a JavaScript event handler so that when the user moves the mouse cursor onto the content element, a timeout timer is started that will set the opacity of the payWall element to 1.0 – three second later.
Then I want to dd another JavaScript event handler so that when the user clicks the subscribe button, an alert box appears with the message “Subscribing now.”
When the alert is OK-ed, the payWall slides down the page and out of sight. I think I will need to set an interval timer so that the payWall moves down like 2 pixels every 30 milliseconds.
I am not sure how to do it, I tried my best, but if someone can please help me, I would really appreciate it.
function init()
{
document.getElementById("subscribe").onclick = function()
{
}
}
window.onload=init;
* {
margin: 0;
box-sizing: border-box;
}
body {
font: 1em Verdana, sans-serif;
background-color: antiquewhite;
}
h2, h4 {
text-align: center;
}
#header {
border-bottom: 2px solid black;
font-size: 2.5em;
padding: 0.5em 0;
height: 100px;
}
#footer {
border-top: 2px solid black;
padding: 1em 0;
}
#header, #footer {
text-align: center;
background-color: #CCC;
}
#leftnav, #rightnav {
position: absolute;
width: 20%;
padding-top: 3em;
}
#rightnav{
left: 80%;
}
#wrapper {
background-color: dodgerblue;
overflow: hidden;
}
#content div {
border: 1px solid black;
border-radius: 10px;
padding: 0.5em;
margin-bottom: 10px;
background-color: #ccc;
}
#content div:last-child {
margin-bottom: 0px;
}
#content div:hover {
border-color: dodgerblue;
background-color: white;
}
#content {
padding: 0.5em;
margin: 0 20%;
border-left: 2px solid black;
border-right: 2px solid black;
background-color: white;
}
/* ---------------------------------------------------------*/
#payWall {
background-color : darkseagreen;
font-size: 2em;
opacity: 0.5;
}
<body>
<div id="header">
The Header
</div>
<div id="wrapper"> <!-- Can be used to apply bg colour -->
<div id="leftnav">
<h4> Left</h4>
</div>
<div id="rightnav">
<h4> Right</h4>
</div>
<div id="content">
<div>
<h2> Article 1 </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse ultricies condimentum velit vel scelerisque.
</p>
</div>
<div>
<h2> Article 2 </h2>
<p>
Mauris sagittis aliquam odio vitae pulvinar.
Suspendisse id dolor nibh, sed consectetur sem.
Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
</p>
</div>
<div>
<h2> Article 3 </h2>
<p>
Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
Mauris sagittis aliquam odio vitae pulvinar.
Suspendisse id dolor nibh, sed consectetur sem.
Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
</p>
</div>
</div> <!-- end of content -->
</div> <!-- end of wrapper -->
<div id="footer">
<h3>
The End
</h3>
<div id="payWall">
For further access please subscribe here. <br>
<button id="subscribe"> Subscribe</button>
</div>
</div>
</body>
First:
Use <div onmouseenter='setTimeout(doStuff, 3000)'> for a three second delay when the cursor enters the div
In JS:
Add a function, doStuff, which has the following code:
document.getElementById('payWall').style.opacity = '1';
document.getElementById('subscribe').onclick = function(){
alert("Subscribing now");
vanishPayWall();
}
One problem is that the payWall would just keep moving down the page. If you wanted it to disappear, you'd want to put overflow-y: hidden on the payWall, and shorten the paywall by 2px every time as well as setting the upper margin to 2px higher. Maybe something like
function vanishPayWall() {
var key = window.setInterval(function(){
var pw = document.getElementById('payWall');
pw.style.height = String(Number(pw.style.height.slice(-2)) - 2) + 'px';
pw.style.marginTop = String(Number(pw.style.height.slice(-2)) + 2) + 'px';
}, 25)
setTimeout(function(){
clearInterval(key)
}, Number(pw.style.height.slice(-2)) * 12.5)
}
Not absolutely sure this will work, but it should help out a bit.

Custom Popup Window

I have created a design for my web page.
The issue I face is I am unsure how to create a smaller window popup, with my design.
The window will open up once I click on an image and display it's image on it with it's specific information.
I am unsure if I need some kind of JavaScript object to save their information.
This is kind of where I have started but I am lost.
I need the image based on which is clicked.
So to display the object I need to display it based on which image I click and unsure how.
Below is my design.
function Cupcakes(type, name, description, Price, cost, image){
this.type = type; //create an instant of object
this.name = name;
this.description = description;
this.Price = Price;
this.cost = cost;
thi.image = image;
this.displayInfo = function(){
var info ="<div class='divCell1' id = 'line1'>";
info += this.name + "</div><div class='divCell2' id = 'line2'>";
info += this.description + "</div><div class='divCell3' id = 'line3'>";
info += this.Price + "<div>Price <br>";
info += this.cost + "</div><div class = 'divCell4' id='line4'>";
info += this.image + "</div>";
return info;
}
}
// define an array to store products
var product_list = [];
var cart = [];
var cost = "Half Dozen: $7.00 <br> Dozen: $12.50 <br> Party Size [20 cupcakes]: $18.00"
var desc1 = ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus orci elit, lobortis nec neque in, condimentum gravida velit. Suspendisse maximus nisl et vehicula placerat. Sed elit turpis, venenatis sit amet tortor vel, interdum cursus mi.';
var image = " ";
var product = new Products('cupcake','Winter Festival', desc1, 15.99);
product_list.push(product);
Pop-ups are blocked on browsers by default. Use a div with position:fixed instead. You can hide/show it using display:none / display:inline-block
function show(){
var stats = document.getElementById("aa").style.display;
if (stats == "none"){
document.getElementById("aa").style.display = "inline-block";
} else {
document.getElementById("aa").style.display = "none";
}
}
body {
height: 100%;
background: honeydew;
}
#aa {
font-weight: bold;
position:fixed;
left:0;
right:0;
margin: auto;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100px;
height: auto;
padding: 15px;
background: gold;
text-align: center;
box-sizing: content-box;
border: 4px dashed black;
}
button {
margin-right: 10px;
float: left;
color: white;
background: crimson;
padding: 15px;
}
#text {
text-align: justify;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
<div id=text><button onClick=show()>click</button> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.</div>
<div id=aa style="display:none">CONTENT</div>
Pure CSS solution with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
display: inline-block;
height: 80%;
width: 80%;
background: url('http://i.imgur.com/bv80Nb7.png');
background-repeat: no-repeat;
background-size: 100% 100%;
outline: 6px double teal;
}
.item {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
#warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left:0;
right:0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>CLICK HERE</b></p>
<div id=target class="item"><h1 id=warning>THE POP-UP CONTENT</h1></div>
</label>
You question is very very confusing.
Basic javascript (considering jQuery) for you:
You can save the information of each cupcake on it element. Like this:
<div class="cupcake" data-price="Half Dozen: $7.00..." data-description="My description">
[...]
</div>
<div class="cupcake" data-price="Half Dozen: $12.00..." data-description="My description 2">
[...]
</div>
and in jquery:
$(".cupcake").on("click", function(){
var price = $(this).data("price"); //Getting the price information
var desc = $(this).data("price"); //Getting the description information
//Here you can use all information, call functions and show your small popup
});
Based in what div you click, the variable price and desc will receive the correct information.
This is a little bit useful for you ?
If you want, please edit your question and try to be more specific, because I don't get your real problem. (Maybe it's my english)

Constrain user selection to node without making it editable?

I have the following page:
<div class="a">
...
</div>
<div class="b">
...
</div>
My users interact with this page by selecting various pieces of text within .a and .b. The browser's native selection behaviour almost works, but I need to prevent my users from making selections, which span the boundary between .a and .b.
Is there a way to constrain the user's selection to a <div>?
Unfortunately, this content is not user editable - which is unfortunate, because setting contenteditable="true" on each <div> achieves the constraint I'm looking for.
How about starting with this:
HTML:
<div class = "a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id semper purus. Duis laoreet tellus in ante luctus semper. Praesent interdum urna quis luctus commodo.
</div>
<div class = "b">
Curabitur vehicula eget leo a tristique. Donec eget aliquam erat. Mauris id porttitor lacus.
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
.noSelection {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
div + div {
padding-top: 10px;
}
jQuery:
$(function() {
$("div").hover(function() {
$(this).siblings("div").toggleClass("noSelection");
});
});
Here's a fiddle: http://jsfiddle.net/J2fJz/.

Slider not working properly at the last slide

I am currently learning Jquery and I'm a total newbie. Currently I was trying to make this custom slider work. What I am trying to achieve is, when someone clicks the prev or next buttons , nothing happens to the slider but the text written above it changes, i.e goes to the next <li> element. I wrote some code and it is working fine, but the problem comes when the slider is on the last child. When I click the next button the text disappears and now I cant even go back. I am pasting all the code I wrote here any help would be greatly appreciated and would help me to learn. THANKS A LOT!
HTML
<ul class="testimonial-text">
<li class="test-current">
<p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>
<h4>Michel Buble & Tinta turner</h4>
</li>
<li>
<p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>
<h4>Rick Armstrong & Ashley Tist</h4>
</li>
<li>
<p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>
<h4>Mike Tran & Kimse Tricks</h4>
</li>
<li>
<p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>
<h4>Michel Buble & Tinta turner</h4>
</li>
<li>
<p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>
<h4>Michel Buble & Tinta turner</h4>
</li>
</ul>
the buttons
<a class="testimonials-prev" ></a>
<a class="testimonials-next" ></a>
CSS
ul.testimonial-text{
list-style: none;
padding-top: 20px;
}
ul.testimonial-text li{
display: none;
}
ul.testimonial-text li.test-current{
display: block;
}
ul.testimonial-text li p{
text-align: center;
font-size: 18px;
color: #7c7c7c;
margin-bottom: 0px;
}
ul.testimonial-text li h4{
text-align: center;
text-transform: uppercase;
font-size: 16px;
}
ul.testimonial-images{
list-style: none;
}
ul.testimonial-images li{
display: inline-block;
margin-left: 16px;
opacity: 0.6;
}
ul.testimonial-images li:first-child{
display: inline-block;
margin-left: 0px;
}
a.testimonials-prev{
background: url('../images/icons/test-icons.png') no-repeat;
height: 80px;
width: 40px;
display: block;
margin-left: 10px;
cursor: pointer;
}
a.testimonials-next{
background: url('../images/icons/test-icons.png') no-repeat top right;
height: 80px;
width: 40px;
display: block;
cursor: pointer;
}
JQUERY / JAVASCRIPT
<script type="text/javascript">
$(document).ready(function() {
$("a.testimonials-next").click(function() {
$("ul.testimonial-text li.test-current").fadeOut('slow', function() {
$("ul.testimonial-text li.test-current").next().fadeIn('slow');
$("ul.testimonial-text li.test-current").next().addClass('test-current');
$("ul.testimonial-text li.test-current:first").removeClass('test-current');
});
});
$("a.testimonials-prev").click(function() {
$("ul.testimonial-text li.test-current").fadeOut('slow', function() {
$("ul.testimonial-text li.test-current").prev().fadeIn('slow');
$("ul.testimonial-text li.test-current").prev().addClass('test-current');
$("ul.testimonial-text li.test-current:last").removeClass('test-current');
});
});
});
</script>
I'm very sorry if the code is sloppy. Thanks alot!
Try this :-
$("a.testimonials-next").click(function() {
$("ul.testimonial-text li.test-current").fadeOut('slow', function() {
var index = $("ul.testimonial-text li).index($(this));
if(index == $("ul.testimonial-text li).length - 1){
var $next = $("ul.testimonial-text li:first");
}
else {
var $next = $(this).next();
}
$(this).removeClass('test-current');
$next.addClass('test-current').fadeIn('slow');
});
});
$("a.testimonials-prev").click(function() {
$("ul.testimonial-text li.test-current").fadeOut('slow', function() {
var index = $("ul.testimonial-text li).index($(this));
if(index == 0){
var $prev = $("ul.testimonial-text li:last");
}
else {
var $prev = $(this).prev();
}
$(this).removeClass('test-current');
$prev.addClass('test-current').fadeIn('slow');
});
})
;
#Ragzor use this code for your problem
<html>
<head>
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
ul.testimonial-text{
list-style: none;
padding-top: 20px;
}
ul.testimonial-text li{
display: none;
}
ul.testimonial-text li.test-current{
display: block;
}
ul.testimonial-text li p{
text-align: center;
font-size: 18px;
color: #7c7c7c;
margin-bottom: 0px;
}
ul.testimonial-text li h4{
text-align: center;
text-transform: uppercase;
font-size: 16px;
}
ul.testimonial-images{
list-style: none;
}
ul.testimonial-images li{
display: inline-block;
margin-left: 16px;
opacity: 0.6;
}
ul.testimonial-images li:first-child{
display: inline-block;
margin-left: 0px;
}
a.testimonials-prev{
background: url('../images/icons/test-icons.png') no-repeat;
height: 80px;
width: 40px;
display: block;
margin-left: 10px;
cursor: pointer;
}
a.testimonials-next{
background: url('../images/icons/test-icons.png') no-repeat top right;
height: 80px;
width: 40px;
display: block;
cursor: pointer;
}
</style>
</head>
<body>
<a class="testimonials-prev" >Prev</a>
<ul class="testimonial-text">
<li class="test-current">
<p>1 “Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>
<h4>Michel Buble & Tinta turner</h4>
</li>
<li>
<p>2 “Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>
<h4>Rick Armstrong & Ashley Tist</h4>
</li>
<li>
<p>3 “Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>
<h4>Mike Tran & Kimse Tricks</h4>
</li>
<li>
<p>4 “Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>
<h4>Michel Buble & Tinta turner</h4>
</li>
<li>
<p>5 “Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>
<h4>Michel Buble & Tinta turner</h4>
</li>
</ul>
<a class="testimonials-next" >Next</a>
<script type="text/javascript">
$(document).ready(function() {
$("a.testimonials-next").click(function() {
$("ul.testimonial-text li.test-current").fadeOut('slow', function() {
var index = $("ul.testimonial-text li").index($(this));
if(index == $("ul.testimonial-text li").length - 1){
var $next = $("ul.testimonial-text li:first");
}
else {
var $next = $(this).next();
}
$(this).removeClass('test-current');
$next.addClass('test-current').fadeIn('slow');
});
});
$("a.testimonials-prev").click(function() {
$("ul.testimonial-text li.test-current").fadeOut('slow', function() {
var index = $("ul.testimonial-text li").index($(this));
if(index == 0){
var $prev = $("ul.testimonial-text li:last");
}
else {
var $prev = $(this).prev();
}
$(this).removeClass('test-current');
$prev.addClass('test-current').fadeIn('slow');
});
})
});
</script>
</body>
</html>
Maybe you could add an if statement before the fade that would check to see if the li is the first one? (you would do similar for the next button as well).
Here's a JSFiddle working: http://jsfiddle.net/JUveT/
Example:
$("a.testimonials-prev").click(function() {
if($("ul.testimonial-text li.test-current").prev().length){
$("ul.testimonial-text li.test-current").fadeOut('slow', function() {
$("ul.testimonial-text li.test-current").prev().fadeIn('slow');
$("ul.testimonial-text li.test-current").prev().addClass('test-current');
$("ul.testimonial-text li.test-current:last").removeClass('test-current');
});
}
I got the code for the condition from here:
How to check if the element is not the first-child?
#Ragzor why don't you use Carousel give here, its easy, reliable and works perfectly fine. I have used it many times.
The script hides the active li.current-test regardless if a next/prev element exists. When you reach the last element, a next element naturally does not exist, but the script still hides the current active element regardless. You need to check first if a next element actually exists:
$("a.testimonials-next").click(function() {
// Switch to the next element, if it exists
if ($("ul.testimonial-text li.test-current").next().length) {
$("ul.testimonial-text li.test-current").fadeOut('slow', function() {
$("ul.testimonial-text li.test-current").next().fadeIn('slow');
$("ul.testimonial-text li.test-current").next().addClass('test-current');
$("ul.testimonial-text li.test-current:first").removeClass('test-current');
}
});
Now, that being said, your code could benefit greatly from assigning jQuery objects to variables and chaining of methods, that would make your code more readable and faster. Consider this snippet in regard to the one above:
$("a.testimonials-next").click(function() {
var current_element = $("ul.testimonial-text li.test-current"),
next_element = current_element.next();
// Switch to the next element, if it exists
if (next_element.length) {
current_element.removeClass('test-current').fadeOut('slow', function() {
next_element.addClass('test-current').fadeIn('slow');
});
});

Categories