Change sorting direction of Isotope plugin in jQuery - javascript

I am using Isotope for a home page menu layout.
This is my current layout: cellsByColumn and the settings for it follows:
cellsByColumn : {
columnWidth : 50,
rowHeight : 50
}
This works well, except for one problem. The sorting is top to bottom. Is there any way to make the sorting left to right?
Best regards,
Tony.

Related

Isotope in IE9 shows all in one column

I'm using Metafizzy's Isotope, and when I test it in IE 9, the elements goes in one column, instead of 4 per row.
It works in all other browsers, even IE8.
Here's the Isotope code I'm using:
var $container_gd = $('#gd .program-content').isotope({
itemSelector : '.student-gd',
layoutMode: 'fitRows',
getSortData: {
name: '[data-name]'
},
sortBy: 'name'
});
I also have filtering buttons, and those work fine, it's just the layout that's broken.
Here's the codepen: http://codepen.io/anon/pen/vtgwK
Any ideas how it could be fixed?
I posted the question at the Isotope GitHub repository, and I got my answer there. I had set a margin auto to the items that are being sorted, and IE9 counted the centering as part of the width of the item. Setting the margin to 0 fixed the issue.

How to move/animate elements in from the side with Stellar.js on a vertical scroll?

I'm using Stellar.js jQuery plugin to create a parallax scroll affect, but I'm not sure if Stellar supports what I am trying to accomplish. I have the basic parallax scrolling affect working properly (largely based on this tutorial from TutsPlus).
What I am trying to accomplish is to have it so while the user scrolls down the page, certain elements move/animate into the view from all different angles--being tied to the scroll position. For example, as the user scrolls down the page, an apple enters the view from the top right position of the screen, and as the user continues to scroll down the page, the apple moves in a diagonal path towards the bottom left position of the screen. Should the user scroll back up, the apple would continue along this same path in a backwards fashion. Is this possible with Stellar? Do I have to use a different plugin? Can I use another plugin WITH Stellar to achieve this affect?
Any help on this would be greatly appreciated. If you need any more info, please let me know.
Thanks!
Stellar.js supports the creation of position property plugins which allow you to write custom positioning logic.
I've written a sample plugin, called 'apple', which does something resembling what you want:
$.stellar.positionProperty.apple = {
setTop: function($el, newTop, originalTop) {
$el.css({
'top': newTop,
'left': $el.hasClass('apple') ? originalTop - newTop : 0
});
},
setLeft: function($el, newLeft, originalLeft) {
$el.css('left', newLeft);
}
};
You'll notice it includes a ternary which only applies the 'left' value if the element has the 'apple' class:
'left': $el.hasClass('apple') ? originalTop - newTop : 0
This is an example of how you might apply different positioning logic for each element.
So now, you can use the plugin like so:
$.stellar({
horizontalScrolling: false,
positionProperty: 'apple'
});
Obviously, you'll need to tweak this to suit your purposes, but this should be enough to get you started.
You can see a demo of this in action on JSFiddle.
Jaypee, I used this code to do it:
$.stellar.positionProperty.custom = {
setTop: function($el, newTop, originalTop) {
if( $el.data('stellar-moveleft') !== undefined ) {
$el.css({ 'left': originalTop - newTop });
} else if( $el.data('stellar-moveright') !== undefined ) {
$el.css({ 'right': originalTop - newTop });
}
$el.css({ 'top': newTop });
},
setLeft: function($el, newLeft, originalLeft) {
$el.css('left', newLeft);
}
};
Based off the original answer by markdalgleish , It takes the data-tag: data-stellar-moveleft or data-stellar-moveright to achieve what you desired, the rest of

Jquery Isotope: making horizontal Masonry

I am trying to build a horizontal version of JQuery Masonry using JQuery Isotope. I want my result to look something like this:
Layout-modes (CLICK THE masonryHorizontal OPTION).
As per the sites instructions:
Masonry Horizontal
my script looks like:
$('#isotopecontainer').isotope({
itemSelector : '.item',
masonry : {
columnWidth : 270
}
});
However, 2 things are happening:
1) when the page loads the height of the #isotopecontainer div is set at 60px so you only see the tops of the .item divs.
2) if you resize the browser the #isotopecontainer div expands but the .item divs do not line up like the example.
Can anyone help point me in the right direction at all? My demo site is here.
Thanks.
You're demo site is working in Firefox.
Although, you're right, in Chrome it's not. The problem is fairly simple. You need to set width and height attributes on your images. Or else, Chrome load them as 0px height (which made container with default height of line-height value) until they get the file. Firefox isn't acting this way and waits for knowing the images size before creating the layout.
Hope this help!
You need to add layoutMode: 'masonryHorizontal' or else it won't work. Like this:
$('#isotopecontainer').isotope({
itemSelector : '.item',
layoutMode: 'masonryHorizontal',
masonry : {
columnWidth : 270
}
});
#isotophecontainer has overflow: hidden. Removing this shows all of the images for me in Chrome.

Navigation fade in after scroll down?

I would like to get a navigation exactly like this website : http://www.interviewmagazine.com/
A navigation bar appears after scrolling down about 700 pixels or so.. its a fixed nav with fade in effect and has a fade out effect when you scroll back to top.
I tried to see how they did their code but i couldnt figure it out.
sounds like mootools tho?
If someone can help that would be awesome. thanks!
You can create such a menu using jQuery and CSS, swapping classes as needed when:
var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
//do something;
}
CSS: position : fixed, opacity : 0, height : 0; overflow : hidden
swap class to change height to fixed amount
animate({opacity : 1.0}, 'fast', function() {
//callback;
});
You'll have to set a listener for when user scrolls, but this should get you started. All you need is jQuery and a browser, a logical approach to cut the project up into manageable parts, and time.
EDIT: Here's your fiddle.
http://jsfiddle.net/lazerblade01/fNn7K/26/
For anyone searching through stackoverflow here is my try:
$(function(){
// Check the initial Poistion of Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyheader').css('opacity', '1');
} else {
$('#stickyheader').css({position: 'static', top: '600px'});
$('#stickyheader').css('opacity', '0');
}
});
});
Here is a Fiddle DEMO http://jsfiddle.net/uFq2k/297/
It is a little modified version of this code: how can I stick the div after scrolling down a little
David Walsh has a thing he calls ScrollSpy - much like twitter's scroll spy - only it does a different thing.
the twitter one can react to a particular element of interest coming into view.
walsh's plugin can react and give you events when a user scrolls to a particular threshold and back.
http://davidwalsh.name/mootools-scrollspy
You could try Twitter's Bootstrap. Check out their second toolbar.

extJs (Hbox issue)

I am developing a portal as in http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html . I have developed the following code that shows a panel with two items.Their height and width is adjusted automatically. But what i want to do is to make them stand in a row.Currently the second item is placed below the first item.I have replaced vbox with hbox but the chart just disappeared. Please help....
Your help is appreciated
Ext.define("Ext.app.ChartPortlet", {extend:"Ext.panel.Panel",alias:"widget.chartportlet",requires: ["Ext.data.JsonStore","Ext.chart.theme.Base","Ext.chart.series.Series","Ext.chart.series.Li ne","Ext.chart.axis.Numeric"],
generateData:function(){var b=[{name:"x",djia:10000,sp500:1100}],a;for(a=1;a<50;a++) {b.push({name:"x"+a,sp500:b[a-1].sp500+ ((Math.floor(Math.random()*2)%2)?-1:1)*Math.floor(Math.random()*7),djia:b[a-1].djia+ ((Math.floor(Math.random()*2)%2)?-1:1)*Math.floor(Math.random()*7)})}return b}
,initComponent:function()
{Ext.apply(this,{layout: {
type: 'vbox',
align: 'stretch'
}
,width:600,height:300,items:
[{xtype:"chart",animate:false,shadow:false,store:Ext.create("Ext.data.JsonStore",
{fields:["name","sp500","djia"],data:this.generateData()}),legend: {position:"bottom"},axes:[{type:"Numeric",position:"left",fields:["djia"],
title:"Dow Jones Average",label:{font:"11px Arial"}}, {type:"Numeric",position:"right",grid:false,fields:["sp500"],title:"S&P 500",label: {font:"11px Arial"}}],
series:[{type:"line",lineWidth:1,showMarkers:false,fill:true,axis: ["left","bottom"],xField:"name",yField:"djia",style:{"stroke-width":1}}, {type:"line",lineWidth:1,showMarkers:false,
axis:["right","bottom"],xField:"name",yField:"sp500",style:{"stroke-width":1}}]}]
});this.callParent(arguments)}});
The code you show uses VBox with align stretch that means the items will be placed underneath each other. Align stretch means their width should take 100 percent of parent container so u should not specify the width.
Your current code as posted: http://jsfiddle.net/dbrin/kcd9g/show/light/
I corrected missing ; and width setting, the rest is yours.

Categories

Resources