Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Yup that (jQuery not selected) was the core problem for why it wasn't working. But a few suggestions --</p> <p>Duplicating html markup like this is really bad. You should use jQuery/CSS to adjust what the header looks like at various scroll positions.</p> <p>Also, it might help you debug a bit if you use the console in Chrome/Firefox -- it would of given you errors right away without jQuery. And if you open up my fiddle here, I left console.log() statements in there to show where the functions get fired based on scroll.</p> <p>Animating a header like this is going to lead a bunch of problems. Using jQuery animations could cause a build up problem if you scroll up and down really quickly, which could cause the same header to be on the page at the same time. <em>NOTE -- The stop method you mentioned will help with this, but for most animation problems (specifically with hover), it won't be sufficient and you should look into a plugin like 'HoverIntent'.</em></p> <p>Last, its good practice to declare + calculate as many variables as you can outside of a function that gets constantly updated -- you don't need to continuously recalculate the height of the header that you are comparing to, it will be a fixed number.</p> <pre><code>// this height will be the same, you dont need to constantly calculate it on scroll var homeHeight = $('#header').outerHeight() + $('.homeIntro').outerHeight(), scrollPosition; $(window).on('scroll', function () { scrollPosition = $(this).scrollTop(); animateHeight(scrollPosition); }); function animateHeight(scrollPosition) { if (scrollPosition &gt;= homeHeight) { console.log('yes'); $('#clonedHeader').animate({ 'top': '0' }, 300); } else { console.log('no'); $('#clonedHeader').animate({ 'top': '-100px' }, 300); } } </code></pre> <p><a href="http://jsfiddle.net/ndreckshage/ecUAc/" rel="nofollow">http://jsfiddle.net/ndreckshage/ecUAc/</a></p>
    singulars
    1. This table or related slice is empty.
    1. POShowing a new element when window has scrolled past another element
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USndreckshage
    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
    1. COhoverIntent won't help here, just need some throttling of calling the animations and using flag for current setting . If conditions haven't changed based on flag no need to call animation
      singulars
      1. PO
      1. UScharlietfl
    2. COThanks for all of those suggestions, I only missed the jquery library on the fiddle, it was there in my local version, that'll teach me to rush! I've got jquery cloning the header for me as it causes a very awkward jump if it uses the same header to fix to the top of the page, I tried a number of different ways but found this to work easiest. That's some very good points about the console logging, I will definitely modify my code to take that into account. Thanks a lot for all the advice, I definitely need to polish up on my js, big time
      singulars
      1. PO
      1. USjamie
 

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