go to  ForumEasy.com   
JavaPro  
 
 
   Home  |  MyForum  |  FAQ  |  Archive    You are not logged in. [Login] or [Register]  
Forum Home » JavaScript » Display vs Visibility
Email To Friend  |   Set Alert To This Topic Rewarding Points Availabe: 0 (What's this) New Topic  |   Post Reply
Author Topic: Display vs Visibility
WebSpider
member
offline   
 
posts: 147
joined: 06/29/2006
from: Seattle, WA
  posted on: 07/24/2006 06:41:06 PM    Edit  |   Quote  |   Report 
Display vs Visibility
The core difference between display and visibility is that:

display:block|none: the element NOT to be displayed <div style="display:none;">item</div> will be evicted from the place which would occupy;

visibility:visible|hidden: the element NOT to be visible <div style="visibility:hidden;">item</div> will preserve the place which occupied. Actually, the name 'invisible' speaks itself quite well.

 Profile | Reply Points Earned: 0
WebSpider
member
offline   
 
posts: 147
joined: 06/29/2006
from: Seattle, WA
  posted on: 07/24/2006 06:48:37 PM    Edit  |   Quote  |   Report 
A very good example of visibility

A very good example of visibility by using 'display' can be found in the Yahoo Sports. Click on the 'today' or 'yesterday' on the Scoreboard to see the actions.


http://sports.yahoo.com/

 Profile | Reply Points Earned: 0
WebSpider
member
offline   
 
posts: 147
joined: 06/29/2006
from: Seattle, WA
  posted on: 07/24/2006 07:04:12 PM    Edit  |   Quote  |   Report 
The source code of visibility
<script language="JavaScript">
<!--
function toShow(id)
{
  var val;
  if(document.getElementById){ // IE5
    val = (document.getElementById(id).style.visibility=="hidden")?"visible":"hidden";
    document.getElementById(id).style.visibility = val;
  }else if(document.all){ // IE4
    val = (document.all[id].style.visibility=="hidden")?"visible":"hidden";
    document.all[id].style.visibility = val;
  }else(document.layers){  // Netscape 4
    val = (document.layers[id].visibility=="hide")?"show":"hide";
    document.layers[id].visibility = val;
  }
}


function toDisplay(id)
{
  if(document.getElementById){  // IE5
    val = (document.getElementById(id).style.display=="none")?"block":"none";
    document.getElementById(id).style.display = val;
  }else if(document.all){  // IE4
    val = (document.all[id].style.display=="none")?"block":"none";
    document.all[id].style.display = val;
  }else(document.layers){  // Netscape 4
    val = (document.layers[id].display=="none")?"block":"none";
    document.layers[id].display = val;
  }
}
// -->
</script>

 Profile | Reply Points Earned: 0
WebSpider
member
offline   
 
posts: 147
joined: 06/29/2006
from: Seattle, WA
  posted on: 07/24/2006 09:47:25 PM    Edit  |   Quote  |   Report 
To simply by taking care of the legacy issue document.all
<script language="JavaScript">
<!--

if(!document.getElementById && document.all) {
    document.getElementById = function(id) {
         return document.all[id];
    }
}


function toShow(id)
{
  var val;
  if(document.getElementById){ // IE
    val = (document.getElementById(id).style.visibility=="hidden")?"visible":"hidden";
    document.getElementById(id).style.visibility = val;
  }else(document.layers){  // Netscape 4
    val = (document.layers[id].visibility=="hide")?"show":"hide";
    document.layers[id].visibility = val;
  }
}


function toDisplay(id)
{
  if(document.getElementById){  // IE
    val = (document.getElementById(id).style.display=="none")?"block":"none";
    document.getElementById(id).style.display = val;
  }else(document.layers){  // Netscape 4
    val = (document.layers[id].display=="none")?"block":"none";
    document.layers[id].display = val;
  }
}
// -->
</script>



 Profile | Reply Points Earned: 0

 
Powered by ForumEasy © 2003-2005, All Rights Reserved. | Privacy Policy | Terms of Use
 
Get your own forum today. It's easy and free.