|
Subject:
|
Removing title bar - is this possible?
|
|
Posted By:
|
larry
|
Post Date:
|
1/24/2004 12:02:07 AM
|
I would like to remove the top menu bar from a child window that I use and was wondering if this is possible? I realize I would need to provide a "close" button as the window would no longer have the resize or close window elements available.
The following is the code I use to open the child window:
<a class="yellowcyan" a href="#" onClick="window.open('review.htm','Max','toolbar=no,width=750,height=475,left=115,top=145,screenX=500,screenY=200,status=no,scrollbars=yes,resize=yes');return false">guestbook</a> 
|
|
Reply By:
|
richard.york
|
Reply Date:
|
1/24/2004 2:37:34 AM
|
There is an attribute that does it but Internet Explorer doesn't support it, and in Gecko browsers its use requires a signed script.
The attribute is:
titlebar (yes|no)
More information on signed scripts:
http://www.mozilla.org/projects/security/components/signed-scripts.html
Disabling the title bar can create possible security/privacy concerns.. if you couldn't close the popup.. then all the ad popups would use it, right? Even though you may have a completely harmless use in mind and be prepared to include code that closes the window. The fact remains that it could be misused. And I would suppose it isn't available in Internet Explorer because the window object is completely integrated into what the operating system is... from a Microsoft standpoint that means that all windows/dialogs have titlebars and to disable it you would have to take a more complex approach, like Java or C, or whatever and even with that approach you would have to get the user's permission to install the necessary program on their machine. You can sort of create the illusion of a popup window using CSS layers and Javascript, but there are a few fallbacks, the layer cannot leave the window, the layer may not render certain elements as you would expect, namely input elements.. I've never done it myself but if you make the layer movable with an onmousedown event handler, there may be issues with the browser being able to redraw the input elements. Don't know if there is any truth to that. But its an option worth considering.
: )
Rich
:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::
|
|
Reply By:
|
Snib
|
Reply Date:
|
1/24/2004 11:25:43 AM
|
larry,
You can use the "fullscreen" property, but that isn't much of a popup.
However, let me elaborate on what Rich was saying: it is possible to make an imitation popup with a movable DIV. I have done it and would show you but I'm kinda short on time right now. You may want to have 2 separate DIVs, one for titlebar and one for content. Assign borders to make is look like it's elevated. Then use the onmousedown and onmouseup on the titlebar to call a function that says something like "document.onmousemove = movediv;". movediv() would set top and left of the titlebar DIV to the mouse coordinates, and the content to the titlebar DIV's bottom property. Be sure to add a "hide" button...
HTH
Snib
|
|
Reply By:
|
larry
|
Reply Date:
|
1/24/2004 9:01:57 PM
|
Interesting approach - would be interesting in seeing the code at your convenience.
Thanks for the reply
Larry
------------------------------
quote:
Originally posted by Snib
larry,
You can use the "fullscreen" property, but that isn't much of a popup.
However, let me elaborate on what Rich was saying: it is possible to make an imitation popup with a movable DIV. I have done it and would show you but I'm kinda short on time right now. You may want to have 2 separate DIVs, one for titlebar and one for content. Assign borders to make is look like it's elevated. Then use the onmousedown and onmouseup on the titlebar to call a function that says something like "document.onmousemove = movediv;". movediv() would set top and left of the titlebar DIV to the mouse coordinates, and the content to the titlebar DIV's bottom property. Be sure to add a "hide" button...
HTH
Snib
|
|
Reply By:
|
Snib
|
Reply Date:
|
1/26/2004 2:07:17 PM
|
For the fullscreen or the DIV? I assume DIV, but just in case...
Fullscreen:
window.open("whatever.htm","thename","fullscreen");
DIV:
Step 1 - make two DIVs, one formatted to be your titlebar(short and wide, perhaps) and one formatted to have content(must contain a DIV with an iframe). Perhaps use CSS to style after assigning IDs to them (for my example: "titlebar" and "contentbox" for the DIVs, "contentpage" for the iframe). Make sure they are hidden before they are called upon.
Step 2 - assign onmousedown and onmouseup to "titlebar": onmousedown="init_drag()" onmouseup="done_drag()"
So far the DIVs should look like this:
<div id="titlebar" onmousedown="init_drag()" onmouseup="done_drag()">THE TITLE</div>
<div id="contentbox"><iframe src="" id="contentpage"></iframe></div>
Step 3 - write functions:
function init_drag()
{
document.onmousemove = setpos;
}
function done_drag()
{
document.onmousemove = "";
document.getElementById("contentbox").style.visibility = "hidden";
document.getElementById("titlebar").style.visibility = "hidden";
}
function setpos()
{
var titbar = document.getElementById("titlebar");
var content = document.getElementById("contentbox");
titbar.style.top = event.y - 5;
titbar.style.left = event.x - 5;
content.style.top = titbar.style.bottom;
content.style.left = event.x - 5;
}
function show_pop(url)
{
document.getElementById("titlebar").style.visibility = "visible";
document.getElementById("contentbox").style.visibility = "visible";
document.getElementById("contentpage").src = url;
}
Step 3 - the link: <a href="#" onclick="show_pop('your_page.htm')">LINK</a>
Remember to add the hide button (which would link to a function that hides the DIVs)!!! Also remember the restrictions of it (cannot leave the page, etc.). Yet another thing: when the user drags the 'window' off the page, over a Flash movie, or just moves it too fast, it can mess up, maybe stick to the mouse so that you can't close it.
Hope this helps you,
Snib
|
