How much overflow in a DOM element


Tags: javascript,jquery,html,css,dom

Problem :

Is there a way to see how much overflow-x there is in a DOM element? It's easy to allow a DOM element to overflow in a certain direction - overflow:scroll; is all it takes in CSS. However, is there an easy way to query how overflow there is in a DOM element? Something that comes to mind in jquery might be:

var last = $("#foo").last();
var left = last.position().left;
var width = last.width();
// overflows on the right by...
var fooLeft = $("#foo").position().left;
var fooWidth = $("#foo").width();
var fooRight = fooLeft+fooWidth;

var overflowRight = left + width - fooRight 


Solution :

If you have a DOM node (node), the width of the node is node.clientWidth, and the width of the scrollable region is node.scrollWidth.

That means that the overflow is the difference between these two numbers:

node.scrollWidth - node.clientWidth

    CSS Howto..

    How to display just part of image on hover?

    Only Javascript code to show a class without onclick

    how to css absolute positioning right way

    How to get crossing CSS borders

    How to position three divs horizontally

    How to hide a soft hyphen (­) in HTML / CSS

    How can I add CSS to a form in Rails when the form is rendered in two different locations?

    How to make all the content placed in the center of div?

    CSS How to align two DIVs on the same line without using floats

    how to 'split' a css attribute/value using Jquery

    CSS3 - How to “restore” ::-webkit-scrollbar property to the default scroll bar

    How to refactor an existing project to use Compass?

    How do I remove the underline from an image wrapped in an anchor?

    Why my easypie number don't show inside?

    How to set image in horizontal center of DIV to fill page width?

    How to use nify javascript to make round corner box? Im using but not working

    How to add a half circle at the bottom middle of my header?

    Show content on and off with Javascript

    How can I apply an existing CSS class style to a dynamically created div?

    How to stretch a background-image with css

    how to use CSS clip-path in IE? [closed]

    How to control the CSS of the contents that loaded dynamically into iframe?

    How do I make a header above my navigation bar?

    How to vertically align label and input in Bootstrap 3?

    how to download google fonts in version bold

    How to match an element's background colour with 2 semi-transparent element background colours

    How can I use the key name instead of value in map-get?

    How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet?

    How to have img popout when containing div is clicked (Image gallery)?

    Responsive CSS, How to make clock maintain position with image on resize