473,706 Members | 2,755 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

help IE / Firefox problem GetElementById

4 New Member
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.getEle mentById('photo s').innerHTML = set;
}

// the link

<img style="cursor:p ointer" onclick="showph oto('&lt;img src=`fotos/projecten/dissonant/IMG_7309.jpg`&g t;')" src="fotos/projecten/dissonant/IMG_7309small.j pg" 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 4870
pbmods
5,821 Recognized Expert Expert
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 New Member
Heej,

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

Code: ( html4strict )
<img style="cursor:p ointer;" onclick="showph oto('fotos/projecten/dissonant/IMG_7309.jpg')" src="..." />
<div id="photos"><im g style="visibili ty:hidden" src="" alt="" width="128" height="128" /></div>


Code: ( javascript )
function showphoto(set) {
var thePhotos = document.getEle mentById('photo s');
thePhotos.first Child.src = set;
thePhotos.first Child.style.vis ibility = '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='hid den' is getting visiblity=visib le 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 Recognized Expert Expert
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.getEl ementById('theP hotos')", 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.getEle mentById 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='hid den' is getting visiblity=visib le 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 New Member
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 New Member
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
3000
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 <<<<<<<<<<<<<<CODE>>>>>>>>>>>>>>>> <html>
2
5364
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 together to illustrate the problem - the problem being that FF/NE initially draw my rectangle before the icon changes immediately to the black no-entry icon. Then, when I let go of the mouse, the rectangle continues drawing, but it
3
9267
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 work on FireFox or Netscape. What could be wrong? The function: function setActiveTab(tabNo) {
4
5127
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 child window. The function that is called contains an XMLHttpRequest. My problem is that everything happens as it should, the innerHTML is changed by the results of the XMLHttpRequest and the child window closes. The problem is this, in Firefox,...
7
8927
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 me how to get it to work in FF. I can insert a browser identifier and redirect if the script has to change for FF only. Basically, when a vistor goes to the page they are asked to click on images to chose the top 3 that they like - the images...
2
2102
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 standalone... but when I try to make this work under frames I get "Error: Object required" when the following line executes: xmlDoc.getElementsByTagName("to"); The standalone file is named treeView.htm (attached). You should be
7
1572
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 with Firefox and Netscape. Actually, when I say it doesn't work, I mean you have to refresh the page before the fade happens and once that is done once, it works on that image. for that session. Here is the code: // Fade In Script
21
2703
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 FireFox) and everything is valid. Thanks... function spanHide(spanNum){ for(startValue = 1;startValue <= 8;startValue++){ var currentSpan = eval("document.all.spanShip"+spanNum+"_"+startValue); var InsureInfo_SpanInsure =...
27
2583
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? http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9948 http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=7101 http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9817
1
3537
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 height based on the each iframe's content height. It is work well on IE, but the error "has no properties" occured with firefox on code as below. Where both code is to get the id of iframe on file1....
0
8772
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
8692
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9276
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9141
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9038
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
4441
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4705
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2493
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2084
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.