doren — Wed, 27 Sep 2000 19:05:57 +0000

Max, I've looked at the sites and they look very helpful. I'll eye the code today.

So far my efforts have yielded this prototype page:

http://www.alogical.com/clientframe/clientframe2.html

The 'Help' link in the blue frame and resulting layer work as I want them to, but the problem is I need to have the '?' in the black frame do the same thing in the blue frame.

Hope that makes sense.

Vincent Puglia — Tue, 26 Sep 2000 12:03:29 +0000

Hi Bob,

I looked at and downloaded both (ie5.0 & nn4.6). As soon as I get a chance to look them over and figure out something intelligent to say , I'll get back to you. At first glance, they both look good (though you might want to drop the top a little on absolute(?) and bring in the left on the relative(?). I didn't resize the windows yet (that's where most relative problems occur), and didn't really notice if you have them deeply nested within a table (another problem area).

Hi Max,

Actually they don't. But that is a helauva goodlooking and impressive site

Vinny

Mark Hensler — Tue, 26 Sep 2000 04:50:20 +0000

I don't have time to read the whole thread, but I think that these URLs may be something close to what the subject says...

http://www.microbians.com
http://www.siteexperts.com/tips/techniques/ts05/page1.asp

Bob — Tue, 26 Sep 2000 02:49:02 +0000

Vinny,

Thanks for the reply. Yeah, I knew all it would take was a parmameter pass, just didn't know the correct syntax. Got it working fine now. But I'm playing around with the relative vs. absolute positioning and something is driving me nuts. I set up two test pages, one using relative and one using absolute. They are identical, except with on I used position:relative in my statements, the other I used position:absolute. I figured the positioning would be different, but the size of the pop-up window that I get is totally different one to the other, and I have no idea why. They also look different NS vs. IE. They are at:

http://members.aol.com/jproscenium/ind1.html (relative)
http://members.aol.com/jproscenium/ind2.html (absolute)

The DIV's should pop up when you do a mouseover on "Next Production" and "Proscenium Theater Workshops". I'd really be interested to understand what causes these differences.

Thanks for all your help, and Adog, thanks to you also.

Bob

Vincent Puglia — Mon, 25 Sep 2000 13:40:00 +0000

Hi Bob,

If you want to use any function for multiple instances, simply send the element as a parameter -- for example:

function doIt(viz, divID)
{
if (document.layers)
{
document.layers[divID].visibility = (viz) ? 'hide' : 'show';
}
else
{
document.all[divID].style.visibility =
(viz) ? 'hidden' : 'visible';
}
}

The relative positioning is relative to where it appears in the HTML document. So if you have:

it is located immediately after the image

it is within the cell

you can use top, left, etc with relative

...absolute;top:0;left:0 --> places the div top left corner of the page;
...relative;top:0;left:0 --> places the div top left of its relative positioning in the page;

IE does not have a problem with tables and relative positioning; netscape 4 does. In order to get around its problems you have to create the entire table on the fly complete with ids. I'll try to have a script up at my site by the end of week, but if you are in a hurry try and find Martin Honnen at the alt.javascript newsgroup

The only references I've ever used are the O'Reilly books (definitive guides -- javascript & dHTML) and the Javascript Bible by Danny Goodman

aDog:

Vinny

}

Bob — Mon, 25 Sep 2000 02:04:41 +0000

Adog,

That worked great! Thanks again!

I figured to use relative you would use:

position:relative ,instead of
Position:absolute,

but, my question is, relative to what? If you just say position:relative, where does it place it? Relative to what? And "where?" relative to "what?". Not sure if I'm making my question clear or not, but I hope so.

Another question:

How could I use the same function (as the doIt1 function earlier in the thread) to show/hide multiple divs? I know I could set up multiple functions, but could I use the same one and somehow pass a parm for the document.layers['wkshops'].visibility statement in order to show/hide a specified div, rather than just the wkshops div?

Thanks again,

Bob

Arielladog — Sun, 24 Sep 2000 20:22:28 +0000

Hey Bob,

TO make a div relatively positioned, use:

style="position:relative" isntead of style="position:absolute;top:100;left:550"

Now, it is my fault with the code I gave you. I must have been thinking I had a function in there because there is an extra }

So, just change it to:

Adog

Bob — Sun, 24 Sep 2000 20:14:02 +0000

Adog,

Thanks for all the info. Unfortunately, I can not get it to work. No matter what I multiply w & h by, the div gets placed in the same spot on the screen. Any ideas? The code is at:
http://members.aol.com/jproscenium/ind2.html

If it's easier to use relative positioning, how do I do that? Is there somewhere I can get something like a command reference manual so I could look up the syntax for these commands? If i wanted to use relative and position the div in the same place on the screen, say relative to some image already there, how would I code that?

Again, thanks so much for all the help!

Bob

Arielladog — Sun, 24 Sep 2000 16:46:31 +0000

Oh, I guess I should have mentioned this from beginning. SOmetimes, I don't necessarily agree with Vinny.

Anyway, you can use relative positioned divs and hide them AS LONG AS they are not located within a table. So I guess you won't need my last post unless it's in a table. It's good info, though. It is usually better to use absolutely positioned divs, but easier to use relative positioned divs

Adog

Arielladog — Sun, 24 Sep 2000 16:41:04 +0000

Hey Bob,

First, I'd like to thank Vinny because that is where I learned most of this stuff from...we are oth mods at http://www.javascriptcity.com/forums/

Anyway, to answer your question, you can move the div around depending on screen resolution:

first, you'd have to have your div defined (in otherwords, I can't run this code before the div is actually on the page, and since we want to run it right after the div is done, we won't use a function, and we will put the code right after the div) Eg:

NOT

Get my drift??

Anyway, so, right after we define the div, we can have:

// that gets the innerWidth of the window, no the screen resolution

//now, we just multiply the screen resolution by some number to get the div lined up correctly

w=w*.1;
h=h*.2

//would be 10% from left and 20% from top

if (document.layers){
document.layers['wkshops'].left=w;
document.layers['wkshops'].top=h;
}else{
document.all['wkshops'].style.left=w;
document.all['wkshops'].style.top=h;
}}
</script>

Having something like that should work. One possible way is position it correctly on your screen. Then, grab your screens innerWidth. Then, take the coordinates where it looks good on your screen and divide that by the innerWidth and innerHeight. Then, remember that number. Now in the script, you'd start out with w and h just as I did, but instead of multiplying by .1 and .2, multiply by the numbers you go - it would be like a percent.

Now, I know you don't understand, so let me take an example:

let's say I have the positioned correctly on my screen at top:350 and left:450. Now, let's say I get my innerWidth and innerHeight (you can use this code to get it - it must be in the body of the document):

now, that will tell you that. Let's say my innerWidth is 700 and my innerHeight is 550. Now, I'd divide 350 by 550 (height) and I'd divide 450 by 700 (width). If this was true, for the code, I'd have:

// that gets the innerWidth of the window, no the screen resolution

//now, we just multiply the screen resolution by some number to get the div lined up correctly

w=w*(450/750);
h=h*(350/550);

Now, I think that will work...hopefully something like that would.

Adog