it's difficult to describe in the title,but what I'm thinking of are those sites like some of the Tumblrs or some other fancy webpages where the parts (for example the images) when they appear they move in next to the existing ones, you can move them and all the others move along and rearrange themselves. Same when some of the middle disappear and all the others rearrange and move into the space of the one that disappeard.
My question is : how to do that? is there a plugin for that? if not, what would be the code for that ? I presume it's not that easy...
An example would be :
I have some images (1)--(2)--(3)--(4)
I check a box that make the (2) disappear and the 3 and 4 move along (1)--<-(3)-<-(4)
And by "move" I don't mean "appear/disappear" but litteraly animate the position, fade in/out and this should apply to any divs on multiple lines or anything!
Thank's for your help in advance
possibly you could adapt jquery sortable to your needs ?
I think I found exactly what you are looking for here!.
The author has explained how to go about what you require in quite some detail with examples and a near walk-through using jQuery.
In order to move content as you've described - (1)--<-(3)-<-(4), you can 'cheat' by inheriting the CSS styling of the containers from 2-3 and 3-4 respectively so it seems 2 has been removed and 3, 4 have moved to take its place without using elaborate JS.
Hope this helps.
This looks to be the answer !
http://masonry.desandro.com/#getting-started
Related
Ok, so I want to develop a web portal page that can direct you to multiple websites that I have. I want to design it like this:
Where each section is a clickable section with JS and when hovered it pops up a bit and fades into a picture of some sort. Anyways, my question is how would I get a div to be angled like this? I read about using the border trick to make a CSS triangle, but I don't believe that will work for this. I was also thinking if there were a way to use the CSS transform property somehow but I cannot like up the triangles uniformly around the page and then keep it scalable so it's responsive. Does anyone have any suggestions? Or is this even possible??
CSS offers something called clip-masks. This allows you to move past basic color shapes and allows for the shaping of images. This would look good when used as the links you want.
See more about clip-paths: https://css-tricks.com/almanac/properties/c/clip-path/
A useful site for deriving the actual CSS for the shape can be found here: https://bennettfeely.com/clippy/
This used in conjunction with media queries for responsiveness and absolute positioning for arrangement should get you where you want to be.
I found this site, maybe it will help:
CSS Triangle Generator
I think you can align different triangles with position: absolute too.
Im interested to make a loading page like the one on this site:
http://www.weinbau-trummer.at
Maybe the solution is to slide another image over it with some opacity?
Probably you are looking for Progress.js
It can be a good starting point for you to begin with instead of starting from scratch. It contains many different progress styles, play around with it until you make or find the one you're looking for.
i bet everyone of you has seen www.tumblr.com
right on the registration page on the bottom you see the '30 reasons...' link that slides the complete page up and reveals a second one.
i found ways to do this with putting two sides into one and just scrolling to the second part, but tumblr seems to have 2 different pages there that swap somehow with a slide effect.
im pretty sure it is done with some jQuery but i have not found any more information about how to achieve something like this.
it is a question out of pure interest because i really love the effect =)
it would be great if someone would give me a hint how to do something like that.
thanks in advance,
sebastian
It is indeed a nice effect. It's a bit of a combination of CSS and javascript really. I would use jQuery for sure. I've knocked up a little jsFiddle to show you how it can be done:
http://jsfiddle.net/SufZD/
I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)
I have a requirement to have a universe type menu, where there is a main item in the center, and "X" amount of items around it. (ie: sun with planets).
I have searched high and low for an example, and all of the search results points to using css, but this requires manually figuring out the position of the items.
How can I create a menu like this where I can dynamically add items?
I am sure there is some jQuery / javascript example somewhere
Did you try searching for pie menus? There are a couple of jQuery Plugins:
jQuery - Pie Menu
jQuery Canvas Pie Menu
check out jQuery Radmenu - http://tikku.com/jquery-radmenu-plugin
I've just done a hell of lot of googling for you - but couldn't find anything either.
So, the answer must be - write it for yourself (see, that's fun!).
I found this great resource to help out. It's not JavaScript, but the code could easily be rewritten to help drawing the invisible circle needed to do the trick.
Some sin/cos stuff will probably also be needed - to determine where on the circle your menu points should be, dynamically. It's unfortunately not just as simple as saying 360/numberOfMenus ;-)
I hope this helps you out. Sometimes, the answer is that you have to do it yourself :D
I found this thread too late, because I also built one. You can find it here: http://www.pritaeas.net/public/jquery/hp/circulate/index.html
It is a jQuery plugin, very small, that positions li items in a circle.