To transform or not to transform

Question

Here is a weird thing I have run in to today and wanted to know what others think. Basically, I was trying to hide text when it went outside of a DIV. Not - "Oh! How do you hide something" - but - "I'm sliding the text across the screen and want it to disappear when it goes outside of the DIV box." This did not work. So first question is - what am I doing wrong? Ideas and comments are welcome. :-) Here is the code:

PS: I put in the BODY's "overflow:hidden;" because I was testing that out too. Just a FYI. :-)

<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;
    border:1px solid black;clip: rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);">
<p id='p1' name='p1' class='p1'>This is a test of how HTML works</p>
<p id='p2' name='p2' class='p1'>This is a test of how HTML works</p>
<p id='p3' name='p3' class='p1'>This is a test of how HTML works</p>
</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(" + n + "deg)";
    if( n < 2000 ){ 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(" + n + "deg)";
    if( n > -1000 ){ setTimeout("moveIt2(" + (n - 1) + ")", 1 ); }
        else { moveIt(n); }
}
    moveIt(50);
</script>
</body>
</html>

You have two questions here. Please separate them into two unique questions. — Jon P, Mar 05 '15 at 21:14
Since the first question has already been answered - should I still separate them? Let me know if you still want me to do so and I'll split them up. BTW: How do I keep the answer to the first question together? Should I just delete the second question above? Please let me know. TIA! — Mark Manning, Mar 05 '15 at 21:38
Yes, keep the question that has been answered here, delete the other one and ask it as a separate question. — Jon P, Mar 06 '15 at 00:46

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

I have only got time to go into your first question.

Your text has been given a position of "absolute". Absolute makes the element go out of the normal flow of the document. Changing the position:absolute on the .p1 element to position: relative should fix your problem

You can read some more here. The answer to that question will help you understand it some more.

I hope this answers your first question

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 05 '15 at 21:08

Dacaspex

669
7
15

Yes! That did fix that first problem. I did not post my results for all of the major browsers: IE: Works, FF: Kind of works, Opera: Does not work, Safari: Does not work, Chrome: Does not work. With the change you posted: FF works. – Mark Manning Mar 05 '15 at 21:34

To transform or not to transform

1 Answers1