Is there a Javascript Doctor in the house?

Factual Questions
1

Hello,

I’m not trying to advertise my site (actually, I’d rather not), but I do need help with it. So… go here: http://www.newcomb-being.com/

When you click on the crate icon on the left it should open up a nice little form where you can post comments that goes into cpanel’s “simple guestbook”. Using the same “popup script,” I made it so pictures, when clicked on, open up in the same fashion.

In firefox, it works like a charm. In IE, the crate tries to open a picture instead of the form. I’m not much of a javascripter, so it might look kind of sloppy. Personally, I don’t use IE, but I know a lot of people do, so I’d like to fix this.

To make things easier, you’ll notice in the head that the section commented as “POPUP PICS” is the javascript that makes it work. The two sections directly after the body tag, “POPUP PICS” and “POPUP SOAPBOX” are the div tags that the javascript points to.

Any idea why IE gets confused? Like I said before, for some reason the crate somehow gets directed to “POPUP PICS” instead of “POPUP SOAPBOX.”

I know it’s probably just a simple, stupid mistake. Any help is greatly appreciated. Thanks a bunch.

Art

2

IANAJD :slight_smile:

Did you write the Javascript yourself? Or did you “borrow” it from somewhere else on the web?

My point in asking is I’ve seen much simpler JavaScript popups with web forms than what you have.

3

I “borrowed” the script and modified it. The script available only allowed one “layer.” I needed to modify it so that I can open multiple items (form, and pics). Like I said, it works great in firefox, just doesn’t work in IE. If you know of a much simpler popup script please let me know. I enjoy this particular script because it pops up inside the browser instead of opening a new tab or window. Also, it doesn’t take up any space on the taskbar this way.

4

I found several free popup scripts here .

Break down the process into manageable steps:

  1. Create a working JavaScript popup.
  2. Use this working popup design for creating additional popups, such as for viewing images.
  3. Use the same design to add in a web form.

It is often easier to use one type of popup for several different functions, but do not create a multi-functional popup, especially when you are learning. Instead you create identical popups with each one performing a single function.

5

I’m gong to assume you didn’t actually visit the site. The javascript “popups” you linked to are actual popups. They open in a new window. The popup I’m dealing with “pops up” inside the same browser onto a visible layer which is always there, just invisible until someone clicks on it, thus activing a showMe() function. (made to look like a popup).

Can someone who actually knows javascript and is willing to take a look respond? This is one of those cases where skimming the posts doesn’t really give you an idea until you actually see what I’m talking about.

Thanks,

Art

6

The link I provided was to a Google search for JavaScript popups. My apologies you did not appear to view the results as intended. I guess I mistook your words “popup script” and “javascripter” to mean you are looking for JavaScript popup windows.

It appears you are not asking for a popup window as you are asking how to create an inline frame window. The two are not synonymous. IE does not follow web standards for the most part. That may be part of the problem. Talking about JavaScript and popups when you really mean an inline frame is the other part.

7

He doesn’t want an inline frame. He’s got an object that has its visibility set to hidden using DHTML, and it should become visible when you click on it.

The DIV you are showing and hiding seems to be appearing okay, but what were you expecting to see in it? The DIV in question looks like this:




<div id="theLayer" class="theLayerView" style="position:absolute;width:250px;left:100;top:100;visibility:hidden">

<table border="0" width="100%" bgcolor="#000000" cellspacing="0" cellpadding="5">
 <tr>
  <td width="100%">
   <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
    <tr>
     <td id="titleBar" style="cursor:move" width="100%">
      <ilayer width="100%" onSelectStart="return false">
       <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
        <font face="Arial" color="#ffffff"><b>ô_Ô</b></font>
       </layer>
      </ilayer>
     </td>
     <td style="cursor:hand" valign="top">
      <a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial style="text-decoration:none">[close]</font></a>
     </td>
    </tr>
    <tr>
     <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2" align="center">
      <!-- PLACE YOUR CONTENT HERE //-->  
<div id="topLevel" class="topLevelView">
<img id="largeImage" border="0">
</div>
      <!-- END OF CONTENT AREA //-->
     </td>
    </tr>
   </table> 
  </td>
 </tr>
</table>

</div>

It appears to me that that’s exactly what you’re getting. You’ve got nothing where the comment says, “Place your content here”, and image url has obviously not been filled in with the proper image you wanted.

I don’t see any way that this is supposed to be a comment box. Looks to me like it’s code for a picture viewer or something. All the code in that DIV is stuff that controls whether it should be closed or moved. The actual content section is empty.

This looks like template code to me. The part that says, “put your content here” would typically contain a server variable that would populate something from a database.

8

My apologies duckster, I’m not necessarily looking for a “javascript popup window”, but I didn’t know how else to describe it. Sam Stone has it right.

Sam, you’ll notice in the source code right before that div tag there is another div called “thebox” instead of “thelayer.” When you click on a picture, the showme() function is activated which goes to “thelayer” and, yes, the picture is shown. it works. When you click on the picture of a crate on the left side of the screen, the showbox() function is activated which goes to the “thebox”, and, yes, the form is shown. It works great in FIREFOX.

For some reason though, it does not work in IE, and I don’t know why. When you click on the crate picture in IE, it shows a picture (instead of the form). There is nothing directing the showbox() function to the “thelayer” div, so i don’t see how it’s doing it.

Thanks for looking and please let me know what you think.

Art

9

The most immediate problem seems to be that if you are detecting IE, you are getting the same element twice… while Mozilla is changing it.

Your current function is



function ddInit(e){
  topDog=isIE ? "BODY" : "HTML";
  whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
  whichCat=isIE ? document.all.theLayer : document.getElementById("theBox");

It should be



function ddInit(e){
  topDog=isIE ? "BODY" : "HTML";
  whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
  whichCat=isIE ? document.all.theBox : document.getElementById("theBox");

And that worked locally for me.

Of course, IE now has document.getElementById as well, so you might not even need most of the code you have in there… unless you particularly need IE4 or 5.0 support.

10

Aaaargh… I knew it was some stupid thing I missed. I’m used to forgetting semicolons and parentheses here and there, I didn’t think to look for something so obvious. Thanks a lot Khadro. And no, I didn’t know IE had document.getElementById. I quit using it after it killed my computer (literally… had to get a new HD because of IE.) Thanks again! You were a huge help.

Art