TYPO3camp Mallorca: "Introducing supafly"

420 views

Published on

Here are the slides of my session "Introducing SupaFly" given on Saturday, Sep 15 at the TYPO3camp Mallorca 2012.

Published in: Technology, Travel
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
420
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

TYPO3camp Mallorca: "Introducing supafly"

  1. 1. Moin! 14-16.09.2012
  2. 2. IntroducingSupaFly® The beginning of a very special friendship
  3. 3. Let‘s have alook into the past..
  4. 4. DHTML-Menus are ancient history
  5. 5. „OTTO“-Menus are also history
  6. 6. It‘s time for SupaFly!
  7. 7. And wtf do we need this? Users don‘t like to click They like to see what they get – before the decide where to click Not every section of a website has the same depth or a homogene structure Click paths should be short and transparent Better user experience Tablets first!
  8. 8. Features of SupaFly® Very flexible, e.g. 3, 4 or 5 columns Can contain any kind of CE, e.g. text/image, sitemap or plugin (form, maps, ..) Fully controllable through editors Easy to implement Based on Backend-Layouts and TypoScript No TemplaVoila needed 
  9. 9. Getting started… Create different Backend-Layouts for each Flyout-type (3-col, 4-col, …) To avoid conflicts with rendering of default content cols (normal, left, right, ..) set colPos value up to … 100 + Linking Backend-Layouts with your section pages (Tab „Appearance“) Page-type „shortcut“ is the best Ready for content! 
  10. 10. Bringing it all together… Preparing the HTML-Template Extending HMENU and other TS Building SupaFly-Object (COA) Some CSS-Stylinghttp://mallorca.cmstypo3.de
  11. 11. Feel free to contact me!sitegeist media solutions GmbH Sven Huppach Leiter Qualitätsmanagement huppach@sitegeist.dePlease have a look at the code snippets on the next pages.. :)
  12. 12. TypoScript########## Just another 5-col BE-Layoutbackend_layout { colCount = 5 rowCount = 2 rows { 1{ columns { 1{ name = SUPAFLY 1 (15) colPos = 109 } 2{ name = SUPAFLY 2 (15) colPos = 110 } 3{ name = SUPAFLY 3 (40) colPos = 111 } 4{ name = SUPAFLY 4 (15) colPos = 112 } 5{ name = SUPAFLY 5 (15) colPos = 113 } } } 2{ columns { 1{ name = CONTENT colspan = 5 colPos = 0 } } } }}
  13. 13. TypoScript########## Extending HMENUafter.cObject < lib.SupaFlyafterWrap = <div class="holder">|<span class="close"><!-- --></span></div>doNotLinkIt = 1########## Adding SupaFly Layer to the corresponding pagetmp.getContent = CONTENTtmp.getContent { table = tt_content select { pidInList.field = uid orderBy = sorting languageField = sys_language_uid } stdWrap.required = 1 stdWrap.wrap =<div class="default">|</div>}
  14. 14. TypoScript########## Get contents depending on chosen backend-layoutlib.SupaFly = COAlib.SupaFly { # Beginning at colPos 100 # 0-99 preserved for standard content columns # 2 cols / formatting 100 < tmp.getContent 100.select.where = colPos=100 100.stdWrap.wrap = <div class="grid_6">|</div> 101 < tmp.getContent 101.select.where = colPos=101 101.stdWrap.wrap = <div class="grid_6">|</div> # 3 cols / formatting 102 < tmp.getContent 102.select.where = colPos=102 102.stdWrap.wrap = <div class="grid_4">|</div> 103 < tmp.getContent 103.select.where = colPos=103 103.stdWrap.wrap = <div class="grid_4">|</div> 104 < tmp.getContent 104.select.where = colPos=104 104.stdWrap.wrap = <div class="grid_4">|</div>... # 5 cols / formatting 109 < tmp.getContent 109.select.where = colPos=109 109.stdWrap.wrap = <div class="grid_2">|</div> 110 < tmp.getContent 110.select.where = colPos=110 110.stdWrap.wrap = <div class="grid_2">|</div> 111 < tmp.getContent 111.select.where = colPos=111 111.stdWrap.wrap = <div class="grid_4">|</div> 112 < tmp.getContent 112.select.where = colPos=112 112.stdWrap.wrap = <div class="grid_2">|</div> 113 < tmp.getContent 113.select.where = colPos=113 113.stdWrap.wrap = <div class="grid_2">|</div>}
  15. 15. CSS/* supafly----------------------------------------------- */ul#mainnav li.tab { color:#fff; background:#666; font-weight:bold; text-decoration:none; display:block; float:left; padding:0 1em; height:2.4em; line-height:2.5em;}ul#mainnav li.tab:hover,ul#mainnav li.tab.sms_act { background: #fff; color: #666;}ul#mainnav li div.holder { border-top: none; left: -9999px; margin: 0px 0 0; color: #444; font-weight: normal; padding: 15px 0 10px 0; position: absolute; line-height: 150%; top: 33px; z-index: 10; background: #ffffff; -webkit-box-shadow: 0 3px 5px #666; -moz-box-shadow: 0 3px 5px #666; box-shadow: 0 3px 5px #666;}ul#mainnav li:hover div.holder,ul#mainnav li a:hover div.holder { left: 0px;}ul#mainnav li div.holder.act { left: 0px;}...
  16. 16. JS// Set all boxes to the same height// including jQuery required :)var max_height = 0;$(.csc-frame-frame1).each(function(e) { h = $(this).height(); if(typeof(h) != "undefined") { if(h > max_height) { max_height = h; } }});if(max_height > 0) { $(.csc-frame-frame1).height(max_height);}// SupaFly open and close for tablets$(#mainnav .tab).mouseenter(function(){ $(#mainnav .holder).css(left, );});$(#mainnav .close).click(function(){ $(#mainnav .holder).css(left, -9999px);});

×