Quick Javascript question. I think ....

ikillbears · 7 Jun 2012 at 16:41

Hey Guys,

I have made a website for my girlfriends dad. can be found here www.loanssas.com . its not very good i know

but its my first site so could be a lot worse

any way. on to the problem. on the team page www.loanssas.com/team.html i have made it so when you click on the Bio link the page pops up with javascript. I haven't made this my self but nabbed some code found on http://www.ericmmartin.com/projects/simplemodal/ and implemented it.

now it works on my laptop with chrome. how ever i have heard that some people. i presume with javascript blocked ? can't see them as they dont pop up, apart from the top left one.

any hints on this would be really really helpful guys

GravyMonster · 7 Jun 2012 at 16:48

If javascript was blocked, then they wouldn't see any of the modals, not just the first one. The first thing to do is to find out what browser they're using - probably an old IE - and then try it yourself in that. Also, check the console for any javascript errors.

The first thing to do when bug fixing, is to recreate the bug yourself

GaryH-21 · 7 Jun 2012 at 16:55

just for the record... it's a nice site.... simple layout, yet still supplies all the information

visibleman · 7 Jun 2012 at 17:03

As Spunkey said, if they had JS switched off then none of it would work. I would hazard a guess that they're using IE's compatibility mode.

One thing i have noticed is that you're using classes and id's incorrectly - 'basic-modal' should be a class not an id (note you can have multiple classes; class="basic-modal grid_2" etc) and the Bio links should be id's not classes.
You might also want to change the Bio links to have a 'hash' anchor (ie: href="#") as i suspect it might cause the user to navigate away when using compatibility mode.

Also if you wanted to support non-JS users then you could dump the Bio information in a noscript tag and use element anchoring.

Edit - You could also compress the basic.js by doing something (i suspect you could remove the IF statement by using a class filter on the JQuery selector) like -

Code:

$('div#basic-modal a').click(function (e) {
	if ($(this).attr("class") != undefined) {
		$("#"+$(this).attr("class")).modal({overlayClose:true});
		return false;
	}
});