Created
May 24, 2009 14:37
-
-
Save yaanno/117125 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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