Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 14th, 2005, 08:30 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default Tip: How to 'grey-out' an image

+img.gif is your original image+

<style>

#photoholder
{
  width:120px;
  height:23px;
  background:url('/Trial/airlogo/img.gif') 99% 1%;
}
#thephoto
{
  width:120px;
  height:23px;
}
</style>

-----------------------------------

<script>
////////////////////////////////////////////
// 'Disabled' image code //
////////////////////////////////////////////

function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;

  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";

  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;

  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;

  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 75; // the level of darkness (100 - high, 0 - low)
      window.setTimeout("fadeIn('"+objId+"',"+opacity+") ", 100);
    }
  }
}

function initImage() {
  imageId = 'thephoto';
  image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,0);
}


window.onload = function() {initImage()}
document.write("<style type='text/css'>#thephoto {visibility:hidden;} </style>");
</script>

--------------------------------------

<div id="photoholder">
<img src="/Trial/airlogo/white.gif" id="thephoto">
</div>

+ This is the image that will 'grey-out' your original image+


www.crmpicco.co.uk
www.crmpicco.co.uk.tt
www.milklemonadechocolate.uk.tt
www.griswolds.uk.tt
__________________
_______________________
Ayrshire Minis - a Mini E-Community
http://www.ayrshireminis.com
http://www.crmpicco.co.uk
Reply With Quote
  #2 (permalink)  
Old April 14th, 2005, 08:31 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

The code
The photo is a straightforward image in a div. Each has an id:

<div id='photoholder'>
<img src='/images/ithaka.jpg' alt='Photo' id='thephoto' />
</div>The 'loading…' image is set as the background to the photoholder div, and the photoholder is sized to match the photo.

#photoholder {
  width:450px;
  height:338px;
  background:#fff url('/images/loading.gif') 50% 50% no-repeat;
}
#thephoto {
  width:450px;
  height:338px;
}To prevent a cached photo from displaying before it has been faded in, when need to make the photo hidden. JavaScript is used to write a style rule so that users without JavaScript enabled will not have the photo permanently hidden:

document.write("<style type='text/css'>
  #thephoto {visibility:hidden;} </style>");Note that document.write does not work when XHTML is properly sent as application/xhtml+xml. You will either have to use HTML or serve your document as text/html.

Once everything on the page has loaded (crucially this includes images), an onload event is triggered, calling our initImage function:

window.onload = function() {initImage()}The initImage function makes the photo completely tranpsarent by using the setOpacity function to set its opacity to zero. The photo can then be made visible and faded in using the fadeIn function:

function initImage() {
  imageId = 'thephoto';
  image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,0);
}The setOpacity function is passed an object and an opacity value. It then sets the opacity of the supplied object using four proprietary ways. It also prevents a flicker in Firefox caused when opacity is set to 100%, by setting the value to 99.999% instead.

function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;

  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";

  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;

  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;

  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}The fadeIn function uses a Timeout to call itself every 100ms with an object Id and an opacity. The opacity is specified as a percentage and increased 10% at a time. The loop stops once the opacity reaches 100%:

function fadeIn(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 10;
      window.setTimeout("fadeIn('"+objId+"',"+opacity+") ", 100);
    }
  }
}Accessibility
This implementation caters for all combinations of JS and CSS; that is to say the photo can always be seen once it has loaded.

CSS & JS 'loading…' image displayed, photo fades in once loaded.
No CSS or JS No 'loading…' image, photo appears once loaded.
CSS but no JS 'loading…' image displayed, photo appears once loaded.
JS but no CSS No 'loading…' image displayed, photo either appears or fades in once loaded (depending on why there's no CSS).

All the scripts and style sheets should be held in their own files to fully separate the content, presentation and behaviour layers (they are coded into the head here for demonstration purposes).



www.crmpicco.co.uk
www.crmpicco.co.uk.tt
www.milklemonadechocolate.uk.tt
www.griswolds.uk.tt
Reply With Quote
  #3 (permalink)  
Old April 14th, 2005, 08:45 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

http://www.clagnut.com/sandbox/imagefades/

Can anyone see a way to speed up the change from IMAGE to white.gif?

Picco

www.crmpicco.co.uk
www.crmpicco.co.uk.tt
www.milklemonadechocolate.uk.tt
www.griswolds.uk.tt
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

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 Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to grey out a form field? kk_sg Access 4 April 29th, 2008 10:11 AM
Grey row of datagrid without PostBack Dave_w3 Classic ASP Professional 1 April 20th, 2005 03:51 AM
'grey out' or 'disable' an image crmpicco Classic ASP Basics 2 April 12th, 2005 09:20 AM
grey out (or disable) a text box crmpicco HTML Code Clinic 2 January 20th, 2005 06:13 PM
CONVERT GREY TO BLACK MANOJMETAL BOOK: ASP.NET Website Programming Problem-Design-Solution 0 December 3rd, 2003 07:47 AM



All times are GMT -4. The time now is 06:38 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.