Databases
StackOverflow2013
Postsdbo
POResponsive swipe gallery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive swipe gallery
    primarykey
    data
    text
    <p>I'm working on a snippet for a swipe gallery for mobile. You can see it here <a href="http://codepen.io/piatra/full/Edtlq" rel="nofollow">http://codepen.io/piatra/full/Edtlq</a></p> <pre><code>[].forEach.call(slides, function(s){ s.style.width = mainContainer.offsetWidth + 'px'; }); </code></pre> <p>My problem: Because the content is made up of multiple panels they need to be on the same line to the right. The size of a panel should be 100% of the screen so you only see one panel at a time. But i cannot set the size of the panel in css to 100% because that would push each panel on its own row. </p> <p>Currently I am solving this in JS, <code>ontouchstart</code> I get the size of the main parent and set each slide to that width but I don't like this solution because when switching for landscape to portrait you have to touch the gallery for it to update, and even if I add an event lister to the change its still not a pretty solution.</p> <p>Can I achieve this effect in CSS only? A gallery of panels on the same row with the width variable based on the parent ? </p> <p>PS : Chrome dev tools > Emulate touch events</p> <p>PPS : Wrote down a simplified version <a href="http://codepen.io/piatra/pen/usaHo" rel="nofollow">http://codepen.io/piatra/pen/usaHo</a> Any improvement to this version is very much welcomed :)</p> <p>A nice example is <a href="http://csscience.com/responsiveslidercss3/" rel="nofollow">http://csscience.com/responsiveslidercss3/</a> but when adding a new panel you have to edit the CSS</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USandrei
    1. USandrei
    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. POResponsive swipe gallery
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POResponsive swipe gallery
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POResponsive swipe gallery
      1. This table or related slice is empty.
      1. VTUpMod
    1. COim not able to navigate at all, on chrome. why dont you use media queries?
      singulars
      1. POResponsive swipe gallery
      1. USuser1721135
    2. CO@user1721135 they are not easy to maintain, i was hoping for a more flexible solution
      singulars
      1. POResponsive swipe gallery
      1. USandrei
    3. COhow about 300% wrapper 33% panes? like this http://jsbin.com/idufaj/2/edit
      singulars
      1. POResponsive swipe gallery
      1. USuser1721135
 

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