Search code examples
javascriptdom-eventsmouseeventvisibilitymousemove

Make only part of a div visible

I want a div that only partly has its content visible. I want the user to use his mouse horizontally (i.e., left-to-right mouse movement) to change which part of the div is visible.

How can I do this?

Solution

  • The HTML and CSS

    If I understand your question correctly, you have a div that is x pixels wide, and its contents are y pixels wide where x > y. In other words, the div's contents are wider than the div itself.

    The following HTML and CSS are an example of how to hide part of the div if x = 250 and y = 500:

    ​<div id="outer-div" style="width:250px;overflow:hidden;">
<div style="width:500px;">
....
</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

    The CSS overflow:hidden hides the horizontal scrollbar. If you would like the user to see the horizontal scrollbar, use overflow:auto. If the horizontal scrollbar is all you require, then there is no need to write any JavaScript.

    The JavaScript

    Changing which part of the div is visible based on mouse movement requires JavaScript. One way to accomplish this is to change the scroll position of the outer-div. has the method Element.scrollTo. Other JavaScript frameworks have something similar.

    $('outer-div').addEvent('mousemove', function(event) {
    $('outer-div').scrollTo(event.client.x);
});

    See this fiddle for an example.