By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,567 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,567 IT Pros & Developers. It's quick & easy.

Close button on pop up move with size? And IE issue

P: n/a
I managed to cobble together some code and all I need to be on my way is to
have the close button I created to always be at the top right of my pop up.
The pop ups are large versions of thumbnail images and vary in size, so
that's why I need the button to follow the image size. Is this possible to
do??
AND, this does not render correctly in IE!
Can someone please help me out? :(

<style type="text/css">
..myLayersClass
{
visibility: none;
}

..translucent
{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
background-color: rgb(184, 177, 207);
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
z-index: 10001;
}

</style>
<script>
<!-- Begin

function toggle(id){
if ( document.getElementById){
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block' : 'none';
}
}

// End -->
</script>
</head>
<body>
<center>
New and improved! <a href="#"
onclick="toggle('blockUI');toggle('logo');toggle(' popup');">Click to
enlarge</a<!-- Thumbnail Link -->
<div id="blockUI" class="translucent" style="display: none;
background-color: gray;
width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;
z-index: 50000;"
onclick="return false" onmousedown="return false"
onmousemove="return false"
onmouseup="return false" ondblclick="return false">
</div>
<div id = "popup" class = "myLayersClass" align="center" style="display:
none; position: absolute; left: 440px; top: 50px; z-index: 60000;">
<table width="300" height="100">
<tr>
<td>
<center>
<br>
<a href="#"
onclick="toggle('blockUI');toggle('logo');toggle(' popup');"><img
src="images/close_icon.jpg" /></a>
</center>
</td>
</tr>
</table>
</div>
<div id = "logo" class = "myLayersClass" align="center" style="display:
none;
position: absolute; left: 200px; top: 100px; z-index: 55000;"<img
src="images/86large.jpg" border=0 alt="" /<!-- Large Image -->
</div>
</center>
</body>
</html>
Sep 15 '06 #1
Share this Question
Share on Google+
12 Replies


P: n/a
Yuaw said the following on 9/14/2006 10:28 PM:
I managed to cobble together some code and all I need to be on my way is to
have the close button I created to always be at the top right of my pop up.
The pop ups are large versions of thumbnail images and vary in size, so
that's why I need the button to follow the image size. Is this possible to
do??
AND, this does not render correctly in IE!
Can someone please help me out? :(
You mean you want something like this:

<URL: http://www.litotes.demon.co.uk/js_info/pop_ups.html>
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sep 15 '06 #2

P: n/a
>The pop ups are large versions of thumbnail images and vary in size, so
>that's why I need the button to follow the image size. Is this possible
to do??
AND, this does not render correctly in IE!
Can someone please help me out? :(

You mean you want something like this:

<URL: http://www.litotes.demon.co.uk/js_info/pop_ups.html>
--
Sorry, what am I suppose to see there?
The closest thing that I saw is this link from that page:
http://www.litotes.demon.co.uk/examp...age_popup.html

On that page, the images that open from mthe thumbs have their dimensions
specified in the code by looking at the source??
Also, they didn't have a close button, just "click image to close" type of
system which is nice but not what I'm looking for.

But an interseting read anyway...
Sep 15 '06 #3

P: n/a
"Yuaw" <wo*@wow.comwrote in message news:qRuOg.10553$wj2.6423@trndny06...
>>The pop ups are large versions of thumbnail images and vary in size, so
that's why I need the button to follow the image size. Is this possible
to do??
AND, this does not render correctly in IE!
Can someone please help me out? :(
I want to re-affirm that I need the popup to size itself dynamically so I
don't have to specify the image dimensions in the code (with the close
button always in the top corner too).
Thanks
Sep 15 '06 #4

P: n/a

Yuaw написав:
I managed to cobble together some code and all I need to be on my way is to
have the close button I created to always be at the top right of my pop up.
The pop ups are large versions of thumbnail images and vary in size, so
that's why I need the button to follow the image size. Is this possible to
do??
AND, this does not render correctly in IE!
Can someone please help me out? :(

<style type="text/css">
.myLayersClass
{
visibility: none;
}

.translucent
{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
background-color: rgb(184, 177, 207);
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
z-index: 10001;
}

</style>
<script>
<!-- Begin

function toggle(id){
if ( document.getElementById){
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block' : 'none';
}
}

// End -->
</script>
</head>
<body>
<center>
New and improved! <a href="#"
onclick="toggle('blockUI');toggle('logo');toggle(' popup');">Click to
enlarge</a<!-- Thumbnail Link -->
<div id="blockUI" class="translucent" style="display: none;
background-color: gray;
width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;
z-index: 50000;"
onclick="return false" onmousedown="return false"
onmousemove="return false"
onmouseup="return false" ondblclick="return false">
</div>
<div id = "popup" class = "myLayersClass" align="center" style="display:
none; position: absolute; left: 440px; top: 50px; z-index: 60000;">
<table width="300" height="100">
<tr>
<td>
<center>
<br>
<a href="#"
onclick="toggle('blockUI');toggle('logo');toggle(' popup');"><img
src="images/close_icon.jpg" /></a>
</center>
</td>
</tr>
</table>
</div>
<div id = "logo" class = "myLayersClass" align="center" style="display:
none;
position: absolute; left: 200px; top: 100px; z-index: 55000;"<img
src="images/86large.jpg" border=0 alt="" /<!-- Large Image -->
</div>
</center>
</body>
</html>
I simplify your sample a little to clearly delineate problem.

<html>
<head>
<script>
function toggle(id)
{
if ( document.getElementById)
{
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block'
: 'none';

if (id=='logo')
{
var b= document.getElementById('btnClose');
b.style.position = "absolute";
b.style.top=0;
b.style.left=parseInt(b.offsetParent.offsetWidth) -
parseInt(b.offsetWidth);

}
}
}

</script>
</head>
<body>
<center>
<a href="#" onclick="toggle('logo');">Click to enlarge</a>
<div id = "logo" style="display:none;position: absolute; left:
200px; top: 100px; z-index: 55000">
<a id="btnClose" href="#" onclick="toggle('logo');"><img
src="images/close_icon.jpg" /></a>
<img src="images/86large.jpg" border=0 alt="" />
</div>
</center>
</body>
</html

Maybe it that you are trying to achieve.

Sep 15 '06 #5

P: n/a

"marss" <ma***@ukr.netwrote in message
news:11**********************@d34g2000cwd.googlegr oups.com...

Yuaw ???????:
I managed to cobble together some code and all I need to be on my way is
to
have the close button I created to always be at the top right of my pop
up.
The pop ups are large versions of thumbnail images and vary in size, so
that's why I need the button to follow the image size. Is this possible to
do??
AND, this does not render correctly in IE!
Can someone please help me out? :(

<style type="text/css">
.myLayersClass
{
visibility: none;
}

.translucent
{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
background-color: rgb(184, 177, 207);
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
z-index: 10001;
}

</style>
<script>
<!-- Begin

function toggle(id){
if ( document.getElementById){
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block' : 'none';
}
}

// End -->
</script>
</head>
<body>
<center>
New and improved! <a href="#"
onclick="toggle('blockUI');toggle('logo');toggle(' popup');">Click to
enlarge</a<!-- Thumbnail Link -->
<div id="blockUI" class="translucent" style="display: none;
background-color: gray;
width: 100%; height: 100%; position: absolute; left: 0px; top:
0px;
z-index: 50000;"
onclick="return false" onmousedown="return false"
onmousemove="return false"
onmouseup="return false" ondblclick="return false">
</div>
<div id = "popup" class = "myLayersClass" align="center" style="display:
none; position: absolute; left: 440px; top: 50px; z-index: 60000;">
<table width="300" height="100">
<tr>
<td>
<center>
<br>
<a href="#"
onclick="toggle('blockUI');toggle('logo');toggle(' popup');"><img
src="images/close_icon.jpg" /></a>
</center>
</td>
</tr>
</table>
</div>
<div id = "logo" class = "myLayersClass" align="center"
style="display:
none;
position: absolute; left: 200px; top: 100px; z-index: 55000;"<img
src="images/86large.jpg" border=0 alt="" /<!-- Large Image -->
</div>
</center>
</body>
</html>
I simplify your sample a little to clearly delineate problem.

<html>
<head>
<script>
function toggle(id)
{
if ( document.getElementById)
{
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block'
: 'none';

if (id=='logo')
{
var b= document.getElementById('btnClose');
b.style.position = "absolute";
b.style.top=0;
b.style.left=parseInt(b.offsetParent.offsetWidth) -
parseInt(b.offsetWidth);

}
}
}

</script>
</head>
<body>
<center>
<a href="#" onclick="toggle('logo');">Click to enlarge</a>
<div id = "logo" style="display:none;position: absolute; left:
200px; top: 100px; z-index: 55000">
<a id="btnClose" href="#" onclick="toggle('logo');"><img
src="images/close_icon.jpg" /></a>
<img src="images/86large.jpg" border=0 alt="" />
</div>
</center>
</body>
</html>
>Maybe it that you are trying to achieve.


Perfect! It works great, many thanks :)
I've been trying to get my layer code to work with your auto sizing code but
am getting some really awful results. Especially between IE and FF... Can
you see how I can get the background change effect from my script to work
with your script?

Thanks again for your patience!
Sep 15 '06 #6

P: n/a

"Yuaw" <wo*@wow.comwrote in message news:WcoOg.682$cf2.448@trndny07...
>I managed to cobble together some code and all I need to be on my way is to
have the close button I created to always be at the top right of my pop up.
The pop ups are large versions of thumbnail images and vary in size, so
that's why I need the button to follow the image size. Is this possible to
do??
AND, this does not render correctly in IE!
Can someone please help me out? :(
I'll have to say, I'm very close. :D (new code below)
Things that do not work:

In IE:

- Translucent background does not cover the page on click. It only appears
as a bar across the top.
- The bar does not go all the way across the screen. it stops about 10px
short of the right side.
- Close button "X" on the popup is on the right side

In Firefox:

- Translucent background does not cover the entire page on click. It stops
just short of the bottom of the page
- Close button "X" on the popup is on the left side
<html>
<head>
<title>Layer on Click</title>
<style type="text/css">
..translucent
{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
background-color: rgb(184, 177, 207);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
z-index: 10001;

}

</style>
<script>
<!-- Begin
function toggle(id)
{
if ( document.getElementById)
{
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block' : 'none';

if (id=='logo')
{
var b= document.getElementById('btnClose');
b.style.position = "absolute";
b.style.top=0;
b.style.left=parseInt(b.offsetParent.offsetWidth) -
parseInt(b.offsetWidth);

}
}
}

// End -->
</script>
</head>
<body>
<center>
<a href="#" onclick="toggle('blockUI');toggle('logo');">Click to
enlarge</a>
<div id = "logo" style="display:none; position: absolute; left: 200px;
top: 100px; z-index: 55000">
<a id="btnClose" href="#" onclick="toggle('blockUI'); toggle('logo');
"><img src="/images/close_icon.jpg" /></a>
<img src="/images/45776_1.jpg" border=0 alt="" />
</div>

<div id="blockUI" class="translucent" style="display: none;
background-color: gray;
width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;
z-index: 50000;"
onclick="return false" onmousedown="return false"
onmousemove="return false"
onmouseup="return false" ondblclick="return false">
</div>
</center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nunc odio,
auctor a, euismod ut, adipiscing a, diam. Curabitur est sem, lobortis vitae,
faucibus sed, euismod ac, dui. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Cras gravida congue
quam. Nullam tempor adipiscing massa. Vivamus in velit ut nisi dignissim
malesuada. Vestibulum nonummy porttitor nisl. Suspendisse dapibus, velit
quis tristique eleifend, magna nibh mollis libero, at aliquam leo orci et
tellus. Nam quis augue ut libero elementum vestibulum. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Proin feugiat ullamcorper purus. Etiam non elit non nisi suscipit molestie.
</p><p>
Aliquam purus arcu, gravida in, pulvinar ac, viverra gravida, dolor. Morbi
vel justo. Nullam non neque fermentum leo tincidunt facilisis. Integer
purus. Proin faucibus purus at velit. Praesent consequat. Proin a pede eu
enim aliquet mollis. Sed varius nisi. Aliquam feugiat. Aliquam at lectus a
neque lobortis sagittis. Sed dapibus nisl sit amet nunc. Suspendisse
lobortis vestibulum mi. Sed sed tellus at pede laoreet faucibus. Cras
ullamcorper, magna et facilisis accumsan, ligula lectus aliquet nisi, id
venenatis tellus ante in arcu. Vestibulum a enim nec odio tincidunt
elementum. Aliquam tristique. In mi lacus, scelerisque quis, volutpat ac,
viverra vitae, tellus. Vivamus vel nulla a turpis vestibulum volutpat. Etiam
ornare arcu sed nisl.
</p><p>
Sed est risus, bibendum ut, vestibulum a, blandit iaculis, metus. Proin
condimentum accumsan arcu. Donec mauris. Nam nibh. Nunc vestibulum congue
nunc. In at lorem sed nisl scelerisque gravida. Nullam sit amet arcu id
velit adipiscing lacinia. Vestibulum vitae elit sed urna tempor aliquam.
Curabitur non nibh. Vestibulum elementum tristique eros. In tortor arcu,
semper vel, convallis quis, pretium a, arcu. Suspendisse potenti. Phasellus
eros turpis, ultricies vitae, placerat in, posuere vitae, orci. Nullam
aliquet.
</p>
</body>
</html>
Sep 16 '06 #7

P: n/a

Yuaw написав:
>
In Firefox:

- Close button "X" on the popup is on the left side
I can't reproduce this case on Firefox 1.5

{
if ( document.getElementById)
{
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block' :'none';

if (id=='logo')
{
var b= document.getElementById('btnClose');
b.style.position = "absolute";
b.style.top=0;
b.style.left=parseInt(b.offsetParent.offsetWidth) -
parseInt(b.offsetWidth);

add next code here:

var bUI= document.getElementById('blockUI');
var lo= document.getElementById('logo');
bUI.style.width = parseInt(lo.offsetWidth) + parseInt(lo.style.left)
bUI.style.height = parseInt(lo.offsetHeight) + parseInt(lo.style.top)


}
}
}
Sep 18 '06 #8

P: n/a

Yuaw ???????:
>
>In Firefox:
>- Close button "X" on the popup is on the left side
>I can't reproduce this case on Firefox 1.5
I discovered if I remove the
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
from my editor, the problem went away here too and also allowed the color to
go all the way down the screen in IE. :)

{
if ( document.getElementById)
{
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block' :
'none';

if (id=='logo')
{
var b= document.getElementById('btnClose');
b.style.position = "absolute";
b.style.top=0;
b.style.left=parseInt(b.offsetParent.offsetWidth) -
parseInt(b.offsetWidth);
>add next code here:
var bUI= document.getElementById('blockUI');
var lo= document.getElementById('logo');
bUI.style.width = parseInt(lo.offsetWidth) + parseInt(lo.style.left)
>bUI.style.height = parseInt(lo.offsetHeight) + parseInt(lo.style.top)
Now the background on click lines up with the right side of the popup and
stops there leaving the right side of my screen uneffected in color. In
essense, only half of my screen is colored when I click the link. But it did
actually bring the background color all the way down the bottom of my screen
in FF when I scroll, however in IE it still stayed away from the right side
of the screen and stopped at the bottom of my popup.

Thanks

>
}
}
}

Sep 18 '06 #9

P: n/a
Yauw написав:
>
var bUI= document.getElementById('blockUI');
var lo= document.getElementById('logo');
bUI.style.width = parseInt(lo.offsetWidth) + parseInt(lo.style.left)
bUI.style.height = parseInt(lo.offsetHeight) + parseInt(lo.style.top)
You can check whether new width exceeds document width and process that
case:

var newWidth = parseInt(lo.offsetWidth) + parseInt(lo.style.left);
if (newWidth parseInt(document.body.offsetWidth))
bUI.style.width = "100%";
else
bUI.style.width = newWidth;
Now the background on click lines up with the right side of the popup and
stops there leaving the right side of my screen uneffected in color. In
essense, only half of my screen is colored when I click the link. But it did
actually bring the background color all the way down the bottom of my screen
in FF when I scroll, however in IE it still stayed away from the right side
of the screen and stopped at the bottom of my popup.
Sorry, but there are many sites where you can order for a software
development if you want someone else to do your own job.

Sep 18 '06 #10

P: n/a
marss wrote:
Yauw ???????:
>
You can check whether new width exceeds document width and process that
case:

var newWidth = parseInt(lo.offsetWidth) + parseInt(lo.style.left);
if (newWidth parseInt(document.body.offsetWidth))
bUI.style.width = "100%";
else
bUI.style.width = newWidth;
Great, thanks for the tip, I'll try it.

>Now the background on click lines up with the right side of the popup and
stops there leaving the right side of my screen uneffected in color. In
essense, only half of my screen is colored when I click the link. But it
did
actually bring the background color all the way down the bottom of my
screen
in FF when I scroll, however in IE it still stayed away from the right
side
of the screen and stopped at the bottom of my popup.

Sorry, but there are many sites where you can order for a software
development if you want someone else to do your own job.
Actually I just might do that. But since I've gotten this far putting
together bits, I'd really hate to. I don't program, don't know hardly a
thing about javascript (not sure if I want to yet either), but I am pretty
good at figuring things out (two quick examples; putting what I had
together with what you provided in your first post by much trial and error!
And the xhtml issue I discovered after :) ).
I think if this code worked, it would be somewhat desirable to some because
it's kind of a cool effect. If I do hire someone to complete it, I will post
the results here as my contribution. Never let it be said I'm a cheap
bastard! :)

If anyone is looking for a few bucks, let me know if you can take this on.
If I get completely frustrated and can't complete it myself I might hire
you! - allpurposebox at gmail dot com

Thanks again for your help marss..

Sep 18 '06 #11

P: n/a

Yauw написав:
Actually I just might do that. But since I've gotten this far putting
together bits, I'd really hate to. I don't program, don't know hardly a
thing about javascript (not sure if I want to yet either)
You shouldn't think that. IMHO, knowledge of javascript utterly
important for web developer.
>
If anyone is looking for a few bucks, let me know if you can take this on.
If I get completely frustrated and can't complete it myself I might hire
you! - allpurposebox at gmail dot com
Thanks for offer. Nearest month I need a few additional hours in a day
more than a few bucks. :) Maybe later, if you don't cope with the task
up to that time.

Sep 20 '06 #12

P: n/a
"marss" <ma***@ukr.netwrote in message
news:11**********************@m7g2000cwm.googlegro ups.com...

Yauw ???????:
>Actually I just might do that. But since I've gotten this far putting
together bits, I'd really hate to. I don't program, don't know hardly a
thing about javascript (not sure if I want to yet either)
>You shouldn't think that. IMHO, knowledge of javascript utterly
important for web developer.
You're right, and actually I probably will study it, out of curiousity if
any thing else.
>
>If anyone is looking for a few bucks, let me know if you can take this
on.
If I get completely frustrated and can't complete it myself I might hire
you! - allpurposebox at gmail dot com
>Thanks for offer. Nearest month I need a few additional hours in a day
more than a few bucks. :) Maybe later, if you don't cope with the task
up to that time.
You'll never believe it...
I actually (by accident) found what I was looking for! 8)
http://www.ebuyer.com/customer/produ...uct_uid=113282
(heh, not the PC case, which actually is sweet though) but the effect when a
thumbnail is clicked.

I went to the site that the script originated from and it's quite a thriving
community with some great similar links associated with it.-
http://www.huddletogether.com/projects/lightbox2/
I'll probably check in there often.
Take it easy marss and I'm glad I added some more hours to your day since I
found my solution and I don't need to bother you any more! :)
Sep 21 '06 #13

This discussion thread is closed

Replies have been disabled for this discussion.