Databases
StackOverflow2013
Postsdbo
POHorizontally scroll page with mouse move
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHorizontally scroll page with mouse move
    primarykey
    data
    text
    <p>I have a simple list of images here that are floated horizontally off the right of the page.</p> <p><a href="http://www.ttmt.org.uk/forum/gallery/" rel="nofollow">http://www.ttmt.org.uk/forum/gallery/</a></p> <p>I can view the image by mouse scrolling left and right.</p> <p>How can I scroll the page by moving the mouse left and right without scrolling.</p> <p>So the gallery position will be determined by the position of the mouse on the page.</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Title of the document&lt;/title&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"&gt; &lt;style type="text/css"&gt; ul#gallery { margin:100px 0 0 0; float:left; height:500px; margin-right:-20000px; } ul#gallery li{ display:inline; } ul#gallery li img{ float:left; height:100%; } #header{ position:fixed; margin:20px 0 0 20px; } #header img, #header ul#info{ float:left; } #header ul#info{ margin:5px 0 0 50px; } #header ul#info li{ color:#aaa; font:.95em/1.5em Helvetica, sans-serif; } #header ul#info li a{ color:#aaa; text-decoration:none; } #header ul#info li a:hover{ color:#333; } #header select{ margin:20px 0 0 50px; } #lightbox { position:fixed; top:0; left:0; width:100%; height:100%; background:url(overlay.png) repeat; text-align:center; } #lightbox p { text-align:right; color:#fff; margin-right:20px; font-size:12px; } #lightbox img { box-shadow:0 0 15px #111; -webkit-box-shadow:0 0 15px #111; -moz-box-shadow:0 0 15px #111; max-width:940px; } #content img{ height:90%; max-width:100%; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul id="gallery"&gt; &lt;li&gt;&lt;a href="images/01.jpg" class="lightbox_trigger"&gt;&lt;img src="images/01.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/02.jpg" class="lightbox_trigger"&gt;&lt;img src="images/02.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/03.jpg" class="lightbox_trigger"&gt;&lt;img src="images/03.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/04.jpg" class="lightbox_trigger"&gt;&lt;img src="images/04.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/05.jpg" class="lightbox_trigger"&gt;&lt;img src="images/05.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/06.jpg" class="lightbox_trigger"&gt;&lt;img src="images/06.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/07.jpg" class="lightbox_trigger"&gt;&lt;img src="images/07.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/08.jpg" class="lightbox_trigger"&gt;&lt;img src="images/08.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/09.jpg" class="lightbox_trigger"&gt;&lt;img src="images/09.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/10.jpg" class="lightbox_trigger"&gt;&lt;img src="images/10.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/11.jpg" class="lightbox_trigger"&gt;&lt;img src="images/11.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/12.jpg" class="lightbox_trigger"&gt;&lt;img src="images/12.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/13.jpg" class="lightbox_trigger"&gt;&lt;img src="images/13.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/14.jpg" class="lightbox_trigger"&gt;&lt;img src="images/14.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/15.jpg" class="lightbox_trigger"&gt;&lt;img src="images/15.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;script&gt; jQuery(document).ready(function($) { $('.lightbox_trigger').click(function(e) { e.preventDefault(); var image_href = $(this).attr("href"); if ($('#lightbox').length &gt; 0) { // #lightbox exists $('#content').html('&lt;img src="' + image_href + '" /&gt;'); //$('#lightbox').show(); $('#lightbox').fadeIn('2000'); } else { var lightbox = '&lt;div id="lightbox"&gt;' + '&lt;p&gt;Click to close&lt;/p&gt;' + '&lt;div id="content"&gt;' + '&lt;img src="' + image_href +'" /&gt;' + '&lt;/div&gt;' + '&lt;/div&gt;'; $('body').append(lightbox); } }); $('#lightbox').live('click', function() { $('#lightbox').hide(); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USttmt
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHorizontally scroll page with mouse move
      1. USrafaelbiten
      1. VTFavorite
    1. COHook into the `mousemove` event and use the mouse position to scroll the image container.
      singulars
      1. POHorizontally scroll page with mouse move
      1. USTheZ
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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