Databases
StackOverflow2013
Postsdbo
POHow to create a dynamic CSS-based interface using moving content tiles?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create a dynamic CSS-based interface using moving content tiles?
    primarykey
    data
    text
    <p>I'm trying to figure out what the best way would be to set up a website interface that has a large centre 'tile' (basically a div with rounded corners, a variable background image, and text on it) that acts as the hub of the interface, around which I have smaller tiles which are clickable as link, e.g. one tile will lead to a photo gallery etc... However I need these smaller tiles to be moveable i.e. I would like them to visibly whisk away off the screen (in a specific direction) before the next set of tiles enters the screen.</p> <p>(Ideally they would be the same set of tiles, they would simply go off screen to 'change' as it were and come back as the new set of tiles - An ideal example would be of clicking on the photo gallery tile, all the main tiles whisk away off screen, to be replaced by more tiles representing individual photos in the gallery)</p> <p>I have no issues with the CSS of round corners and positioning my tiles etc... but I'm currently trying to get the tiles to actually move using the code referenced here: <a href="https://stackoverflow.com/questions/580216/alter-css-class-attributes-with-javascript">Alter CSS class attributes with javascript?</a></p> <p>I can't get it to work. I've set up one of my test tiles to make just one change to the width of another test tile using the above-referenced code when it detects a mouseover event on the div, but it appears not to work.</p> <p>Here's my code, if you can spot any errors, but primarily I'd also like to hear if you have any better suggestions of reaching the design state I'm looking for:</p> <pre><code>var style; function changeFoo() { if(typeof style == 'undefined') { var append = true; style = document.createElement('style'); } else { while (style.hasChildNodes()) { style.removeChild(style.firstChild); } } var head = document.getElementsByTagName('head')[0]; var rules = document.createTextNode( '.tiletest2 { border:4px solid #999; background-color:#999; width: 50px; border-radius:32px; }' ); style.type = 'text/css'; if(style.styleSheet) { style.styleSheet.cssText = rules.nodeValue; } else { style.appendChild(rules); } if(append === true) head.appendChild(style); } </code></pre> <p>The onmouseover event looks like this:</p> <pre><code>&lt;div class="tiletest1" onmouseover="changeFoo()"&gt; &lt;br/&gt;&lt;br/&gt; SAMPLE left &lt;br/&gt;&lt;br/&gt; </code></pre> <p></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USDarragh J
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    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