Custom Background Color for 'Open in New Window' [Archive]

View Full Version : Custom Background Color for 'Open in New Window'

SheriLynn

01-10-2015, 11:24 PM

I'm using this script in the head of my doc:

<script language="javascript">
/*
Auto center window script- Eric King (http://redrival.com/eak/index.shtml)
Permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings=
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable',
win = window.open(mypage,myname,settings)
}
</script>

and this in the body:

<a href="brvig2015.jpg" onclick="NewWindow(this.href,'name','700','590','yes');return false"><img src="brvig2015t.jpg" width="122" height="98" border="0" alt="variation one" /></a>

Can I insert a code to change the background color in the new window?

Any help at all is appreciated!

molendijk

01-11-2015, 10:29 AM

You can't change the css of new windows or tabs 'afterwards'.

Beverleyh

01-11-2015, 11:28 AM

It looks like you are using this script to open an image in a new window. Aside from the fact that the script is really old and doesn't work on iPad/iPhone, it is also an outdated practice and one that users tend to find annoying, so I recommend going the more modern route of opening the image in a modal overlay/popup. Here is a simple example where a modal overlay/popup is triggered with the addition and removal of a div class via JavaScript (everything else is done with CSS);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modal Popup</title>

<style>
.show { position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; text-align:center; color:#fff; background:rgb(0,0,0); background:rgba(0,0,0,.75) }
.show img { max-width:100%; max-height:100%; position:absolute; margin:0; top:45%; left:50%;
-webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%)
}
.hide { display:none }
</style>

</head>
<body>

<a onclick="showModal('img1');">View Image</a>
<noscript><a href="path/to/image.jpg"/>View Image</a></noscript> 
<div id="img1" class="hide"><img src="path/to/image.jpg"/>[<a onclick="hideModal('img1');">x</a>]</div>

<script>
function showModal(id) { document.getElementById(id).className = 'show'; }
function hideModal(id) { document.getElementById(id).className = 'hide'; }
</script>

</body>
</html>Please note that this works 'as is' in modern browsers and IE9+

It 'works' in IE7/8 too but will need further modification to make the modal background semi-transparent (it is currently falling back to a solid colour), and to vertically centre the image.

The first issue can be tackled with a semi-transparent png set as a tiled (repeated) background image on the .show div.

The second issue is a little trickier and can only really be tackled if all images are the same size - you can use negative left and top margin offsets to pull the image back to centre. Alternatively, and probably an easier way if your images are of different sizes, is to position the image to the top of the .show div.

Both of these IE7/8 CSS fixes should be placed inside conditional comments for those browsers only;



Possible issue: Mobile WebKit browsers (Chrome, Safari) go a little screwy with position:fixed elements when CSS transforms are applied to parent containers, so if you happen to put the modal .show divs inside anything that has any CSS3 animations/transforms applied to it, the modal overlays/popups will be fixed to the edges of the parent container instead of the whole browser window.

Possible issue: The images inside the modal overlay/popup will be downloaded on page load so make sure they're reasonably sized and optimised so that they don't have a massive negative impact on performance. Try not to have too many on a page either. If you're making a gallery, try the linked scripts below.

Something that may be of interest to you - my modal gallery freebie script http://fofwebdesign.co.uk/freebies_for_websites/css/gallery-modal-rwd.htm
That is for the CSS-only version but there are more versions as the script has developed http://fofwebdesign.co.uk/freebies_for_websites/css/gallery-modal-rwd.htm#prev (eg, on-demand image loading, keyboard control navigation and pagination)

SheriLynn

01-11-2015, 06:03 PM

You can't change the css of new windows or tabs 'afterwards'.

Thank you for your reply. I was pretty sure that was impossible....

SheriLynn

01-11-2015, 06:25 PM

Thanks, Beverleyh, I appreciate all the time and effort you put into your reply. I have been using that javascript code for 13 years and because it worked on my desktop, it was okay with me. I never considered that it didn't work for other devices.

Although I have been hand-coding my pages since Day One (that's my Zen) I still have soooo much to learn. You should have been here on the day that I learned about CSS external stylesheets and re-did my entire website!

So, since I'm using external CSS, let me see if I understand this. I would put this:

.show { position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; text-align:center; color:#fff; background:rgb(0,0,0); background:rgba(0,0,0,.75) }
.show img { max-width:100%; max-height:100%; position:absolute; margin:0; top:45%; left:50%;
-webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%)
}
.hide { display:none }

into my stylesheet

and put this into my document head:



and this into the body of my doc:

<a onclick="showModal('img1');">View Image</a>
<noscript><a href="brvig2015.jpg"/>View Image</a></noscript> 
<div id="img1" class="hide"><img src="brvig2015t.jpg"/>[<a onclick="hideModal('img1');">x</a>]</div>

<script>
function showModal(id) { document.getElementById(id).className = 'show'; }
function hideModal(id) { document.getElementById(id).className = 'hide'; }
</script>

SheriLynn

01-11-2015, 06:59 PM

Beverleyh, I got most of it to work!

Here's a link to the page:

http://www.katiebuglove.com/Katies/FreeTubes/tubes.html

The picture is toward the bottom of the page.

My transparent tile isn't working and I'd like to get the links to match the style on my page.

Other than that, kudos to you! You are going to be my new guru, hope you can handle it...!

Beverleyh

01-11-2015, 07:40 PM

Bear with me as I'm on iPhone at the mo. From your CSS it looks like this is your tile for the background http://www.katiebuglove.com/Katies/FreeTubes/ttile.png
I can't see anything in iPhone which I'm guessing means that the tile is a fully transparent png. That's the problem - it needs to be a *semi-transparent* image, which usually would be a png-24 format with about 70% opacity. I have a sample that I use elsewhere - it may be too 'solid' but feel free to use it if it helps http://jetta.jemcon.org/template/images/j-tile.png

As for your links, I think the reason that they aren't picking up your default style is that the ones I gave in the example are placeholder links, which is an HTML5 thing where the href attribute is omitted http://webdesign.about.com/od/html5tutorials/qt/html5-placeholder-links.htm
Try putting in a dummy href to see if that helps;
<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>

Hope that helps

SheriLynn

01-11-2015, 07:59 PM

Uh oh...something broke in my stylesheet, I got it fixed by reverting to the old without your new stuff added. But now it's time for me to burn dinner so I'll try it again tomorrow with the corrections you supplied.

Thanks again for your help!

SheriLynn

01-12-2015, 02:11 AM

I got it working again. I tried your transparent tile and it looked the same. I made a new one (in pink) it looked the same....

Also, when I changed the code to:

"<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>"

it didn't work...

Thanks for all your patience and help. When I get this working, do I have my work cut out for me. I have two other websites with literally thousands of pictures using the old javascript....

SheriLynn

01-12-2015, 05:33 PM

BeverleyH,

Okay, I got it fixed! The 'view image' link is now matching my link style. I only need to tweak a couple of things:

1. I'd like to center the "View Image" text under the thumbnail. Where (and how) do I do this??

2. I think the window is too big. When I view the larger image on my Kindle, the 'close window' (I changed it from the 'x') is out of view. I have to use the back key, which takes me out of my page.

3. I'd also like to tweak the style on the 'close window' link so that it matches mine.

4. Do I have to use that black transparent window? I made a beautiful transparent pink tile (xtile.png) but it is not showing up.

Hope I'm not being too picky....

Thanks for your help, I really appreciate it!

Beverleyh

01-12-2015, 06:47 PM

1. To centre the "View Image" link, you can give it a class, then target in your stylesheet and apply display:block; text-align:center;

2. The font-size is a side-effect of your website not being responsive. Amongst other things, your site isn't using a <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" /> metatag, and you are using explicit pixel units when sizing your fonts, which don't translate so well when adapting to different devices/viewports (or rather, they *don't* adapt), so the "Close Window" text will remain the same as the rest of your text unless you increase it manually. If you'd like to try that, give it a class, then target in your stylesheet with a much bigger font-size. BUT, this will lead to vastly disproportionate font-sizes when compared to the other text on your site, so what I suggest doing instead, is making the whole of the modal overlay/window into a "click to close" trigger. To do that, give the "Close Window" link a class, then target it in your stylesheet and apply these additional styles; width:100%; height:100%; display:block; position:absolute;

BTW, the modal overlay is picking up some top and bottom margin overrides from default div styling that exists elsewhere in your stylesheet, so you might want to add margin:0; to the .show div CSS to make it sit flush with the top and bottom of the screen.

3. Superseded by number 2?

4. Yep, use your own tile image (for IE7/8) if you wish. You will also need to change the RGB background values against the .show div CSS to match. As a starting point, try background:rgb(255,204,204); background:rgba(255,204,204,.75);. (.75 is the degree of opacity).

SheriLynn

01-12-2015, 07:43 PM

It had already occurred to me to give the view link a class, thanks for confirming that for me!

Everything is now resolved, except No 2. I added: div.close { width:100%; height:100%; display:block; position:absolute; } to my stylesheet.

But I'm not sure where to insert the code. I tried putting it in:

<div id="img1" class="hide"><img src="http://www.katiebuglove.com/Katies/FreeTubes/brvig2015.jpg"/>[<a onclick="hideModal('img1');"><div class="close">Close Window</a>]</div></div>

but that didn't work.

Other than that, looking good thanks to you!

Beverleyh

01-12-2015, 08:08 PM

The styles for number 2 would need to go on the link tag - no additional div needed - the link is what we're making full screen;
<div id="img1" class="hide"><img src="http://www.katiebuglove.com/Katies/FreeTubes/brvig2015.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>Also delete the square brackets. And you'll probably want to either delete or style the "Close Window" text some more too.

SheriLynn

01-12-2015, 09:24 PM

And you'll probably want to either delete or style the "Close Window" text some more too.

I put the class-close in the right place. But I don't understand, I should 'delete' or 'style' the close window text? How so? Are you talking about the hover link in the new window?

Beverleyh

01-12-2015, 09:47 PM

SheriLynn

01-12-2015, 10:03 PM

Don't forget to check your changes - you still have the .close CSS applied to the now-deleted div. The .close class is now on the anchor tag so your CSS will need to be updated.

And just apply any further styling to that anchor tag to suit your site. Or delete the "Close Window" text, but it's up to to you what you want to do with that.

I'm not sure where the .close CSS is that I have to update. Where is the anchor tag?

Also, I was so confident about this that I applied the new window to some other pages with multiple images:

http://www.katiebuglove.com/Tutorials/platetut.html

with this code:

<td class="four"><div class="img"><img src="ex1t.jpg"></div>
<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>
<noscript><a href="ex1.jpg"/>View Image</a></noscript> 
<div id="img1" class="hide"><img src="ex1.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

<script>
function showModal(id) { document.getElementById(id).className = 'show'; }
function hideModal(id) { document.getElementById(id).className = 'hide'; }
</script>
</td>

<td class="four"><div class="img"><img src="ex2t.jpg"></div>
<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>
<noscript><a href="ex2.jpg"/>View Image</a></noscript> 
<div id="img1" class="hide"><img src="ex2.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

<script>
function showModal(id) { document.getElementById(id).className = 'show'; }
function hideModal(id) { document.getElementById(id).className = 'hide'; }
</script>
</td>

<td class="four"><div class="img"><img src="ex3t.jpg"></div>
<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>
<noscript><a href="ex3.jpg"/>View Image</a></noscript> 
<div id="img1" class="hide"><img src="ex3.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

<script>
function showModal(id) { document.getElementById(id).className = 'show'; }
function hideModal(id) { document.getElementById(id).className = 'hide'; }
</script>
</td>

but all the new window pictures are the same (image one). My guess is the change "showModal('img1'" to 2 and 3. Would this be correct?

Beverleyh

01-12-2015, 11:19 PM

Let's review what you posted;
<div id="img1" class="hide"><img src="http://www.katiebuglove.com/Katies/FreeTubes/brvig2015.jpg"/>[<a onclick="hideModal('img1');"><div class="close">Close Window</a>]</div></div>along with this in you stylesheet;
div.close { width:100%; height:100%; display:block; position:absolute; }

I replied and changed your markup to this, removing the extra div and putting the class on the anchor tag instead;
<div id="img1" class="hide"><img src="http://www.katiebuglove.com/Katies/FreeTubes/brvig2015.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>
So now, your CSS doesn't work because it's looking for a div with the .close class - you need to update it for the anchor tag. Just to clarify, an anchor tag is a tag that begins with <a ... - also called a link/hyperlink.

but all the new window pictures are the same (image one). My guess is the change "showModal('img1'" to 2 and 3. Would this be correct?Yes
<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>opens
<div id="img1" class="hide"><img src="pic1.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>And
<a href="javascript:void(0)" onclick="showModal('img2')">View Image</a>opens
<div id="img2" class="hide"><img src="pic2.jpg"/><a onclick="hideModal('img2');" class="close">Close Window</a></div>and you only need
<script>
function showModal(id) { document.getElementById(id).className = 'show'; }
function hideModal(id) { document.getElementById(id).className = 'hide'; }
</script>ONCE at the bottom of your web page.

BTW - are you aware of the official "thanks" buttons on the bottom left corner of all posts? If you're finding these replies helpful, it would be great if you could show your thanks officially ;)

SheriLynn

01-12-2015, 11:59 PM

Yes, I saw the "thanks" button but thought that was for when the thread was completed. Will pay closer attention.

My code does look like this now: <div id="img1" class="hide"><img src="http://www.katiebuglove.com/Katies/FreeTubes/brvig2015.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

I'm going to get busy and change the other pages now.

SheriLynn

01-13-2015, 12:15 AM

Okay, everything is fixed, and here's the correct link to a page with multiple images to view in new window:

http://www.katiebuglove.com/Tutorials/SCurt/curtaintut.html

I love this new thing you taught me and I'm so grateful for all your patience. Post back so I can thank you!

Beverleyh

01-13-2015, 09:07 AM

Hi again - there are just a few small edits to make for the IE7/8 styles to help the image centre in those bowsers;
.show img { position:static; display:block; margin:25px auto }

And to wrap up, for anyone else following this thread, here's a full working demo: http://fofwebdesign.co.uk/template/_testing/modal-popup.htm

SheriLynn

01-13-2015, 04:23 PM

I think I still need help with anchors. Here's what I have in my stylesheet:

a:link {font-family: sans-serif; color: #41502c; font-size: 12px;}
a:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}
a:close {font-family: sans-serif; color: #3f5a22; font-size: 12px;}

I added the 'close' anchor, hoping it would match my other links. Then, I have this in the doc:

<div id="img1" class="hide"><img src="gs013.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

I'm still getting a small hover on the 'close window' text. Clearly, my talent lies elsewhere...but I really want to understand this and this is my only stumbling block right now.

Beverleyh

01-13-2015, 04:50 PM

OK - here's how you target the link with a "close" class (using your example);

a.close:link {font-family: sans-serif; color: #41502c; font-size: 12px;}
a.close:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a.close:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a.close:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}

You can separate multiple selectors with a comma to apply the same CSS to each;

a.link, a.close:link {font-family: sans-serif; color: #41502c; font-size: 12px;}
a:visited, a.close:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a:hover, a.close:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a:active, a.close:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}

Hope that helps

SheriLynn

01-13-2015, 05:07 PM

I added option one code, as option two code changed all my link font sizes and colors to huge and weird (what?!), but option one doesn't seem to work either. I know you have probably spent more time on this than you care to, but would you please look at my source code for:

http://www.katiebuglove.com/Tutorials/SCurt/curtaintut.html

and tell me if you see anything from preventing the 'close window' text from displaying correctly? I even cleared my browser cache twice....

Additionally, this is what I have added to my stylesheet for open new window:

div.close {width:100%; height:100%; display:block; position:absolute;}

and

.show { position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; margin:0; text-align:center; color:#000; background:rgb(255,204,204); background:rgba(255,204,204,.75);) }
.show img { max-width:100%; max-height:100%; position:absolute; margin:0; top:45%; left:50%;
-webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%)
}
.hide { display:none }

Beverleyh

01-13-2015, 06:13 PM

My mistake on the close link CSS - it should look like this (no :link needed);
a.close {font-family: sans-serif; color: #41502c; font-size: 12px;}
a.close:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a.close:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a.close:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}

Also, I'm not sure why you have this line - it isn't being applied to anything so you can take it out;
div.close {width:100%; height:100%; display:block; position:absolute;}

SheriLynn

01-13-2015, 06:41 PM

Done and done!

Thank you for all your help, I appreciate it so much. Now go do something fun, unless this is fun for you, then, just keep on doing this....