Basically, how can I take multiple differently-heighted elements and 'push' them against the top of a container, like on wolfram's homepage?
When I looked at their code, it appeared that they used a large amount of javascript, as well as absolute positioning, but it seems like there are easier ways to do it than that. How would one go about this?
Any help would be much appreciated. Thanks :)
You can look into a framework like UI-Kit which allows you to do things like this pretty easily.
I don't believe there is a native CSS solution for this design, although you might want to take a look at FlexBox.
Related
DOes anyone know a good Javascript library that resembles Udemy's approach to presenting lectures?
http://www.udemy.com/mit-600-intro-to-computer-science-programming-fall-2008/#lecture/14053
It slides up and down, with a slow animation, along a vertical line, something like a timeline. I have seen something similar, but can't remember the name. Maybe you guys can help me out.
I think this will suit your requirements.
impress.js
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate.
Could anyone please point me in a the right direction?
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
I threw something together is jsfiddle for you.
http://jsfiddle.net/9R4hZ/40/
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
It uses the ARROWS or MOUSEWHEEL for scrolling.
There are from [left, right, top, bottom] transitions.
The HTML and CSS are really simple.
The JS/jQuery that runs it is self explanatory.
It's an interesting effect, that seems to be geared for artsy type sites.
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
*edit1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
http://johnpolacek.github.com/superscrollorama/
This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you.
it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
you have use scrollpath plugin
make path
Sorry if others have asked this question already but I haven't been able to find any good answers yet or I'm phrasing my questions wrong.
Anyway, now I have something like this: http://jsfiddle.net/2nvwU/2/
Which does what it should, but I dont like the vertical gap which is between some blocks.
What could I try to have the same spacing between blocks in all direction with a starting point in the top left corner. Because the blocks will be dynamic. I'm guessing columns is the way to go, but how can I load the blocks in the three columns from left to right?
I would like something like this:
http://www.googleventures.com/
or
http://dynamit.us/
Try Isotope. It is a jQuery plugin and its really good at doing what you want to do.
In case you have elements that should go across two columns, you will sometimes have gaps in the layout with masonry or Isotope. In that case, you might be able to use this simple plug in and change it to your purpose. Otherwise, I agree with Uzair.
Or - you do it "on foot", because the dynamit code is nicely commented and laid out :D
I'm wanting to rearrange table columns dynamically.
I can do the actual rearrange but for the dragging of the header cells I'm wanting something that feels like jqueryui's sortable elements with the placeholder http://jqueryui.com/demos/sortable/#placeholder (obviously horizontally rather than vertically though)
The problem is that I don't want to use jquery (javascript is fine but jquery is too heavy), does anyone know of something more lightweight that does the same thing?
Anything that can handle the complexities of drag-and-drop is going to be big. JavaScript libraries usually try to solve simple things, like DOM selectors and AJAX, then other UI functionality, like sliders, animation and drag-drop are added on top of these.
So finding small a library that does the drag-and-drop alone is unlikely. There are alternatives, such as Scriptaculous, but you'll find they aren't smaller.
Keep in mind that jQuery isn't all that big - smaller than many images you'd use on your site. It is also cached by the browser, so it doesn't have to be downloaded with every page load.
Check out http://microjs.com/ Type in what you need and it will help you narrow down a list of libraries.
Take a look at this:
http://www.switchonthecode.com/sites/default/files/99/source/SOTC-DnDLists.js
It's not horizontal but I'm sure it can be worked with...
[update: Indeed, minor modifications made this work like a charm - code will follow]
http://www.dennys.com
I'm wondering how the top navigation was programmed, From the source code I see javascript but I am hoping someone could recommend a resource / tutorial in learning how they built both the top navigation and the siding feature.
Many thanks.
You should investigate Path.js ( https://github.com/mtrpcic/pathjs ) as the url's suggest they are using it.
I doubt anyone has written a tutorial on how Denny's made a website.
But through some playing in the console, I found they use jQuery, which comes with many effects. To bring the navigation down, they probably use something like..
$('#navigation-button').mouseenter(function () {
$('#navigation').slideDown();
});
I have something similar set up here.
Don't use any of that code directly. It's just quickly written garbage. It'd need quite a bit of tweeking for production.
It's easy with javascript/jquery. Create a main div with fixed witdh where you put all your pages (menu, home, etc) and overflow:hidden. Then, with jquery's plugin Animate slide the position of the div's content.
Search for jquery controls. There are several available on the net free of charge which help you get this functionality.