Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The problem here seems to be with your HTML/CSS, not javascript/jquery. First, you should not have multiple divs with the same ID. So I am not sure why you have<code>#gcontainer</code> twice. If you want to apply the same style to multiple divs use classes. In your css, you are styling <code>#gcontainer</code> twice, which also does not make sense as the second time overwrites the first one. Also remember to always add <code>&lt;!DOCTYPE html&gt;</code> to the top of your pages or browsers will render in quirks mode, which can do all sorts of unexpected things.</p> <p>Anyways, I removed the extra #gcontainer in your HTML and CSS and edited some of the margins. Finally, I added a wrapper around the whole thing and put margin on the left, so your slide out would not go off the screen. This should work in IE and Chrome:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-1.7.min.js" type="text/JavaScript"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; #wrapper { margin-left: 100px; } #gheader{ height:50px; width:350px; background-color:#feee00; } #gtray{ height:250px; background-color:#006600; width:130px; float:left; margin-left:0px; margin-right:-130px; position:relative; z-index:0; overflow:hidden; } #gcontainer{ height:250px; width:320px; margin-left:30px; background-color:darkblue; float:left; position:absolute; } &lt;/style&gt; &lt;script type="text/JavaScript"&gt; $(function(){ $('#gtray').toggle( function() { $(this).stop(true).animate({marginLeft:'-100px'},'slow'); }, function() { $(this).stop(true).animate({marginLeft:'0px'},'slow'); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="gheader"&gt;&lt;h2&gt;HEADER&lt;/h2&gt;&lt;/div&gt; &lt;div id="gtray"&gt; &lt;span id="expander" style="width:30px;height:250px;float:left;background-color:red"&gt;O&lt;br&gt;p&lt;br&gt;e&lt;br&gt;n&lt;/span&gt; &lt;span style="float:left"&gt;asdas&lt;br&gt;SDasd&lt;br&gt;asdasdasd&lt;br&gt;asdasd&lt;br&gt;Sdasd&lt;/span&gt; &lt;/div&gt; &lt;div id="gcontainer"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POslide menu from background to left
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USSanketh Katta
    1. USSanketh Katta
    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. 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. VTUpMod
    1. COHi Sanketh... Thanks. It is working great in both IE & chrome. However, there is one minor glitch still there... When the slider tray is scrolling to left, you would see that slide bar changes its width for a moment which causes "Open" to cut off for a sec. How can this issue be resolved as it doesn't result in a neat & tidy animation. thanks.
      singulars
      1. PO
      1. UShelloworld
    2. COIf you slow down the slide (change the 'slow' to a number in ms), it will maybe look a bit smoother. If you are just worried about text getting cut off, you could always just add some padding around the Open. Other than that, you may want to look into using another tool like the [jQuery Easing Plugin](http://gsgd.co.uk/sandbox/jquery/easing/) or [jQuery UI's Effect](http://jqueryui.com/docs/effect/) which may offer some more options for smoothness. Hopefully those help
      singulars
      1. PO
      1. USSanketh Katta
 

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