1 Replies - 1826 Views - Last Post: 16 February 2012 - 12:45 PM

#1 hockey97  Icon User is offline

  • D.I.C Regular

Reputation: -77
  • View blog
  • Posts: 300
  • Joined: 25-September 08

How to detect if div is overflowed?

Posted 16 February 2012 - 06:06 AM

Hi, I am trying to make a div of images. If the images are more then the space of the div. normally the div if auto set would add scroll bars.

what I want to do is create my own scroll. I plan to have like 2 arrows one on the left side and one on the right side of the div. If the div is overflowed then these arrows appear. when you click them either the left arrow or right arrow it would scroll thru the images.

Any ideas how this is done? I have no clue how javascript can detect if a div is overflowed and if so how to instead of display the default scroll bars. I fade in my own arrow images that when click will scroll. I know how to make the arrows and have them scroll the images in the div.

I just don't know how exactly you can detect if the div is overflowed where the images are more then the space of the div which requires scroll bars to allow users to see the other images.

any ideas?

Is This A Good Question/Topic? 0
  • +

Replies To: How to detect if div is overflowed?

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4188
  • View blog
  • Posts: 11,857
  • Joined: 18-April 07

Re: How to detect if div is overflowed?

Posted 16 February 2012 - 12:45 PM

Check if the inner element's width is larger than the container's width? Obviously if the inner element is wider than the container, you will get some overflow. Testing these two values against one another should tell you whether or not it overflows and then of course you can put on your scrollbars.

Example can be found at... http://jsfiddle.net/hZBj5/

:)
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1