Problem 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.

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

  • Or that you can't go back and edit your post if there are errors. 😕

  • 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.

  • Deleted.

Log in to reply
 

Looks like your connection to Opera forums was lost, please wait while we try to reconnect.