010412.html | WebReference


((((((((((((((((( WEBREFERENCE UPDATE NEWSLETTER ))))))))))))))))) April 12, 2001


Sponsored by: WebTrends, Informative Graphics, Recommend-it.com and Building Dynamic Web Sites Conference __________________________________________________________________

This week Eddie Traversa tells us how to dynamically resize images. He gets deep into the inner workings of JavaScript and DHTML so hang on for the ride.


When times are tough, you need answers not hype: 68% of Internet.com readers said they need web analytics! As Web Techniques magazine stated in their 2000 Web Tools Awards, "WebTrends understands the importance of metrics... and has significantly improved its speed & performance." Experienced webmasters know the answers to their toughest questions live within their WebTrends reports. Try it for free: http://www.webtrends.com/redirect/webref-es-q201.htm


http://www.webreference.com *- link to us today http://www.webreference.com/new/ *- newsletter home http://www.webreference.com/new/submit.html *- submit article

New this week on WebReference.com and the Web:

1. TWO NEW CONTESTS: Submit & Win HoTMetaL Pro 6.0 and XMetaL 2.0! Signup & Win! 2. FEATURED ARTICLE: Dynamically Resizing Images 3. NET NEWS: * Interstitials in the balance: Are improving clickthrough rates and a higher selling price worth the annoyance that pop-up ads cause site visitors? * Document Object Model (DOM) Level 3 Events Specification * Security Concerns at eBay, Yahoo ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. TWO NEW CONTESTS: Submit & Win HoTMetaL Pro 6.0 and XMetaL 2.0! Signup & Win

>Submit & Win HoTMetaL Pro 6.0 and XMetaL 2.0!

Submit your article today and you could win SoftQuad's HoTMetaL Pro 6.0 and XMetaL 2.0! If your article makes the cut, and we publish it on the site or in this newsletter, you win! See the submission page for details:


>New Signup & Win!

Sign up for the WebReference Update newsletter, and you could win a killer software bundle from Pegasus Imaging, JPEG Wizard and PICShow. Each week we'll draw new winners from our new subscribers - you could be next. Already a subscriber? Not a problem - just fill out the form, and you'll be automatically entered to win. Tell your friends!


This week Eddie Traversa wins HoTMetaL Pro 6.0 and XMetaL 2.0 for his article on dynamically resizing images. Congratulations! Enjoy the software.


Are you having the bottleneck blues? Do you look forward to a day when you can clear from your plate all those little departmental updates and changes to the website and focus on what is really priority? Net-It CentralT empowers departments with the ability to maintain their own intra /inter-net web site for basic document publishing. You won't be putting yourself out of a job, you will simply make it possible to focus on the more critical tasks at hand. http://www.infograph.com/wr.htm **********************************************************adv.**** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2. FEATURED ARTICLE: Dynamically Resizing Images

One of the biggest criticisms facing Dynamic HTML(DHMTL) in relation to Flash is DHTML's seeming inability to scale pages relative to a browser's dimensions. To overcome this problem, three central areas need to be focused upon:

1. Dynamic Font Scaling. 2. Layer Resizing. 3. Element Resizing

Each of these key areas need to accommodate differing browser dimensions, while at the same time maintaining the same layout and feel of the page. Its no easy task, but it is possible with the help of a little JavaScript magic.

In this article we are going to investigate, how to dynamically resize an image. But before we do, lets understand some of the previous techniques used in an attempt to try and accommodate differing browser dimensions.

Developers typically went one of four ways.

1. Conditionally passing different size images based on screen resolution. 2. Opening a new fixed sized window. 3. Asking the user to switch screen resolutions. 4. Not bothering at all.

Each of these methods has its drawbacks, for example, many users object to a new fixed size window being opened. Developers typically hate making four or five different size versions of the same image and then finding that if a user was not in a certain screen resolution that the fluid nature of their pages quickly fell apart. I know personally I am not amenable to switching screen resolutions just to see someone's page and I am sure many are like-minded. Finally not caring at all really must shed a poor light on the "developer" that takes this route.

Recently, I discovered a method that allows for the dynamic resizing of images as well as other page elements that doesn't rely on passing multiple images. In all honesty even this method has its drawbacks. For one thing it requires, extra coding to make pages fluid. Another drawback is that to actually see the best results with this method, a higher than typical image resolution is needed. For example, if using a background, rather than making the background 800*600, something akin to 1152 * 864 is needed. The golden rule here is to scale down not up, as scaling up results in poor image quality. The obvious disadvantage is that this method leads to increased kbs.

However, if care is taken in image construction with particular emphasis on image compression while maintaining a reasonable image quality, then it is quite a feasible and viable method to use. Additionally, it saves the developer time, because only one image has to be made rather than many versions of the same image. On top of this developers have an image that scales appropriately to different browser dimensions. While the following method is by no means perfect, I am still working on perfecting it; I do have a strong belief that it's a definite positive step in the right direction.

Lets begin this sojourn by first looking at the completed script: <html> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function Is() { agent = navigator.userAgent.toLowerCase(); this.major = parseInt(navigator.appVersion); this.minor = parseFloat(navigator.appVersion); this.ns = ((agent.indexOf('mozilla') != -1) && ((agent.indexOf('spoofer') == -1) && (agent.indexOf('compatible') == -1))); this.ns2 = (this.ns && (this.major == 3)); this.ns3 = (this.ns && (this.major == 3)); this.ns4b = (this.ns && (this.major == 4) && (this.minor <= 4.03)); this.ns4 = (this.ns && (this.major == 4)); this.ns6 = (this.ns && (this.major >= 5)); this.ie = (agent.indexOf("msie") != -1); this.ie3 = (this.ie && (this.major < 4)); this.ie4 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") == -1)); this.ie5 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") != -1)); this.ie55 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.5") != -1)); this.ie6 = (this.ie && (agent.indexOf("msie 6.0")!=-1) ); this.aol = (agent.indexOf("aol") != -1); this.aol3 = (this.aol && this.ie3); this.aol4 = (this.aol && this.ie4); this.aol5 = (this.aol && this.ie5); } var is = new Is(); function winResize() { if(is.ns4 ||is.ns6||is.ie4||is.ie5||is.ie55||is.ie6) { history.go(0); } } // --> </script> </HEAD> <body onResize="winResize()"> <div id="backgroundLayer" style="position:absolute; width:200px; height:115px; z-index:1; left: 0px; top: 0; visibility: visible"> <SCRIPT LANGUAGE="JavaScript"> if(is.ns4 || is.ns6) { available_width = innerWidth; available_height = innerHeight; } else if(is.ie4 || is.ie5 || is.ie55 || is.ie6) { available_width=document.body.clientWidth; available_height=document.body.clientHeight; } if(is.ie4 || is.ie5 || is.ie55 || is.ie6 || is.ns6 || is.ns4) { image1_width = (available_width * 1.00); image1_height = (available_height * 1.00); var image1 = '<img src="nirvana.jpg" width="' + image1_width + '" height="' + image1_height + '">'; document.write(image1); } </script> </div> </body> </html>

We begin with a standard browser sniffer function Is() and a little function winResize() to handle the resizing of images. The real magic however, is contained within the body section.

The first thing to do is to create a CSS layer as demonstrated below: <div id="backgroundLayer" style="position:absolute; width:200px; height:115px; z-index:1; left:0px; top:0; visibility:visible">

Then we need to think about the logic of what's involved in getting an image to resize dynamically according to a browser's dimensions. One of the immediate things needed to be paid attention to is to capture a user's browser dimensions. In order to achieve this a script is created within the CSS layer as such: if(is.ns4 || is.ns6) { available_width = innerWidth; available_height = innerHeight; } else if(is.ie4 || is.ie5 || is.ie55 || is.ie6) { available_width=document.body.clientWidth; available_height=document.body.clientHeight; }

We create two variables named available_width and available_height respectively. Here is where the earlier browser sniffer comes into play. We create a condition for the Netscape version browsers and then assign the variables available_width and available_height to be associated with innerWidth and innerHeight respectively. innerWidth and innerHeight are Netscape proprietary methods.

For Internet Explorer, the variables available_width and available_height are assigned to document.body.clientWidth; and document.body.clientHeight; respectively. document.body.clientWidth; and document.body.clientHeight; are Internet Explorer proprietary methods.

The next part of the script is used to first detect all the browsers capable of using this dynamic resizing method by using the following conditional statement: if(is.ie4 || is.ie5 || is.ie55 || is.ie6 || is.ns6 || is.ns4) {

Then, two more variables image1_width and image1_height are created to handle the image resizing based on browser dimensions: image1_width = (available_width * 1.00); image1_height = (available_height * 1.00);

Remember the earlier variables available_width and available_height? Here is where they come into play in this equation. The variable image1_width points to the variable available_width, which contains the browser's width dimension information.

By using a little math we can then make the image fit to a browser's width dimensions, hence the use of * 1.00 . All that is happening here is that we are simply telling the browser to scale the image proportionally to the browser's width. Proportionally 1.00 is equivocal to 100%. If we wanted to scale the image to half of the browser width then we would use image1_width = (available_width * 0.50); . The exact same method is used to make the image resize according to a browsers height.

The next stage is to write in the image itself. To accomplish this, another variable is created var image1. To make the image dynamically resize we use the earlier captured information about the browsers dimensions and the information pertaining to what dimensions we want the image to scale to. Hence, we assign the attributes width and height with that information as demonstrated below: var image1 = '<img src="nirvana.jpg" width="' + image1_width + '" height="' + image1_height + '">';

The final thing left to do is to dynamically write in the image by using document.write and then just close of the script and div tag as demonstrated below. document.write(image1); } </script> </div>

The above allows for an image to scale accordingly to browser dimensions. But what if you need more than one image or want to have text over the image? Because the image is actually being written into the document via JavaScript and because it's in a layer, you cannot simply add images or text into the body of the document. So what is the use of this technique you may ask?

The solution is quite simple. All that needs to occur is that text or other elements be put into a layer with a higher z-index than the image that is being dynamically resized. For example if the background image is one of the images being dynamically resized, and the CSS Layer it is contained in has a z-index of one, then in order to have text appear, the text is inserted into another CSS Layer with a z-index of 2.

Another important thing to remember is that you are not limited to just having the one image dynamically resized. All images on the page can be resized with this method. All that's needed here is to change the variable image1 to image2 or whatever name makes most conceptual sense to you.

Additionally, thinking in terms of only images is restrictive, for example, we can scale a flash movie contained within a layer with the very same techniques as demonstrated below:

<div id="controlLayer" style="position:absolute; width:82px; height:85px; z-index:4; left: 20px; top: 6px; visibility: visible"> <script langauge="javascript"> if(is.ns6||is.ns4) { pageWidth=innerWidth; pageHeight=innerHeight; } else if(is.ie55||is.ie5||is.ie6 || is.ie4) { pageWidth=document.body.clientWidth; pageHeight=document.body.clientHeight; } if(is.ie4 || is.ie55 ||is.ie5 || is.ns6 ||is.ie6 || is.ns4) { flash1_width = (pageWidth*.02); flash1_height = (pageHeight*.03); var flash1 ='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfla sh.cab#version=4,0,2,0" width="' + flash1_width + '" height="' + flash1_height + '" id="music" name="music">' flash1 += '<param name="movie" value="musiccontrol.swf">' flash1 += '<param name="quality" value="high">' flash1 += '<param name="scale" value="exactfit">' flash1 += '<embed src="musiccontrol.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="' + flash1_width + '" height="' + flash1_height + '" id="music" name="music" scale="exactfit">' flash1 += '</embed>' flash1 += '</object>' document.write(flash1); } </script> </div>

At the outset I mentioned dynamic font scaling and layer resizing as part of the whole fluid solution. With a bit of luck, I will have the opportunity to write about these techniques at a later point. For those of you willing to plunge into my source code, you can view complete working examples at http://dhtmlnirvana.com/ or the One Project site (IE5+ or NS6) once you are there. The dynamic font scaling and layer resizing techniques are contained with in the source code.

In the meantime, I hope you find this article on dynamic image resizing of value to you and your web development efforts.

# # #

Born in Italy, currently residing in Australia and about to shift to Canada, Eddie Traversa is a freelance Web developer with an eye on building Web sites that use the latest Web technologies. His award winning site (http://dhtmlnirvana.com/ ) focuses on an open Web learning environment and in so doing endeavours to help Web developers build their skills in areas such as D-HTML, D- XHTML, Flash and graphics creation. He can be reached at: psych3@primus.com.au.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ******************************************************************

Recommend-Itr - The Internet's Word of MouthT - Maximize your web presence! Our word-of-mouth tool has generated millions of website referrals, and can help you create a traffic jam to your site. Not only do we pay you with our Affiliate Program, we increase your traffic with exciting contests, fully administered and fulfilled by Recommend-It. Installation is quick, practically effortless and it's 100% FREE. For more details visit http://www.recommend-it.com/go.e?456422.


3. NET NEWS: Interstitials in the balance: Are improving clickthrough rates and a higher selling price worth the annoyance that pop-up ads cause site visitors? Document Object Model (DOM) Level 3 Events Specification Security Concerns at eBay, Yahoo

>Interstitials in the balance: Are improving clickthrough rates and a higher selling price worth the annoyance that pop-up ads cause site visitors?

Will the Internet ads become like TV ads, where we have to passively sit and watch commercials? http://www.publish.com/ic_490520_6414_1-2841_1320_12.html

>Document Object Model (DOM) Level 3 Events Specification

It's time to raise your standards, DOM3 is here. http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010410/

>Security Concerns at eBay, Yahoo

It just might be time to change your passwords at Yahoo and eBay. http://www.auctionwatch.com/awdaily/dailynews/april01/1-041101.html


Building Dynamic Web Sites * April 25 * Chicago, IL Still building Web sites the old fashioned way with static HTML pages? This one-day crash-course April 25th in Chicago will show you how to move from a flat-file nightmare to an easy-to-manage database-driven set up. For more information and to register: http://seminars.internet.com/webdev/chicago01/index.html


That's it for this week, see you next time.

Andrew King Managing Editor, WebReference.com update@webreference.com

Alexander Rylance Assistant Editor, WebReference.com arylance@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Advertising: If you are interested in advertising in our newsletters, call Frank Fazio on 1-203-662-2997 or send email to mailto:ffazio@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For contact information on sales offices worldwide visit http://www.internet.com/mediakit/salescontacts.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For details on becoming a Commerce Partner, contact David Arganbright on 1-203-662-2858 or mailto:commerce-licensing@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To learn about other free newsletters offered by internet.com or to change your subscription visit http://e-newsletters.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ internet.com's network of more than 150 Web sites are organized into 16 channels: Internet Technology http://internet.com/it E-Commerce/Marketing http://internet.com/marketing Web Developer http://internet.com/webdev Windows Internet Technology http://internet.com/win Linux/Open Source http://internet.com/linux Internet Resources http://internet.com/resources ISP Resources http://internet.com/isp Internet Lists http://internet.com/lists Download http://internet.com/downloads International http://internet.com/international Internet News http://internet.com/news Internet Investing http://internet.com/stocks ASP Resources http://internet.com/asp Wireless Internet http://internet.com/wireless Career Resources http://internet.com/careers EarthWeb http://www.earthweb.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To find an answer - http://search.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Looking for a job? Filling an opening? - http://jobs.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This newsletter is published by Jupitermedia Corp. http://internet.com - The Internet & IT Network Copyright (c) 2001 Jupitermedia Corp.. All rights reserved. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information on reprinting or linking to internet.com content: http://internet.com/corporate/permissions.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~