<?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