Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's one method:</p> <h1><a href="http://jsfiddle.net/f4dhy/2/" rel="nofollow">Live demo</a></h1> <p>Javascript:</p> <pre><code>$(window).scroll(function() { if ($(window).scrollTop() &gt;= 200) { screenWidth = $(window).width(); containerWidth = $("#menu_runner").outerWidth(true); pos = screenWidth - containerWidth; $("#floatbar").css({ position: 'fixed', left: pos, top: '0' }); } else { $("#floatbar").css({ position: 'absolute', left: '0', top: '200px' }); } }); </code></pre> <p>The idea is get the screen's width, the menu container's width, and from that we get figure out how to position the left edge of the menu so that it lines up with the container.</p> <p>In your css, add:</p> <pre><code>body{ padding: 0; margin: 0; } </code></pre> <p>which fixes the slightly off positioned problem you'd see without it due to the default margin set by browsers.</p> <p>You might see the menu kinda bounce into position when you scroll it to the top, which is unfortunate but hopefully not too much of a problem.</p> <p>This doesn't work in IE6 because of the position:fixed being used. You'll have to search for a solution to that. I'm not too familiar with what the accepted workaround is (but a <a href="http://tagsoup.com/cookbook/css/fixed/" rel="nofollow">quick</a> google <a href="http://www.cssplay.co.uk/layouts/fixed.html" rel="nofollow">search</a> shows a few hacks that might work)</p> <p>I'm curious though, any reason you want to do it this way? Why have the menu scroll with the screen and then stop at the top? Why not just fix it to one place on the screen from the start, something like <a href="http://jsfiddle.net/H66sh/" rel="nofollow">this</a>?</p>
    singulars
    1. This table or related slice is empty.
    1. POfloating menu bar in containing div (js)
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USzxt
    1. USzxt
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POfloating menu bar in containing div (js)
      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'm very new when it comes to javascript, i'm having to use it through necessity to achieve the effect i'm after here. Should I adjust the code to include screen width and container width, or is the code you posted the finalised code? I need to use this method as I have explained in my comment to 'blender' in the above post (hope that clarifies things in regards to that). I have tried to implement your code, but it just shifts to the right, which must mean it is now contained in the menu_runner (which is was not before your help!) but now the menu runner is out of position? thanks for helping
      singulars
      1. PO
      1. USJon Kyte
    2. COThe widths are automatically figured out using javascript, so the code should not need to be adjusted. Have you added anything else to the page, or are you saying something is wrong when you try just the [jsfiddle demo](http://jsfiddle.net/f4dhy/2/)? I did move the menu_runner a little bit with the css added to the body, is that the issue? Removing that will get you the original position you had, but then your floatbar will be off a bit when you scroll it and you'll need to further tweak its position.
      singulars
      1. PO
      1. USzxt
    3. COAlso, without going into all the details, technically your floatbar is not contained within the menu_runner, because that isn't possible with elements that are positioned absolute or fixed. I just made it look like it is (but then you have to ask: do you really need that container? because something like [this](http://jsfiddle.net/H66sh/1/) would work to keep your menu always in view). I'm sure there are other (better) ways of achieving the layout you want, and maybe someone else will be able to offer it.
      singulars
      1. PO
      1. USzxt
 

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