Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's a simple solution of your problem: <a href="http://jsfiddle.net/pjvCw/44/" rel="nofollow">http://jsfiddle.net/pjvCw/44/</a> but....</p> <p>The way you're doing galleries is quite wrong. You have a really sensitive CSS full of <code>margin</code> bugs (see in CSS code),<br> <strong>you calculate all by hand</strong>, which will just <strong>complicate</strong> your life one day if you'll get to add images, change widths etc...<br> Your buttons are positioned really wrongly, and again you don't even need to manually add them in your HTML. Let jQuery do all the job for you:</p> <ul> <li>Calculate margins, widths,</li> <li>Get the number of slides</li> <li>generate buttons,</li> <li>Make your buttons clickable</li> <li>Pause gallery on mouseenter (loop again on mouseleave)</li> </ul> <p><strong><a href="http://jsfiddle.net/pjvCw/42/" rel="nofollow">LIVE DEMO</a></strong></p> <p>This is the way you should go with your slider:</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div class="galleryContainer"&gt; &lt;!-- Note this main 'wrapper' --&gt; &lt;div class="gallery"&gt; &lt;div class="row"&gt; &lt;!-- ..your images.. --&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;!-- ..your images.. --&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="content-nav-control"&gt;&lt;/div&gt; &lt;!-- Let jQ create the buttons --&gt; &lt;/div&gt; </code></pre> <p>Note the general gallery wrapper, it allows you with this CSS to make your buttons parent not move with the gallery.</p> <p><strong>CSS:</strong></p> <p>In your code, using <code>display:inline-block;</code> adds 4px margin to your elements, ruining your math. So you just need to apply <code>font-size:0;</code> to remove that inconvenience.<br> As soon I did that the math was working and the right width was than 340px, having 5px border for your images and 20px margin.</p> <pre><code>.galleryContainer{ /* you need that one // to prevent the navigation move */ position:relative; /* cause .content-nav-control is absolute */ background-color: #abcdef; width:340px; /* (instead of 350) now the math will work */ height: 265px; } .gallery{ position:relative; overflow: hidden; /* "overflow" is enough */ width:340px; /* (instead of 350) now the math will work */ height: 265px; } .gallery .row { white-space: nowrap; font-size:0; /* prevent inline-block 4px margin issue */ } .gallery img { display: inline-block; margin-left: 20px; margin-top: 20px; } .normalimage { height: 80px; width: 50px; border: 5px solid black; } .wideimage { height: 80px; width: 130px; border: 5px solid black; } img:last-of-type { margin-right:20px; } .content-nav-control { position: absolute; width:100%; /* cause it's absolute */ bottom:10px; text-align:center; /* cause of inline-block buttons inside*/ font-size:0; /* same trick as above */ } .content-nav-control &gt; span { cursor:pointer; width: 20px; height: 20px; display: inline-block; border-radius: 50%; border:1px solid #000; box-shadow: inset 0 0 6px 2px rgba(0,0,0,.75); margin: 0 2px; /* BOTH MARGINS LEFT AND RIGHT */ } .content-nav-control &gt; span.active{ background:blue; } </code></pre> <p><strong>And finally:</strong></p> <pre><code>$(function () { // DOM ready shorty var $gal = $('.gallery'), $nav = $('.content-nav-control'), galSW = $gal[0].scrollWidth, // scrollable width imgM = parseInt($gal.find('img').css('marginLeft'), 10), // 20px galW = $gal.width() - imgM, // - one Margin n = Math.round(galSW/galW), // n of slides c = 0, // counter galIntv; // the interval for(var i=0; i&lt;n; i++){ $nav.append('&lt;span /&gt;'); // Create circles } var $btn = $nav.find('span'); $btn.eq(c).addClass('active'); function anim(){ $btn.removeClass('active').eq(c).addClass('active'); $gal.stop().animate({scrollLeft: galW*c }, 400); } function loop(){ galIntv = setInterval(function(){ c = ++c%n; anim(); }, 3000); } loop(); // first start kick // MAKE BUTTONS CLICKABLE $nav.on('click', 'span', function(){ c = $(this).index(); anim(); }); // PAUSE ON GALLERY MOUSEENTER $gal.parent('.galleryContainer').hover(function( e ){ return e.type=='mouseenter' ? clearInterval(galIntv) : loop() ; }); }); </code></pre> <p><em>"- With this solution, What can I do now and in the future? -"</em><br> <strong>Nothing!</strong> just freely add images into your HTML and play, and never again have to take a look at your backyard :)</p>
    singulars
    1. This table or related slice is empty.
    1. POApplying background color based on scrolling content
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USRoko C. Buljan
    1. USRoko C. Buljan
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POApplying background color based on scrolling content
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI am really impressed by your solution. Actually i am a newbie in web designing. i wish to do a lot with design, i try but fail because of lack of knowledge and experience. i wish someday i will be good in jquery. thanks a ton for your support
      singulars
      1. PO
      1. USShubendra
 

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