Problem trying to hide text
-
mark-e-manning last edited by
I wanted to create a DIV with text boxes inside of it. These textboxes would move off screen by being hidden by the DIV statement. This did not work on any browser so I tried some other commands and finally hit upon the transform statement. This worked for FireFox and IE but not for Opera, Safari, or Chrome. So I am posting the code I used so it can be looked at in the hope that either a potential problem has been found or maybe a mistake on my part. Here is the code:
<?php
echo <<<END_OF_HTML<html>
<head>
<title>Test</title>
<style>
.p1 { position:absolute;
top:50px;
left:50px;
border: 1px solid grey;
padding: 5px;
font-family: sans-serif,Arial,Helvetica,Verdana,"Trebuchet MS",Tahoma,"MS Sans Serif",Geneva;
font-size: 12pt;
width: 150px;
height: 10pt;
overflow: hidden;
z-index:0;
}
</style>
</head>
<body style='overflow:hidden;'>
<div id='d1' name='d1' style="width:500px;height:400px;overflow:hidden;z-index:1;transform:rotate(0deg);
border:1px solid black;background-color:#ffffdd;">
<p id='p1' name='p1' class='p1' style='background-color:#ffdddd;'>This is a test of how HTML works
<p id='p2' name='p2' class='p1' style='background-color:#ddffdd;'>This is a test of how HTML works
<p id='p3' name='p3' class='p1' style='background-color:#ddddff;'>This is a test of how HTML works
</div>
<script>
function moveIt(n)
{
document.getElementById("p1").style.left = n;
document.getElementById("p2").style.top = n;
document.getElementById("p3").style.left = n;
document.getElementById("p3").style.top = n;
// document.getElementById("d1").style.transform = "rotate(0deg)";
document.getElementById("d1").style.transform = "rotate(" + n + "deg)";
if( n < 600 ){ setTimeout("moveIt(" + (n + 1) + ")", 1 ); }
else { moveIt2(n); }
}
function moveIt2(n)
{
document.getElementById("p1").style.left = n;
document.getElementById("p2").style.top = n;
document.getElementById("p3").style.left = n;
document.getElementById("p3").style.top = n;
// document.getElementById("d1").style.transform = "rotate(0deg)";
document.getElementById("d1").style.transform = "rotate(" + n + "deg)";
if( n > -500 ){ setTimeout("moveIt2(" + (n - 1) + ")", 1 ); }
else { moveIt(n); }
}
moveIt(50);
</script>
</body>
</html>
END_OF_HTML;?>
The BODY tag's "overflow:hidden" was a vain attempt at doing what I wanted. However, it does prevent scrollbars from showing upon the web page.
The transform statement on the DIV can be removed as it doesn't seem to do anything.
The other two transform statements will, on FireFox and IE, cause the text boxes to be hidden when it is run. Opera, Chrome, and Safari simply allow the text to move outside of the yellow DIV box. After effects of these text boxes also show up when the DIV and text boxes are rotating.
-
mark-e-manning last edited by
<?php echo <<<END_OF_HTML <html> <head> <title>Test</title> <style> .p1 { position:absolute; top:50px; left:50px; border: 1px solid grey; padding: 5px; font-family: sans-serif,Arial,Helvetica,Verdana,"Trebuchet MS",Tahoma,"MS Sans Serif",Geneva; font-size: 12pt; width: 150px; height: 10pt; overflow: hidden; z-index:0; } </style> </head> <body style='overflow:hidden;'> <div id='d1' name='d1' style="width:500px;height:400px;overflow:hidden;z-index:1;transform:rotate(0deg); border:1px solid black;background-color:#ffffdd;"> <p id='p1' name='p1' class='p1' style='background-color:#ffdddd;'>This is a test of how HTML works <p id='p2' name='p2' class='p1' style='background-color:#ddffdd;'>This is a test of how HTML works <p id='p3' name='p3' class='p1' style='background-color:#ddddff;'>This is a test of how HTML works </div> <script> function moveIt(n) { document.getElementById("p1").style.left = n; document.getElementById("p2").style.top = n; document.getElementById("p3").style.left = n; document.getElementById("p3").style.top = n; // document.getElementById("d1").style.transform = "rotate(0deg)"; document.getElementById("d1").style.transform = "rotate(" + n + "deg)"; if( n < 600 ){ setTimeout("moveIt(" + (n + 1) + ")", 1 ); } else { moveIt2(n); } } function moveIt2(n) { document.getElementById("p1").style.left = n; document.getElementById("p2").style.top = n; document.getElementById("p3").style.left = n; document.getElementById("p3").style.top = n; // document.getElementById("d1").style.transform = "rotate(0deg)"; document.getElementById("d1").style.transform = "rotate(" + n + "deg)"; if( n > -500 ){ setTimeout("moveIt2(" + (n - 1) + ")", 1 ); } else { moveIt(n); } } moveIt(50); </script> </body> </html> END_OF_HTML; ?>I can't believe Opera doesn't use one of the many inline editors.
-
-
lando242 last edited by
You can edit posts. The gear icon under your profile picture allows you to edit posts. Theres a 30 minute window of time to do it in though.
-
