Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

works in everything by Firefox

Status
Not open for further replies.
nicolasottawa

nicolasottawa

Technical User
May 31, 2007
3
CA
This script works in all browsers but in Firefox. I am sure from reading blogs and such that it has something to do with the .innerHTML and the <div> tags but i cannot get it to work no matter what I do. This should allow for a thmbnail on the left side and when one clicks on it, a larger image opens on the left. Can someone help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns=" lang="en" xml:lang="en">

<head>
<title>Untitled</title>
</head>

<body>

<script language="JavaScript1.2" type="text/javascript">
<!--

function newWin(thePage,wt,ht,theName){
document.getElementById("imageLoader").innerHTML = "<img src='"+thePage+"' width='"+wt+"' height='"+ht+"'>";
}
// -->
</script>
</head>

<div style="float: left; vertical-align:top;"> <!--this is the list of thumbnails-->

<a href="javascript: newWin('images/item/32.jpg',132,300,'IMAGE_32.jpg');"><img src="album-e.php?pic=images/item/32.jpg"></a>


<a href="javascript: newWin('images/item/30.jpg',151,300,'IMAGE_30.jpg');"><img src="album-e.php?pic=images/item/30.jpg"></a>


<a href="javascript: newWin('images/item/31.jpg',116,300,'IMAGE_31.jpg');"><img src="album-e.php?pic=images/item/31.jpg"></a>


<a href="javascript: newWin('images/item/33.jpg',300,228,'IMAGE_33.jpg');"><img src="album-e.php?pic=images/item/33.jpg"></a>


<a href="javascript: newWin('images/item/34.jpg',300,269,'IMAGE_34.jpg');"><img src="album-e.php?pic=images/item/34.jpg"></a>

</div>
<!--this is where the larger image should appear-->
<div id="imageLoader" style="float: left; vertical-align:top;"></div>

</body>
</html>

many thanks in advance
 
Sort by date Sort by votes
my first suggestion is to change your function calls to this:

Code: 
<a href="[red]#" onclick="newWin('images/item/34.jpg',300,269,'IMAGE_34.jpg'); return false;[/red]">



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Validate your code against the doctype you are using before you go any further. You cannot effectively debug this problem with non-validating code. Once you have validated code, please describe the problem you are having (and show us the validated code so we are not talking at cross purposes).

Regarding cLFlaVA's advice... I would take it one further -- remove the anchor tags completely and change your img code to:
Code: 
<img src="album-e.php?pic=images/item/32.jpg" onclick="newWin('images/item/32.jpg',132,300,'IMAGE_32.jpg');" alt="" />
Since it's more symantically correct to use an onclick on an image than it is to wrap the image in an anchor (and not provide a non-javascript href for the anchor).

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Actually, I reckon it's because you have a mis-placed </head> in the body of the markup. Validating your code will point this out I'd say.

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Thanks for all your comments. Apart from my sloppiness (I took this script from a larger script and was hasty in cutting and pasting--mea culpa) the script does validate. I tried the suggestions of the img tag and that had no effect whatsoever. It does work in Firefox on a Mac, but not Firefox on Windows (2000). I do not get any error messages or such--it just does not work in Firefox on Windows.

Here is the cleaner, validated version. I kept my image tags the same as I originally posted as the suggested changes made no difference.

Many thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns=" lang="en" xml:lang="en">

<head>
<title>Untitled</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<script type="text/javascript">
<!--

function newWin(thePage,wt,ht,theName){
document.getElementById("imageLoader").innerHTML = "<img src='"+thePage+"' width='"+wt+"' height='"+ht+"'>";
}
// -->
</script>

<div style="float: left; vertical-align:top;">

<img src="album-e.php?pic=images/item/32.jpg" onclick="newWin('images/item/32.jpg',132,300,'IMAGE_32.jpg');" alt="" />

<a href="javascript: newWin('images/item/30.jpg',151,300,'IMAGE_30.jpg');"><img src="album-e.php?pic=images/item/30.jpg" alt="" /></a>

<a href="javascript: newWin('images/item/31.jpg',116,300,'IMAGE_31.jpg');"><img src="album-e.php?pic=images/item/31.jpg" alt="" /></a>

<a href="javascript: newWin('images/item/33.jpg',300,228,'IMAGE_33.jpg');"><img src="album-e.php?pic=images/item/33.jpg" alt="" /></a>

<a href="javascript: newWin('images/item/34.jpg',300,269,'IMAGE_34.jpg');"><img src="album-e.php?pic=images/item/34.jpg" alt="" /></a>

</div>

<div id="imageLoader" style="float: left; vertical-align:top;">A Fabergé egg is any one of fifty (fifty-two, including the unfinished Karelian Birch and Tsarevich Constellation examples) Easter eggs made by Peter Carl Fabergé for the Russian Tsars between 1885 and 1917. The eggs are made of precious metals or hard stones decorated with combinations of enamel and gem stones. The term "Fabergé Egg"' has become a synonym of luxury and the eggs are regarded as masterpieces of the jeweler's art.</div>

</body>
</html>
 
Upvote 0 Downvote
If I replace your image sources with test ones that I have locally, it works fine for me in Firefox 1.5.0.12/Win.

Have you tried visiting the image URLs directly in Firefox to make sure they load? If they don't, that could be your problem.

Failing that, post a URL to your version.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Or perhaps you have javascript disabled in your version of Fierfox/Win?

If you type this into the address bar, do you see the alert?

Code: 
javascript:alert('JavaScript is enabled!');

If you don't, then you have JS disabled.

Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
OMG! After all my agonizing over this, I had disabled my javascript on Firefox. It works fine once javascript is enabled! Sometimes the most obvious...

Thanks for all the input and advice!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
578
rogerte
rogerte
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
687
xwb
xwb
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
389
waubain
waubain
GessWurker1
  • Locked
  • Question
Sort array by date substring
Replies
6
Views
218
Offera
Offera

Part and Inventory Search

Sponsor

Back
Top