在运行时检测javascript文本或元素溢出

Question

I am designing a website its design is something like this.

In this site i have disabled horizontal scrolling instead a User have to scroll using Arrow Key Left and Right to view pages.

Now to support this feature i have to check for text/element overflow-y each time a new page is loaded in window and if it is causing the overflow then I had to cut and move the overflow element to next page to support horizontal scrolling.

And to support Responsive design I am not adding these pages statically instead I am creating these pages dynamically so that in case width or height of window changes the next pages which will be displayed will adjust to changed width and height accordingly by checking its overflow.

Now the problem I am having is that it is very difficult to apply slide effect animation to this design because to apply slide effect we have to know in advance what will be our next element be to replace that slide but in this case our next element is getting added dynamically and to show the next page i will have to first load that element to window so that it first checks the overflow and creates page and then only page will be displayed.

Is there any other way to check for element causing overflow ?

Note: On turning to next page by Arrow Key all 3 pages which are displaying on window are getting changed.

code I am using to check for overflow:-

OverflowY: function(parentObj){

    if(parentObj.offsetHeight < parentObj.scrollHeight){
        //Return true if overflow occurs
        return true;
    }
    else{
        return false;
    }

}

Answer 1

The nice way to do this would be to have your columns automatically adjust using strictly HTML and CSS. This would mean you could just render your content, and the browser would take care of the rest. I found a blog article that attempts to solve this problem ( http://alistapart.com/article/multicolumnlists ). There's probably some good ideas you can glean from there. Original stackoverflow post also has good questions: Wrapping lists into columns .

If that doesn't fit your use case, a common approach for verifying calculated dimensions of elements is to first render the element somewhere outside the visible window (eg, left: -9999px) within a container of the current dimensions you'd like to render it in. Then you can check the rendered dimensions and adjust the markup as you see fit. Then lastly, clone/detach your modified DOM element and insert it into the visible window in the correct location.

Answer 2

-insert a div to the page with css properties {visibility:hidden; event-pointers: none} to make the div invisible and prevent it to respond to click/touch event.

-use that div to measure a page. I will suggest to loop trough the tag. DOM document manipulation is a very performance cost.

-insert that page to an array with an ID which specifies its reference number(page number).

-then get the current page id, and loop trough your array to get the previous(left) or next (right) page's index.

-insert that page in the DOM document with something like that : For next page: pgs[nextPage].style.right="-100%”; For previous page: pgs[prePage].style.right="100%”;

PageContainer.appendChild( pgs[nexgPage] );

-use jquery.js or transint.js (that will help avoiding browser prefix issues for non-standarized rule): $(pgs[next/prePag]).transition({ right:0});

-remove the "previous current" page as well if you want". You might have z-index issue (ie the sliding page is under the current page and prevent the effect to be viewed). So make sure you set a lower z-index value for the currently displayed page too.

Though, css' rows are simpler and better for performance (row-width:100%) as already suggested.