make popup window not resizable.cross browser?

Forum Moderators: open

Message Too Old, No Replies

make popup window not resizable.cross browser?

popup maximize minimize

Flurpal

2:38 am on Jun 23, 2009 (gmt 0)

Hello,
I have a popup window with a specific background image size with a specific popup window size. I want to disable the resizing (maximizing/minimizing) of the window no matter what browser you are using. I believe that the code resizable=no takes away resizing in IE, however how can I do the same thing with other browsers such as Firefox and Safari? Thank you for responding!

birdbrain

10:43 am on Jun 23, 2009 (gmt 0)

Hi there Flurpal,

browsers like Firefox and Safari, unlike IE, believe that the user should have full control of the window.

Think of it like a TV screen, would you want its dimensions dictated to you? ;)

birdbrain

Flurpal

3:57 am on Jun 25, 2009 (gmt 0)

The problem is that I have a background with a set size, but if the popup is maximized (like my friends always do), then it looks like crap and i would not want anyone to see that. But if it's impossible...then okay. Thanks.

daveVk

4:37 am on Jun 25, 2009 (gmt 0)

Set background to repeat maybe ?

birdbrain

8:24 am on Jun 25, 2009 (gmt 0)

Hi there Flurpal,

I would suggest that instead of using a pop-up that you use a div element for this project.
By swapping it's display value from "none" to "block" will give you the "pop-up" effect without all the unwanted bits. ;)

birdbrain

birdbrain

9:27 am on Jun 25, 2009 (gmt 0)

Hi there Flurpal,

If your interested, here is a basic example using the small webmasterworld logo...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>popup div</title>
<style type="text/css">
* {
 margin:0;
 padding:0;
}
body {
 background-color:#eee;
 color:#000;
 }
#open {
 width:80px;
 line-height:24px;
 border:3px double #000;
 background-color:#fff;
 color:#000;
 text-align:center;
 margin:20px;
 cursor:pointer;
}
#popup {
 position:absolute;
 left:200px;  /* edit this value to horizontally position popup*/
 top:100px;  /* edit this value to vertically position popup*/
 width:109px;
 height:73px;
 border:1px solid #000;
}
#popup div {
 height:16px;
 line-height:16px;
 padding-right:10px;
 border-bottom:1px solid #000;
 background-color:#fde477;
 font-size:12px;
 font-weight:bold;
 color:#000;
 text-align:right;
 }
#popup span {
 cursor:pointer;
 }
#popup #content {
  height:56px;
  background-image:url(http://www.searchengineworld.com/gfx/logo.png);
}
.gone {
 display:none;
 }
.here {
 display:block;
}
</style>
<script type="text/javascript">
function displayStuff() {
 obj=document.getElementById('popup');
 document.getElementById('open').onclick=function() {
 obj.className='here';
 }
 document.getElementById('close').onclick=function() {
 obj.className='gone';
 return false;
 }
 }
if(window.addEventListener){
 window.addEventListener('load',displayStuff,false);
 }
else { 
if(window.attachEvent){
 window.attachEvent('onload',displayStuff);
 }
 }
</script>
</head>
<body>
<div id="open">popup</div>
<div id="popup" class="gone">
<div><span id="close">X</span></div>
<p id="content"></p>
</div>
</body>
</html>

birdbrain

Flurpal

8:48 pm on Jul 12, 2009 (gmt 0)

Thanks! I didn't know about that, but that's great! I think that I'll switch over to that....and it's an instant load.

I want to make it look a little more fancy. How do I make it fade in/out? Is it easy?

birdbrain

9:30 pm on Jul 12, 2009 (gmt 0)

Hi there Flurpal,

here you go...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>popup div</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:#eee;
color:#000;
}
#open {
width:80px;
line-height:24px;
border:3px double #000;
background-color:#fff;
color:#000;
text-align:center;
margin:20px;
cursor:pointer;
}
#popup {
position:absolute;
left:200px; /* edit this value to horizontally position popup*/
top:100px; /* edit this value to vertically position popup*/
width:109px;
height:73px;
border:1px solid #000;
background-color:#000;
}
#popup div {
height:16px;
line-height:16px;
padding-right:10px;
border-bottom:1px solid #000;
background-color:#fde477;
font-size:12px;
font-weight:bold;
color:#000;
text-align:right;
}
#popup span {
cursor:pointer;
}
#popup #content {
height:56px;
background-image:url(http://www.searchengineworld.com/gfx/logo.png);
opacity:0;
}
.gone {
display:none;
}
.here {
display:block;
}
</style>
<script type="text/javascript">
function displayStuff() {
c=0;
test=true;
speed=50;
obj=document.getElementById('popup');
obj1=document.getElementById('content');
document.getElementById('open').onclick=function() {
fadein();
}
document.getElementById('close').onclick=function() {
fadein();
}
}
function fadein() {
if(test==true) {
obj.className='here';
c++;
}
else {
c--;
}
if(c==100) {
clearTimeout(f);
test=false;
return;
 }
if(c==0) {
clearTimeout(f);
obj.className='gone';
test=true;
return;
}
if(obj1.filters) {
obj1.style.filter='alpha(opacity='+c+')';
}
else {
obj1.style.opacity=c/100;
}
f=setTimeout(function(){fadein();},speed);
}
if(window.addEventListener){
window.addEventListener('load',displayStuff,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',displayStuff);
}
}
</script>
</head>
<body>
<div id="open">popup</div>
<div id="popup" class="gone">
<div><span id="close">X</span></div>
<p id="content"></p>
</div>
</body>
</html>

birdbrain