CODEWITHSUNDEEP
javascriptcssoverflow
TRiG
TRiG

Reputation: 10643

Extra text shown on overflow: hidden

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;">?

Screenshot http://timothy.green.name/Temp/overflow.jpg

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();};
}

Upvotes: 0

Views: 612

Answers (3)

Casey Chu
Casey Chu

Reputation: 25463

You could apply a semi-transparent gradient above the "More »" bar, so it looks like the text is fading out, making the cut bottoms less of a problem.

example http://img687.imageshack.us/img687/7564/sitametsit.png

Upvotes: 1

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146380

In order to do that you need to:

  1. Find out the height in pixels of a line
  2. Have all lines of the same height

For #1, setting a line-height in pixels may do the trick (I haven't tested it) but it can affect your layout in monitors with different DPI settings (you set font sizes in relative units, don't you?). Otherwise, you can render a dummy DOM node with two lines and read its height from its computed style.

For #2, I'm unsure. Having no pictures, subscripts or superscripts is a good beginning.

Whatever, I'm pretty sure it's not worth the effort. Users are not as smart as developers think but they aren't as dumb as usability experts believe.

Upvotes: 0

Keith Rousseau
Keith Rousseau

Reputation: 4475

No - this isn't really possible. I do question your decision to keep the footer navigation above the fold, though. The fold really isn't important as once thought - I don't feel like looking up the articles, but there is plenty of research on that. And besides, your primary navigation shouldn't be in your footer.

Upvotes: 0

Related Questions