Brady » JavaScript

Javascript Same Height Div’s Update

Brady — Thu, 14 Aug 2008 15:26:39 +0000

A while back I posted a way of making same height div’s but came across an issue when padding was involved. Well I’ve modified my code to take into account padding. Now the obvious thing to do would be to be to check padding on a div and subtract it from the height, but it’s not that easy. You would have to check three things: padding, paddingTop and paddingBottom. For some reason when I was checking padding I couldn’t get a value from JavaScript, this had me really stumped but after a nights sleep I came up with a better and more simpler way of sorting the padding issue. This is to let the code run and let it re-height the div’s and let the padding mess things up then run the same thing again and check for height differences from last time we checked. Oooohhh look the height has gone up 10px from last time thanks to a padding of 5px on the div. Now we know there is 10px of padding lets remove it. Sorted!

JavaScript Code:

function sameHeight(divs) // Bring in an array of your divs
{
var highest = 0;
var heighttu = 0;
for(i = 0; i < divs.length; i++) // Loop through the divs
{
// Check to see if this div is the highest?
if(document.getElementById(divs[i]).offsetHeight > highest)
{
// Yes its the highest so set the highest value to this div's height
highest = document.getElementById(divs[i]).offsetHeight;
}
}
// Loop through divs and set their hieght all the same
for(i = 0; i < divs.length; i++)
{
document.getElementById(divs[i]).style.height = highest+"px";
}
// now get offset hieght again and we may found we have gone higher this is because of padding
if(document.getElementById(divs[0]).offsetHeight > highest)
{
// correct the height
highest = highest - (document.getElementById(divs[0]).offsetHeight - highest);
// Correct divs
for(i = 0; i < divs.length; i++)
{
document.getElementById(divs[i]).style.height = highest+"px";
}
}
}

Javascript Same Height Div’s

Brady — Thu, 05 Jun 2008 10:50:25 +0000

Recently I had to make some divs the same height. Usually I would just pad the bottom of a div with page breaks but I couldn’t do that this time round as the page content is dynamic and the height of the divs could change.

First thing I did was look online for answers and sure enough there were solutions but looking at them they seemed over complicated so I decided to write my own solution.

Javascript Code:

Update at: http://l3rady.com/2008/08/14/javascript-same-height-divs-update/

Simply pass an array of your divs to the function. Easy peasy….

Just an extra word of warning… Be aware of using padding on the blocks you pass to this function. If the paddings are different in each block then they may not end up being the same height. Although you could modify the function to check for the use of padding and alter the heights accordingly.

Ajax and JavaScript Exploiting

Brady — Sat, 18 Aug 2007 17:12:04 +0000

You may be aware of website-codes.com if not let me tell you. The idea of it was to provide php scripts that could run from any webhost that didn’t have php support. How I would achieve this would be through a line of JavaScript that user would put on their site. Well the website has been put on hold as I haven’t found time to code it.

Well anyway because I’ve been doing a lot of Ajax and JavaScript coding for where I work it had me thinking. If you could get Ajax to work on any webhost with only putting one line of code on their site? Well sure enough you can. I did a bit of testing there and then and it worked 100%. I couldn’t believe it. Because with JavaScript you can literally change the whole look and feel of a webpage, if you think hard enough you can see how this can be very dangerous to people’s websites. One thing that comes straight to mind is that you can use this one line of code to turn a whole page into a login page look-a-like (phishing) I now see why many public pages don’t allow JavaScript. E.G. MySpace.