BS"D
magna
web studio
Loading.
Please wait...
Please wait...
WB-Developers' Corner
WB-Developers' Corner
[rz] Reveal Header-n-Footer
The easiest way to have headers and footers revealed on scroll with advanced features.
Sample project included.
Some features:
- Header and footer are optional (if header is specified, footer is optional; if footer is specified, header
is optional) with handling variants.
- Header and footer are automatically expanded to full width.
- Optional custom shadows for enhanced visual effects with graceful fallback in case they are not
supported.
- Tab order in its natural order for navigability standards (header and footer are automatically revealed
when needed).
- Advanced RTL, RWD and fluid support.
- Automatic detection/support for both fixed or floating layers schemes.
- No cut-out elements/backgrounds on horizontal scrolling.
- Advanced fixed and horizontal scrolling handling.
- No header/footer overlapping on browser-resize.
- Advanced header-footer collision handling in case of fixed header on small screens.
- Decent fallback on unsupported or problematic scenarios (like some features on mobile devices and
RTL schemes on IE7 and earlier).
- Lightweight and maximum cross-browser with backward compatibility, no jQuery required.
HTML 4.01 Transitional
W3C compliant
DEMO
* Just a brief about some of the changes that were made lately...
* New in version 1.2.1
- Improved support for mobiles with better fallbacks.
- Fixed RTL alignment issues on some scenarios.
* New in version 1.2
- Improved support for layout-grids to be used as header.
- Added support for layout-grids to be used as footer.
- Minor code tweaks.
* New in version 1.1
- Optional vertical parallax effect on scroll for the header and the footer (with different ratios).
- Customizable virtual separators between the header/footer and the page contents.
- Fallback improvements.
How to use?
1. Optionally, design a header as you usually do (a standard layer element).
2. Design the page contents below the header, if exists.
3. Optionally, design a footer as you usually do (a standard layer element), below the page contents.
4. Drag and drop the extension and setup it specifying the header and/or the footer and, optionally,
the shadows.
5. Preview or publish.
Enjoy!
The easiest way to have headers and footers revealed on scroll with advanced features.
Sample project included.
Some features:
- Header and footer are optional (if header is specified, footer is optional; if footer is specified, header
is optional) with handling variants.
- Header and footer are automatically expanded to full width.
- Optional custom shadows for enhanced visual effects with graceful fallback in case they are not
supported.
- Tab order in its natural order for navigability standards (header and footer are automatically revealed
when needed).
- Advanced RTL, RWD and fluid support.
- Automatic detection/support for both fixed or floating layers schemes.
- No cut-out elements/backgrounds on horizontal scrolling.
- Advanced fixed and horizontal scrolling handling.
- No header/footer overlapping on browser-resize.
- Advanced header-footer collision handling in case of fixed header on small screens.
- Decent fallback on unsupported or problematic scenarios (like some features on mobile devices and
RTL schemes on IE7 and earlier).
- Lightweight and maximum cross-browser with backward compatibility, no jQuery required.
HTML 4.01 Transitional
W3C compliant
DEMO
* Just a brief about some of the changes that were made lately...
* New in version 1.2.1
- Improved support for mobiles with better fallbacks.
- Fixed RTL alignment issues on some scenarios.
* New in version 1.2
- Improved support for layout-grids to be used as header.
- Added support for layout-grids to be used as footer.
- Minor code tweaks.
* New in version 1.1
- Optional vertical parallax effect on scroll for the header and the footer (with different ratios).
- Customizable virtual separators between the header/footer and the page contents.
- Fallback improvements.
How to use?
1. Optionally, design a header as you usually do (a standard layer element).
2. Design the page contents below the header, if exists.
3. Optionally, design a footer as you usually do (a standard layer element), below the page contents.
4. Drag and drop the extension and setup it specifying the header and/or the footer and, optionally,
the shadows.
5. Preview or publish.
Enjoy!
new shop with
- Adaptive Framework
- Advertisement
- Alert
- Align Object
- Analog Clock
- Background Images
- Back Kaleidoscope
- Background Scroller
- Background Video
- Basic GIF Player
- BKOsborne Carousel
- Block Framework
- Bottom to Top
- Brwsr Size Activated Obj
- Button
- Card
- Characters Assistant
- Check-n-Radio Beautifier
- Confirm
- Conveyor Belt
- Cookie Based Object
- Copyright
- Countdown
- Cyclic Scroll
- Dancing Objects
- Date Picker
- dd Simple Gallery
- Display Exchange Rate
- Dotted Activity Indicator
- Drag Layers
- Dust Cursor
- Elegant Click
- Elegant Cursor
- Elegant Scroll
- Embedagram
- Fix Header-Footer
- Fix Justify
- Fix Menu Bar Multiline
- Fix Tables
- Flat Side Menu
- Floating Caption
- Footer Enhancer
- Form Meter
- Form Placeholders
- Full Menu
- Full Size Background
- Full Size iFrame
- Go To Bookmark
- Go Top
- Google +1 Button
- Grayed Until Loaded
- Hide Scrollbar
- I am here! (title changer)
- Idle Manager
- Image Caption
- Image DragScroll
- Image To Full
- Inline Frame
- Inline Frame/extended
- Infinite Loop
- Inner Border
- Instagram Mosaic
- Integer Entry
- iPhone Call Fix
- iRetina
- Late-Activation Object
- Layer Sizes Boundaries
- Layers II
- Layout Grid Beautifier
- Length Warning
- Lights Off
- Live Counter
- Masonry Filter
- Max Scroll Indicator
- Media Player
- Min-Size Manager
- Minifont Text
- Mobile Activated Object
- Mobile Redirection
- Modal Object
- Modern Hyperlink
- Mosaic Background
- Multicolor Link
- Multi-language Site
- Multi-purpose Spinner
- Multi-Select
- NoDrag NoSelect
- No-Javascript Redirect
- Number to Words
- Pagination
- Paired Half Scheme
- Pale Image
- Panel Framework
- Panorama360
- Parallax Background
- Parallax Objects
- Pattern II
- PDF List
- Peel Effect
- Performance Booster
- Popup Container
- Position Activated Object
- Position Blurred Object
- Position Color Transition
- Position Fixed Object
- Position Functions Caller
- Position Object Size
- Position Obj Transp
- Position Progress Bar
- Preloaded Links
- Preloader
- Random Objects
- Reveal Header-n-Footer
- Reveal Layers
- Ripple Background
- Rollover Layers
- Sakura Petals
- Scroll Down Indicator
- Scrollbar
- Scrolling Layers
- Shopping Suite
- Simple Captcha
- Simple Linear Menu
- Simple Meter
- Simple Slideshow
- Simple Timeline
- Slideshow Opener
- Smiley Text
- Smooth Page II
- Sparkling Cursor
- Stacked Image
- Stacked Layout
- Sticky Object
- Stretch Layer
- Stretchable Border
- Styled gMaps
- Tab Menu with Layers
- Table Enhancer
- Table Highlighter
- Tall Image Scroll
- Text Highlighter
- Time Based Object
- Title-Bar Notifier
- Tooltips
- Top Menu
- Top Slider
- Trailing Cursor
- Typewriter
- Water Background
- Weather Info
- ...and more!