I would like to add a page to my website with a layout with animated panels that auto-slide around based on which one is clicked, as in Stackexchange's Sites page:
https://stackexchange.com/sites
What language and what specific methodology did the designers of Stackexchange use for laying out that page, or more meaningfully, what language and methodology would you recommend I research, in order to learn to create something similar? Perhaps there is a tutorial somewhere for creating something similar to it?
From looking at the sources of that page (achieved by activating the developer console in Chrome and looking at the scripts panel.) I can see they are making use of the Isotope layout engine.
Isotope is a jQuery plugin written in JavaScript and the site linked above contains some solid documentation; however if you are new to JavaScript then they may be a little difficult to follow. A quick google brings up the following Isotope tutorial which may help you get started.
Related
I'm trying to create a page similar to new google calendar landing page http://www.google.com/landing/calendar/
I'm using skrollr(https://github.com/Prinzhorn/skrollr) but I can't get the effect right, on google landing page if you do a small scroll it will send you to the next block and with skrollr I'm not able to get that navigation. Any ideas how I could reproduce that? is it possible to do with skrollr or you would recommend another js plugin?
Thanks!
In case you still haven't found a solution yourself, I've been tasked with doing a very similar thing. There are two ways of achieving this that I researched and choosing the right one mostly depends on the complexity of your design/expected result. Unfortunately I can't provide a link because the site won't be live for next couple of weeks.
This is what worked for me:
I used fullpage.js library to achieve 'full-page' scroll effect. You could also take a look at onepage-scroll.js and see which one fits you most - they don't differ that much in terms of functionality though.
Benefits of using fullpage.js (among other things):
integration is quick and simple
allows a lot of customisation through options hash
provides callbacks when scroll to another section is triggered (before or after it happens)
enables you to manually trigger a scroll via 'methods'
works surprisingly good on iPad/iPhones. Probably on other mobile devices as well, although I can't fully confirm that since that
wasn't a requirement for my project.
Now when you've got section-to-section scrolling in place, what's missing is the animations. Considering that fullpage.js provides you with callbacks, it's as easy as adding a class when a transition to another section/slide happens and then using that class to trigger an animation of your choice through CSS. This is what worked for me without facing major problems.
For more advanced things:
If you're looking to build something more complex, then I strongly recommend that you take a look at tween.js. This is what google used on the landing page that you've provided in your question.
It's a very powerful tool hence it requires quite some setup + it moves animations to javascript, which might be a hassle. I would rather keep them in CSS where they belong and dont use javascript until I really need to.
FYI I also started with skrollr but it won't really work with 'fullpage scroll' because what it really does is disabling scrolling and animating body/html through translate. Skrollr bases it's behaviour on scroll event which will not fire if you use libraries I proposed.
EDIT:
It appears that you can actually use skrollr in par with fullpage.js. You can see the answer on how in it's FAQ site. Thanks to Alvaro for claryfing that! Even then, I wouldn't use skrollr unless you really need it for some advanced parallax scrolling effect - as said before, depends on your needs though. :)
Let me know if you have any doubts or something is not clear in my answer.
Good luck!
Quite frankly I don't even know how to describe what I'm attempting to do. "Dynamic Navbar" is the best I have come up with.
Basically, I've created a single page website with 4 "pages" (sections) using purely HTML and CSS (as well as jQuery for smoothScroll).
I want the highlighted link on the navbar (the current page) to change when users scroll between pages. I've seen this done before, such as on this site:
http://thinkpixellab.com/
I have little-to-no experience with JavaScript and jQuery and I'm really not sure where to start. If anyone could point me in the right direction I would greatly appreicate it!
What you're looking for is ScrollSpy. It's made for Mootools originally, I think: Scrollspy
Bootstrap have it as a plugin for their framework: Bootstrap Scrollspy
I found a standalone JQuery plugin for it, though not sure how good it is as I haven't used it myself: plugin
Obviously you could write something yourself, but with not much experience of JS/Jquery I reckon you're better off sticking to a plugin or something.
Let me start by saying I have read plenty of questions and blog posts relating to the use of combinations of backbone/jQuery mobile and comparisons of backbone/Sencha, and have actually had my head in this space for some time but still haven't found quite what I'm looking for.
I'm very familiar with Sencha and have used it for wrapped (phonegap etc.) apps in the past, and I really like it. However for a smaller code base for web projects and more control over browser compatibility and various other reasons it's not quite appropriate for certain tasks.
When I start trying to engineer mobile (but also desktop and tablet) backbone webapps from scratch I find I miss three key things
General mobile 'init', filling the screen etc. (although this is the easiest to replicate)
Tabbed, iOS-style, navigation (of course I can roll my own, but it seems silly)
Scrolling - both scrolling a piece of content, but especially the carousel and how the carousel is linked to the tabbed interface
I'm not massively bothered about mimicking each device's native OS style throughout the app, and in fact would prefer to (whilst following some sensible conventions) make them look a bit different.
Ember has flame and I've used that before, that's kind of the thing I'm looking for.
I know I can build up a toolkit of jQuery mobile, custom script, jQ plugins/iSroll, CSS libraries, backbone UI etc. and do like the idea of compiling my own 'stack' but for some reason it just doesn't feel right.
So, to bring this back around to more of an actual question. I guess I'm looking for ideally a single project that isn't specifically linked to a library - and in theory could run on it's own on a statically coded page if needs be (even though that wouldn't be the case for me now). Or perhaps some words from others who have been on a similar journey and perhaps ended up on the mix of libraries I mentioned earlier with why they decided this was the best solution.
I'm not looking to do anything too crazy, say something a bit like the old sencha oreilly example but using some carousels, and I'd cover the multiple devices and browsers with a mix of Responsive CSS and a bit of JS.
I'm going to continue looking at this myself too and report back if I find anything interesting
Cheers
EDIT
While looking into this, I realised its only really the carousel and scrolling that I really wanted from Sencha. I noticed that Cubiq has a nice slideview component that handles the carousel very neatly and with a small footprint. I found a stackoverflow answer about using this with the original iscroll for vertical scrolling. See my answer below for successfully using the two together
How to use iScroll4 with SwipeView?
This would need some tweaking to work appropriately on desktop. and I'd like to control it from a tabbed UI too. Anyway, I'm not near answering my own question but given this has had a couple of upvotes I'd post some of my thinking.
Quick edit
You can attach events for tabs to the slideview https://dl.dropbox.com/u/81328343/scroll/1.html but at the moment, it only animates for next/prev and not direct page (tab) access
Webix
Very big library of components.
I've used Twitter Boostrap with Backbone...
http://twitter.github.com/bootstrap/
Hi Im new to GWT and Google App Engine. Im trying to layout which looks like the image. However, Im not sure whats the best way to achieve this.
There are several ways according to GWT documentation such as: UIBinder, Layout Panels (Im using this approach in the image).... etc.
However, my UI is not that complicated. I have a div with the navigation bar on top, a div with a map(Javascript, a div with Facebook comments(javascript), and a div with some functionality which I wrote for ratings etc.
Thus mostly this webpage invokes a lot of javascript and third party stuff.
Here is some code that accomplishes this
String header = "<div><h3>Navigation bar here</h3></div>";
String east = "<div><h3>Rating System here</h3></div>";
String south = "<div><h3>Facebook comments here</h3></div>";
dock.addNorth(new HTML(header), 75);
dock.addSouth(new HTML(south),50);
dock.addEast(new HTML(east), 300);
dock.add(map);
RootLayoutPanel.get().add(dock);
I tried entering some Javascript in that html string to be added to the map. However, it didnt show up on the view. Seems like the html only works if its text, is that caorrect?
Whats the best way to construct this in GWT?
Could someone please point me to some examples of code/ tutorials?
Thanks
I built a website like you project to do (link in my profile).
There is a jar file available for mapping maps v3 in gwt.
Here it is : http://code.google.com/p/gwt-google-apis/downloads/detail?name=gwt-maps-3.8.0-pre1.zip
Take care of GAE ... if your application must stay in "free", and you plan to make it available for others users, you will ran out of quota pretty fast :-(
(I gets 60% of instance time with only googlebots ...)
Anyway, just make an almost empty html, and build your panels from scratch.
Background
I am tasked with developing the front-end to an analytics product that presents the information to the user in a customizable dashboard like the one used by Google Analytics:
- Dashboard is comprised of draggable widgets arranged in a grid layout
- Widgets have a drag handle which can be clicked by the user to start dragging
- Widgets can be re-ordered by dragging and dropping the widget
Question
Part 1. Using jQuery (or any other open source Javascript API) can anyone explain to me how such a feature is implemented, from a high level overview.
Part 2. Can you recommend any resources for me to read that may be relevant to implementing this feature, or any foreseeable related features? (books, links, api docs, tutorials)
EDIT This one looks even better and more maintained! GRID by UberVU
Next one on the list is gridster.js
PS: I know this is an old thread but since this question is the first hit in Google I think its worth listing some newer libraries.
You can easily implement this.
You will get required info from
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
and
http://james.padolsey.com/javascript/inettuts-with-cookies/
First what comes to head is jQuery UI.
Use HTML 5
http://html5doctor.com/native-drag-and-drop/
You can find a lot of info here:
http://jqueryui.com/demos/draggable/
Use jQuery, and get on the Demo & Doc page to see how D&D is being used.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
If you wanna dive into a Widget Page/Dashboard architecture, and would like to see how others did it, take a look at Omar AL Zabir's book
http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=ntt_at_ep_dpt_1
I am pretty sure this one is going to make you happy!
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/