Extra text shown on oveflow: hidden
- by TRiG
I'm keeping the main content area of the webpage small, so that footer navigation can be seen "above the fold". This is done by javascript setting the main content <div> thus:
sec.style.height = '265px';
sec.style.overflow = 'hidden';
And then using javascript to insert a button to change the style back to normal:
sec.style.height = 'auto';
The problem is that the cut-off point of 265px (dictated by the size of an image which I don't want to hide) doesn't quite match the gap between lines of text. This means that there the tops of tall letters show as funny little marks. Is there any way to hide text which is partially showing in a <div style="overflow: hidden;">?
Edit to add: Full javascript
var overflow = {
hide: function() {
var sec = app.get('content_section');
sec.style.height = '263px';
sec.style.overflow = 'hidden';
overflow.toggle(false);
},
toggle: function(value) {
var cnt = app.get('toggle_control');
if (value) {
var func = 'hide';
cnt.innerHTML = 'Close « ';
} else {
var func = 'show';
cnt.innerHTML = 'More » ';
}
cnt.onclick = function() {eval('overflow.' + func + '();'); return false;};
cnt.style.cursor = 'pointer';
cnt.style.fontWeight = 'normal';
cnt.style.margin = '0 0 0 857px';
},
show: function() {
var sec = app.get('content_section');
sec.style.height = 'auto';
overflow.toggle(true);
}
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', overflow.hide, false);
} else {
window.onload = function() {return overflow.hide();};
}
