event handler image onload

[webaster]

This javascript is not working. The idea is that after the largeImage has loaded, div1,2,3,4 get unhidden.
this line probably?:

document.getElementById('largeImage').onload = unhideDivsAfterImageOnload

<script language="javascript">
<!--

function unhideDivsAfterImageOnload () {
document.getElementById('div1').style.visibility = "visible";
document.getElementById('div2').style.visibility = "visible";
document.getElementById('div3').style.visibility = "visible";
document.getElementById('div4').style.visibility = "visible";

}
document.getElementById('largeImage').onload = unhideDivsAfterImageOnload ;

//
-->
</script>

The relevant css and HTML

<img id="largeImage" src="images/superlarge.jpg" width="600" heigth="400">

<div id="div1" style="visibility:hidden;">
<img src="images/image1.jpg" width="200" heigth="400">
</div>
<div id="div2" style="visibility:hidden;">
<img src="images/image2.jpg" width="200" heigth="400">
</div>
<div id=div3" style="visibility:hidden;">
<img src="images/image3.jpg" width="200" heigth="400">
</div>
<div id="div4" style="visibility:hidden;">
<img src="images/image4.jpg" width="200" heigth="400">
</div>
Message Thread Options: flag itprintablenew *reportnew *recommende-a-fri

[Rambo Tribble]

I think you will find that you have to put the onload event handler on the image as an attribute of the image tag. Otherwise either the element won't exist to assign the handler to or the window.onload won't assign the handler until after the fact.

[webaster]

Maybe there is need to create a HTML object

[webaster]

Sorry for the crossposting in HTML.

Detect = function(){
var agent = navigator.userAgent.toLowerCase();
this._mac = agent.indexOf('mac')!= -1;
this._win =!this._mac;
this._w3c = document.getElementById;
this._iex = document.all;
this._ns4 = document.layers;
}
Detect.prototype.getObj = function(name){
if(this._w3c){
return document.getElementById(name);
}else if(this._iex){
return document.all[name];
}else if(this._ns4){
return this.getObjNS4(document,name);
}
}
Detect.prototype.getObjNS4 = function(obj, name){
var d = obj.layers;
var result,temp;
for(var i=0; i<d.length; i++){
if(d[i].id == name){
result = d[i];
}else if(d[i].layers.length){
var temp = this.getObjNS4(d[i],name);
}
if(temp){
result = temp;
}
}
return result;

// HTMLobj Constructor

HTMLobj = function(name){
if(name){
this._inherit = Detect;
this._inherit(name);
this._id = name;
this._el = this.getObj(this._id);
this._css = this.getStyle(this._el);
this._obj = name+'Object';
eval(this._obj+'=this');

return this;
}
}
HTMLobj.prototype = new Detect();

// creating a HTMl Object
API = new Detect();

loadAPI = function(){
// Instantiate HTMLobj
API.largeImage= new HTMLobj('largeImage');

onload = loadAPI;

unction unhideDivsAfterImageOnload () {
document.getElementById('div1').style.visibility = "visible";
document.getElementById('div2').style.visibility = "visible";
document.getElementById('div3').style.visibility = "visible";
document.getElementById('div4').style.visibility = "visible";

}
document.getElementById('largeImage').onload = unhideDivsAfterImageOnload ;

[webaster]

An object approach maybe ... to remove the inline event handeler (courtesy Travis -squidfingers.com for the code)

// general functions from API
Detect = function(){
var agent = navigator.userAgent.toLowerCase();
this._mac = agent.indexOf('mac')!= -1;
this._win =!this._mac;
this._w3c = document.getElementById;
this._iex = document.all;
this._ns4 = document.layers;
}
Detect.prototype.getObj = function(name){
if(this._w3c){
return document.getElementById(name);
}else if(this._iex){
return document.all[name];
}else if(this._ns4){
return this.getObjNS4(document,name);
}
}
Detect.prototype.getObjNS4 = function(obj, name){
var d = obj.layers;
var result,temp;
for(var i=0; i<d.length; i++){
if(d[i].id == name){
result = d[i];
}else if(d[i].layers.length){
var temp = this.getObjNS4(d[i],name);
}
if(temp){
result = temp;
}
}
return result;

// HTML CSS hide elements
HTMLobj.prototype.hide = function(){ // hide the visibility of the element
this._css.visibility = 'hidden';
}
// HTMLobj Constructor

HTMLobj = function(name){
if(name){
this._inherit = Detect;
this._inherit(name);
this._id = name;
this._el = this.getObj(this._id);
this._css = this.getStyle(this._el);
this._obj = name+'Object';
eval(this._obj+'=this');

return this;
}
}
HTMLobj.prototype = new Detect();

// initiate creating a HTMl Object
API = new Detect();

loadAPI = function(){
// Instantiate HTMLobj
API.largeImage= new HTMLobj('largeImage');
API.div1= new HTMLobj('div1');
API.div2= new HTMLobj('div2');
API.div3= new HTMLobj('div3');
API.div4= new HTMLobj('div4');

onload = loadAPI;

function unhideDivsAfterImageOnload () {
API.div1.hide();
API.div2.hide();
API.div3.hide();
API.div4.hide();

}
// Set up event listener onload
document.getElementById('largeImage').onload = unhideDivsAfterImageOnload ;

[webaster]

Unhide I meant

object approach maybe ... to remove the inline event handeler (courtesy Travis -squidfingers.com for the code)

// general functions from API
Detect = function(){
var agent = navigator.userAgent.toLowerCase();
this._mac = agent.indexOf('mac')!= -1;
this._win =!this._mac;
this._w3c = document.getElementById;
this._iex = document.all;
this._ns4 = document.layers;
}
Detect.prototype.getObj = function(name){
if(this._w3c){
return document.getElementById(name);
}else if(this._iex){
return document.all[name];
}else if(this._ns4){
return this.getObjNS4(document,name);
}
}
Detect.prototype.getObjNS4 = function(obj, name){
var d = obj.layers;
var result,temp;
for(var i=0; i<d.length; i++){
if(d[i].id == name){
result = d[i];
}else if(d[i].layers.length){
var temp = this.getObjNS4(d[i],name);
}
if(temp){
result = temp;
}
}
return result;

// HTML CSS show elements
HTMLobj.prototype.show = function(){ // show the visibility of the element
this._css.visibility = 'visible';
}
}
// HTMLobj Constructor

HTMLobj = function(name){
if(name){
this._inherit = Detect;
this._inherit(name);
this._id = name;
this._el = this.getObj(this._id);
this._css = this.getStyle(this._el);
this._obj = name+'Object';
eval(this._obj+'=this');

return this;
}
}
HTMLobj.prototype = new Detect();

// initiate creating a HTMl Object
API = new Detect();

loadAPI = function(){
// Instantiate HTMLobj
API.largeImage= new HTMLobj('largeImage');
API.div1= new HTMLobj('div1');
API.div2= new HTMLobj('div2');
API.div3= new HTMLobj('div3');
API.div4= new HTMLobj('div4');

onload = loadAPI;

function unhideDivsAfterImageOnload () {
API.div1.show();
API.div2.show();
API.div3.show();
API.div4.show();

}
// Set up event listener onload
document.getElementById('largeImage').onload = unhideDivsAfterImageOnload ;

[webaster]

also needed this function

Detect.prototype.getStyle = function(obj){
return (this._ns4)? obj : obj.style;
}

[Rambo Tribble]

Seems an awful lot of overhead to avoid a tag attribute.

[webaster]

Inline onload eventhandler in image tag is not W3C standard

I got an error message last time I had an inline onload eventhandler

I use HTML 4.01 strict doctype to specify my HTML and inline event handler onload in image is not valid conforming W3C standards

Plus I use this API for other functions ...

Maybe should use HTML 4.01 transitional where onload inline event handler is accepted confroming W3C

Plus this is a good exercise in seperating HTML and javascript ...?

[webaster]

not working

if want to hide 4 divs - i set the inlinestyle of each div to visibility:hidden

then execute JS to unhide them

not working here ...

[Rambo Tribble]

Okay, don't tell anybody I said this, but try placing a script in the body right after the largeImage, image element, like:

<script type="text/javascript">
document.getElementById('largeImage').onload=function(){
 unhideDivsAfterImageOnload ();
}
</script>

It ain't pretty, but it will validate and there is a fair chance it will work, too. Just remember, I didn't tell you this. Bernard Marx did.

[webaster]

i will give it a shot. My lips are sealed.

[webaster]

failure, sorry folks.

[Rambo Tribble]

Okay, this is working for me on FF/Linux, run locally and it validates:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function showImage() {
document.getElementById('div1').style.visibility = "visible";
document.getElementById('div2').style.visibility = "visible";
}
</script>
</head>
<body>
<div>
 <img id="largeImage" src="pic_01.gif" alt="" />
<script type="text/javascript">
alert('demonstrates second image not initially visible . . .');
document.getElementById('largeImage').onload=function(){
 showImage();
}
</script>
 <div id="div1" style="visibility:hidden;">
  <img src="pic_02.gif" alt="" style="height:200px;width:200px;">
 </div>
 <div id="div2" style="visibility:hidden;">
  <img src="pic_03.gif" alt="" style="height:200px;width:200px;">
 </div>
</div>
</body>
</html>

[Rambo Tribble]

Actually, comment out or remove the alert, it can interfere with the event handler being assigned before the event fires. It's in there for testing purposes.

[webaster]

thanks probably i had some syntax error I will simplify the code as you did ... I will keep you posted

[webaster]

<script type="text/javascript">
function showImage() {
document.getElementById('div1').style.visibility = "visible";
document.getElementById('div2').style.visibility = "visible";
}
</script>

I included an object detection too.

<script type="text/javascript">
function showImage() {
if (!document.getElementById){return;}
document.getElementById('div1').style.visibility = "visible";
document.getElementById('div2').style.visibility = "visible";
}
</script>

[webaster]

Actually does object detection imply that is no longer necessary to use comments to hide javascript from old browser

eg

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

your functions here

//
-->
</script>

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

your functions here() {
...
if (!document.getElementById) {return;}
...
}
//
-->
</script>

[webaster]

would be even better?

<script type="text/javascript">

your functions here() {
...
if (!document.getElementById) {return;}
...
}

</script>

[Rambo Tribble]

Object detection really doesn't have anything with hiding scripts from JS-ignorant browsers. After all, JS has to be present for the object detection to mean anything and the commenting out of the scripts is meant to completely hide JS from the, essentially nonexistent in this day-and-age, archaic browser.

Object detection is a better practice than browser detection (a.k.a., "sniffing"), but should accomplish something to be worthwhile. In this case, what happens if there is no object? With or without object detection, the script fails. What has the object detection gained us? In this case it may allow for a more graceful degradation, which is a laudable goal. Try/catch can be quite useful in this regard, as well.

The object detection-based conditional could also take the route:

if(condition positive){
//do stuff
}else{
return;
}

[webaster]

But object detection does prevent old browsers display javascript error messages when encountering code they do not know hence the object detection to prevent the code from running eg the object detection for document.getElementById ... or am I wrong?

[Rambo Tribble]

No, you're probably right. That's what I meant by degrading more gracefully. Though with many errors the browser is just silent, anyway.