From 9f2e68e8271af21545268f04a9f6af84b98425d3 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Sat, 11 Sep 2010 12:40:04 -0400 Subject: [PATCH] updated for these new demos that show different variations of the overlays --- _fixed-variation1.html | 118 +++++++++++++++++++++++++++++++++++++++++ _fixed-variation2.html | 32 +++++++++++ _fixed.html | 4 +- css/structure.css | 6 +-- 4 files changed, 156 insertions(+), 4 deletions(-) create mode 100644 _fixed-variation1.html create mode 100644 _fixed-variation2.html diff --git a/_fixed-variation1.html b/_fixed-variation1.html new file mode 100644 index 00000000..ef015d76 --- /dev/null +++ b/_fixed-variation1.html @@ -0,0 +1,118 @@ + + + + + jQuery Mobile Framework - Fixed toolbars variation + + + + + +
+ +
+

Fixed Header

+ Home +
+ +
+
+

Demo description

+

This is a demo of the "fixed" headers and footers used in the jQuery Mobile framework. The page content flows naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view, you can tap the screen to make them appear. Tapping again or scrolling the page will cause them to appear back in the flow of the page (at the top and bottom).

+ + Hey! Try them with overlay-only enabled + +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

+ +

Header Level 2

+ +
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

+ +

Header Level 3

+ +
    +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
+ + 

+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+
+ +

HTML Ipsum Presents

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

+ +

Header Level 2

+ +
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

+ +

Header Level 3

+ +
    +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
+ + 

+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+
+ +

HTML Ipsum Presents

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

+ +

Header Level 2

+ +
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

+ +

Header Level 3

+ +
    +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
+ + 

+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+
+ +
+
+ +
+

Fixed Footer

+
+ + +
+ + + \ No newline at end of file diff --git a/_fixed-variation2.html b/_fixed-variation2.html new file mode 100644 index 00000000..9324b3be --- /dev/null +++ b/_fixed-variation2.html @@ -0,0 +1,32 @@ + + + + + jQuery Mobile Framework - Fixed Overlay Style Toolbars + + + + + +
+ +
+

Fixed Header

+ Home +
+ +
+ + photo-sand + +
+ +
+

Fixed Footer

+
+ + +
+ + + \ No newline at end of file diff --git a/_fixed.html b/_fixed.html index 7dbf044a..9c150d1f 100644 --- a/_fixed.html +++ b/_fixed.html @@ -18,7 +18,9 @@

Demo description

-

This is a demo of the "fixed" headers and footers used in the jQuery Mobile framework. The page content flows naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view, you can tap the screen to make them appear. Tapping again or scrolling the page will cause them to appear back in the flow of the page (at the top and bottom).

This is a demo of the "fixed" headers and footers used in the jQuery Mobile framework. The page content flows naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view, you can tap the screen to make them appear. Tapping again or scrolling the page will cause them to appear back in the flow of the page (at the top and bottom).

+ + Hey! Try them with fade transitions too!

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

diff --git a/css/structure.css b/css/structure.css index 4f793418..8014d97d 100644 --- a/css/structure.css +++ b/css/structure.css @@ -157,10 +157,10 @@ div.ui-checkbox, div.ui-radio { position:relative; margin: .2em 0 .5em; } /*used in listbox - to be removed/replaced with page-style hiding*/ .ui-helper-hidden,.ui-mobile .ui-content-hidden { display: none; } -.ui-content { min-height: 480px; } +.ui-content { } -.ui-fullscreen { width: 100%; height: 100%; position: relative; overflow: hidden; } -.ui-fullscreen img { width: 100%; } +.ui-fullscreen { } +.ui-fullscreen img { max-width: 100%; } /*collapsible panels*/ .ui-collapsible-contain { margin: 0 0 -1px; border-left-width: 0; border-right-width: 0; overflow: hidden; }