Jump to content

Problems calculating appropriate height for DIV

cgm225

By cgm225
in PHP Coding Help

 Share

Recommended Posts

cgm225 Advanced Member

cgm225

Posted
Posted

I have a photo/video gallery I coded myself (see here for example).  My problem is with the video portion of the gallery.

 

Currently, to make the website wrapper actually wrap around all the video thumbnails (which are are DIV's), I calculate the number of total videos, and then multiple that total by an absolute number to get a height for the container DIV they are all found in, like so:

 


//I assign the value to $number_of_thumbnails_on_page earlier in the script...

$video_container_modifier = ((ceil($number_of_thumbnails_on_page/2)) * 210) . "px";

//Then later I place all the thumbnails (which are in DIV's) on the page as so...

echo "<div class='video_container' style='height:$video_container_modifier;'>\n";

    //The following will place thumbnails on the page
    $number = ($page * $number_on_each_page - ($number_on_each_page));
    for($i = 1; $i <= $number_on_each_page; $i++) {
        video_thumbnail($album,$number);
        $number++;
        }

    echo "\t\t\t\t</div>\n";

 

However, I am having problems with the following behavior.  At the bottom of the photo gallery, there is an option to see how many photos the user wants to display, and as that number is increased, the margin at the bottom of the video page increases more which each increment higher.

 

Any ideas?

 

Thank you all in advance!

 

 

 

 

 

 

If needed, here is the full video script (still a BIG work in progress) and CSS file::

 

<?php

    //Acquire required variable
    $album = $_GET['album'];
    $page = $_GET['page'];

    //The following will check to see if there are videos on the "large" server, and if so, determine
    //if they have been symbolically linked to the "web" server
    if (file_exists("$videos_server_path/videos/$album")){
        //Nothing will be done because they are linked into the "web" server
        } elseif (file_exists("/web/large/kilbad.com/media/videos/$album")) {
        system("mkdir $videos_server_path/videos/$album");
        system("ln -s /web/large/kilbad.com/media/videos/$album/*.avi $videos_server_path/videos/$album");
        }

    //Check if the video album is restricted by .htaccess; if so, add authentication as well
    if (file_exists("$videos_server_path/videos/$album/.htaccess")) {
            general_permissions();}

    //Set media page subtitle
    media_page_subtitle($album);

    //Set a default album and page number if one is not included
    if (!$page) {$page = 1;}
    if (!file_exists("$videos_server_path/videos/$album/")) {
        header("Location:http://www.kilbad.com/home/error");
    }

    //If the first video is not present, all the AVI files will be renamed, starting
    //with 0000.avi, and a "thumbnails" directory will be make.  Also, the entire video album
    //directory will be recursively CHMOD to 755
    if (file_exists("$videos_server_path/videos/$album/thumbnails/thumbnail-0.png")) {} else {
        $dir = "$videos_server_path/videos/$album/";
        system("chmod -R 755 $dir");
        $num = 0;
        $type = ".avi";
        foreach (glob ( $dir . "{*.avi,*.AVI}", GLOB_BRACE ) AS $file ) {rename ($file,$dir . sprintf("%04d", $start++) . $type );}
        system("mkdir $videos_server_path/videos/$album/thumbnails");
        system("chmod -R 755 $dir");
    }

    //Determine how many videos there are
    if (file_exists("$videos_server_path/videos/$album/album.txt")){
        $album_file = "$videos_server_path/videos/$album/album.txt";
        $fh = fopen($album_file, 'r');
        $number_of_files = fread($fh, filesize($album_file));
        fclose($fh);
        } else {
            $number_of_files = count(glob("$videos_server_path/videos/$album/*.avi"));

            //Store the number of how many videos there are on the "web" server
            $file_for_storage_of_count = "$videos_server_path/videos/$album/album.txt";
            $handle = fopen($file_for_storage_of_count, 'w');
            fwrite($handle, $number_of_files);
            fclose($handle);
        }

    //Determine how many videos to display per page.
    if (!$_POST["number_displayed"]) {
        if (!$_SESSION['number_displayed']) {
            $number_displayed = 6;
            } else {
            $number_displayed = $_SESSION['number_displayed'];
            }
        } else {
            $number_displayed = $_POST["number_displayed"];
            $_SESSION['number_displayed'] = $number_displayed;
        }

    //The overall height of the website wrapper will be adjusted based on the
    //total number of videos, which I will keep to a maximum of six.
    if (($number_displayed * $page) > ($number_of_files)) {
        //$number_on_this_page = ($number_displayed * $page) - $number_of_files;

        $number_on_this_page = $number_displayed - (($number_displayed * $page) - $number_of_files);
        } else {

        $number_on_this_page = $number_displayed;}

       $video_container_modifier = ((ceil($number_on_this_page/2)) * 210) . "px";

    //The following will generate the pagination and navigation.
    $number_on_each_page = $number_displayed;
    $modifier = $number_on_each_page - 0.0000001 ;

    $number_of_pages_2 = $number_of_files / $modifier;
    $number_of_pages_ = round($number_of_pages_2, 2);

    if ($page > $number_of_pages_) {$page = ceil($number_of_pages_);}

    if ($number_of_pages_ < 1) {
        $number_of_pages_ = $number_of_pages;
        } else {
        $number_of_pages = ceil($number_of_pages_);
        }

    echo "\t\t\t<div class='photo_container'>\n";
   
    echo "\t\t\t\t<div class=\"photos_navigation_container\">\n";
    echo "\t\t\t\t\t<div class=\"photos_navigation_right\">\n";

    $next_number = ($page * $number_on_each_page);
    $next_page = $page + 1;
    buffer($next_number);

    if (file_exists("$videos_server_path/videos/$album/$buffer$next_number.avi")) {
        echo "\t\t\t\t\t\t<a href='http://www.kilbad.com/videos/$album/$next_page'>Next</a>\n";
        } else {
    }

    echo "\t\t\t\t\t</div>\n";
    echo "\t\t\t\t\t<div class=\"photos_navigation_left\">\n";

    $previous_number = ($page * $number_on_each_page - ($number_on_each_page)) - 1;
    $previous_page = $page - 1;
    buffer($previous_number);

    if (file_exists("$videos_server_path/videos/$album/$buffer$previous_number.avi")) {
        echo "\t\t\t\t\t\t<a href='http://www.kilbad.com/videos/$album/$previous_page'>Previous</a>\n";
        } else {
        echo "\t\t\t\t\t\t<span style=\"color:#ffffff;\">_</span>\n";
    }

    echo "\t\t\t\t\t</div>\n";
    echo "\t\t\t\t\t<div class=\"photos_navigation_center\">";

    echo "\n\t\t\t\t\t\t<a href='http://www.kilbad.com/photos/$album'>Photos</a> | ";

    $starting_pagination_number = $page - 2;
    if ($starting_pagination_number <= 1) {
        $starting_pagination_number = 1;
        } else {
        echo "<a href=\"http://www.kilbad.com/videos/$album/1\" title=\"First Page\">«</a> ";
    }

    $ending_pagination_number = $page + 2;
    if ($ending_pagination_number > $number_of_pages) {$ending_pagination_number = $number_of_pages;} else {}

    for($i = $starting_pagination_number; $i <= $ending_pagination_number; $i++){
        if($i == $page){
            echo("<span style='font-weight:800;text-decoration:underline;'>".$i."</span> ");
            }else{
            echo("<a href='http://www.kilbad.com/videos/$album/$i'>$i</a> ");
            }
    }

    if (($number_of_pages / $number_on_each_page) < 1){
        if($number_of_files == $number_on_each_page) {} else {
            if($i == $page){
                echo("<span style='font-weight:800;text-decoration:underline;'>".$i."</span> ");
                }else{}
        }
    } 

    if ($ending_pagination_number < $number_of_pages) {
        echo " <a href=\"http://www.kilbad.com/videos/$album/$number_of_pages\" title=\"Last Page\">»</a>";
        } else {
    }

    echo "\n\t\t\t\t\t</div>\n";
    echo "\t\t\t\t</div>\n\n";

    echo "\t\t\t\t<div class='video_container' style='height:$video_container_modifier;'>\n";

    //The following will place thumbnails on the page
    $number = ($page * $number_on_each_page - ($number_on_each_page));
    for($i = 1; $i <= $number_on_each_page; $i++) {
        video_thumbnail($album,$number);
        $number++;
        }

    echo "\t\t\t\t</div>\n";
    echo "\t\t\t</div>\n";

?>

 

 

/* START: General Layout */

html { 
    min-height:100%;
    margin-bottom:1px;}

body {
    background-color:#ffffff;
    color:#092150;
    font-family:verdana, sans-serif, arial;
    font-size:10pt;    
    line-height:1.3em;
    padding:0px;
    text-align:center;
    margin-bottom:72px;}

div.container {
    width:600px;
    text-align:left;    
    margin:72px auto 72px auto;}

div.top_section, div.section_bottom {
    border-style:solid;
    border-color:#d8dfea;}

div.top_section {
    height:60px;
    border-width:0px 1px 0px 1px;}

div.section_bottom {
    border-width:0px 1px 0px 1px;}

h1 {
    font-size:16pt;
    letter-spacing:8px;
    font-weight:400;
    margin:0px 0px 0px 10px;
    padding:18px 2px 0px 0px;}

h2.no_style, h3.no_style, h4.no_style, p.no_style, div.constrained_content {
    font-size:10pt;
    font-weight:400;}

h2.no_style, h3.no_style, h4.no_style, p.no_style {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;}

div.constrained_content {
    margin:0px 10px 0px 10px;
    padding:0px 0px 0px 0px;
    text-align:justify;
    height:200px;}

img.border_image {
    height:5px;
    width:600px;
    display:block;}

a:link, a:visited, a:active {
    background-color:transparent;
    text-decoration:none;
    font-weight:400;
    border:0px;}

a:link, a:active {
    color:#3b5998;}

a:visited {
    color:#001c83;}

a:hover {
    text-decoration:underline;}

/* END: General Layout */


/* START: Friends Page Layout */

ul.tildes {
    float:left;
    width:33%;
    padding:0px;
    list-style:none;
    margin:6px 0px 0px 0px;}

/* END: Friends Page Layout */


/* START: Frontpage Layout */

ul.friend_avatars {
    list-style:none;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 24px;
    text-align:left;}

.friend_avatars li {
    float:left;
    margin:6px 0px 0px 8px;}

li.friend_avatars_last {
    padding:35px 0px 0px 0px;}

img.friend_image {
    height:50px;
    width:50px;
    padding:0px;
    border:#3b5998 1px solid;}

/* END: Frontpage Layout */


/* START: Footer Layout */

.footer_container {
    padding-top:2px;
    width:600px;}

.footer_left {
    float:left;
    text-align:left;
    margin-left:8px;}

.footer_right {
    float:right;
    text-align:right;
    margin-right:8px;}

a:link.black_link, a:visited.black_link, a:active.black_link, a:hover.black_link {
    background-color:transparent;
    color:#092150;
    font-weight:400;
    border:0px;}

a:link.black_link, a:visited.black_link, a:active.black_link {
    text-decoration:none;}

a:hover.black_link {	
    text-decoration:underline;}

/* END: Footer Layout */


/* START: Photo Elements */

div.photo_container {
    text-align:center;
    padding:4px 4px 2px 4px;}

div.photos_navigation_container {
    width:522px;
    margin:0px auto 0px auto;}

div.photos_navigation_right {
    width:60px;
    float:right;
    text-align:right;
    padding:0;
    margin:0;}

div.photos_navigation_left {
    width:60px;
    float:left;
    text-align:left;
    padding:0;
    margin:0;}

div.photos_navigation_center {
    width:402px;
    float:left;
    text-align:center;}

div.photo_nav_left, div.photo_nav_right, div.photo_nav_center {
    width:33%;}

div.photo_nav_left {
    float:left;
    text-align:left;}

div.photo_nav_right {
    float:right;
    text-align:right;}

div.photo_nav_center {
    float:left;
    text-align:center;}

photo_nav_constrained {
    width:100%}

img.thumbnail {
    border:#3b5998 1px solid;
    margin:6px;}

img.photo {
    border:#3b5998 1px solid;
    margin:6px;}

div.photo_caption, div.photo_navigation {
    width:500px;
    margin:0px auto 0px auto;}

form.photo_caption {
    margin:0px;
    padding:0px;}

input.photo_caption, textarea.photo_caption {
    background-color:#ffffff;
    font-size:10pt; 
    font-weight:400;
    color:#092150; 
    border:#d8dfea 1px solid;}

input.photo_caption {
    margin-left:0px;}

textarea.photo_caption {
    margin:0px;}

form.number_displayed {
    padding:0px 0px 6px 0px;
    margin:0;}

div.number_displayed {
    width:560px;
    text-align:right;
    padding:0;
    margin:0;}

select.number_displayed {
    background-color:#ffffff;
    font-size:8pt;
    font-weight:400;
    color:#092150;
    border:#d8dfea 1px solid;}

option.number_displayed {
    background-color:#ffffff;
    font-size:8pt;
    font-weight:400;
    color:#092150;}

/* END: Photo Elements */


/* START: Header Navigation Menu */

div.navlist {
    height:20px;
    padding:0px 0px 8px 0px;
    margin:0px 0px 0px 0px;
    border-right:#d8dfea 1px solid;
    border-left:#d8dfea 1px solid;}

ul.navlist {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    color:#3b5998;
    width:598px;
    display:inline;}

.navlist li {
    list-style:none;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    color:#3b5998;
    text-decoration:none;
    width:99px;
    float:left;
    text-align:center;
    border-top:#d8dfea 1px solid;
    border-bottom:#d8dfea 1px solid;
    border-right:#d8dfea 1px solid;}

li.navlist_last {
    width:98px;
    border-right:#d8dfea 0px solid;}

.navlist a {
    margin:0px 0px 0px 0px;
    padding:0px 0px 2px 0px;
    background-color:#ffffff;
    color:#3b5998;
    text-decoration:none;
    float:left;
    width:100%;}

.navlist a:hover {
    background-color:#d8dfea;
    text-decoration:none;
    color:#3b5998;
    padding:0px 0px 2px 0px;}

/* END: Header Navigation Menu */


/* START: Contact Elements */

input, textarea {
    background-color:#ffffff;
    font-family:verdana, sans-serif, arial;
    font-weight:400; 
    font-size:10pt; 
    color:#092150;
    border:#d8dfea 1px solid;}

form.contact {
    border-width:0px;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;}

input.contact_name {
    margin:8px 0px 0px 20px;}

input.contact_phone{
    margin:8px 0px 0px 14px;}

input.contact_email{
    margin:8px 0px 0px 14px;}

input.contact_subject{
    margin:8px 0px 0px 4px;}

textarea.contact_message{
    margin:8px 0px 0px 88px;
    padding:0px 0px 0px 0px;}

span.contact_phone, span.contact_email, span.contact_subject {
    margin:0px 2px 0px 20px;}

span.contact_name {
    margin:0px 0px 0px 20px;}

input.contact_submit {
    margin:8px 0px 0px 88px;}

/* END: Contact Elements */


/* START: SiteMap Elements */

li.tildes_indent {
    margin-left:20px;}

/* END: SiteMap Elements */


/* START: WA Page Elements */

div.text_container {
    text-align:justify;
    margin:0px 10px 0px 10px;
    padding:0px 0px 4px 0px;}

.italic {
    font-style:italic;}

div.link_container {
    margin-left:20px;}

ul.wa {
    list-style:none;
    margin:0;
    padding:0;
    text-indent:0;}

.list_tilde {
    color:#a4a4a4;}

/* END: WA Page Elements */


/* START: Favorites Elements */

div.favorites_container {
    width:450px;
    height:358px;
    margin-left:10px;}

ul.favorites, ul.favorites_top, ul.favorites_bottom {
    margin-left:20px;
    padding-left:0px;
    list-style:none;}

ul.favorites {
    margin-top:0px;}

ul.favorites_bottom {
    margin-bottom:15px;}

.float_left {
    float:left;}

.float_right {
    float:right;}

/* END: Favorites Elements */


/* START: Video Elements */

div.video_container {
    text-align:center;
    padding:6px 0px 0px 0px;
    margin:0px 0px 0px 30px;}

div.video_thumbnail {
    background-repeat:no-repeat;
    width:250px;
    height:185px;
    float:left;
    margin:6px;
    padding:0px 0px 0px 0px;
    border:#3b5998 1px solid;}

div.video_matte {
    background-repeat:no-repeat;
    width:250px;
    height:50px;
    padding:0px 0px 0px 0px;
    margin:135px 0px 0px 0px;}

span.video_matte {
    display: block;
    padding:4px 0 0 0;}

/* END: Video Elements */


/* START: Login Elements */

fieldset.login, fieldset.login_submit, form.login {
    border-width:0px;
    padding:0px;}

form.login, fieldset.login_submit {
    margin:0px;}

fieldset.login {
    margin:0px 0px 0px 20px;}

input.login_username {
    margin:11px 0px 0px 10px;}

input.login_password {
    margin:8px 0px 0px 10px;}

span.login_password_span {
    margin:0px 2px 0px 00px;}

input.login_submit {
    margin:8px 0px 0px 105px;}

/* END: Login Elements */


/* START: Fourth Year Elements */

h2.fourth_year {
    font-size:10pt;
    letter-spacing:4px;
    font-weight:400;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    text-decoration:underline;}

/* END: Fourth Year Elements */


/* START: Note/Blog Elements */

h2.notes {
    font-size:12pt;
    font-weight:400;
    letter-spacing:4px;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;}

div.notes {
    border-style:solid;
    border-color:#d8dfea;
    border-width:1px 1px 1px 1px;
    padding:6px 12px 6px 12px;
    margin:0px 0px 18px 0px;
    background-image:url('http://www.kilbad.com/media/graphics/note_background.jpg');
    background-repeat:repeat;
    background-position:top left;}

div.notes_body {
    margin:6px 0px 6px 0px;
    padding:0px 0px 0px 0px;}

form.note{
    border-width:0px;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;}

input.note_title{
    margin:8px 0px 0px 4px;}

textarea.note_body{
    margin:8px 0px 0px 88px;
    padding:0px 0px 0px 0px;}

span.note_title {
    margin:0px 2px 0px 42px;}

input.note_submit {
    margin:8px 0px 10px 88px;}

/* END: Note/Blog Elements */

 

If you have any other feedback for me, anything else would be greatly appreciated!  Thanks again.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.