Geek Answers Handbook

Recover iOS UITableView Using HTML

I am trying to create a page where there are several sections, and when you scroll the title you are on, it always appears at the top of the page (in a fixed element). I want to achieve the same effect as on the iPhone, when you scroll it, “pushes” the old title and replaces it.

I saw this with lists, but I want to do this with several sections of HTML5.

For example:

<section> <h1>Header 1</h1> <p>Text for section</p> </section> <section> <h1>Header 2</h1> <p>Text for section</p> </section>

Does anyone have any ideas?

thanks

+8
jquery html5 iphone header uitableview
source share
3 answers

Here you go are pretty similar:

http://jsfiddle.net/AlienWebguy/mvtP7/1/

HTML:

 <div id="header1" class="header fixed"> <h2>Header1</h2> </div> <div id="header1_content"> <p>Lorem ipsum dolor sit amet...</p> </div> <div id="header2" class="header relative"> <h2>Header2</h2> </div> <div id="header2_content"> <p>Lorem ipsum dolor sit amet...</p> </div> <div id="header3" class="header relative"> <h2>Header3</h2> </div> <div id="header3_content"> <p>Lorem ipsum dolor sit amet...</p> </div>

CSS

 p { background-color:#F0F0F0; } .header { background-color:#CCC; width:100%; top:0; left:0; } .header h2 { margin:20px; } .fixed { position:fixed; } .relative { position:static; } #header1_content { margin-top:80px; }

JQuery

 $(function(){ var lastScrollTop = 0; $(window).scroll(function(event){ var currentScrollTop = $(this).scrollTop(); if (currentScrollTop > lastScrollTop){ // Scrolling down $('.header').each(function(){ if($(this).hasClass('fixed')) { var _next_header = $(this).nextUntil('.header').next('.header'); if($(_next_header).length > 0) { if(($(this).offset().top + $(this).height()) >= $(_next_header).offset().top) { // Bottom of header hit top of next header $(this).removeClass('fixed').addClass('relative'); $(_next_header).removeClass('relative').addClass('fixed'); } } } }); } else { // Scrolling up $('.header').each(function(){ if($(this).hasClass('fixed')) { var _prev_header = $(this).prevUntil('.header').prev('.header'); if($(_prev_header ).length > 0) { if($(this).offset().top <= ($('#' + $(_prev_header).attr('id') + '_content').offset().top + $(this).height())) { // Top of header hit bottom of previous content box $(this).removeClass('fixed').addClass('relative'); $(_prev_header).removeClass('relative').addClass('fixed'); } } } }); } lastScrollTop = currentScrollTop; }); });

Thus, in essence, we create basic conflict detection. When we scroll down, we find that the bottom of the current heading collides with the top of the next heading. If this happens, we will replace it. When we scroll up, we find that the top of the current header collides with the bottom of the previous content container and makes a swap.

If you go to the next level to more accurately emulate the iPhone menu, you probably want to re-place the headers inside the DOM on the fly when they collide, which will give the illusion that one of them pushes the other way, "as soon as the previous disconnected from the screen, you applied fixed positioning to the new heading. This demo should fix you on the right track :)

Hope this helps!

+2
source share

enter image description here

I wanted to do this for a long time, and the work of Vision @AlienWebguy inspired me to finally accept it. His JSFiddle was impressive, but he needed a lot of work. I think this solution is pretty much ready to be used in my working application.

http://jsfiddle.net/RichardBronosky/VMnnr/

HTML:

 <body> <div class="tableview"> <div id="header1" class="header"> <h2>Header 1</h2> </div> <div id="header1_content"> <p> header1_content1 </p> <p> header1_content2 </p> <p> header1_content3 </p> </div> <div id="header2" class="header"> <h2>Header 2</h2> </div> <div id="header2_content"> <p> header2_content1 </p> <p> header2_content2 </p> <p> header2_content3 </p> </div> <div id="header3" class="header"> <h2>Header 3</h2> </div> <div id="header3_content"> <p> header3_content1 </p> <p> header3_content2 </p> <p> header3_content3 </p> </div> </div> </body>

CSS

 body { font-family:Helvetica,Arial,san-serif; } div.tableview { background-color:#CCC; } .tableview p:nth-child(odd) { background-color:#FFF; } .tableview p:nth-child(even) { background-color:#F0F0F0; } .tableview p { padding:8px; margin:1px 0px 1px 0px; } body, .tableview p:last-of-type, .tableview p:first-of-type, .tableview .header h2 { margin:0px; } .tableview .header { background-color:#333; color:#FFF; width:100%; position:relative; } .tableview .header h2 { padding:8px 4px 8px 4px; } .tableview .fixed { position:fixed; top:0; left:0; }

JAVASCRIPT: (depends on jQuery)

 // From: http://jsfiddle.net/AlienWebguy/mvtP7/1/ via: http://stackoverflow.com/questions/6720847 $(function(){ var lastScrollTop = 0; // When the first header is given a fixed position, the inline content that follows with shift up. el = $('.header').first(); // To over come this: clone it, make it invisible, remove id tags from it and its children, attach it before the original el.before(el.clone(false).css({'visibility':'hidden'}).removeAttr("id").find("*").removeAttr("id").end()).addClass('fixed'); $(window).scroll(function(event){ var currentScrollTop = $(this).scrollTop(); $('.header').each(function(){ if($(this).hasClass('fixed')){ if (currentScrollTop > lastScrollTop){ console.log('scrolling down'); var _next_header = $(this).nextUntil('.header').next('.header'); if($(_next_header).length > 0){ if($('body').scrollTop() > $(_next_header).offset().top){ console.log("Bottom of header hit top of next header") $(this).removeClass('fixed'); $(_next_header).addClass('fixed'); } } } else { console.log('scrolling up'); var _prev_header = $(this).prevUntil('.header').prev('.header'); if($(_prev_header ).length > 0){ if($('body').scrollTop() < $('.fixed').next().offset().top-$('.fixed').height()){ console.log("Top of header hit bottom of previous content box") $(this).removeClass('fixed'); $(_prev_header).addClass('fixed'); } } } } }); lastScrollTop = currentScrollTop; }); });
+5
source share

I have not seen the version of iphone you are talking about, but from the way you describe it, I have an idea of ​​what it is.

The problem, as I see it, is that the headers have two contexts. Firstly, they are on the page, and secondly, they are in a fixed element at the top of the page. Also, you did not say, but I suppose that if you were scrolling through each other, the headings would have to change in the opposite direction.

One approach is to provide a fixed element with a fixed height and hidden overflow. Then enter an innerdiv that contains a copy of all the page titles. Give internal relative positioning. In javascript, add an event to all the headers that are on the page, which fires when they reach the top of the window to trigger an animation. Use jQuery to animate the position of a fixed innerdiv element so that it displays the next title.

0
source share

More articles:


All Articles