More Group Sites
Education Books
School Rankings
Jobless Net
Better Home
Enviro++
更好教育论坛


Help | Subscribe/Unsubscribe | Rules | Other Group Sites: Better Education | Better Education Forum
Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error

Share
Options
View
Go to last post Go to first unread
hong  
#1 Posted : Saturday, 21 November 2015 8:56:36 AM(UTC)
hong

Rank: Administration

Reputation:

Groups: AcademicCoachingSchool, admin, Administration, BookSeller, CatholicSchool, CoachingAdult, CoachingProfessional, CoachingSports, ExtraCurriculumCoaching, IndependentSchool, Moderator, MusicTeacher, PrivateSchool, PublicSchool, SelectiveSchool, tutor
Joined: 23/11/2008(UTC)
Posts: 519

Dynamically align content of a div to bottom or middle or other positions

Vertical align only applies to table / table-cell
Code:
<div id="container" style="display: table;">
    <div id="top_content" style="display: table-cell; vertical-align: top;">
   ...
   </div>
   <div id="middle_content" style="display: table-cell; vertical-align: middle;">
   ...
   </div>
   <div id="bottom_content" style="display: table-cell; vertical-align: bottom;">
   ...
   </div>


Code:
<div id="container" style="position: relative; min-height: 1500px">
    <div id="top_content">
   ...
   </div>
   <div id="middle_content" style="position: absolute; bottom: 700px;">
   ...
   </div>
   <div id="bottom_content" style="position: absolute; bottom: 0">
   ...
   </div>


Note the difference between the relative position and the absolute position. Relative position applies an offset to the current position top, bottom, left and right (use positive number if going into the box and negative number otherwise) but keep the flow while the absolute position can cause overlap. "position: absolute; bottom: 0" means no offset to the bottom of the parent container while "position: absolute; bottom: 700px;" means go into the parent container by 700px, ie. up by 700px.

You can change the visibility / display of the content divs according to the size of change of the container, for example, the page length change of a datatable.
Code:
		            
                     $('#ctl00_ContentPlaceHolder1_GridView1').dataTable({
                         ...
                         "drawCallback": function (oSettings) {
		                responsiveHelper_dt_basic.respond();
		                var table = $('#ctl00_ContentPlaceHolder1_GridView1').DataTable();
		                var bottom_content = document.getElementById('bottom_content');
		                var middle_content = document.getElementById('middle_content');
		                var container = document.getElementById('container');
		                
		                if (table.page.len() == 100) {
		                    bottom_content.style.display = 'block'; // show - use this for block elements (div, p)
		                    bottom_content.style.visibility = 'visible';
		                    middle_content.style.display = 'block'; // show - use this for block elements (div, p)
		                    middle_content.style.visibility = 'visible';
		                    container.style.minHeight = '1800px';
                        }
		                else if (table.page.len() == 50) {
		                    bottom_content.style.display = 'block'; 
		                    bottom_content.style.visibility = 'visible';
		                    middle_content.style.display = 'none';
		                    middle_content.style.visibility = 'hidden';
		                    container.style.minHeight = '1800px';
		                }
		                else if (table.page.len() == 25) {
		                    bottom_content.style.display = 'none';
		                    bottom_content.style.visibility = 'hidden';
		                    middle_content.style.display = 'block';
		                    middle_content.style.visibility = 'visible';
                            //ensure bottom ad banner has no gap
		                    container.style.minHeight = '1600px';
		                }
		                else {
		                    bottom_content.style.display = 'none';
		                    bottom_content.style.visibility = 'hidden';
		                    middle_content.style.display = 'none';
		                    middle_content.style.visibility = 'hidden';
                        }
		            },
                        ...
		        });


Example: see The right side ad banners on desktop

Edited by user Saturday, 21 November 2015 9:26:53 AM(UTC)  | Reason: Not specified

Sponsor
Rss Feed  Atom Feed
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.