undefined array in loop function javascript - javascript

i have following script like :
/* jshint loopfunc:true */
var url = [
"http://protiumdesign.com/wp-content/uploads/2015/04/Material-Design-Background-1024.jpg",
"http://i.imgur.com/wt4NRqA.jpg",
"http://i0.wp.com/thezinx.com/wp-content/uploads/md-6.png"
];
$(document).ready(function() {
changeBack();
function changeBack() {
for (var i = 0; i < url.length; i++) {
$('#elem').fadeTo('slow', 0.3, function() {
$(this).css('background-image', 'url(' + url[i] + ')');
}).fadeTo('slow', 1).delay(1000);
}
changeBack();
}
});
the function above for change the background image dynamically but the array is undefined within the function, how to fix that , thank you
this is the fiddle : Here

Although one of the issues described here is a duplicate of JavaScript closure inside loops – simple practical example, there are other issues like infinite recursive call of changeBack.
I think a better approach will be
/* jshint loopfunc:true */
var url = ["http://protiumdesign.com/wp-content/uploads/2015/04/Material-Design-Background-1024.jpg", "http://i.imgur.com/wt4NRqA.jpg", "http://i0.wp.com/thezinx.com/wp-content/uploads/md-6.png"];
$(document).ready(function() {
var i = 0;
function changeBack() {
$('#elem').fadeTo('slow', 0.3, function() {
$(this).css('background-image', 'url(' + url[i++] + ')');
i = i < url.length ? i : 0
}).fadeTo('slow', 1).delay(1000).promise().done(changeBack);
}
changeBack();
});
#elem {
width: 500px;
height: 300px;
background-size: 100%;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='elem'></div>

Related

change background-image of div with animation

I would like to create a little slider to change background-image of my div every seconds.
My code doesn't work for the moment, image is not changed. And ideally, i would like that the script run in infinite mode..
HTML
<div id="slidesPartenairesHome"></div>
CSS
#slidesPartenairesHome {
background-size: contain;
background-position: center center;
width: 300px;
height: 170px;
margin-left: 120px;
}
JS
$( document ).ready(function() {
var arrayOfPartenaires = [
"images/partenaires/a.png",
"images/partenaires/b.jpg",
"images/partenaires/c.jpg",
"images/partenaires/d.png",
"images/partenaires/e.png",
"images/partenaires/f.jpg",
"images/partenaires/g.jpg",
"images/partenaires/h.jpg",
"images/partenaires/i.png",
"images/partenaires/j.jpg",
"images/partenaires/k.jpg",
"images/partenaires/l.jpg"
];
for (var i=0; i<arrayOfPartenaires.length; i++) {
var currentPartenaireImg = arrayOfPartenaires[i];
$('#slidesPartenairesHome').animate({opacity: 0}, 'slow', function() {
$(this).css({'background-image': 'url("'+currentPartenaireImg+')'}).animate({opacity: 1});
});
}
});
You could use window.setinterval, you could also use setTimeout but setinterval is a litle bit more precise.
Example with setinteval:
window.setInterval(function(){
var url = getCurrent();
//start animation
$('#slidesPartenairesHome').delay( 500 ).fadeTo(500, 0.3, function()
{
$(this).css('background-image', 'url(' + url + ')');
}).fadeTo('slow', 1);
}, 1000);
// We start with index of 1 because we want to skip the first image,
// Else we would be replacing it with the same image.
var index = 1;
var arrayOfPartenaires = [
"http://yourdomain.com/images/partenaires/a.png",
"http://yourdomain.com/images/partenaires/b.png",
"http://yourdomain.com/images/partenaires/c.png"
];
function getCurrent(){
// We check if the index is higher than the ammount in the array.
// If thats true set 0 (beginning of array)
if (index > arrayOfPartenaires.length -1){
index = 0;
}
var returnValue = index;
index ++;
return arrayOfPartenaires[returnValue];
}
Note if you really want to change the image every 1 second the background will be changing very fast.
Fiddle
I hope this may help you
html
<div id="slidesPartenairesHome">
<div id="imags">
</div>
</div>
Css
#slidesPartenairesHome
{
margin-left: 120px;
}
#slidesPartenairesHome, #imags
{
background-size: contain;
background-position: center center;
width: 300px;
height: 170px;
}
Js
$(function () {
var arrayOfPartenaires = [
"http://fotos2013.cloud.noticias24.com/animales1.jpg",
"http://www.schnauzi.com/wp-content/uploads/2013/03/animales-en-primavera.jpg",
"https://johannagrandac.files.wordpress.com/2015/01/conejos.jpg",
"http://png-4.findicons.com/files/icons/1035/human_o2/128/face_smile.png",
"http://icons.iconarchive.com/icons/rokey/the-blacy/128/big-smile-icon.png",
"http://simpleicon.com/wp-content/uploads/smile-256x256.png"
];
var loaders = 0;
function cycleImages() {
var element = arrayOfPartenaires[loaders];
$("#imags").css({ 'background-image': 'url(' + element + ')' }).animate({ opacity: 1 }).hide().fadeIn("slow");
if (loaders < arrayOfPartenaires.length) {
loaders = loaders + 1;
if (loaders >= arrayOfPartenaires.length) {
loaders = 0;
}
}
else {
loaders = 0;
}
console.log(loaders, arrayOfPartenaires[loaders]);
}
cycleImages();
setInterval(function () { cycleImages() }, 3000);
});
jsFiddel Demo

How to make transition effect from one image to another with jQuery?

The following code creates the effect when one image goes to white and then white is changed with another image (demo):
HTML:
<body>
<div class="page-bg" id="page-background1"></div>
<!-- <div class="page-bg" id="page-background2"></div> -->
</body>
JavaScript:
url = "http://example.com/picture.png";
$("#page-background1")
.animate({
opacity: 0
}, 'slow', function () {
$("#page-background1")
.css({
'background-image': 'url(' + url + ')'
})
.animate({
opacity: 1
});
});
But I would like to change one image directly with another (without white color in between), but with fadeOut/fadeIn effect. How should I do it? Looks like usage of the second div should help, but I can not find working solution.
Updated, I tried to apply Stacking elements with Z-index to get the desired effect. I also created a kind of "stack" of images where z-index is changed for the image that was hidden; the most recently hidden element is changed for a smaller z-index value in comparison to other images in the "stack". The code supports multiple images in the photos array, because it creates an individual div for each image.
var photos = [{
url: 'https://drscdn.500px.org/photo/97037403/m=900/d924fc03d69a82a604129011300916be'
}, {
url: 'https://drscdn.500px.org/photo/97037259/m=900/030e1598b7822cd6c41beb4c7a4e466d'
}, {
url: 'https://drscdn.500px.org/photo/97158643/m=900/4ae40d67ef546341111a32f5176694c8'
}];
//z-index, start value -1
//z-index can be either positive or negative value
//based on this answer http://stackoverflow.com/a/491105/2048391
var zIndex = -1;
//first foto in the array shown/hidden first
var visibleIndex = 0;
//initialize
//by creating div for each image/url
for (i = 0; i < photos.length; i++) {
var div = document.createElement("div");
div.id = "page-background" + (i + 1);
div.setAttribute("class", "page-bg");
div.style.zIndex = zIndex;
var url = "url('" + photos[i].url + "')";
div.style.background = "#505D6E " + url + " no-repeat center center fixed";
document.body.appendChild(div);
zIndex = zIndex - 1;
//and add div id to the photos array
photos[i].id = "page-background" + (i + 1);
}
function changeBackground() {
var hideItemIndex = visibleIndex % photos.length;
var showItemIndex = (visibleIndex + 1) % photos.length;
var hideItemId = "#" + photos[hideItemIndex].id;
var showItemId = "#" + photos[showItemIndex].id;
//hide current image with animation
//after which show the next image with animation
$(hideItemId).animate({
opacity: 0
}, "slow", function() {
$(showItemId)
.animate({
opacity: 1
}, "slow");
//change z-index for the item that was hidden
//by moving it to the bottom of the stack
$(hideItemId).css("z-index", zIndex);
$(hideItemId).css("opacity", 1);
});
zIndex = zIndex - 1;
visibleIndex = visibleIndex + 1;
}
//make sure that there's at least 2 images in the array
if (photos.length > 1) {
setInterval(function() {
changeBackground();
}, 2000);
}
.page-bg {
border: 1px solid black;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Alternative way of doing the same thing as above. Below only visible and the next div element exist, and the hidden div is removed for performance reasons, like suggested by LA_
var photos = [{
url: 'https://drscdn.500px.org/photo/97037403/m=900/d924fc03d69a82a604129011300916be'
}, {
url: 'https://drscdn.500px.org/photo/97037259/m=900/030e1598b7822cd6c41beb4c7a4e466d'
}, {
url: 'https://drscdn.500px.org/photo/97158643/m=900/4ae40d67ef546341111a32f5176694c8'
}];
//z-index, start value 100000
//z-index could be a larger number
//based on this answer http://stackoverflow.com/a/491105/2048391
var zIndex = -1;
//first foto in the array shown/hidden first
var visibleIndex = 0;
//initialize
//by creating div for each image/url
for (i = 0; i < photos.length; i++) {
//only two images are created
if (i < 2)
createDiv(i, (i + 1) );
//and add div id to the photos array
photos[i].id = "page-background" + (i + 1);
}
function changeBackground() {
var hideItemIndex = visibleIndex % photos.length;
var showItemIndex = (visibleIndex + 1) % photos.length;
var hideItemId = "#" + photos[hideItemIndex].id;
var showItemId = "#" + photos[showItemIndex].id;
//hide current image with animation
//after which show the next image with animation
$(hideItemId).animate({
opacity: 0
}, "slow", function () {
$(showItemId)
.animate({
opacity: 1
}, "slow");
//remove the item that was hidden
$(hideItemId).remove();
});
var nextItemIndex = (visibleIndex + 2) % photos.length;
//create the next div with picture
createDiv(nextItemIndex, (nextItemIndex + 1) );
visibleIndex = visibleIndex + 1;
}
//make sure that there is at least 2 photos
if (photos.length > 1) {
setInterval(function () {
changeBackground();
}, 2000);
}
function createDiv(index, divIdNro) {
var div = document.createElement("div");
div.id = "page-background" + divIdNro;
div.setAttribute("class", "page-bg");
div.style.zIndex = zIndex;
var url = "url('" + photos[index].url + "')";
//div.style.backgroundImage = url;
div.style.background = "#505D6E " + url + " no-repeat center center fixed";
document.body.appendChild(div);
zIndex = zIndex - 1;
}
.page-bg {
border:1px solid black;
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
here's a fiddle as snippets not working sat the mo, you can put the speed of the fade in milliseconds or keyword, it's at slow. I've left it on button click and not passed in the url but take out my button click function and put the code into your setinterval func, also set the url in jquery back to url variable
$('button').on('click',function(){
$("#page-background1").fadeOut( "slow", function() {
$("#page-background1")
.css({
'background-image': 'url(http://lorempixel.com/400/400/sports/2)'
});});
$("#page-background1").fadeIn('slow');
});
.page-bg{
min-width:500px;
min-height:500px;
}
#page-background1{
background-image: url(http://lorempixel.com/400/400/sports/1);
background-size:400px 400px;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me to change the background</button>
<div class="page-bg" id="page-background1">;</div>
Change the javascript to:
url = "http://example.com/picture.png";
.animate({
opacity: 0.5
}, 'fast', function () {
$("#page-background1")
.css({
'background-image': 'url(' + url + ')'
})
.animate({
opacity: 1
});
});

Jquery fadeIn not appearing to happen

I have made this minimal test jsfiddle to show images and navigate with thumbnails, next and previous and also run as a slideshow.
It seems to be working OK, except that I can not get the current displayed image to fadeOut prior to the fadeIn of the next image.
Initially all the images were placed in a stack in the #holder DIV and then FadeIn and FadeOut worked as I expected, but I need to have the images in an array and load as required, because there will be several different values, associated with each image.
I probably have made some fundamental mistake or I do not understand how FadeIn and FadeOut properly work, as I am not an expert in javascript and jquery and I just get by, by looking at examples on here and similar sites.
I suspect I may need to somehow force a delay before loading the next image, but I can not work out how to do that.
Thanks
<style type='text/css'>
#holder { position: absolute; top: 100px; background-color:#CCCCCC;
width: 300px; height: 200px;
}
.slides { position: relative; top: 0px;
display: none;
}
#thumbs li
{
display: inline;
list-style-type: none;
padding-right: 6px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// define Global Vars
var timerON = null;
var files = [
["http://dummyimage.com/300x200/000/fff&text=Array-01", "http://dummyimage.com/40x40/000/fff&text=01","Title-01"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-02", "http://dummyimage.com/40x40/000/fff&text=02","Title-02"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-03", "http://dummyimage.com/40x40/000/fff&text=03","Title-03"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-04", "http://dummyimage.com/40x40/000/fff&text=04","Title-04"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-05", "http://dummyimage.com/40x40/000/fff&text=05","Title-05"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-06", "http://dummyimage.com/40x40/000/fff&text=06","Title-06"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-07", "http://dummyimage.com/40x40/000/fff&text=07","Title-07"]
]
var numImages = files.length;
// initial routines
showImage(1);
buildThumbs();
function showImage(num) {
//$('#holder img').fadeOut();
if ( $('#holder img').length > 0 ) { // fadeout existing
$("#holder img").fadeOut(700);
//alert("Faded OUT");
}
$("#holder").html('<img id="' + num + '" src="' + files[num-1][0] + '" style="display:none;"' + '" />');
$("#holder img").fadeIn(700);
//alert("Faded IN");
}
function buildThumbs() {
var thumbs = "";
for (cnt=0; cnt<files.length; cnt++) {
thumbs += '<li><a href="#" id="' + (cnt + 1) + '"><img src="' + files[cnt][1] + '" /></li>';
}
$('#thumbs').html(thumbs);
}
// Initialise routines for acting on click events
$(document).ready(function() {
$('#prev').click( function () {
var currImage = parseInt($('#holder img:visible').attr("id"));
if (currImage == 1) {
// at first position
}
else {
showImage(currImage-1); }
});
$('#next').click( function () {
var currImage = parseInt($('#holder img:visible').attr("id"));
if (currImage == numImages) {
// at last position
}
else {
showImage(currImage+1);
}
});
$('#thumbs a').click( function () {
var selImage = parseInt($(this).attr('id'));
var currImage = parseInt($('#holder img:visible').attr("id"));
showImage(selImage);
});
$('#slideShowBtn').click( function () {
slideShowCheck();
});
});
function slideShowCheck() {
if(timerON != null) {
clearTimeout(timerON);
timerON = null;
$('#slideShowBtn').text('Play Slideshow');
} else {
$('#slideShowBtn').text('Stop Slideshow');
slideShow();
}
}
function slideShow() {
var nextImage = 0;
var currImage = parseInt($('#holder img:visible').attr("id"));
if (currImage == numImages) {
nextImage = 1;
} else {
nextImage = currImage + 1;
}
showImage(nextImage);
timerON = setTimeout(slideShow, 3000);
}
});//]]>
</script>
</head>
<body>
<p>
<button id="prev">« Prev</button>
<button id="next">Next »</button>
</p>
<ul id="thumbs">
</ul>
<p>
<button id="slideShowBtn">Play Slideshow</button>
</p>
<div id="holder">
</div>
<div style="clear:both;"></div>
<ul id="thumbs2">
</ul>
</body>
</html>
Callbacks, callbacks, callbacks.
JS does alot of things async, so you will need to make use of a callback on that fadein.
$(ITEM1).fadeOut("fast", function() {
alert("all the way faded out");
$(ITEM2).fadeIn("fast");
});
Here's your fixed fiddle.

How to add javascript to AdSanity Wordpress plugin to rotate images with a fade

I am working on a wordpress website who's client would like me to adjust our AdSanity plugin to display groups of ads in a rotating image gallery fashion like the ones on this page. The leaderboard ads for sure are AdSanity run. I was able to stem from viewing the source that this is the script I need:
$(function() {
var adsLists = $('.adsanity-group'),
i = 0;
var divs = new Array();
adsLists.each(function() {
divs[i] = $("#" + $(this).attr('id') + " div").not(".clearfix").hide();
i++;
});
var cycle_delay = 12000;
var num_groups = $('.adsanity-group').length;
function cycle(divsList, i) {
divsList.eq(i).fadeIn(400).delay(cycle_delay).fadeOut(400, function() {
cycle(divsList, ++i % divsList.length); // increment i, and reset to 0 when it equals divs.length
});
};
for (var j = divs.length - 1; j >= 0; j--) {
if (divs[0].eq(0).attr('num_ads') > 1)
cycle(divs[j], 0);
else
divs[j].show();
};
//////////
$('#slides').slidesjs({
width: 552,
height: 426,
navigation: false,
play: {
auto: true
}
});
//////////
$('.three_lines_fixed').each(function() {
$clamp(this, {
clamp: 3
});
});
var top_divs = $("#adspace div").not(".clearfix").hide(),
top_i = 0;
var top_num_ads = $('#adspace > div').attr("num_ads");
var top_cycle_delay = 12000;
function top_cycle() {
top_divs.eq(top_i).fadeIn(400).delay(top_cycle_delay).fadeOut(400, top_cycle);
top_i = ++top_i % top_divs.length; // increment i,
// and reset to 0 when it equals divs.length
};
if (top_num_ads > 1) {
top_cycle();
} else {
top_divs.show();
}
var site_url = $("body").attr("site_url");
$("#brpwp_wrapper-2 ul").append("<li style='text-align: center;'><a class='widgetized_read_more' href='" + site_url + "/2013'>Read More</a></li>")
/**/
And some of that I don't believe I need, like the three_lines_fixed or the slides. I also have the CSS used for #adspace:
div.header div#adspace {
float: right;
max-width: 728px;
max-height: 90px; }
div.header div#adspace img {
float: right; }
There is also this CSS:
div#page .main_content ul.widgets li.adspace {
display: none; }
On my site http://dsnamerica.com/eisn/ I want the 300px width ads on the right sidebar to rotate like those on the Vype site. These ads though are not listed with ul and li, they are divs.
So far I've added this to my header.php theme file right before the closing tag:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fading-ads.js"></script>
And in that file (js/fading-ads.js), I have this:
function adsanitygroup() {
var adsLists = $('.adsanity-group'),
i = 0;
var divs = new Array();
adsLists.each(function() {
divs[i] = $("#" + $(this).attr('id') + " div").not(".clearfix").hide();
i++;
});
var cycle_delay = 12000;
var num_groups = $('.adsanity-group').length;
function cycle(divsList, i) {
divsList.eq(i).fadeIn(400).delay(cycle_delay).fadeOut(400, function() {
cycle(divsList, ++i % divsList.length); // increment i, and reset to 0 when it equals divs.length
});
};
for (var j = divs.length - 1; j >= 0; j--) {
if (divs[0].eq(0).attr('num_ads') > 1)
cycle(divs[j], 0);
else
divs[j].show();
var top_divs = $("#adspace div").not(".clearfix").hide(),
top_i = 0;
var top_num_ads = $('#adspace > div').attr("num_ads");
var top_cycle_delay = 12000;
function top_cycle() {
top_divs.eq(top_i).fadeIn(400).delay(top_cycle_delay).fadeOut(400, top_cycle);
top_i = ++top_i % top_divs.length; // increment i,
// and reset to 0 when it equals divs.length
};
if (top_num_ads > 1) {
top_cycle();
} else {
top_divs.show();
};
};
}
That is my attempt to define the function and clean out what I didn't need. I don't think, no, I know it's not right. So I'll put my questions in a list, since this post is already wordy.
1) Did I link the js file correctly in the theme's header.php file? It's right before the closing </head> tag.
2) Do I need the second CSS part that says "display: none" and if so, how do I change the CSS to work with divs instead of ul and li? Do I just change div#page .main_content ul.widgets li.adspace {
display: none;}
to
div#page .main_content .widgets .adspace {
display: none; }
then add the class .adspace to the widget?
See, I have been trying to get this to work for a couple days now and I've thought so much on it I'm not making cohesive theories anymore, just shots in the dark. How to solve this?

Loading xml data for particular element from xml list with javaScript

I hope that someone will know how to help me with this problem, I am new to javaScript and XML. Basically I have the xml file with list of products, I have managed to dynamically load the data into an ul li list in my html page, the li elements has title and image, and now I need to be able to click on this li element and load remaining data for a specific product into a new page (or div). I am getting the "Uncaught ReferenceError: i is not defined" My question is how could I load the correct remaining data after clicking on a specific product from the list of products. (I hope that my explanation is clear enough) here is my code, the first function produces the ul li list in the html page, the displayPRInfo() function should load the data into showPrInfo div for any product which was clicked.
please help me, any help appreciated , thanks for reading.
function loadProducts() {
var liOpen=("<li onclick='displayPRInfo(" + i + ")'><p>");
var divOpen=("</p><div class='prod-sq-img'>");
var closingTags=("</div></li>");
var txt;
var image;
var title;
var x=xmlDoc.getElementsByTagName("product");
for (i=0;i<x.length;i++)
{
title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
image=(x[i].getElementsByTagName("imgfile")[0].childNodes[0].nodeValue);
txt= liOpen + title + divOpen + image + closingTags ;
document.getElementById("ulList").innerHTML+=txt;
}
}
function displayPRInfo(i)
{
title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
euPriceRet=(x[i].getElementsByTagName("euror")[0].childNodes[0].nodeValue);
euPriceTrade=(x[i].getElementsByTagName("eurot")[0].childNodes[0].nodeValue);
euPriceSet=(x[i].getElementsByTagName("eset")[0].childNodes[0].nodeValue);
minimumQuantity=(x[i].getElementsByTagName("mqty")[0].childNodes[0].nodeValue);
description=(x[i].getElementsByTagName("desc")[0].childNodes[0].nodeValue);
prBigImg=(x[i].getElementsByTagName("pimgfile")[0].childNodes[0].nodeValue);
prInfo=title+"<br>"+euPriceRet+"<br>"+euPriceTrade+"<br> "+euPriceSet+"<br> "+minimumQuantity+"<br>"+description+"<br>"+ prBigImg ;
document.getElementById("showPrInfo").innerHTML=prInfo;
}
You can use jQuery to manipulate xml and set onclick events.
function loadProducts() {
var products = $(xmlDoc).find('product');
for (var i = 0; i < products.length; i++) {
$('#ulList').append('<li id="product_' + i + '"><p>' + $(products[i]).find('title').text() + '</p><div class="prod-sq-img">' + $(products[i]).find('imgfile').text() + '</div></li>');
$('#product_' + i).click(displayPRInfo.bind($('#product_' + i), products[i]));
}
}
function displayPRInfo(xmlProduct) {
var title= $(xmlProduct).find('title).text();
var euPriceRet = $(xmlProduct).find('euror').text();
var euPriceTrade = $(xmlProduct).find('eurot').text();
var euPriceSet = $(xmlProduct).find('eset').text();
var minimumQuantity = $(xmlProduct).find('mqty').text();
var description = $(xmlProduct).find('desc').text();
var prBigImg = $(xmlProduct).find('pimgfile').text();
var prInfo = title+"<br>"+euPriceRet+"<br>"+euPriceTrade+"<br> "+euPriceSet+"<br> "+minimumQuantity+"<br>"+description+"<br>"+ prBigImg ;
$('#showPrInfo').html(prInfo);
}
I haven't tried the whole script but for sure you have to move this:
liOpen=("<li onclick='displayPRInfo(" + i + ")'><p>")
into the for loop
for (i=0; i<x.length; i++) {
title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
image=(x[i].getElementsByTagName("imgfile")[0].childNodes[0].nodeValue);
liOpen=("<li onclick='displayPRInfo(" + i + ")'><p>");
txt= liOpen + title + divOpen + image + closingTags ;
document.getElementById("ulList").innerHTML+=txt;
}
where acctually i is defined
I found this and it helped me a bit, the thing is that I want to load images by request, not loading them all at once but by clicking a button and set the img src with the xml data, I have this...
<!doctype html>
<html lang="es">
<head>
<style>
#iosslider_nav {
height: 13px;
right: 10px;
/* align right side */
/*left: 10px;*/
/* align left side */
bottom: 10px;
/*position: absolute;*/
/* set if needed */
/*margin-top: 10px;*/
/* remove if position is absolute */
}
#iosslider_nav .btn {
width: 13px;
height: 13px;
background: #eaeaea;
margin: 0 5px 0 0;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
cursor: pointer;
float: left;
/* ie 7/8 fix */
background: url('../images/bull_off.png') no-repeat\9;
}
</style>
</head>
<body>
<div id="ninja_slider"></div>
<div id="iosslider_nav"></div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var xmlDoc = loadXMLDoc("xml/xml_data.xml");
// generic load xml data function
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // code for IE5 and IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", filename, false);
xhttp.send();
return xhttp.responseXML;
}
set_slider();
//set_navigation('xml/xml_data.xml', 'iosslider_nav');
function set_slider() {
var item_div = $(xmlDoc).find('desk');
var item_btn = $(xmlDoc).find('desk');
var item_img = $(xmlDoc).find('desk');
// Object.bind() handler for ie 7/8
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
// create main div's
for (var i = 0; i < item_div.length; i++) {
$('#ninja_slider').append('<div id="item_div' + i + '"><img id="item_img' + i + '" src="" class="ninja_item"></div>');
$('#item_div' + i).on('click', load_current.bind($('#item_div' + i), item_div[i]));
}
// load first element
$('#ninja_slider #item_div0 .item_anchor img').attr('src', $(item_img[0]).find('image').text());
// create nav div's
for (var i = 0; i < item_btn.length; i++) {
$('#iosslider_nav').append('<div id="item_btn' + i + '" class="btn"></div>');
$('#item_btn' + i).on('click', load_current.bind($('#item_btn' + i), item_btn[i]));
}
}
function load_current(xmlData) {
var image = $(xmlData).find('image').text();
var src = image;
//console.log(image);
var item_img = $(xmlDoc).find('desk');
for (var i = 0; i < item_img.length; i++) {
$('#ninja_slider').append('<div id="item_div' + i + '"><img id="item_img' + i + '" src="' + $(item_img[i]).find('image').text() + '" class="ninja_item"></div>');
}
}
function set_navigation(url, id) {
$.ajax({
url: url,
async: false,
type: "GET",
data: "xml",
success: function (xml) {
$(xml).find("desk").each(function () {
var item_nav = document.getElementById(id),
click_item = document.createElement("div");
item_nav.appendChild(click_item);
click_item.className = click_item.className + "btn";
});
}
});
}
</script>
</body>
</html>
hope it makes sense...

Categories

Resources