New Borderless Window Question

Hi Doren,

Please do not post a new thread every time you have a new question for the same application/problem. It makes following the thread extremely difficult.
From here on in, please post all replies to this thread (I closed the others).
For those readers who are interested: the old threads are at:
http://216.10.4.112/forums/showthread.php?threadid=12377
http://216.10.4.112/forums/showthread.php?threadid=12378

Insofar as your present question: I really don't think anyone can answer it with any certainty since you are asking for an opinion, and you haven't posted neither code nor url. All I can say is: Yes, it is do-able; how difficult depends on the specifics; whether you are up to it, depends on you.

BTW: this is my first post as moderator
Vinny

Vinny,

Congratulations (I think) on your new job as moderator! You've given me much help in the past via this forum. It's appreicated. I sent an email directly to Jim Shilt about his code for making layers visible/invisible, but then thought I should post it here since others could benefit. I also got it to work fine for me to give me a pop-up window, but i'd like to know where I can get more documentation on the statement. Is there a good on-line resource? Also, I get error messages when using IE. Does this work only for NS, and, if so, is there an equivalent apporoach for IE? Thanks.

Bob

Hi Bob,

Thanks for the congrats (whether it's a good idea will have to be seen. , and glad to have been of help.

Insofar as tags:
IE handles them better than NN; so if you are getting errors, I'd like to see where.

Online sources:
The first and foremost is the horse's mouth for all things www: http://www.irt.org -- the people who set the standards.
The second source: the M$ and Netscape sites -- the people who ignore the standards
The third source: study code -- from the people who take the standards and make them fit the browsers

If you have any specific questions on the tag/element, ask in a new thread and I'll do my best to answer.

Vinny

Vinny,

Here's how I'm using the tag, and the errors I'm getting. I got the idea from the code Jim Shilt posted from his caledar page, and thought I could make use of the concept. To see it work (and not work) you can go to

http://members.aol.com/jproscenium/ind.html

The code in question consists of:
<script>
function showdiv(){
document.wkshops.visibility='visible'
}
function hidediv(){
document.wkshops.visibility='hidden'
}
</script>
.
.
.

Workshops are 70% filled!
Sign up now!
.
.
.
Proscenium Theater Workshops

This works great using NS, but using IE I get the message:
"document.wkshops is not an object"

Any light you could shed would be greatly appreciated.
Thanks for all your help, and good luck as moderator! I'm sure it's a lot of work, but a lot of us do appreciate it.

Bob

Here is code to hide/show a div directly from Vinny's website:

function doIt1(hasHS){
if (document.layers){
document.layers['wkshops'].visibility = (hasHS) ? 'hide' : 'show';
}else{
document.all['wkshops'].style.visibility =
(hasHS) ? 'hidden' : 'visible';
}}

to hide the layer call doIt1(1) - to show the layer, call doIt1(0)

Adog

Adog,

That did it! Thanks a lot! Here's a question for either you or Vinny about positioning the hidden div:

It seems, from reading Vinny's page, that you must use position:absolute. This is fine, but it seems that if you give an absolute position from both the top and left, that when you show the hidden div its actual position on the page would be different (relative to other objects currently on the screen) depending on the size of the browser window being used at the time, or am I wrong?

If i'm right, do you have any ideas of how to avoid that problem, to get the hidden div to pop up in the same relative position on the screen, regardless of the users window size? Thanks again, guys!

Bob

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:

<script>
</script>

NOT

<script>
</script>

Get my drift??

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

<script>
w=(window.innerWidth)?window.innerWidth:document.body.clientWidth;
h=(window.innerHeight)?window.innerHeight:document.body.clientHeight;

// 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):

<script>
w=(window.innerWidth)?window.innerWidth:document.body.clientWidth;
h=(window.innerHeight)?window.innerHeight:document.body.clientHeight;
alert('Your innerWidth is '+w);
alert('Your innerHeight is '+h);
</script>

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:

<script>
w=(window.innerWidth)?window.innerWidth:document.body.clientWidth;
h=(window.innerHeight)?window.innerHeight:document.body.clientHeight;

// 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

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

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

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:

<script>
w=(window.innerWidth)?window.innerWidth:document.body.clientWidth;
h=(window.innerHeight)?window.innerHeight:document.body.clientHeight;
w=w*.5;
h=h*.8;
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>

Adog

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

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

}

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

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

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

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.