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

Y

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

Randy Webb

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? :(
Click to expand...

You mean you want something like this:

<URL: http://www.litotes.demon.co.uk/js_info/pop_ups.html>
 
Y

Yuaw

The pop ups are large versions of thumbnail images and vary in size, so
You mean you want something like this:

<URL: http://www.litotes.demon.co.uk/js_info/pop_ups.html>
--
Click to expand...

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/example_scripts/image_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...
 
Y

Yuaw

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
 
M

marss

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>
Click to expand...

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.
 
Y

Yuaw

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>
Click to expand...

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>
Maybe it that you are trying to achieve.
Click to expand...



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!
 
Y

Yuaw

Yuaw said:
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? :(
Click to expand...

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

marss

Yuaw напиÑав:
In Firefox:

- Close button "X" on the popup is on the left side
Click to expand...

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);
Click to expand...


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)
 
Y

Yauw

Yuaw ???????:
I can't reproduce this case on Firefox 1.5
Click to expand...

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:
Click to expand...

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)
Click to expand...

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
 
M

marss

Yauw напиÑав:
var bUI= document.getElementById('blockUI');
var lo= document.getElementById('logo');
bUI.style.width = parseInt(lo.offsetWidth) + parseInt(lo.style.left)
Click to expand...

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.
Click to expand...

Sorry, but there are many sites where you can order for a software
development if you want someone else to do your own job.
 
Y

Yauw

marss said:
Yauw ???????:
Click to expand...
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;
Click to expand...

Great, thanks for the tip, I'll try it.

Sorry, but there are many sites where you can order for a software
development if you want someone else to do your own job.
Click to expand...

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..
 
M

marss

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)
Click to expand...

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
Click to expand...

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.
 
Y

Yauw

Yauw ???????:
You shouldn't think that. IMHO, knowledge of javascript utterly
important for web developer.
Click to expand...

You're right, and actually I probably will study it, out of curiousity if
any thing else.
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.
Click to expand...

You'll never believe it...
I actually (by accident) found what I was looking for! 8)
http://www.ebuyer.com/customer/prod...hvd19wcm9kdWN0X2dhbGxlcnk=&product_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! :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

<Button ...> display is fine, except for two things 1
Fading effect between play and play-over and pause and pause-over 0
How to position the *tooltip* comment on these buttons? 9
Interfering CSS 1
Help with my responsive home page 2
How do I fix this issue in sqaurespace code block? 1
When draggable=false & draggable=true dont work ? 1
Not sure why drop-down is not working. 2

Members online

No members online now.
Total: 41 (members: 1, guests: 40)
Robots: 419

Forum statistics

Threads
473,969
Messages
2,570,161
Members
46,710
Latest member
bernietqt

Latest Threads

Top