Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Something like this:</p> <pre><code> &lt;div id="back" class="" style="background: transparent url('http://a.espncdn.com/photo/2013/0209/nba_jordan_00.jpg');height: 257px; width: 800px;"&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; var w = 0; $('#back').html('&lt;div id="dawrap" class="wrap"&gt;'+ '&lt;a class="open" href="#"&gt;OPEN&lt;/a&gt;'+ '&lt;div class="outer"&gt;'+ ' &lt;div class="mainSlide"&gt;'+ '&lt;a&gt;'+ '&lt;img class="content-text" src="" style="margin-left:77px; margin-top:31px; display:none;" /&gt;'+ '&lt;br&gt; &lt;br&gt;'+ 'CONTENT at Default'+ '&lt;/a&gt;'+ '&lt;/div&gt;'+ ' &lt;/div&gt;'); $('.mainSlide').children().each(function() { w += $(this).outerWidth(); }); $('.outer').width(w); $('.wrap').width(w); $('.mainSlide').css('left', '480px'); $('.open').toggle(function() { $('.mainSlide').stop().animate({left: 0}); $(this).html(''); $('.content-text').css('display', 'block'); }, function() { $('.mainSlide').stop().animate({left: 480}); $('.content-text').css('display', 'none'); $(this).html('OPEN'); }); &lt;/script&gt; </code></pre> <p>?</p> <p>Or, better (but don't know why today on my browsers $('#id').css('display','block') doesn't want to work) you can set the div as invisible and, when the page is loaded, make it visible. If you want to keep your structure.</p> <p>For example, using z-index let you avoid position:absolute and with a 4 js raws you can do the trick:</p> <pre><code>&lt;script type="text/javascript"&gt; function domeafavour(){ if( $('#slider').width()==100) { $('#slider').animate({ width: '600px'},1000); }else{ $('#slider').animate({ width: '100px'},1000); } } &lt;/script&gt; &lt;div id="back" class="" style="background: transparent url('http://a.espncdn.com/photo/2013/0209/nba_jordan_00.jpg');height:257px;width: 800px;"&gt; &lt;div id="slider" style='cursor:pointer;float:right;height:252;width:100px; z-index:1;background-color:#CF3;' onClick="domeafavour()"&gt;clickme&lt;/div&gt; &lt;/div&gt; </code></pre> <p><a href="http://jsfiddle.net/tSggb/9/" rel="nofollow">http://jsfiddle.net/tSggb/9/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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