02) CSS und DIV (jQuery)

jquery.slidinglables.js

    /*
       Sliding Labels 3.2.1
 
       This is the official plugin version of Sliding Labels.
       It is open source code by Tim Wright of CSSKarma.com
       Use as you see fit, I'd like it if you kept this in
       the code, but basically share it and don't be a jerk.
 
       Support:
       http://www.csskarma.com/blog/sliding-labels-plugin
 
       Version: 2 - added textarea functionality
       Version: 3 - added axis parameter
                  - added speed parameter
                  - removed color parameter, as it should be define in the CSS
                  - added position:relative to wrapping element
                  - coverted to jQuery plugin
       Version: 3.1 - changed "children" to "find" so it works a little better with UL & fieldsets
       Version: 3.2 - Added a "className" option so you don't have to use ".slider" as the wrapper
       Version: 3.2.1 - general clean up
    */
 
    (function($){
    $.fn.slidinglabels = function(options, callback) {
       var defaults = {
          className    : 'form-slider',
          topPosition  : '5px',
          leftPosition : '5px',
          axis         : 'x',
          speed        : 'fast'
       },
       options = $.extend(defaults, options),
          itemwrapper = this.find('.' + defaults.className + ''),
          labels = itemwrapper.find('label');
 
       return labels.each(function() {
          obj = $(this);
 
          var parent = obj.parents('.' + defaults.className + '');
          parent.css({'position':'relative'})
 
          // style the label with JS for progressive enhancement
          obj.css({
             'position' : 'absolute',
             'top'      : defaults.topPosition,
             'left'     : defaults.leftPosition,
             'display'  : 'inline',
             'z-index'  : 99
          });
 
          var inputval = $(this).next().val(),
             labelwidth = $(this).width(),
             labelmove = labelwidth + 5 +'px',
             labelheight = $(this).height();
 
          //onload, check if a field is filled out, if so, move the label out of the way
          if(inputval !== ''){
             if(defaults.axis == 'x'){
                obj.stop().animate({ 'left':'-'+labelmove }, 1);
             } else if(defaults.axis == 'y') {
                obj.stop().animate({ 'top':'-'+labelheight }, 1);
             }
          } //
 
          // if the input is empty on focus move the label to the left
          // if it's empty on blur, move it back
          $('input, textarea').focus(function(){
             var label = $(this).prev('label'),
                width = label.width(),
                height = label.height(),
                adjust = width + 5 + 'px',
                adjustUp = height + 'px',
                value = $(this).val();
 
             if(value == ''){
                if(defaults.axis == 'x'){
                   label.stop().animate({ 'left':'-'+adjust }, defaults.speed);
 
                } else if(defaults.axis == 'y') {
                   label.stop().animate({ 'top':'-'+adjustUp }, defaults.speed);
                }
             } else {
                if(defaults.axis == 'x'){
                   label.css({ 'left':'-'+adjust });
                } else if(defaults.axis == 'y') {
                   label.css({ 'top':'-'+adjustUp });
                }
             }
 
             }).blur(function(){
                var label = $(this).prev('label'),
                   value = $(this).val();
 
                if(value == ''){
                   if(defaults.axis == 'x'){
                      label.stop().animate({ 'left': defaults.leftPosition }, defaults.speed);
                   } else if(defaults.axis == 'y') {
                      label.stop().animate({ 'top': defaults.topPosition }, defaults.speed);
                   }
                }
             });
 
          });
 
       }; // End function
    })(jQuery); // End jQuery

formular.css

    /*form legend {
       color: #333;
       padding: 0 0 20px 0;
 
    }
 
    form {
       padding: 0 20px 20px 20px;
    }*/
 
    form, form fieldset input, form fieldset textarea, form label {
       font-family: Helvetica, Arial;
       font-size: 12pt;
 
    }
    form p { position: relative; margin: 5px 0;}
    form p label { position: absolute; top: 0; left: 0;}
    form p br {display: none;}
 
 
    form fieldset p input,
    form fieldset p textarea {
       background-color: #fff;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
       border-radius: 5px;
        border :1px solid #333;
       display: block;
       padding: 4px;
       width: 441px;
       margin: 0;
    }
 
 
 
    form fieldset p label {
       color: #333;
    }
 
    fieldset {
       border: none;
    }
 
    .fehler {
       color: #F00;
       margin-top: 5px;
    }
 
    input[type="submit"]       { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#eee; }
    input[type="submit"]:hover,
    input[type="submit"]:focus { border-color:#333;background:#ddd; }
    input[type="submit"]:active{ margin-top:0px; }
 
    input[type="reset"]       { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#eee; }
    input[type="reset"]:hover,
    input[type="reset"]:focus { border-color:#333;background:#ddd; }
    input[type="reset"]:active{ margin-top:0px; }
 
 
    input[type="text"] {
       border:1px solid #333;padding:5px;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color: #fff;
    }

Code für das Template im Block Vorlage

    <br /><div id="contact-form" style="margin: 0 0 0 40px; width: 461px;"><fieldset>
    <p class="slider"><label for="Name">{LABEL:Name}</label>{Name}[IF_ERROR:Name]<span class="fehler">{ERROR:Name}</span>[/IF_ERROR]</p>
    <p class="slider"><label for="Vorname">{LABEL:Vorname}</label>{Vorname}[IF_ERROR:Vorname]<span class="fehler">{ERROR:Vorname}</span>[/IF_ERROR]</p>
    <p class="slider"><label for="Strasse">{LABEL:Strasse}</label>{Strasse}[IF_ERROR:Strasse]<span class="fehler">{ERROR:Strasse}</span>[/IF_ERROR]</p>
    <p class="slider"><label for="Plz">{LABEL:Plz}</label>{Plz}[IF_ERROR:Plz]<span class="fehler">{ERROR:Plz}</span>[/IF_ERROR]</p>
    <p class="slider"><label for="Telefon">{LABEL:Telefon}</label>{Telefon}[IF_ERROR:Telefon]<span class="fehler">{ERROR:Telefon}</span>[/IF_ERROR]</p>
    <p class="slider"><label for="E-Mail">{LABEL:E-Mail}</label>{E-Mail}[IF_ERROR:E-Mail]<span class="fehler">{ERROR:E-Mail}</span>[/IF_ERROR]</p>
    <p class="slider"><label for="nachricht">{LABEL:nachricht}</label>{nachricht}[IF_ERROR:nachricht]<span class="fehler">{ERROR:nachricht}</span>[/IF_ERROR]</p>
    <p>{LABEL:recaptcha_response_field}{recaptcha_response_field}[IF_ERROR:recaptcha_response_field]<span class="fehler">{ERROR:recaptcha_response_field}</span>[/IF_ERROR]</p><br />
    <div>{checkbox}&nbsp;&nbsp;{LABEL:checkbox}
    [IF_ERROR:checkbox]<span class="fehler"><br />{ERROR:checkbox}</span>[/IF_ERROR]</div><br />
    {submitIt}&nbsp;&nbsp;{resetIt}</fieldset></div>

Code für den CP HTML

    <!-- JS: {TEMPLATE}lib/jquery/plugin/jquery.slidinglabels.js -->
 
    <!-- CSS: {TEMPLATE}/inc_css/specific/jquery/formular.css -->
 
 
 
    <script type="text/javascript">
    $(function(){
 
       $('#contact-form').slidinglabels({
 
          /* these are all optional */
            className    : 'slider', // the class you're wrapping the label & input with -> default = slider
          topPosition  : '5px',  // how far down you want each label to start
          leftPosition : '10px',  // how far left you want each label to start
          axis         : 'x',    // can take 'x' or 'y' for slide direction
          speed        : '600'  // can take 'fast', 'slow', or a numeric value
 
       });
 
    });
    </script>