empty space at bottom of pages

[bzmhmommy]

The pages on my site show up with a huge empty space when you scroll to the bottom of the page. They didn't always do this but I can't find anything in the html to account for it. Does anyone have any clue why this happens? http://www.beckwith-wiedemann.info/

Thanks in advance!

-Julie

[boogyman]

Hi Julie, there isn't really anything wrong with the structure of your code per say. I would advice away from using tables as your choice of layout, however using them has nothing to do with this problem. Using tested a couple of different layouts formats and disabled a few things here and there, and what I found was that your problem is within the CSS of the menu script. You have the menu's invisible, however that does not take away their "space" within the browser, it just masks the color of them..

I would also suggest that you take all of your javascript code and put it in an external file. That would save people time to browse throughout the site, since you would only need to download the menu script once.. where right now the browser downloads and interprets the menu script after every page change, whether it be a reload or a new part of the site.

<script type="text/javascript" src="menu.js"></script>

would be to include your external javascript, where everything between the script tags are in a file called menu.js.

[boogyman]

...

function hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++)
if (!keepMenus[count])
menu[count][0].ref.visibility='hidden'.ref.style='display:none';
changeCol(litNow, false);
}

...

function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;

for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {
// Variable for holding HTML for items and positions of next item.
var str = '', itemX = 0, itemY = 0;

// Remember, items start from 1 in the array (0 is menu object itself, above).
// Also use properties of each item nested in the other with() for construction.
for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {
var itemID = 'menu' + currMenu + 'item' + currItem;

// The width and height of the menu item - dependent on orientation!
var w = (isVert ? width : length);
var h = (isVert ? length : width);

// Create a div or layer text string with appropriate styles/properties.
// Thanks to Paul Maden (www.paulmaden.com) for helping debug this in IE4, apparently
// the width must be a miniumum of 3 for it to work in that browser.
if (isDOM || isIE4) {
str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; display:none;';
if (backCol) str += 'background: ' + backCol + '; ';
str += '" ';
}
if (isNS4) {
str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' +  w + '" height="' + h + '" visibility="inherit" ';
if (backCol) str += 'bgcolor="' + backCol + '" ';
}
if (borderClass) str += 'class="' + borderClass + '" ';

// Add mouseover handlers and finish div/layer.
str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';

// Add contents of item (default: table with link inside).
// In IE/NS6+, add padding if there's a border to emulate NS4's layer padding.
// If a target frame is specified, also add that to the <a> tag.

str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>';
if (target > 0) {

// Set target's parents to this menu item.
menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;

// Add a popout indicator.
if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>';
}
str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
if (isVert) itemY += length + spacing;
else itemX += length + spacing;
}
if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
ref.style = 'display: none';
}

// Insert a div tag to the end of the BODY with menu HTML in place for IE4.
if (isIE4) {
document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden; display: none;">' + str + '</div>');
ref = getSty('menu' + currMenu + 'div');
}

// In NS4, create a reference to a new layer and write the items to it.
if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
itemName = 'menu' + currMenu + 'item' + currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
   }
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
ref.style = "display: block";
   }
}

...

the changes I made are in bold text, and since your code is so long I only have in here the functions in which I changed, Just copy and repaste over them, or just go and change to how I have now

[bzmhmommy]

Thanks so much for the help on the ghost space Pissa ! And for the tip on the external .js file. Now I just have to figure out how to create a .js file LOL. I got those scripts from here on Dynamic Drive so this is the only way I know of so far to use them. I definitely like your idea of making an external file though so I'm going to try to figure that out.

By the way, what do you mean about advising against tables? What would you suggest using instead? I agree that tables aren't that elegant, but I'm at a loss as to what to use if not tables. I'm frames ignorant but willing to learn.

I just upgraded to Vista and half the stuff I was using on FrontPage is no longer available with the new Expression Web. So for example, a slide show I had on the index page as well as hover buttons (which were inserted via FrontPage before) had to be eliminated because inserting new script for those clashed with the javascript menu. In effect, I'm having to rebuild most everything but the text anyway, so learning a new method doesn't put me off. So suggest away! :-)

-Julie

[boogyman]

open up a notepad, and when you go to save it, put .js after it, and when it is saved it will auto convert it to javascript type

and i was talking about using div's and css. then you can export the css into an external file again and improve the speed of the loading time even more


now as for where you got that script? may i suggest that you make a reply / post in that forum so they know of the issue so others wont have the same problem?

I was using on FrontPage is no longer available with the new Expression Web.

from my experience, frontpage is actually a vary poor frontend pagemaker. Personally I use dreamweaver, but I also use the coding part, and I hard code all of my sites.

So for example, a slide show I had on the index page as well as hover buttons (which were inserted via FrontPage before) had to be eliminated because inserting new script for those clashed with the javascript menu.

This is probably just an issue with variable interlooping. What I mean by that is that the two scripts are attempting to use the same variable so the definition / value of it changes so that it mixes them both up. for example, the variable ( i ) is used quite heavily and so is ( menu ) ... so I think that if you change all of the variables in your script you might have some better luck getting them to work in conjunction. the easiest way of doing this would be Ctrl+H in notepad. I do not know what it is in frontpage but if you search the top menu function look for Replace or Find and you should be able to put in the variable you want to replace then have it replaced by... that way you do not need to worry about "missing" one. I am not going to say this will definiitely fix your problem, that it might be the problem, and if it is, then this should do the trick

[boogyman]

and Julie I am not saying that you need to use a whole new method, because tables are not syntatically wrong, I am just saying I would advise against it, due to the loading times.

[bzmhmommy]

Pissa, yet again, thank you for the help. I hadn't thought of using notepad, but it makes perfect sense now. I'll try it out this evening and see how it goes.

As for the menu script, I didn't get it on the forums. I got it on in the scripts section of Dynamic Drive. It's called Top Navigation Bar II.