HTML5 form imput elements

Just to know them all.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>HTML5 basic skeleton</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
    <style type="text/css">
    header, section, footer, aside, nav, article, figure, audio, video, canvas { display:block; }
    label { display:block; line-height:1.3em; }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <header>
    <!-- Header -->
    </header>
    <nav>
    <!-- Navigation -->
    </nav>
    <section id="content">
    <article>
    <form>
    <fieldset>
    <legend>New HTML5 Form inputs</legend>
    <label>Select your favorite color: <input type="color" name="favcolor" /></label>
    <label>Birthday: <input type="date" name="bday" /></label>
    <label>Birthday (month and year): <input type="month" name="bdaymonth" /></label>
    <label>Reservation (date and time): <input type="datetime" name="reservation_daytime" /></label>
    <label>Appointment (local date and time): <input type="datetime-local" name="appointment_daytime" /></label>
    <label>Select a time: <input type="time" name="usr_time" /></label>
    <label>Select a week: <input type="week" name="week_year" /></label>
    <label>E-mail: <input type="email" name="email" /></label>
    <label>Numerical Quantity (from 1 to 5): <input type="number" name="quantity" min="1" max="5" /></label>
    <label>Range: <input type="range" name="points" min="1" max="10" /></label>
    <label>Search the web: <input type="search" name="googlesearch" placeholder="Enter search term here" autofocus /></label>
    <label>Favorite Website: <input type="url" name="website" /></label>
    <label>Telephone Number: <input type="tel" name="telephone" required /></label>
    </fieldset>
    </form>
    </article>
    </section>
    <aside>
    <!-- Sidebar -->
    </aside>
    <footer>
    <1-- Footer -->
    </footer>
    </div>
    </body>
    </html>

French translation for indexedsearch

Put into setup

###################################
# french translation for indexedsearch
 
plugin.tx_indexedsearch {
  _LOCAL_LANG.fr{      
          pi_list_browseresults_display = Resultats de ###TAG_BEGIN###%s à %s###TAG_END###,  total ###TAG_BEGIN###%s###TAG_END###
          link_advancedSearch = Recherche avancée
          link_regularSearch = Recherche simple
          pi_list_browseresults_page =
          form_searchFor = Mot clé
          searchFor = Recherche pour
          submit_button_label = Recherche
  }
}

Insert Canonical Tag to prevent duplicate content

###################################
# Insert Canonical Tag to prevent duplicate content
 
lib.canonical = TEXT
lib.canonical {
typolink {
 parameter = {page:uid}
 parameter.insertData = 1
 useCacheHash = 1
 addQueryString = 1
 addQueryString.method = GET
 addQueryString.exclude = id
 returnLast = url
}
 
wrap = <link rel=”canonical” href=”http://www.domain.de/|” />
}

Force first title of Content Element H1 as standard

###################################
# Force first title of Content Element H1 as standard
lib.stdheader = COA
lib.stdheader {
8 >
8 = LOAD_REGISTER
8.headerTag1 = h1
8.headerTag1.if.value = 1
8.headerTag1.if.equals.data = cObj:parentRecordNumber
9 >
9 = LOAD_REGISTER
9.headerTag2 = h2
9.headerTag2.if.value = 1
9.headerTag2.if.isGreaterThan.data = cObj:parentRecordNumber
10.2 >
10.2 = TEXT
10.2.current = 1
10.2.insertData = 1
10.2.htmlSpecialChars = 0
10.2.dataWrap = <{register:headerTag1}{register:headerTag2}>|</{register:headerTag1}{register:headerTag2}>
}

Put design sketch in front of everything with just CSS

I use this sometimes to see if the design and my code fit together. Just adjust opacity to see how far you are. No need to use any other browser plugin. Adjust opacity with Firebug on the fly to switch.

body {
 background-image: url(design.jpg);
 background-repeat: no-repeat;
 background-position: top center; /* adjust to whatever you like. */
 opacity: 0.6; /* see through the page */
}

Insert Google Analytics Code with Typoscript

With this you can easily insert GA-Code to your page via jsInline:

###################################
# Insert Google Analytics Code
page.jsInline.10 = TEXT
page.jsInline.10.value (
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'INSERT_YOUR_UA_CODE', 'www.insert_monitored_url.com');
ga('send', 'pageview');
)

Mobile Switch with Typoscript, jQuery Dialog und Cookie

First we have to integrate the switch script as described here:

https://github.com/kaimallea/isMobile

Then we put this into the setup of our page:

###################################
# Mobile Switch with Typoscript, jQuery Dialog und Cookie
 
page.headerData.999 = TEXT
page.headerData.999.value (
 
#integrate jQuery Stuff if needed
 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>) page.footerData { 10 = TEXT 10.value (<script>// <![CDATA[
var mobileUrl = "http://www.path-to-mobile-site.com"; var mobileCookie = $.cookie("switch"); if (document.referrer != mobileUrl) {     if (mobileCookie == "true") {         document.location.href = mobileUrl;     }     if (mobileCookie == null) {         if (isMobile.any) {             $(function() {                 $("#dialog-confirm").dialog({                     resizable: false,                     height: 140,                     modal: true,                     buttons: {                         "Change": function() {                             $(this).dialog("close");                             document.location.href =                                 mobileUrl;                             $.cookie("switchMobile", "true");                         },                         Cancel: function() {                             $(this).dialog("close");                             $.cookie("switchMobile",                                 "false");                         }                     }                 });             });         }     } }
// ]]></script>
 
<div id="dialog-confirm" style="display: none;" title="Change to the mobile version">Do you wnat to change to the mobile version of this Website?</div>
) }