473,324 Members | 2,356 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

help IE / Firefox problem GetElementById

4
Heej, my script is working great in IE but it's not working in Firefox, i'm sure this isn't a very big problem for the more moderated users, but i'm new with javascript;). it's a script to show photos in a DIV
script:

//extern file.js

function showphoto (set)
{
document.getElementById('photos').innerHTML = set;
}

// the link

<img style="cursor:pointer" onclick="showphoto('&lt;img src=`fotos/projecten/dissonant/IMG_7309.jpg`&gt;')" src="fotos/projecten/dissonant/IMG_7309small.jpg" width="90" height="60" border="0" />

// the DIV

<div align="center" id="photos">
</div>

//
I hope someone can help me, thanks
May 18 '07 #1
5 4851
pbmods
5,821 Expert 4TB
Heya, borger. Welcome to TSDN!

Expand|Select|Wrap|Line Numbers
  1. function showphoto (set)
  2. {
  3.     document.getElementById('photos').innerHTML = set;
  4. }
Instead, try this:

Expand|Select|Wrap|Line Numbers
  1. <img style="cursor:pointer;" onclick="showphoto('fotos/projecten/dissonant/IMG_7309.jpg')" src="..." />
  2. <div id="photos"><img style="visibility:hidden" src="" alt="" width="128" height="128" /></div>
  3.  
Expand|Select|Wrap|Line Numbers
  1. function showphoto(set) {
  2.     var thePhotos = document.getElementById('photos');
  3.     thePhotos.firstChild.src = set;
  4.     thePhotos.firstChild.style.visibility = 'visible';
  5. }
  6.  
May 18 '07 #2
borger
4
Heej,

Thanks a lot for your fast reaction and the working script!,

Code: ( html4strict )
<img style="cursor:pointer;" onclick="showphoto('fotos/projecten/dissonant/IMG_7309.jpg')" src="..." />
<div id="photos"><img style="visibility:hidden" src="" alt="" width="128" height="128" /></div>


Code: ( javascript )
function showphoto(set) {
var thePhotos = document.getElementById('photos');
thePhotos.firstChild.src = set;
thePhotos.firstChild.style.visibility = 'visible';
}

of course I want to understand this so I hope I understand it now,

1. the code I made before, is getting into the 'variable thePhotos'.
2. When it's a variable we can add some more atributes on it
3. Between the <div></div> every 'src' will be the value, wich is added by 'onclick do'
4. after the 'onclick do' visibility='hidden' is getting visiblity=visible so I can see the div.
end. so far I understand it.

question: but what means 'firstChild' what is the function of it?

(I wanna learn javascript that's why my questions of course)
sorry for the bad english, i'm from the Netherlands.

Regards,

H. Borger
May 19 '07 #3
pbmods
5,821 Expert 4TB
of course I want to understand this so I hope I understand it now,

1. the code I made before, is getting into the 'variable thePhotos'.
Correct. In JavaScript, everything is an object. So by creating a variable to store the result of "document.getElementById('thePhotos')", we're storing an HTML DIV Element Object (I'll give you a link to a real nice tutorial that explains what that means towards the bottom of the post ~_^).
2. When it's a variable we can add some more atributes on it.
Sort of correct. Actually, I just used a variable so that we wouldn't have to call document.getElementById twice. This would have worked just as well (and given how fast modern computers are, it would have executed just as fast):
Expand|Select|Wrap|Line Numbers
  1. function showphoto(set) {
  2.     document.getElementById('photos').firstChild.src = set;
  3.     document.getElementById('photos').firstChild.style.visibility = 'visible';
  4. }
3. Between the <div></div> every 'src' will be the value, wich is added by 'onclick do'
This one's up to you. What I did was create a single image whose source will be altered whenever the User clicks on any of the thumbnail images. Depending on the nature of your project, you may want to create a set number of full-size images and switch between them, or you may want to dynamically create images. The link to that article is coming; don't worry :)
4. after the 'onclick do' visibility='hidden' is getting visiblity=visible so I can see the div.
Correct. Since when the page first loads, the full-size image has no src. Rather than display a blank image (which different browsers handle differently), we keep it hidden. So naturally, once we assign it a src, we want it to be visible.
end. so far I understand it.

question: but what means 'firstChild' what is the function of it?

(I wanna learn javascript that's why my questions of course)
That is an admirable goal, borger. Welcome to DOM! Here's that link I've been telling you so many wonderful things about:
http://www.quirksmode.org/dom/intro.html

Post back if you have any questions.
May 19 '07 #4
borger
4
Heej, Thanks a Lot, I will read the 'DOM' website!

The photoalbum is finished now.

Next problem;) I made a rollover menu with a submenu in it:

1. by the rollover on the MAIN buttons you see a hover images.
2. when you rollover you see the subButtons and the hover images keep up. untill you leave the subButtons.

now the problem:
the hover images only go away when you leave the subButtons, but they don't leave when I'm not moving my mouse over the subButtons(div).

1. I used alerts for the script, for testing. but I don't get them working.
2. instead of using the alerts I wanted to do:
(by a rollover on Home2)
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('about').style.background= 'none';
  2. document.getElementById('media').style.background= 'none';
  3. document.getElementById('hosting').style.background= 'none';
  4. document.getElementById('portfolio').style.background= 'none';
  5. document.getElementById('contact').style.background= 'none';
(by a rollover on about etc)
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('home2').style.background= 'none';
  2. document.getElementById('media').style.background= 'none';
  3. document.getElementById('hosting').style.background= 'none';
  4. document.getElementById('portfolio').style.background= 'none';
  5. document.getElementById('contact').style.background= 'none';
I made the script till this:

Expand|Select|Wrap|Line Numbers
  1. function showmenu (hover, pages, padding)
  2.     {
  3.         var theMenu = document.getElementById('menu');
  4.         theMenu.innerHTML = pages;
  5.         theMenu.style.visibility= 'visible';
  6.         theMenu.style.paddingLeft= padding;
  7.         document.getElementById(hover).style.background= 'url(tmpl/button_hover.png)';
  8.  
  9. if (hover=home2){alert('home2');}
  10. if (hover=about){alert('about');}
  11.     }
  12.  
  13. function hidemenu ()
  14.     {
  15.         document.getElementById('menu').style.visibility= 'hidden';
  16. document.getElementById('home2').style.background= 'none';
  17. document.getElementById('about').style.background= 'none';
  18. document.getElementById('media').style.background= 'none';
  19. document.getElementById('hosting').style.background= 'none';
  20. document.getElementById('portfolio').style.background= 'none';
  21. document.getElementById('contact').style.background= 'none';
  22.     }    }
May 24 '07 #5
borger
4
Hej,

I hope people don't start with this problem yet, I solved the problem by using more functions(Y)

Expand|Select|Wrap|Line Numbers
  1. function activemenu (main, mainsub, info)
  2.     {
  3.         document.getElementById(mainsub).innerHTML = info;
  4.         document.getElementById(mainsub).style.visibility= 'visible';
  5.         document.getElementById(main).style.background= 'url(tmpl/button_hover.png)';
  6.     }
  7.  
  8. function activehover (main)
  9.     {
  10.         document.getElementById(main).style.background= 'url(tmpl/button_hover.png)';
  11.     }
  12.  
  13. function hidehover (main)
  14.     {
  15.         document.getElementById(main).style.background= 'none';
  16.     }
  17.  
  18. function hidemenu ()
  19.     {
  20.         document.getElementById('home2').style.visibility= 'hidden';
  21.         document.getElementById('home').style.background= 'none';
  22.         document.getElementById('about').style.background= 'none';
  23.         document.getElementById('media').style.background= 'none';
  24.         document.getElementById('hosting').style.background= 'none';
  25.         document.getElementById('portfolio').style.background= 'none';
  26.         document.getElementById('contact').style.background= 'none';
  27.     }
May 25 '07 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

5
by: Craig Keightley | last post by:
Please help, i have attached my page which worksin IE but i cannnot get the drop down menu to fucntion in firefox. Any one have any ideas why? Many Thanks Craig ...
2
by: AndrewW | last post by:
Hi I have an application that draws a selection rectangle over a map image. I can get it to work fine in IE and Opera, but not Firefox/Netscape. I've thrown the following small example...
3
by: davidkarlsson74 | last post by:
Error: document.getElementById("folderMenu").cells has no properties File: http://www.volkswagen.se/tillbehor/js/foldermenu.js Rad: 49 The function activates different DIV:s, but doesn't seem to...
4
by: tcole6 | last post by:
My problem appears to be Firefox specific. I have a hyperlink that loads a new window. This window contains hyperlinks that call javascript functions in the parent window and then closes the...
7
by: Papelotte | last post by:
Hi all, I'm new to this forum and I am hoping that there is someone here who can help me. I have an ASP page that has javascript that works perfectly in IE, but not in Firefox. Can anybody tell...
2
by: hzgt9b | last post by:
I've written a simple javascript page that parses an XML file... (Actually I just modified the "Parsing an XML File" sample from http://www.w3schools.com/dom/dom_parser.asp) The page works great...
7
by: Dayo | last post by:
Hello folks. Sorry if this seems a bit silly, I have no experience with this type of code. Here is a fading script for an Image Gallery I am looking to fix. It works with IE and Safari but not...
21
rrocket
by: rrocket | last post by:
This works great in IE, but does not do anything in FireFox... Any ideas of what could be wrong with it? I checked all of the values (in IE through alert statements since nothing shows up in...
27
by: Inny | last post by:
The following 3 pages which are popups on my site are not rendering in mozilla firefox. Source is visible instead. Any idea why? ...
1
by: SunshineInTheRain | last post by:
My project has 3 files, File1 has included master page. file1 consists of iframe1 that load file2. File2 consists of iframe2 that load file3. Javascript used on each file to resize the iframe...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.