Or that you can't go back and edit your post if there are errors. 
Latest posts made by mark-e-manning
- Opera for Windows
-
Opera for WindowsRE: Problem trying to hide text
<?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.
-
Opera for WindowsProblem trying to hide text
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.