Thread: DIV Height

    #1
  1. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,047
    Rep Power
    487

    DIV Height


    Hi all
    I banged together this script and it all works BUT I'm not 100% sure on how to get the div that pops down to the right size; for the test script purpose, it's set to animate up to 150px in height (from 0px) but the content in production might be smaller, it might be larger ... could someone please advise what I need to do to get this to animate to the "right" height?

    Code:
    <style>
    #usernote {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	background-color: black;
    	color: black;
    	padding: 5px;
    	height: 0px;
    
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    	filter: alpha(opacity=0);
    	-moz-opacity: 0.0;
    	-khtml-opacity: 0.0;
    	opacity: 0.0;
    
    }
    </style>
    <?php
    echo "<h2>Text to serve as page title</h2>";
    if ( isset ( $_POST['in'] ) && $_POST['in'] != "" ) {
    	echo "<div id='usernote'>";
    		echo $_POST['in'];
    	echo "</div>";
    	echo "<script src='js/jquery-1.10.1.min.js'></script>";
    	echo "<script src='js/jquery-ui.js'></script>";
    
    	switch ( $_POST['class'] ) {
    		case "information":
    			$bgcol = '#B5E0FF';
    			break;
    		case "exclamation":
    			$bgcol = '#FFF19E';
    			break;
    	}
    
    	?>
    <script>
    <!--
    $( document ).ready(function() {
    
    	$("#usernote").animate({
    		opacity:'0.9',
    		height:'150px',
    		backgroundColor: '<?php echo $bgcol; ?>'
    	});
    
    	setTimeout( function() {
    		$("#usernote").animate({
    			opacity:'0.0',
    			height:'0px'
    		});
    	}, 2000);
    });
    //-->
    </script>
    	<?php
    }
    
    echo "<form name='test' method='post'>";
    echo "Class: ";
    echo "<input type='radio' name='class' value='information'> Information<br>";
    echo "<input type='radio' name='class' value='exclamation'> Exclamation<br>";
    echo "<input type='text' name='in'>";
    echo "<input type='submit'>";
    echo "</form>";
    
    ?>
    please note this is just test code so i'm not caring about security etc here, that's all taken care of in the production code
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  2. #2
  3. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,047
    Rep Power
    487
    just a follow-up; I removed the height line and it seems to extend to the right size ok but if there's a large amount of content, then I think it's preventing me from accessing the form as it's underneath the div (even though it's supposed to shrink back to 0px height).

    Any suggestions on this one please?


    EDIT: Forget that about removing the "height", the content of the div actually extends but the div itself does not
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  4. #3
  5. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,047
    Rep Power
    487
    here is code version 2 (added overflow: hidden to prevent the content leaking out should it be greater than the div height) but still need to dynamically grow the div if necessary

    Code:
    <style>
    #usernote {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	background-color: black;
    	color: black;
    	padding: 5px;
    	height: 0px;
    	overflow: hidden;
    
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    	filter: alpha(opacity=0);
    	-moz-opacity: 0.0;
    	-khtml-opacity: 0.0;
    	opacity: 0.0;
    
    }
    </style>
    <?php
    echo "<h2>Text to serve as page title</h2>";
    if ( isset ( $_POST['in'] ) && $_POST['in'] != "" ) {
    	echo "<div id='usernote'>";
    		echo $_POST['in'];
    	echo "</div>";
    	echo "<script src='js/jquery-1.10.1.min.js'></script>";
    	echo "<script src='js/jquery-ui.js'></script>";
    
    	switch ( $_POST['class'] ) {
    		case "information":
    			$bgcol = '#B5E0FF';
    			break;
    		case "exclamation":
    			$bgcol = '#FFF19E';
    			break;
    	}
    
    	?>
    <script>
    <!--
    $( document ).ready(function() {
    
    	$("#usernote").animate({
    		opacity:'0.9',
    		height:'50px',
    		backgroundColor: '<?php echo $bgcol; ?>'
    	});
    
    	setTimeout( function() {
    		$("#usernote").animate({
    			opacity:'0.0',
    			height:'0px'
    		});
    	}, 2000);
    });
    //-->
    </script>
    	<?php
    }
    
    echo "<form name='test' method='post'>";
    echo "Class: ";
    echo "<input type='radio' name='class' value='information'> Information<br>";
    echo "<input type='radio' name='class' value='exclamation'> Exclamation<br>";
    echo "<input type='text' name='in'>";
    echo "<input type='submit'>";
    echo "</form>";
    
    ?>
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  6. #4
  7. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,047
    Rep Power
    487
    Anyone? Please?
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  8. #5
  9. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,047
    Rep Power
    487
    For anyone who doesn't understand what the problem is, they can copy/paste the code above into fiddle and try it out; they will see that on 1st submission, it all seems to go OK but if you enter a long string then for some reason, the controls no longer work for a 2nd submission
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  10. #6
  11. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,047
    Rep Power
    487
    Hmm, well, I found a sort of workaround to the problem ... here's the final code for those who would like to see it!

    PHP Code:
    <style>
    #usernote {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: black;
        color: black;
        padding: 5px;
        overflow: hidden;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=0);
        -moz-opacity: 0.0;
        -khtml-opacity: 0.0;
        opacity: 0.0;

        top: -500px;

    }
    </style>
    <?php
    echo "<h2>Text to serve as page title</h2>";
    if ( isset ( 
    $_POST['in'] ) && $_POST['in'] != "" ) {
        echo 
    "<div id='usernote'>";
            echo 
    $_POST['in'];
        echo 
    "</div>";
        echo 
    "<script src='js/jquery-1.10.1.min.js'></script>";
        echo 
    "<script src='js/jquery-ui.js'></script>";

        switch ( 
    $_POST['class'] ) {
            case 
    "information":
                
    $bgcol '#B5E0FF';
                break;
            case 
    "exclamation":
                
    $bgcol '#FFF19E';
                break;
        }

        
    ?>
    <script>
    <!--
    $( document ).ready(function() {

        $("#usernote").animate({
            opacity:'1'
            , backgroundColor: '<?php echo $bgcol?>'
            , top: '0px'
        });

        setTimeout( function() {
            $("#usernote").animate({
                opacity:'0.0'
                , top: '-500px'
            });
        }, 5000);
    });
    //-->
    </script>
        <?php
    }

    echo 
    "<form name='test' method='post'>";
    echo 
    "Class: ";
    echo 
    "<input type='radio' name='class' value='information'> Information<br>";
    echo 
    "<input type='radio' name='class' value='exclamation'> Exclamation<br>";
    echo 
    "<input type='text' name='in'>";
    echo 
    "<input type='submit'>";
    echo 
    "</form>";

    ?>
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984

IMN logo majestic logo threadwatch logo seochat tools logo