Databases
StackOverflow2013
Postsdbo
POstellar.js - configuring offsets / aligning elements for a vertical scrolling website?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POstellar.js - configuring offsets / aligning elements for a vertical scrolling website?
    primarykey
    data
    text
    <p>I have found, and am trying to use, a plugin called <a href="http://markdalgleish.com/projects/stellar.js/" rel="nofollow">stellar.js</a>. Primarily it is for creating a parallax effect for websites, but, I am not after this effect - I am after the other effect it offers: </p> <blockquote> <p>Stellar.js' most powerful feature is the way it aligns elements.</p> <p>All elements will return to their original positioning when their offset parent meets the edge of the screen—plus or minus your own optional offset.</p> </blockquote> <p>An example of the offset positioning: <a href="http://markdalgleish.com/projects/stellar.js/#show-offsets" rel="nofollow">http://markdalgleish.com/projects/stellar.js/#show-offsets</a> . When you scroll over a div it snaps/realigns to the edge of the browser. I am trying to get this to work for a vertical website.</p> <p>I am not having much luck - due to my novice knowledge of Javascript and jQuery. I thought it would just be a case of swapping around the horizontals to verticals.</p> <p>Has anyone played with this plugin before, or used it for a similar scenario, and got any tips?</p> <p>The jsFiddle with all the code: <a href="http://jsfiddle.net/2SH2T/" rel="nofollow">http://jsfiddle.net/2SH2T/</a></p> <p>And the Javascript code:</p> <pre><code>var STELLARJS = { init: function() { var self = this; $(function(){ self.$sections = $('div.section').each(function(index){ $(this).data('sectionIndex', index); }); self.highlightSyntax(); self.handleEvents(); self.debugOffsets.init(); self.debugOffsetParents.init(); self.initParallax(); }); }, initParallax: function() { var isHomePage = $('body').hasClass('home'), $main = $('div.main'); if (isHomePage) { $main.height($main.height() + $(window).height() - 1000); } if ($.browser.msie) { $('body').removeAttr('data-stellar-background-ratio').append('&lt;div class="ie-bg" /&gt;'); } $(window).stellar({ horizontalOffset: !isHomePage, verticalScrolling: 40 }); }, highlightSyntax: function() { $('pre').addClass('prettyprint'); if (window.prettyPrint !== undefined) prettyPrint(); }, handleEvents: function() { var self = this, //Debounce function from Underscore.js debounce = function(func, wait) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; func.apply(context, args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); } }, handleScroll = function() { var scrollTop = $(window).scrollTop(), sectionIndex = Math.round((scrollTop - 40) / self.$sections.first().outerHeight()), $activeSection = self.$sections.eq(sectionIndex); if ($activeSection.length === 0) { $activeSection = self.$sections.last(); } if ($activeSection.length === 0) return; $(window).unbind('scroll.stellarsite'); if (scrollLeft === 0) { $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500)); } else { $('html,body').animate({ scrollLeft: $activeSection.offset().left - 40 }, 600, 'easeInOutExpo', function() { setTimeout(function(){ $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500)); }, 10); }); } $(window).bind('mousewheel', function(){ $('html,body').stop(true, true); }); $(document).bind('keydown', function(e){ var key = e.which; if (key === 37 || key === 39) { $('html,body').stop(true, true); } }); }; if (window.location.href.indexOf('#show-offset-parents-default') === -1) { $(window).bind('scroll.stellarsite', debounce(handleScroll, 500)); } }, debugOffsets: { init: function() { this.$debug = $('#debugOffsets'); if (window.location.href.indexOf('#show-offsets') &gt; -1) { this.show(); } }, show: function() { this.$debug.fadeIn(); $('body').addClass('debugOffsets'); $('h2').append('&lt;div class="debug-h2-label"&gt;Offset Parent (All parallax elements align when this meets the offsets)&lt;/div&gt;'); }, hide: function() { this.debug.fadeOut; $('body').removeClass('debugOffsets'); } }, debugOffsetParents: { init: function() { this.$debug = $('#debugOffsets'); if (window.location.href.indexOf('#show-offset-parents-default') &gt; -1) { this.removeOffsetParents(); } if (window.location.href.indexOf('#show-offset-parents') &gt; -1) { this.show(); } }, show: function() { this.$debug.fadeIn(); $('body').addClass('debugOffsetParents'); $('h2').append('&lt;div class="debug-h2-label"&gt;New Offset Parent (All parallax elements align when this meets the offsets)&lt;/div&gt;'); $('h2').each(function(){ $(this).find('div.constellation:last').append('&lt;div class="debug-constellation-label"&gt;Default Offset Parents&lt;/div&gt;'); }); $('body').addClass('debug'); }, removeOffsetParents: function() { $('body').addClass('debugOffsetParentsDefault'); $('h2[data-stellar-offset-parent]').removeAttr('data-stellar-offset-parent'); } } }; STELLARJS.init(); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDBUK
    1. USDBUK
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POstellar.js - configuring offsets / aligning elements for a vertical scrolling website?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POstellar.js - configuring offsets / aligning elements for a vertical scrolling website?
      1. USDBUK
      1. VTFavorite
    3. VO
      singulars
      1. POstellar.js - configuring offsets / aligning elements for a vertical scrolling website?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHave you had a look at their demo with backgrounds on a vertical page? http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html
      singulars
      1. POstellar.js - configuring offsets / aligning elements for a vertical scrolling website?
      1. USRemarkLima
    2. COYep, that example is a plain parallax one without elements snapping to the top of the browser. I am not bothered about using the parallax etc. I am just after the element alignment functionality like this example: http://markdalgleish.com/projects/stellar.js/#show-offsets
      singulars
      1. POstellar.js - configuring offsets / aligning elements for a vertical scrolling website?
      1. USDBUK
 

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