Solved

100% page height using JS not working on certain pages

Posted on 2012-03-21
2
228 Views
Last Modified: 2013-05-15
I've got a strange problem where the middle section of some of the pages aren't stretching to 100% page height, which results in there not being the full left hand border on that column.

The pages use javascript to ensure all columns - i.e. the middle and left column - are the same height, which creates the middle left hand border separating it from the left hand column.

The problem is on the login page  (please click on the 'Brentwood' link and go to 'Login' on the top menu http://www.inside-guides.co.uk/.) where the order is cut off because the javascript doesn't seem to be working to make the middle column as long as the left; hence the lack of border half way down.  

This problem doesn't happen on the Contact page  (again via the 'Brentwood' site and go to 'Contact' http://www.inside-guides.co.uk/)for example, where the middle column is technically shorter than the left due to lack of content, but works due to the javascript making it as long as the lft column, hence the border goes all the way to the footer.

Hope this all makes sense, please let me know if I can clarify further.

To summarise, they both use the same template and javascript is to make each column the same height = i.e. to the top of the footer, but it doesn't work on the Login page.

I really can't understand why so any help perhaps using a code inspector would be very much appreciated.

JS code placed in the head.css on each page:

<script type="text/javascript">
matchColumns=function(){ 
     var divs,contDivs,maxHeight,divHeight,d; 
     divs=document.getElementsByTagName('div'); 
     contDivs=[]; 
     maxHeight=0;  
     for(var i=0;i<divs.length;i++){  
          // make collection with <div> elements with class attribute "equal"
          if(/\bequal\b/.test(divs[i].className)){ 
                d=divs[i]; 
                contDivs[contDivs.length]=d;  
                if(d.offsetHeight){ 
                     divHeight=d.offsetHeight;                  
                } 
                else if(d.style.pixelHeight){ 
                     divHeight=d.style.pixelHeight;                  
                } 
                maxHeight=Math.max(maxHeight,divHeight); 
          } 
     } 
     for(var i=0;i<contDivs.length;i++){ 
          contDivs[i].style.height=maxHeight + "px"; 
     } 
}  
window.onload=function(){ 
     if(document.getElementsByTagName){ 
          matchColumns();            
     } 
} 
</script>

Open in new window



Login page code where the 100% JS page height isn't working:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--#include virtual="/System/Startup_FranchiseClient.asp"-->
<html xmlns="http://www.w3.org/1999/xhtml">
<%
EnsurePageIsHTTPS
If IsFranchiseClientLoggedIn = True then
Response.Redirect GetAdvertiserAdminHomePage
End if
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Inside-Guides.co.uk - Advertiser Login</title>
<!--#include virtual="/Assets/Templates/Public/Franchise/HeadCSS.asp"-->
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.min.js"></script>
</head>
<body class="login" onload="javascript:document.getElementById('strUsername').focus();">
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateStart_https.asp"-->
<div class="content clearfix">
<div id="form" class="form">
<h1>Advertiser Login</h1>
<p>Welcome to the advertiser area.  Please enter your login details below:</p>
<span class="ErrorText"><% = strSecurity_LoginError %></span>
<form id="form" name="LoginForm" method="post" action="Default.asp">
<input type="hidden" name="ValidateLogin" value="1" />
<label>Email
<span class="small">Email used to register</span>
</label>
<input type="text" id="strUsername" name="strUsername" value="" />
<br />
<label>Password
<span class="small">Password used to register</span>
</label>
<input type="password" name="strPassword" value="" />
<button type="submit">Log-in</button>
<div class="spacer"></div>
</form>
</div>
<p> * If you have forgotten your password, please <a href="ForgotPassword.asp">click here</a></p>
</div>
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateEnd.asp"-->
</body>
</html>
<!--#include virtual="/System/Shutdown.asp"-->

Open in new window


CSS:

#middle {padding-top:7px;float:left;width:60%;border-right:1px solid #edeaec;border-left:1px solid #ede9e8;}
#middle.dir {width:78.5%;border-right:0;}

Open in new window


Many thanks.
0
Comment
Question by:UName10
2 Comments
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 37748897
Your question was already answered.  You have to have the CSS setup so that your 100% is 100% of something else.  Look at the CSS in the code I posted on your previous question.  'html' and 'body' need to be previously defined to be 100% before your javascript will work predictably.
0
 

Author Comment

by:UName10
ID: 37772107
Yes they're both set to 100% and I posted this one to re-phrase the question including the javascript which creates equal length columns according to the longest one.  Any ideas?  Did you see the links OK to see what I meant?
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Problem to be resolved in this article Currently, development of website and web application can be done without writing thousands of lines of programming code by hand. Description This can be done through by using a open source framework such …
Read about why website design really matters in today's demanding market.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now