In my jQuery Mobile project I have an image slider on the homepage. This works fine when entering via this page. However, if I navigate away, and then return to the page, it doesn't work.
I have 1 html file for each JQM page (eg 4 pages equals 4 html files).
The code JS given below is loaded via a reference in the header of the page to the JS file containing it.
$(function () {
//Global variable that stores advertising banners.
var featured = new Array();
//Adds information about the new banners.
featured.push(["http://www.google.co.uk/", "assets/temp/slider/01.jpg", "FEATURED: Cessna CItation XVII"]);
featured.push(["http://www.mashable.com", "assets/temp/slider/02.jpg", "FEATURED: Cessna CItation XVII"]);
featured.push(["http://www.engadget.com", "assets/temp/slider/16.jpg", "FEATURED: Cessna CItation XVII"]);
var featured_element = document.getElementById("slider");
//Prints a new link with image in advertising box.
$.each(featured, function (i, advert) {
featured_element.innerHTML += "<img src=\"" + advert[1] + "\" data-plugin-slide-caption=\"<a href='" + advert[0] + "'>" + advert[2] + "<\/a>\"/>";
});
$("#slider").excoloSlider({
mouseNav: false,
interval: 3500, // = 3.5 seconds
playReverse: true
});
});
How can I adapt this so that it fires every time this given page is loaded?
CORRECTION Ive actually had to call the js file in the body to get it to work without causing issues with the 2nd page.
After a bit of scrambling through past answers from @Omar, and trialing the various JQM events, Ive come up with the following.
I've created a script in a js file and reference this in the head of the default.html. This will be turned into a PhoneGap app, so I know this will be the first page hit.
In the JS file I've updated the code to:
$(document).one("pageshow", function () {
alert("LOADED SLIDER CODE");
//Global variable that stores advertising banners.
var featured = new Array();
//Adds information about the new banners.
featured.push(["http://www.google.co.uk/", "assets/temp/slider/01.jpg", "FEATURED: Cessna CItation XVII"]);
featured.push(["http://www.mashable.com", "assets/temp/slider/02.jpg", "FEATURED: Cessna CItation XVII"]);
featured.push(["http://www.engadget.com", "assets/temp/slider/16.jpg", "FEATURED: Cessna CItation XVII"]);
/*
featured.push(["", "", ""]);
featured.push(["", "", ""]);
featured.push(["", "", ""]);
featured.push(["", "", ""]);
featured.push(["", "", ""]);
featured.push(["", "", ""]);
featured.push(["", "", ""]);
*/
var featured_element = document.getElementById("slider");
//Prints a new link with image in advertising box.
$.each(featured, function(i, advert) {
featured_element.innerHTML += "<img src=\""+advert[1]+"\" data-plugin-slide-caption=\"<a href='"+advert[0]+"'>"+advert[2]+"<\/a>\"/>";
});
$("#slider").excoloSlider({
mouseNav: false,
interval: 3500, // = 3.5 seconds
playReverse: true
});
});
Now the js is called whenever the page widgets etc have loaded into the DOM, and essential shows when the 'page' is first shown.