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
Related
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.
Does anyone know of a jQuery content slider (not just an image slider) that allows you to specify a grid of elements?
As an example, this is the sort of grid that I'm after:
http://cl.ly/image/0O213C1n2b0s
You can see that it's a 2x2 grid. With the controls, when someone clicks on a 'next' link, it should scroll to show the next 4 elements. I'd like to be able to have multiple instances on a page, each having different grids (I may be 3x2, 2x2, 4x1 on the same page)
Also, as an added caveat, I need this to be responsive.
First question is; does anyone know of a solution that already exists which would fit my requirements? If not, that leads to my second question; would anyone like to help me write such a thing? I'm relatively savvy with javascript (more specifically jQuery if I'm being absolutely honest) but by no means an expert.
I've done a fair amount of googling, but came up short. Hopefully someone is way ahead of me and has already written something along these lines.
What say you, Internet?
Have you seen this:
jQuery grid syle slider
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
I've built a very basic grid of divs by using float:
However when expanding one of the items placed in the right-hand side column, here is what happens (please excuse my crude/lame arrows I've used to illustrate what I'm trying to achieve):
Which is what I expected but not what I really want. I'm looking for a neat way of having boxes A and B move up to fill the empty spot and items C-H to move up one row so that available space is utilized most efficiently.
Here is the JSFiddle I've created to illustrate this problem (apologies it's not clickable, stack overflow rep thing again...) :
http://jsfiddle.net/VDV6S/4/
I would appreciate any suggestions.
You need jQuery Masonry, or something similar.
Alternatively, you can split the items into two columns manually: http://jsfiddle.net/thirtydot/VDV6S/5/
Another option is to use CSS3 columns, however the browser support might not be acceptable.
I'm currently developing a website and my client wants the text of various articles to overflow into two columns. Kind of like in a newspaper? So it would look like:
Today in Wales, someone actually Nobody was harmed in
did something interesting. the incident, although one
Authorities are baffled by this elderly victim is receiving
development and have arrested the counselling.
perpetrator.
Is there a way I can do this with just CSS alone? I'd prefer not to have to use multiple divs. I'm open to using JavaScript too, but I'm really bad at that, so help would be appreciated. I was thinking maybe JavaScript could count how many <p>'s there are in the content div, and then move the second half of them to be floated right based on that?
The good news is that there is a CSS-only solution. If it was implemented, it would look like this:
div.multi {
column-count: 3
column-gap: 10px;
column-rule: 1px solid black;
}
I'd probably handle it in your backend, whatever that happens to be. An example in PHP might look like:
$content = "Today in Wales, someone actually did something...";
// Find the literal halfway point, should be close to the textual halfway point
$pos = int(strlen($content) / 2);
// Find the end of the nearest word
while ($content[$pos] != " ") { $pos++; }
// Split into columns based on the word ending.
$column1 = substr($content, 0, $pos);
$column2 = substr($content, $pos+1);
It should probably be possible to do something similar in JavaScript with InnerHTML, but personally I'd avoid that whole situation because more and more people are using plugins like NoScript that disables JavaScript till it's explicitly allowed for x site, and above anything else, div's and CSS were designed to degrade nicely. A JavaScript solution would degrade horribly in this case.
Here's a JQuery plugin which does columns automatically, and can even vary number of columns based on screen size.
I haven't used this myself, but check it out.
If you are using Mootools, you can check out MooColumns.
First off, i don't think just css can do that, but i would love to be proven wrong.
Second, just counting paragraphs won't help you at all, you need at least all the heights and calculate the middle of the text height based on that, but you'd have to account for window resizing etc. I don't think there is a reasonably simple off the shelf solution. Unfortunately i'm pessimistic about finding a perfect solution to this problem, But it is an interesting one.
This is difficult to achieve in HTML/CSS/JS for a reason (although I'm sure it's possible).
Newspapers use multiple columns to reduce the line width make text more readable. This is fine on paper because when you finish one column you flip your eye up to the beginning of the next.
On the web we use scrolling to allow text to continue past the bounds of the screen therefore don't need columns.
This is supported in a Mozilla only CSS extension: -moz-column-count. See : https://developer.mozilla.org/en/CSS3_Columns