/    Sign up×
Community /Pin to ProfileBookmark

document.appenchild(this.file) Versus document.getElementById(‘this.file)….

Hi,
with reference to DOM code ‘document.appendChild(this.image);’
which runs OK only in IE5 plus

I am trying to find out how to replace this with a DOM code that will work in Mozolla {Netscape} browsers as well as IE6

I think from Google search that the solution is somethinfg along the lines of using the ‘document.getElementByID(‘this.image’),

I have been using [url]http://www.quirksmode.org/dom/w3c_core.html[/url] as a reference.

but from testing the code is not complete & I’m still note there and getting rather stuck.

Any tips help appreciated. actual code is on line 80 odd below

Regards
MArk

this javascript is part of [url]http://www.malden-dsme.co.uk/slideshow.htm[/url]
the code below is called by external javascript call.

{had to attach javascript code here as upload would not work for some reason.}

Part of js Code as follows
function ImagePair( _file )
{
// The ImagePair object’s purpose is to
// keep track of the image and the file that identifies it;
// we do this because the image’s src attribute will read back
// as uuencoded if interrogated, meaning that, to see if a
// particular image exists in the cache, we need to uuencode
// again. It seems easier just to store the path in unencoded
// form, along with the image associated with it.
this.file = _
file;
this.image = new Image();

// Add the image to the document; if you don’t, readystatechange
// events won’t know where they originated, meaning that
// event.srcElement will be null
[COLOR=Red]//document.appendChild(this.image);
document.getElementByID(‘this.image’)[/COLOR]

}

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@KravvitzOct 31.2005 — document.getElementById() obtains an object reference. document.appendChild() appends a child to a node.

Instead of
document.appendChild(this.image);
try
document.[b]getElementsByTagName('body')[0][/b].appendChild(this.image);
Copy linkTweet thisAlerts:
@mark_adlingtonauthorOct 31.2005 — document.getElementById() obtains an object reference. document.appendChild() appends a child to a node.

Instead of
document.appendChild(this.image);
try
document.[b]getElementsByTagName('body')[0][/b].appendChild(this.image);[/QUOTE]


Thanks for this, its sort of getting there,

what is happening now is that when the load button is pushed the script is loading the images but putting a picture on the right hand of the existing window in IE, in NS the second picture it is placed under the orignal picture.

I've since noticed that the codde suggested puts all the pictures sequential under the slideshow window.

I've loaded the new slideshow to www.malden-dsme.co.uk/slideshow1.htm

The old slideshow that onlt runs in IE is located at

www.malden-dsme.co.uk/slideshow.htm

as far as the java script is concerned all that I have done is changed the line as you stated above.

Thanks for your help

Regards

MArk
Copy linkTweet thisAlerts:
@KravvitzNov 01.2005 — I'm not sure what you're asking. What do you want the script to do?
Copy linkTweet thisAlerts:
@mark_adlingtonauthorNov 02.2005 — I'm not sure what you're asking. What do you want the script to do?[/QUOTE]

if you look at the old slideshow using IE{6} it runs OK

www.malden-dsme.co.uk/slideshow.htm

problem is that in the new slideshow www.malden-dsme.co.uk/slideshow1.htm[COLOR=Red]document.appendChild(this.image);[/COLOR] won't work in netscape or any other Mozzilia browser.

when I investigated I found that line 80 in the javascript file was only valid for IE6 and therfore needed changing.

Changing line 80 in the new-load-image.js file from

document.appendChild(this.image);

to

document.getElementsByTagName('body')[0].appendChild(this.image);

results in all the pictures landing up under the slideshow frame, whereas they should all be loaded into cache, ready to be displyed in the image window when the slideshow starts

The reason to preload the images is because the images are fairly large and the slideshow screws up without preloading.

(to see slideshow without preload see http://www.malden-dsme.co.uk/2005_slideshow1.htm )

You may need to clear cache first!, once the slideshow has loaded and run through once it will work fine because files are then in cache!

With your help we are probably 90% of the way to fixing the problem,

what I think is needed is to fix the 'body' or the [0] bit of the TagName

to get the images within the table & /or image frame.

Regards

Mark
Copy linkTweet thisAlerts:
@KravvitzNov 05.2005 — if you look at the old slideshow using IE{6} it runs OK

www.malden-dsme.co.uk/slideshow.htm[/QUOTE]

It has a JavaScript error so it doesn't work in IE. I don't need to see it working.

problem is that in the new slideshow www.malden-dsme.co.uk/slideshow1.htm[COLOR=Red]document.appendChild(this.image);[/COLOR] won't work in netscape or any other Mozzilia browser.

when I investigated I found that line 80 in the javascript file was only valid for IE6 and therfore needed changing.

Changing line 80 in the new-load-image.js file from

document.appendChild(this.image);

to

document.getElementsByTagName('body')[0].appendChild(this.image);[/QUOTE]

IE allows people to program things badly. Mozilla is not so forgiving.

results in all the pictures landing up under the slideshow frame, whereas they should all be loaded into cache, ready to be displyed in the image window when the slideshow starts

The reason to preload the images is because the images are fairly large and the slideshow screws up without preloading.[/QUOTE]

That's what I thought.

what I think is needed is to fix the 'body' or the [0] bit of the TagName

to get the images within the table & /or image frame.[/QUOTE]

Frame? That's not a frame.

============

Try adding the line in bold.
this.file = _file;
this.image = new Image();
[b]this.image.style.display = 'none';[/b]

<i> </i>// Add the image to the document; if you don't, readystatechange
<i> </i>// events won't know where they originated, meaning that
<i> </i>// event.srcElement will be null
<i> </i>//document.appendChild(this.image);
<i> </i> document.getElementsByTagName('body')[0].appendChild(this.image);
Copy linkTweet thisAlerts:
@mark_adlingtonauthorNov 12.2005 — It has a JavaScript error so it doesn't work in IE. I don't need to see it working.


IE allows people to program things badly. Mozilla is not so forgiving.


That's what I thought.


Frame? That's not a frame.

============

Try adding the line in bold.
this.file = _file;
this.image = new Image();
[b]this.image.style.display = 'none';[/b]

<i> </i>// Add the image to the document; if you don't, readystatechange
<i> </i>// events won't know where they originated, meaning that
<i> </i>// event.srcElement will be null
<i> </i>//document.appendChild(this.image);
<i> </i> document.getElementsByTagName('body')[0].appendChild(this.image);
[/QUOTE]



Ive tried the additional line, but unfortunatly it still won't work in Netscape / Firefox.

I have therefore switched to a different script file from http://www.ricocheting.com/js/slide2.html

which overcomes all the problem

Therfore this thread is now closed

Thanks for helping..
×

Success!

Help @mark_adlington spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...