function getDocHeight(doc) {
... [READ MORE]
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var ifrm = id;
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = ‘hidden’;
ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
// some IE versions need a bit added or scrollbar appears
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = ‘visible’;
}
Scroll Horizontally Without Scrollbar Using jQuery
To scroll horizontally with CSS is very annoying, because the whole page will move vertically and sometimes the Y axis will scroll. So I decided to use jQuery and it’s very simple. Only 237 characters which is only 2 lines. Here is the **jQuery **code with the div id #scrollho.
jQuery
$('#scrollho').on('mousewheel',function(e){
e.preventDefault();
scrollLeft=$('#scrollho').scrollLeft();
if(e.originalEvent.wheelDeltaY.toString().slice(0,1)=='-'){
$('#scrollho').scrollLeft(scrollLeft+100);
}else{
$('#scrollho').scrollLeft(scrollLeft-100);
}
});CSS
#scrollho{
overflow:hidden;
}Explanation
The #scrollho div’s scrollbars are hidden with CSS. When a mousewheel event occurs on #scrollho the default event is neutralized and the div is scrolled horizontally to the direction of the mousewheel using e.originalEvent.wheelDeltaY. **e.originalEvent.wheelDeltaY **is converted into string as to do the slice function to check whether the number is negative or not.
... [READ MORE]