Javascript randomiser not working in FireFox, works in Chrome and Safari

[chompchomp]

Hi All,

I did a search on DaniWeb but didn't manage to find a solution to this problem. We've got some pretty simple javascript that calls a random html file into a div on a very simple page. The called file contains a vimeo embed in an iframe.

This script works perfectly in Safari and Chrome, but not FF. in FF the first html file to be called remains, no matter how many times you refresh the page.

Is this due to FF handling iframes differently, or do I need to modify the script to work within FF as well as the others due to a nuance I'm not aware of? Perhaps the randomising part of the script is incorrecT?

Please bear in mind we are not coding this site for the benefit of anyone that uses IE!

Many thanks in advance.

$(document).ready(function(){

	// each video's html filename needs to be added to this array
	vids=['assets/jerkit.html','assets/ponytail.html','assets/goldenprize.html','assets/thedrug.html','assets/slipperyslope.html','assets/leavingtrails.html','assets/tooinsistent.html','assets/sisterwife.html','assets/senior.html','assets/agb.html','assets/msg.html'];
	
	// load index page when the page loads
	var randomDiv=vids[Math.floor(Math.random()*vids.length)];
	$("#response").load(randomDiv);
	
	$("#jerkit").click(function(){
	$("#response").load("assets/jerkit.html");
	});
	
	$("#ponytail").click(function(){
	$("#response").load("assets/ponytail.html");
	});
	
	$("#goldenprize").click(function(){
		$("#response").load("assets/goldenprize.html");
	});
	
	$("#thedrug").click(function(){
		$("#response").load("assets/thedrug.html");
	});
	
	$("#slipperyslope").click(function(){
		$("#response").load("assets/slipperyslope.html");
	});
	
	$("#leavingtrails").click(function(){
		$("#response").load("assets/leavingtrails.html");
	});
	
	$("#tooinsistent").click(function(){
		$("#response").load("assets/tooinsistent.html");
	});
	
	$("#sisterwife").click(function(){
		$("#response").load("assets/sisterwife.html");
	});
	
	$("#senior").click(function(){
		$("#response").load("assets/senior.html");
	});
	
	$("#agb").click(function(){
		$("#response").load("assets/agb.html");
	});
	
	$("#msg").click(function(){
		$("#response").load("assets/msg.html");
	});
	
	
});

[stbuchok]

Please bear in mind we are not coding this site for the benefit of anyone that uses IE!

Is this an internal app? If so I can understand this, however if this is a public facing site you could potentially lose a lot of visitors.

Also, what version of jQuery are you using (1.4.1 has a known issue).

[chompchomp]

Hi,

This website is targeted at creative agencies, production companies and their affiliates, all of which are Mac based and would use Safari, Chrome or Firefox. I completely understand your concern and I understand this will cause a conflict of opinion!

We're currently using JQuery 1.5.1

[Airshow]

Chompchomp,

I can see nothing in your javascript that should cause FF to behave differently from the other browsers.

We therefore have to be suspicious that the loaded content might be to blame. I would be inclined to find a solution not involving an iframe if possible. In my experience, AJAX and iframes don't make the best of bedfellows.

Airshow

[chompchomp]

Hello Airshow,

Fair comment. I've just called JQuery 1.6.1 and isolated the issue - the randomiser works when you press enter on the URL in the address bar and reload in FF, but NOT if the refresh button is pressed. Strange.

I'd love to not use iframes - but it seems I've not much option when it comes to Vimeo embeds. I might try to convince the owner of the site to use another way of embedding video.

If anyone can suggest another method of randomising though, that'd be a boon.

[Airshow]

Hello Airshow,

Fair comment. I've just called JQuery 1.6.1 and isolated the issue - the randomiser works when you press enter on the URL in the address bar and reload in FF, but NOT if the refresh button is pressed. Strange.

If anyone can suggest another method of randomising though, that'd be a boon.

Aha, that's a difference between 'soft refresh' and 'hard refresh'. Try framing the jquery statements in a window.onload = function(){...}; structure as opposed to $(document).ready(function(){...}); . I'm not certain, but that might encourage the randomiser to work in FF under both refresh conditions.

I'd love to not use iframes - but it seems I've not much option when it comes to Vimeo embeds. I might try to convince the owner of the site to use another way of embedding video.

Unfortunately I don't know too much about Vimeo embeds. Might it be possible to have one reusable iframe? ie. change its location rather than replacing it completely. You would need to change your server-side code and .php may be preferable to .html files, however even with .html you should be able, if necessary, to deliver a URL burried in markup in such a way that it can be separated out in an AJAX success handler (You would need to use $.ajax(...) rather than $(...).load() ).

Airshow

[Troy III]

Please bear in mind we are not coding this site for the benefit of anyone that uses IE!

Well, just don't! :)
IE(~60%) + firefox (~20%) = ~80% of existing surfers. You are of course targeting less than 18% of them.

But of course - a substantial something, is better than nothing at all.

But since you area OK with that, Imight add that there is, however, something terrribly wrong with your code.

What I mean with terribly whrong is:

// each video's html filename needs to be added to this array
vids='assets/jerkit.html','assets/ponytail.html','assets/goldenprize.html','assets/thedrug.html',
'assets/slipperyslope.html','assets/leavingtrails.html','assets/tooinsistent.html','assets/sisterwife.html',
'assets/senior.html','assets/agb.html','assets/msg.html']; 	
// load index page when the page loads
	var randomDiv=vids[Math.floor(Math.random()*vids.length)];	$("#response").load(randomDiv); 
//What are the following lines of code for?!!
	$("#jerkit").click(function(){
	$("#response").load("assets/jerkit.html");
	});
(...)

If it aint wrong - than you might need a "cache buster" code.
for further inf.: Please google for "javascript cache buster".

[stbuchok]

Troy III, it looks like on page load, it loads a random video. There are then links on the page that can be clicked to load specific videos.

Also instead of $("#response").load("assets/jerkit.html"); you could use $("#response").load(vids[0]); allowing only one change later if the URL ever changes.

As for the refresh button, instead of refreshing, navigate back to the page instead.

One last thing, if you look at your logs for your site, if 90%+ are not using IE, I would say don't worry about IE too much, however if there are more, you might want to consider it, but of course that is up to you.

OK, last thing I swear, javascript's Math.random is not actually random. try this instead:

function randomNumber(max) {

	if (!seed) {
		seed = new Date().getTime();
	}
	else {
		seed++;
	}
		
	seed = (seed * 9301 + 49297) % 233280;

	return Math.floor(seed / (233280.0) * max);
}

[chompchomp]

Great stuff. I'll take your advice and give this a shot.

Yeah, to be honest with you IE compatibility isn't high on our priorities for this one, but one the site goes live I'll continue to develop that side of things. Like I said before, usually that's my standard practice, but on this occasion it's not essential. At least at the moment.

Troy III - yeah, now you mention it that particular file ref is a bit dodgy looking! There is nothing lewd here though. It's just the name of a music video... and yes, stbuchok has pointed out correctly their reason for being.

Stbuchok, I'll give this javascript adjustment a shot and let you know how it goes. Thanks to all for taking the time to comment.