My simple slider is repeat - javascript

First sorry for my english :(
I created simple slider, it's working,
But when double my slider is repeat,
See example for double slider
Click on next button or prev button, it's working, but all slider change images,
I used HTML ID,
See my html code:
<div class="slider_wrap">
<div class="slider_content">
<ul id="the_slider" class="slider_images">
<li>
<img src="slider_images/i5.jpg">
<p class="caption">Slider</p>
</li>
<li>
<img src="slider_images/i2.jpg">
<p class="caption">Slider is free</p>
</li>
<li>
<img src="slider_images/i3.jpg">
<p class="caption">Slider is free</p>
</li>
<li>
<img src="slider_images/i4.jpg">
<p class="caption">Slider is free</p>
</li>
</ul>
<i class="slider_next"></i>
<i class="slider_prev"></i>
</div>
</div>
See my jquery code:
jQuery(window).load(function() {
jQuery('#the_slider li:first-child').addClass('slider_moving');
jQuery('#the_slider li').addClass('animated');
var $first = $('#the_slider li:first-child'),
$last = $('#the_slider li:last-child');
$(".slider_next").click(function () {
var $next,
$slider_moving = $(".slider_moving");
$next = $slider_moving.next('li').length ? $slider_moving.next('li') : $first;
$slider_moving.removeClass("fadeInLeft fadeInRight");
$slider_moving.removeClass("slider_moving").fadeOut(500);
$next.addClass('fadeInRight');
$next.addClass('slider_moving').fadeIn(500);
});
$(".slider_prev").click(function () {
var $prev,
$slider_moving = $(".slider_moving");
$prev = $slider_moving.prev('li').length ? $slider_moving.prev('li') : $last;
$slider_moving.removeClass("fadeInRight fadeInLeft");
$slider_moving.removeClass("slider_moving").fadeOut(500);
$prev.addClass('fadeInLeft');
$prev.addClass('slider_moving').fadeIn(500);
});
});

The problem is that on the prev and next click events you are using classes to select the slider, and thus, you are selecting both sliders.
What you'd like to do is traverse the dom to find the parent slider element, that way you will be working only with a particular slider.
$nextButton = $(this);
$sliderContainer = $nextButton.closest('.perso_slider_content');
EDIT: As per your request here is your js code edited:
jQuery(window).load(function() {
jQuery('#the_slider li:first-child').addClass('perso_slider_moving');
jQuery('#the_slider li').addClass('animated');
$(".perso_slider_next").click(function () {
var $nextButton = $(this);
var $sliderContainer = $nextButton.closest('.perso_slider_content');
var $first = $sliderContainer.find('li:first-child');
var $next,
$perso_slider_moving = $sliderContainer.find('.perso_slider_moving');
$next = $perso_slider_moving.next('li').length ? $perso_slider_moving.next('li') : $first;
$perso_slider_moving.removeClass("fadeInLeft fadeInRight");
$perso_slider_moving.removeClass("perso_slider_moving").fadeOut(500);
$next.addClass('fadeInRight');
$next.addClass('perso_slider_moving').fadeIn(500);
});
$(".perso_slider_prev").click(function () {
var $prevButton = $(this);
var $sliderContainer = $prevButton.closest('.perso_slider_content');
var $last = $sliderContainer.find('li:last-child');
var $prev,
$perso_slider_moving = $sliderContainer.find(".perso_slider_moving");
$prev = $perso_slider_moving.prev('li').length ? $perso_slider_moving.prev('li') : $last;
$perso_slider_moving.removeClass("fadeInRight fadeInLeft");
$perso_slider_moving.removeClass("perso_slider_moving").fadeOut(500);
$prev.addClass('fadeInLeft');
$prev.addClass('perso_slider_moving').fadeIn(500);
});
});

Related

Image.load function is not being called

I'm pretty new at JavaScript / jQuery.
The below example does call the .each part for every waterfall-item in my list. But the $img.load is never called for some reason?
Can't really figure out what I'm doing wrong?
(function($) {
$(document).ready(function(e) {
var $waterfall = $('.waterfall');
if ($waterfall.length) {
$waterfall.waterfall({});
}
// sort the waterfall when images are loaded
var $waterfallItem = $('.waterfall-item');
$waterfallItem.each(function(j, image) {
var $img = $(image);
$img.load(function() {
$waterfall.waterfall({});
});
});
});
})(jQuery);
<ul class="waterfall">
<li class="waterfall-item">
<a href="hidden link" title="hidden title">
<img alt="hidden alt" title="hidden title" data-srcset="hidden in this example" data-src="also hidden in this example" src="still hidden in this example" data-sizes="(min-width:440px) 300px, 95vw" class=" lazyloaded" sizes="(min-width:440px) 300px, 95vw"
srcset="think I'll hide this one too">
<span class="waterfallImgOverlay"></span>
</a>
</li>
</ul>
Solved it like this:
var $waterfall = $('.waterfall');
if ($waterfall.length) {
$waterfall.waterfall({});
}
// sort the waterfall when images are loaded
var $waterfall_images = $waterfall.find('img');
$waterfall_images.each(function(j, image) {
var $img = $(image);
$img.load(function() {
$waterfall.waterfall({});
});
});

filter div from their id using jquery

<ul>
<li>
<div class="link" id="contentLink20000002">
Link 1
</div>
</li>
<li>
<div class="link" id="contentLink1000002">
Link 2
</div>
</li>
<li>
<div class="link" id="contentLink2000003">
Link 3
</div>
</li>
<li>
<div class="link" id="contentLink2000004">
Link 4
</div>
</li>
</ul>
I have this structure an I am trying to separate id's which starts with 'contentLink2'. I have tried achieving this with .contains and regex but no luck so far.
var listids = $('ul li div');
listids.each(function(li){
var contentId = $(this).filter('contentLink2').attr('id');
console.log(contentId);
});
What i am trying is to create navigation. Like
Text
link1
link2
Text
link3
link4
HTML is dynamic so I don't have control it.
just use the attr to get to the id
var listids = $('div.link');
listids.each(function(index, element){
var contentId = $(this).attr('id');
// or use the second paramater to access the element
// var contentId = $(element).attr('id');
console.log(contentId.indexOf('contentLink2') !== -1);
});
Can do this with a jQuery attribute selector
listids.filter('[id^=contentLink2]').doSomething()
use JS instead
var x = document.getElementsByTagName('DIV');
for(i = 0 ; i < x.length ; i++){
var y = document.getElementsByTagName('DIV')[i];
var z = y.getAttribute('ID');
var m = z.search('contentLink2');
if(m == -1){
// NO THING
}else{
// Do Some Thing Here
};
}
I guess this what you are looking for.

How to Make Next and Previous Buttons to Switch iFrame Pages back and forth?

I made static ebook that when i click on a link it opens the html page in iFrame.Again, it is not dynamic pages.
I created Next and Previous Buttons in intend to work like that:
When the "pages/1.html" page displayed, i click on the Next button and it will display me the "pages/2.html" page at the iframe.
When i see "pages/2.html" and click the Previous button it will show me the "pages/1.html" at the iframe. And so on follow the numbers up and down.
I dont want to add those buttons on any iframe page i have, but to make Two Buttons ONLY at the main page that will direct to the Next and Previous Pages at the iframe.
Its kind of a simple code:
<div id="menu">
<ul>
<li><a class="link" href="./pages/1.html" target="content">Link 1</a></li>
<li><a class="link" href="./pages/2.html" target="content">Link 2</a></li>
<li><a class="link" href="./pages/3.html" target="content">Link 3</a></li>
<li><button onclick="next()">Next Page</button></li>
<li><button onclick="previous()">Previous Page</button></li>
</ul>
</div>
And the javascript is:
var pNum=1;
var maxPage=100;
function next(){
pNum++;
if (pNum > maxPage) pNum=1;
document.getElementById("zoome").src="page"+pNum+".htm";
}
function previous(){
pNum++;
if (pNum > maxPage) pNum=1;
document.getElementById("zoome").src="page"+pNum+".htm";
}
Here is a live code: JSFIDDLE
Right now i get an error page when i click the buttons and it is not forward me to any page.
Also, not that at the JSfiddle its not even forwarding to the next page because the page is not exist ofcourse.
Any suggestions?
Because you didn't provide in your fiddle an example of how we could try to simulate the paging. I searched the web and found a site which has articles separated by ids, similar to your scenario.
I focused on the next and previous functionality. The url is obviously different than that you provided, but you can easily adjust it to your needs.
Please, refer to the following snippet and see if it's what you need:
var pNum = 1;
var maxPage = 100;
document.getElementById("currentPage").innerHTML = pNum;
document.getElementById("pages").innerHTML = maxPage;
this.next = function() {
pNum++;
if (pNum > maxPage) pNum = 1;
document.getElementById("zoome").src = "https://www.infoq.com/articles/" + pNum;
document.getElementById("currentPage").innerHTML = pNum;
}
this.previous = function () {
pNum--;
if (pNum < 1) pNum = 1;
document.getElementById("zoome").src = "https://www.infoq.com/articles/" + pNum;
document.getElementById("currentPage").innerHTML = pNum;
}
<iframe id="zoome" height="150px" width="400px" allowfullscreen="" frameborder="0" border="0" src="https://www.infoq.com/articles/1"></iframe>
<div id="menu">
<ul>
<li>
<button onclick="next()">Next Page</button>
</li>
<li>
<button onclick="previous()">Previous Page</button>
</li>
<li>
Page <span id="currentPage"></span> / <span id="pages"></span>
</li>
</ul>
</div>
I got it to work via jquery from Here:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var locations = ["1.html", "2.html", "3.html","4.html"];
var currentIndex = 0;
var len = locations.length;
$(document).ready(function(){
$(':button').click(function() {
currentIndex = this.value == "Next" ?
currentIndex < len - 1 ? ++currentIndex : len - 1 :
currentIndex > 0 ? --currentIndex : 0;
$('#frame').attr('src', locations[currentIndex]);
});
});
</script>
</head>
<body>
<input type = "button" value = "Previous" /> <input type = "button" value = "Next" />
<br />
<iframe id="frame" src="1.html"></iframe>
</body>
</html>
Work Perfect!!
More accurate is that:
var pNum=1;
var maxPage=100;
function next(){
pNum++;
if (pNum > maxPage) pNum=1;
document.getElementById("zoome").src="./pages/"+pNum+".html";
}
function previous(){
pNum--;
if (pNum > maxPage) pNum=1;
document.getElementById("zoome").src="./pages/"+pNum+".html";
}
Here is the JSfiddle
And now it works because i changed the ".htm" to ".html"
and the src (at the javascript) to "./pages/" and the src of the iframe to src="./pages/0.html"
I have try that method:
<script type="text/javascript">
var pages=new Array();
pages[0]="./pages/0.html";
pages[1]="./pages/1.html";
pages[2]="./pages/2.html";
pages[3]="./pages/3.html";
pages[4]="./pages/4.html";
var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
document.getElementById('zoome').src=pages[end];
i=0;}
else {
document.getElementById('zoome').src=pages[i];
i++;}}
if (operation=="back") {
if (i==0) {
document.getElementById('zoome').src=pages[0];
i=end;}
else {
document.getElementById('zoome').src=pages[i];
i--;}}}
</script>
It is have the same problem: when click on link at the menu that changes the iframe, the script stop working.
But! i saw the solution someone gave there but i didnt get how he was implement that.
Here's his answer:
This is the function that you could put before the changeSrc function:
function UpdateI(value) {i = value}
This the one click event that you would add to your links in the a
tag. Off course, the 4 that is sent the function in this case, would
be changed to whatever is appropriate for whatever ListItem is being
referenced:
onClick ="UpdateI(4)"
How do i implement that method he suggest?

How to get text from span->li->ul-> Element

Hello i have cart full with Elements
This Ex of one of them
<div class="item-container cart-item">
<div>
<img border="0" onerror="src='http://www.myengravedjewelry.com/Admin/surfing.jpg'" title="Bloody Mary Style Colour Name Necklace" src="http://www.myengravedjewelry.com/Admin/surfing.jpg" alt="1009">
<div class="item-header">
<div class="item-body">
<ul class="item-ul">
<li>
<li>
<li>
<span class="bold-14">Price:14.9 </span>
</li>
<li>
<span>ShortId:1010 </span>
</li>
<li>
<span>LongId:110-01-073-10 </span>
</li>
<li>
<span class="spanDefCat">DefaultCat:334 </span>
</li>
</ul>
</div>
</div>
<div class="item-footer"></div>
</div>
When i press save i go trow each one of this element and check if DefaultCat==0
var elements = document.getElementsByClassName("cart-item");
and i try to get to this defaulCat like this
for(i=0;i<elements.length;i++){
var elementContent=elements[i].find(".spanDefCat").html();
var vars = elementContent.split(" ");
var obj = {};
vars.forEach(function(v) {
var keyValue = v.split(":");
obj[keyValue[0]] = keyValue[1];
});
DefaultCat = obj["DefaultCat"];
ShortId = elements[i].children[1].alt;//New style to take ShortID
if(DefaultCat==0)setDefaultCatToProductId(parseInt(ShortId));
arrSortedOrder[i]=parseInt(ShortId);
}
Any one know how to get to this value?
p.s
Plz Do NOT give me solution with $(.spanDefCat) because when i find deff=0 i need to take ShordId as Well from this element[i]
Try this:
$(".cart-item").each(function(){
var shortId = $(this).find(".bold-14").parent("li").siblings("li").children("span").html();
var shortItem = shortId.replace(' ','').split(":");
var defaultCat = $(this).find(".spanDefCat").html();
var item = defaultCat.replace(' ','').split(":");
if(item[1]==0){
var id = parseInt(shortItem[1]);
//do something
}else{
var id = parseInt(shortItem[1]);
//do something else
}
console.log(defaultCat);
console.log(shortId);
});
Note: Above code give you the DefaultCat:334 and ShortId:1010 so now you can use both in if else statement.
If the format of DefaultCat:334 is same for all cart item then you can check whether it is 0 or not
JSFIDDLE DEMO
I see JQuery tag so i give you a response with JQuery statements.
$(".cart-item").find(".spanDefCat").each(function(index, domEle){
//get text, delete spaces and split
split_result = $(domEle).text().replace(' ','').split(":");
//get only numeric value as string
defaultCat = split_result[1];
//parse into int
defaultCat = parseInt(defaultCat);
//if your var is equal to 0
if(defaultCat == 0){
/*********************
* Type you code here *
**********************/
}
});

How can I go to the Next and Previous value in a json array?

I've been beating my head against the wall with this one for days now. I have a list of items that when clicked, will move that indivual item to a div. Based on which item is clicked, I'm trying to go the the Next and Previous items in my list (json).
I'm kind of new to this and I just can't quite get this to work no matter what I try.
Here is the jsfiddle code. Thanks!
HTML:
<audio id="audio-player" name="audio-player" src="" ></audio>
<a id="next-bt" href="#">
<div class="player-musicnav-ff-column3">
<ul class="musicnav-ff">
<li class="ff">NEXT</li>
</ul>
</div>
</a>
<a id="prev-bt" href="#">
<div class="player-musicnav-ff-column3">
<ul class="musicnav-ff">
<li class="ff">PREV</li>
</ul>
</div>
</a>
<br/>
<br/>
<div id="player-digital-title">
</div>
<br/>
<br/>
<a href="#" id='player-handwriting-title'></a>​​
Javascript an Jquery:
$(document).ready(function(){
var treeObj = {"root":[{"id":"1","trackName":"Whippin Post"},{"id":"2","trackName":"Sweet Caroline"},{"id":"3","trackName":"Tears in Heaven"},{"id":"4","trackName":"Ain't She Sweet"},{"id":"5","trackName":"Octopus' Garden"},{"id":"6","trackName":"Teen Spirit"},{"id":"7","trackName":"Knockin on Heaven's Door"}]};
var $ul = $("<ul></ul>");
$.each(treeObj.root,function(i,v) {
$ul.append(
$("<li></li>").append( $("<a></a>")
.attr({"href":v.id,"data-file":v.trackFile})
.html(v.trackName)
)
);
});
$("#player-handwriting-title").empty().append($ul);
$("#player-handwriting-title a").click(function() {
var name = $(this).html(),
filename = $(this).attr("data-file");
filename2 = "upload-form/upload/" + filename;
$('#player-digital-title').html($(this).html());
document.getElementById('audio-player').src = filename2;
$("#audio-player")[0].play();
return false;
});
var myID = 0;
$("#next-bt").click(function() {
document.getElementById('player-digital-title').innerHTML = treeObj.root[++myID].trackName ;
});
var mylease = 6;
$("#prev-bt").click(function() {
document.getElementById('player-digital-title').innerHTML = treeObj.root[--mylease].trackName ;
});
});
​
Added a fiddle
http://jsfiddle.net/kabichill/JzL97/
check out..Hope its wat u expected...
try something like
var myID = 0;
$("#next-bt").click(function() {
myID++;
if(myID > treeObj.root.length) { myID = 0; }
document.getElementById('player-digital-title').innerHTML = treeObj.root[++myID].trackName ;
});
var mylease = 6;
$("#prev-bt").click(function() {
myID--;
if(myID < 0) { myID = treeObj.root.length; }
document.getElementById('player-digital-title').innerHTML = treeObj.root[--mylease].trackName ;
});

Categories

Resources