Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-07-2004, 08:32 AM   PM User | #1
manjusha
New Coder

 
Join Date: May 2004
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
manjusha is an unknown quantity at this point
Unhappy help needed to modify the script

Hello,

Could anyone please help me modify the script?

I have attached a text file of the code I'm using to display a popup window of an image. Is it possible to give a border to the image & some space around the image?

Thank you
Attached Files
File Type: txt resize popup to img size.txt (4.4 KB, 154 views)
manjusha is offline   Reply With Quote
Old 06-07-2004, 08:54 AM   PM User | #2
glenngv
Supreme Master coder!


 
glenngv's Avatar
 
Join Date: Jun 2002
Location: Los Angeles, CA Original Location: Philippines
Posts: 10,241
Thanks: 0
Thanked 112 Times in 111 Posts
glenngv will become famous soon enough
Change this line:

writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');

to:

writeln('<html><head><title>Loading...</title><style>body{margin:2px;}\nimg{border:1px solid red}</style>');

Change the values accordingly.
__________________
Glenn
_____________________________________________
Play Tower of Hanoi Android app (Ad-FREE!)
Play Tower of Hanoi Android app (FREE!)
Go to Tower of Hanoi Leaderboard
Play Tower of Hanoi Facebook app
glenngv is offline   Reply With Quote
Old 06-07-2004, 10:11 AM   PM User | #3
manjusha
New Coder

 
Join Date: May 2004
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
manjusha is an unknown quantity at this point
Thank you for repying so soon.

Sorry to bother you again. Problem is the border and margin appears on top & left boder only. There is no space at the bottom & right side. Can you fix this problem?

I'll be realy greatful. Thanks again
manjusha is offline   Reply With Quote
Old 06-07-2004, 10:40 AM   PM User | #4
glenngv
Supreme Master coder!


 
glenngv's Avatar
 
Join Date: Jun 2002
Location: Los Angeles, CA Original Location: Philippines
Posts: 10,241
Thanks: 0
Thanked 112 Times in 111 Posts
glenngv will become famous soon enough
Can you post the link so that I can see it in action?
__________________
Glenn
_____________________________________________
Play Tower of Hanoi Android app (Ad-FREE!)
Play Tower of Hanoi Android app (FREE!)
Go to Tower of Hanoi Leaderboard
Play Tower of Hanoi Facebook app
glenngv is offline   Reply With Quote
Old 06-07-2004, 10:57 AM   PM User | #5
manjusha
New Coder

 
Join Date: May 2004
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
manjusha is an unknown quantity at this point
Sorry, I will not be able to do that since the site is not online yet. Will the img of page help?
manjusha is offline   Reply With Quote
Old 06-07-2004, 11:21 AM   PM User | #6
glenngv
Supreme Master coder!


 
glenngv's Avatar
 
Join Date: Jun 2002
Location: Los Angeles, CA Original Location: Philippines
Posts: 10,241
Thanks: 0
Thanked 112 Times in 111 Posts
glenngv will become famous soon enough
That would help plus the modified code.
__________________
Glenn
_____________________________________________
Play Tower of Hanoi Android app (Ad-FREE!)
Play Tower of Hanoi Android app (FREE!)
Go to Tower of Hanoi Leaderboard
Play Tower of Hanoi Facebook app
glenngv is offline   Reply With Quote
Old 06-07-2004, 12:26 PM   PM User | #7
manjusha
New Coder

 
Join Date: May 2004
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
manjusha is an unknown quantity at this point
Ok, here is the code, also attached is a printscreen img of the page with the popup opened.

==============================================================
Script: Auto-Sizing Image Popup Window

Functions: Use this script to launch a popup window that
automatically loads an image and resizes itself
to fit neatly around that image. The script also
places a title you set in the titlebar of the
popup window. Any number of images can be launched
from a single instance of the script.

Browsers: NS6-7 & IE4 and later
[Degrades functionally in NS4]

Author: etLux
==============================================================



STEP 1.
Inserting the JavaScript <script> In Your Page

Insert the following script in the <head>...</head> part
of your page. Take special care not to break any of the lines;
they must be exactly as shown.

Set the variables as per the instructions in the script.



<script>

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.

// SETUPS:
// ===============================

// Set the horizontal and vertical position for the popup

PositionX = 0;
PositionY = 0;

// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)

defaultWidth = 800;
defaultHeight = 700;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = true;

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+Positi onY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:5px;}\nimg{border:2px solid black}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Micro soft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();
}}

</script>



==============================================================



STEP 2.
Calling the Image Popup from Links in Your Page

This is the form of the function:

popImage("url_of_image","title_of_image")

Use the relative or absolute path of the image where we show
url_of_image. This is the url of the image you wish to show
in the auto-sizing popup window.

Use any text you wish where we show title_of_image. This is
the title that will appear in the titlebar of the popup. (Note:
do not use single- or double-quotes within a title.)

Caution: Be careful to place both values within quotes.
See the samples below.


Example 1: Launching from a text link

<a href="javascriptopImage('http://SomeSite.com/SomeImage.gif','Some Title')">
Click Here
</a>


Example 2: Launching from an image link

<a href="javascriptopImage('http://SomeSite.com/SomeImage.gif','Some Title')">
<img src="YourImage.gif" border="0">
</a>


Example 3: Launching from a form button

<form>
<input type="button" value="Click Here" onClick="popImage('SomeImage.gif','Some Title')">
</form>



============================[end]=============================
Attached Thumbnails
Click image for larger version

Name:	printscreen.jpg
Views:	191
Size:	46.4 KB
ID:	2402  
manjusha is offline   Reply With Quote
Old 06-08-2004, 03:13 AM   PM User | #8
glenngv
Supreme Master coder!


 
glenngv's Avatar
 
Join Date: Jun 2002
Location: Los Angeles, CA Original Location: Philippines
Posts: 10,241
Thanks: 0
Thanked 112 Times in 111 Posts
glenngv will become famous soon enough
The window size is not enough because you add the border and margin.
You should see the margin for the right and bottom if you enlarge the window.

The solution is to add 14 (which is double the size of the 5px + 2px margin/border) to the window's width and height.

Change this:

writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');

to:

writeln('width=100-(document.body.clientWidth-document.images[0].width)+14;');
writeln('height=100-(document.body.clientHeight-document.images[0].height)+14;');

or just subtract 14 from 100.
__________________
Glenn
_____________________________________________
Play Tower of Hanoi Android app (Ad-FREE!)
Play Tower of Hanoi Android app (FREE!)
Go to Tower of Hanoi Leaderboard
Play Tower of Hanoi Facebook app

Last edited by glenngv; 06-08-2004 at 03:21 AM..
glenngv is offline   Reply With Quote
Old 06-08-2004, 06:23 AM   PM User | #9
manjusha
New Coder

 
Join Date: May 2004
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
manjusha is an unknown quantity at this point
Thumbs up

Hi Glenn,

Thank you very much! You are a gem! I don't know what I would have done without you. This makes my work so much easy, as I have "n" number of popups in this site!

Thanks again!
manjusha is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:52 PM.


Advertisement
Log in to turn off these ads.