StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>The HTML and CSS</strong></p> <p>If I understand your question correctly, you have a <code>div</code> that is <em>x</em> pixels wide, and its contents are <em>y</em> pixels wide where <em>x</em> > <em>y</em>. In other words, the <code>div</code>'s contents are wider than the <code>div</code> itself.</p> <p>The following HTML and CSS are an example of how to hide part of the <code>div</code> if <em>x</em> = 250 and <em>y</em> = 500:</p> <pre><code><div id="outer-div" style="width:250px;overflow:hidden;"> <div style="width:500px;"> .... </div> </div> </code></pre> <p>The CSS <code>overflow:hidden</code> hides the horizontal scrollbar. If you would like the user to see the horizontal scrollbar, use <code>overflow:auto</code>. If the horizontal scrollbar is all you require, then there is no need to write any JavaScript.</p> <hr> <p><strong>The JavaScript</strong></p> <p>Changing which part of the <code>div</code> is visible based on mouse movement requires JavaScript. One way to accomplish this is to change the scroll position of the <code>outer-div</code>. <a href="/questions/tagged/mootools" class="post-tag" title="show questions tagged 'mootools'" rel="tag">mootools</a> has the method <a href="http://mootools.net/docs/core/Element/Element.Dimensions#Element%3ascrollTo" rel="nofollow"><code>Element.scrollTo</code></a>. Other JavaScript frameworks have something similar.</p> <pre><code>$('outer-div').addEvent('mousemove', function(event) { $('outer-div').scrollTo(event.client.x); }); </code></pre> <p>See this <a href="http://jsfiddle.net/KbXMC/" rel="nofollow">fiddle</a> for an example.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload