Stopping DIV overlaps? (javascript related, I promise)

[aalexaa]

Source files: http://knightsof1819.com/vs-sound/index.html
http://knightsof1819.com/vs-sound/main.css

I'm working on a website for a friend, and I managed to (mostly) prevent the left and right columns from overlapping each other, but if you make the page smaller on a Y axis, the Recent Posts and Contact Info crash into each other.

Is there any way to prevent this? I could not find any way to do it using CSS, so I considered Javascript as a good method.

It seemed like using offsetTop was a good way to have the Div "stop" at a certain point, so it doesn't crash into the div above it, but I couldn't get it to work. I know it isn't an issue with my browser, because i can use javascript both to set the position of the element, as well as return the value of offsetTop.

I'm not sure if I should use a while/do loop or an if statement, though.

Any suggestions?

[oesxyl]

Source files: http://knightsof1819.com/vs-sound/index.html
http://knightsof1819.com/vs-sound/main.css

I'm working on a website for a friend, and I managed to (mostly) prevent the left and right columns from overlapping each other, but if you make the page smaller on a Y axis, the Recent Posts and Contact Info crash into each other.

Is there any way to prevent this? I could not find any way to do it using CSS, so I considered Javascript as a good method.
is not in this case. You can't use js to fix html, close tags you forget to close or things like that, and using js to put elements in given places in the viewport will fail soon or later.

Any suggestions?
build a semantic structure for your document, validate your html markup and after this css and will work without javascript.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fknightsof1819.com%2Fvs-sound%2Findex.html

best regards

[aalexaa]

is not in this case. You can't use js to fix html, close tags you forget to close or things like that, and using js to put elements in given places in the viewport will fail soon or later.


build a semantic structure for your document, validate your html markup and after this css and will work without javascript.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fknightsof1819.com%2Fvs-sound%2Findex.html

best regards

I got everything validated, I'm still having the same problem.

I don't know if I should just resign myself to the fact that anyone who feels like squishing their browser window fewer than, say, 500 pixels is going to see a bad website... :(

[oesxyl]

I got everything validated, I'm still having the same problem.
fine, :)

I don't know if I should just resign myself to the fact that anyone who feels like squishing their browser window fewer than, say, 500 pixels is going to see a bad website... :(
the contact block have position: fixed, seems normal to overlap when the windows height is small. We need a idea what to do when the sum of the height of 'recent posts' block and 'contact info' is grater then window height. :)
this include also a js solution if you can't find another way, :)
so what we can do with the difference?

best regards

[oesxyl]

I got everything validated, I'm still having the same problem.

I don't know if I should just resign myself to the fact that anyone who feels like squishing their browser window fewer than, say, 500 pixels is going to see a bad website... :(
thinking hard, :)
a idea is to use js, since you can't do this with css, to remove position: fixed from contact info when the window height is under a given value.

best regards.

[aalexaa]

That seems like a really good idea. My javascript is a bit rusty, though, can you refresh me on how to find the height of the window? I'm pretty sure I could figure out the rest from there.

Thank you for all your help!

[oesxyl]

That seems like a really good idea. My javascript is a bit rusty, though, can you refresh me on how to find the height of the window? I'm pretty sure I could figure out the rest from there.

Thank you for all your help!
innerHeight in firefox, safari, opera and document.body.clientHeight in ie.

http://www.javascriptkit.com/jsref/window.shtml

best regards

[aalexaa]

innerHeight in firefox, safari, opera and document.body.clientHeight in ie.

http://www.javascriptkit.com/jsref/window.shtml

best regards

I worked on it a bit more, and I got to about the same point - it tells me what the window height is just fine, but it won't do anything to the style of the div when the window height is less than a specified number. :\

I did get the code from another website, because I couldn't figure out how to make it cross-compatible, but it works just fine for me, in terms of alerting me to what the window height is.



<script type="text/javascript">

var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}

if (myHeight < 390) {
alert(myHeight);
document.getElementById("contact").style.position = "absolute";
document.getElementById("contact").style.top = "140px";
document.getElementById("contact").style.bottom = "";
}

</script>

[oesxyl]

try this:

function fixcontact(){
height = document.body.clientHeight ?
document.body.clientHeight :
window.innerHeight;
width = document.body.clientWidth ?
document.body.clientWidth :
window.innerWidth;
if(height < 390){
contact = document.getElementById('contact');
contact.style.position = 'absolute';
contact.style.top = '140px';
contact.style.bottom = '';
}
}

window.onload = fixcontact;


best regards

[aalexaa]

try this:

function fixcontact(){
height = document.body.clientHeight ?
document.body.clientHeight :
window.innerHeight;
width = document.body.clientWidth ?
document.body.clientWidth :
window.innerWidth;
if(height < 390){
contact = document.getElementById('contact');
contact.style.position = 'absolute';
contact.style.top = '140px';
contact.style.bottom = '';
}
}

window.onload = fixcontact;


best regards

It worked!

But now, the bottom of the contact info is cut off - you have to make the window bigger to see it all. I tried to remove the position:fixed from it, and it wouldn't display the rest.