4

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.
alt text

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!

sudo rm -rf
  • 29,408
  • 19
  • 102
  • 161

6 Answers6

4

Here's an example to get you started http://jsfiddle.net/Cquhj/

A few things to take away from this pattern:

  1. The middle div has an overflow: hidden; property and height: 0px.
  2. 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

nedk
  • 673
  • 3
  • 8
4

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.

Pérez P. Javier E.
  • 41
  • 1
  • 2
3

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

Community
  • 1
  • 1
markus
  • 40,136
  • 23
  • 97
  • 142
  • Thanks for your answer. Do you have any resources that could point me in the right direction? – sudo rm -rf Jan 08 '11 at 03:52
  • Actually both the world wide web and especially SO are full of such resources, your question has been asked a hundred times... I was thinking of voting to close yours as well but you added this nice screenshot so I was like... oh watta. – markus Jan 08 '11 at 03:57
  • @thearkun Ah, I searched here on SO, but nothing seemed to appear. What is this called, so I'm familiar with the terminology? – sudo rm -rf Jan 08 '11 at 04:07
3

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/

Jimmy Chandra
  • 6,472
  • 4
  • 26
  • 38
1

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.

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • Thanks for your help. I do think I'll pick up a book if I plan to get serious about making websites. As of now, I just am doing this for fun. :) – sudo rm -rf Jan 08 '11 at 04:06
1

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)

  • That's interesting! That must've taken a really long time to create all that in HTML5 & CSS. – sudo rm -rf Nov 27 '11 at 03:56
  • it's more the logic behind it. I just started with jQuery a few months ago, so I guess it's pretty basic stuff. I guess I am pretty good with CSS and that's an advantage. Anyways this is still work in progress. I started this project about 4 weeks ago and try to work on it any spare second I can find. –  Dec 01 '11 at 03:46
  • in case anybody ever needs this. http://dream-world.us/2011/12/07/advanced-ios-style-folders-page-split-with-jquery/ . It features an iOS 5 style pagesplit with dynamic positioning and even the little arrows. This works for any background. The blogpost features a demo and a download. enjoy.... –  Dec 08 '11 at 10:42
  • I guess I could make it a plugin so it's fully dynamic and easier to use in a project. –  Dec 10 '11 at 22:01