Skip to content

Instantly share code, notes, and snippets.

@yaanno

yaanno/stackoverflow-questions-704758.html

Created May 24, 2009 14:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yaanno/117125 to your computer and use it in GitHub Desktop.
Save yaanno/117125 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
stackoverflow-questions-704758.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* uncomment this for the last test*/
/* #example-para{display:none !important; visibility: hidden !important} */
</style>
</head>
<body id="example">
<div id="example-branding">
<h2 id="example-heading"><a href="http://www.example.com">Example Site</a></h2>
<p id="example-para">Example paragraph</p>
</div>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
var elem = $("example-para");
var wrapper = $("example-branding");
console.log("displayed wrapper, displayed elem:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility")
);
elem.hide();
console.log("displayed wrapper, hidden elem:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility")
);
elem.show();
wrapper.hide();
console.log("hidden wrapper, shown elemm:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility")
);
wrapper.show();
elem.setStyle({visibility:"hidden"});
console.log("displayed wrapper, invisible elem:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility")
);
wrapper.setStyle({visibility:"hidden"});
elem.setStyle({visibility:"visible"});
console.log("invisible wrapper, visible elem:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility")
);
wrapper.setStyle({visibility:"visible"});
elem.setStyle({textIndent:"-10000px"});
console.log("visible wrapper, negative indented elem:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility")
);
elem.setStyle({textIndent:"0px"});
wrapper.setStyle({textIndent:"-10000px"});
console.log("negative indented wrapper, visible elem:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility")
);
wrapper.setStyle({textIndent:"0px"});
elem.setStyle({position:"relative",left:"-10000px"})
console.log("visible wrapper, negative positioned elem:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility")
);
elem.setStyle({position:"relative",left:"10000px"})
console.log("visible wrapper, positive positioned elem:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility")
);
elem.setStyle({position:"static",display:"inline"})
console.log("visible wrapper, inline elem:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility")
);
elem.setStyle({display:"block", visibility:"visible"})
console.log("hidden css with !important, displayed elem:" +
"\nviewportoffset() " + elem.viewportOffset() +
"\nvisible() " + elem.visible() +
"\ngetStyle('display') " + elem.getStyle("display") +
"\ngetStyle('visibility') " + elem.getStyle("visibility") +
"\ngetComputedStyle() \n"
);
console.log(getComputedStyle(elem,null));
</script>
<!--
Test results in Firebug console:
displayed wrapper, displayed elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') visible
displayed wrapper, hidden elem:
viewportoffset() 0,0
visible() false
getStyle('display') none
getStyle('visibility') visible
hidden wrapper, shown elemm:
viewportoffset() 0,0
visible() true
getStyle('display') block
getStyle('visibility') visible
displayed wrapper, invisible elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') hidden
invisible wrapper, visible elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') visible
visible wrapper, negative indented elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') visible
negative indented wrapper, visible elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') visible
visible wrapper, negative positioned elem:
viewportoffset() -9992,69
visible() true
getStyle('display') block
getStyle('visibility') visible
visible wrapper, positive positioned elem:
viewportoffset() 10008,69
visible() true
getStyle('display') block
getStyle('visibility') visible
visible wrapper, inline elem:
viewportoffset() 8,69
visible() true
getStyle('display') inline
getStyle('visibility') visible
//uncomment the style def for this test
hidden css with !important, displayed elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') visible
getComputedStyle() ComputedCSSStyleDeclaration position=static display=none visibility=hidden
-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment