Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>OK, so I used jQuery to move to the next sibling element by the amount of that elements width or height using jQueries "scrollTo" (all elements have a fixed outer size in the box model) then added the "animate" speed to transitiion this. Works great. I searched this on the web hard for a few days but could not get the resolve required. I hope the code enclosed is of a lot of use to others. I have tried to keep it a straight forward as possible - simple jQuery gallery with no plugins - shows 3 ads inline then scrolls to the next on click of prev / next buttons. <a href="http://jsfiddle.net/jambo/eU3jk/13/" rel="nofollow">http://jsfiddle.net/jambo/eU3jk/13/</a></p> <pre><code>html &lt;!-- jamie paterson --&gt; &lt;div class="smartAd"&gt; &lt;ul class="smartH"&gt; &lt;!-- posit abs? --&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" /&gt; &lt;p class="title"&gt;First Hampshire Rose&lt;/p&gt; &lt;p class="text"&gt;For great value food with friends&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Nara Sushi Restaurant&lt;/p&gt; &lt;p class="text"&gt;Healthy &amp; appetising food&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Alexandra Sports&lt;/p&gt; &lt;p class="text"&gt;Running &amp; fitness retailers&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Blades Barbers&lt;/p&gt; &lt;p class="text"&gt;£10 off Intensive Muscle Release&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Aerial Connections&lt;/p&gt; &lt;p class="text"&gt;Audio &amp; visual entertainment&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Highgrove Windows&lt;/p&gt; &lt;p class="text"&gt;10yr guarantee as standard&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" /&gt; &lt;p class="title"&gt;seven&lt;/p&gt; &lt;p class="text"&gt;Best value blinds in Lincolnshire!&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" /&gt; &lt;p class="title"&gt;eight&lt;/p&gt; &lt;p class="text"&gt;Best value blinds in Lincolnshire!&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" /&gt; &lt;p class="title"&gt;nine&lt;/p&gt; &lt;p class="text"&gt;Best value blinds in Lincolnshire!&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Last&lt;/p&gt; &lt;p class="text"&gt;Best value blinds in Lincolnshire!&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class="nav"&gt; &lt;button class="prev" title="previous"&gt;&lt;&lt;/button&gt; &lt;button class="next" title="next"&gt;&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- // smartAd --&gt; &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;div class="smartAdV"&gt; &lt;ul class="smartV"&gt; &lt;!-- posit abs? --&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" /&gt; &lt;p class="title"&gt;First Hampshire Rose&lt;/p&gt; &lt;p class="text"&gt;For great value food with friends&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Nara Sushi Restaurant&lt;/p&gt; &lt;p class="text"&gt;Healthy &amp; appetising food&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Alexandra Sports&lt;/p&gt; &lt;p class="text"&gt;Running &amp; fitness retailers&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Blades Barbers&lt;/p&gt; &lt;p class="text"&gt;£10 off Intensive Muscle Release&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Aerial Connections&lt;/p&gt; &lt;p class="text"&gt;Audio &amp; visual entertainment&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Highgrove Windows&lt;/p&gt; &lt;p class="text"&gt;10yr guarantee as standard&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" /&gt; &lt;p class="title"&gt;seven&lt;/p&gt; &lt;p class="text"&gt;Best value blinds in Lincolnshire!&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" /&gt; &lt;p class="title"&gt;eight&lt;/p&gt; &lt;p class="text"&gt;Best value blinds in Lincolnshire!&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" /&gt; &lt;p class="title"&gt;nine&lt;/p&gt; &lt;p class="text"&gt;Best value blinds in Lincolnshire!&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" /&gt; &lt;p class="title"&gt;Last&lt;/p&gt; &lt;p class="text"&gt;Best value blinds in Lincolnshire!&lt;/p&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class="nav"&gt; &lt;span class="wrap"&gt; &lt;button class="next" title="next"&gt;v&lt;/button&gt; &lt;button class="prev" title="previous"&gt;^&lt;/button&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- // smartAdV --&gt; css /* jamie paterson */ /* start horizontal */ .smartAd { float:left; position:relative; /* pos:rel for IE7 only when hasLayout init */ width:627px; overflow:hidden; } .smartH { width:10000px; position:relative; float:left; height: 80px; padding: 0; margin:0; font-family: arial; background: #fff; } .smartH img, .smartV img{ float: left; width: 100px; height: 70px; border: none; } .smartH .title{ float: right; margin: 0 0 0 5px; width:100px; font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left; } .smartH .text{ float: right; margin: 5px 5px 0; width:95px; font-size: 12px; color: #000; line-height: 1.1; text-align: left; } .smartH a, .smartV a{ float: left; text-decoration: none; cursor:pointer; } .smartH li { display: inline-block; float:left; width:205px; margin:0 4px 0 0; height: 70px; padding: 5px 0; } .smartAd .nav { float: right; width:33px; margin: 10px 0 0; } button{ border: none; cursor: pointer; background-image:url("images/carousel-arrows.gif"); } .prev{ float: left; width:16px; height:16px; margin: 0 1px 0 0; background-position: 0 16px; } .next{ float: right; width:16px; height:16px; background-position: 0 0; } /* end Horizontal Style */ /* start Vertical style */ .smartAdV { float:left; clear:left; position:relative; /* pos:rel for IE7 only when hasLayout init */ height:616px; padding: 0 10px; overflow:hidden; } .smartV { width:100px; position:relative; float:left; height: 10000px; padding: 0; margin:0; font-family: arial; background: #ebebeb; } .smartV .title{ float: left; margin: 8px 0; width:100px; font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left; } .smartV .text{ float: right; margin: 5px 0 10px; width:100px; font-size: 12px; color: #000; line-height: 1.4; text-align: left; } .smartV li { display: inline-block; float:left; width:100px; margin:0 0 8px; height: 180px; padding: 10px 0 0; border-top: 1px solid #ebebeb; border-bottom:1px solid #ebebeb; background: #fff; } .smartAdV .nav { float: left; position:relative; left:-100px; bottom: -600px; width:100px; margin: 0; background:#fff; } .smartAdV .wrap{ float: right; width:33px; } .smartAdV .prev{ float: left; width:16px; height:16px; margin: 0 1px 0 0; background-position: 16px 0; } .smartAdV .next{ float: right; width:16px; height:16px; background-position: 16px 16px; } jQuery // jamie paterson // //adding classes via jQuery instead of direct for ease - some of these variables not used as var's var currentElement = $(".smartH li:first"); // sets first current horiz var lastElementThree = $(".smartH").children("li").eq(-3).addClass("lastThird"); //horiz var firstElementOne = $(".smartH").children("li").eq(0).addClass("firstOne"); //horiz var currentElementV = $(".smartV li:first"); // sets first current vert var lastElementThreeV = $(".smartV").children("li").eq(-3).addClass("lastThirdV"); //vertical var firstElementOneV = $(".smartV").children("li").eq(0).addClass("firstOneV"); //vertical var prevBtn = $(".smartAd .prev, .smartAdV .prev").prop('disabled', true).css({ opacity: 0.5 }); // hide but show on scroll // HORIZONTAL section $(".smartAd .prev").click(function () { currentElement = currentElement.prev(); scrollTo(currentElement); $(currentElement).nextAll().slice(2, 3).css("display", "none"); //move back one place/element and hide prev li $(".smartAd .next").prop('disabled', false).css({ opacity: 1.0 }); $(".smartH").stop().animate({ left: "+=209px" // block li's are white space dependent }, 500 ); e.preventDefault(); }); $(".smartAd .next").click(function () { currentElement = currentElement.next(); scrollTo(currentElement); $(currentElement).nextAll().slice(0, 2).css("display", "inline-block");//move on one place/element and show next li $(".smartAd .prev").prop('disabled', false).css({ opacity: 1.0 }); $(".smartH").stop().animate({ left: "-=209px" // block li's are white space dependent }, 500 ); e.preventDefault(); }); // VERTICAL section $(".smartAdV .prev").click(function () { currentElementV = currentElementV.prev(); scrollTo(currentElementV); $(currentElementV).nextAll().slice(2, 3).css("display", "none"); //move back one place/element and hide prev li $(".smartAdV .next").prop('disabled', false).css({ opacity: 1.0 }); $(".smartV").stop().animate({ top: "+=200px" // block li's are white space dependent }, 500 ); e.preventDefault(); }); $(".smartAdV .next").click(function () { currentElementV = currentElementV.next(); scrollTo(currentElementV); $(currentElementV).nextAll().slice(0, 2).css("display", "inline-block");//move on one place/element and show next li $(".smartAdV .prev").prop('disabled', false).css({ opacity: 1.0 }); $(".smartV").stop().animate({ top: "-=200px" // block li's are white space dependent }, 500 ); e.preventDefault(); }); function scrollTo(element) { // includes/combined horiz and vert - left action and top action respectively if ($(currentElement).hasClass("lastThird")){ $(".smartAd .next").prop('disabled', true).css({ opacity: 0.5 }); $(window).scrollLeft(element.position().left); } else if ($(currentElement).hasClass("firstOne")){ $(".smartAd .prev").prop('disabled', true).css({ opacity: 0.5 }); $(window).scrollLeft(element.position().left); } else{ $(window).scrollLeft(element.position().left); } if ($(currentElementV).hasClass("lastThirdV")){ // vert $(".smartAdV .next").prop('disabled', true).css({ opacity: 0.5 }); $(currentElementV).children().scrollTop(element.position().top); } else if ($(currentElementV).hasClass("firstOneV")){ // vert $(".smartAdV .prev").prop('disabled', true).css({ opacity: 0.5 }); $(currentElementV).children().scrollTop(element.position().top); } else{ // vert $(currentElementV).children().scrollTop(element.position().top); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POFind position of element, then do something in jquery using .position() not working
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USJamie Paterson
    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. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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