[UPDATE] Hide label when focus on input

Here is a way to hide a label when you focus on an input. There are many ways to do that, but I’ve used a label positioned absolute over the input, and some jQuery to hide and show it. It works even if some of the fields are pre-filled.

1. The Markup

<form>
  <div>
    <label for="click_here">Click here</label>
    <input type="text" id="click_here"/>
  </div>
</form>

2. The CSS

.form-row { position: relative; }
.label-hide {
  position: absolute;
  left: 10px;
  top: 3px;
  font-family: Arial;
}
input {
  height: 15px;
  line-height: 15px;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #cecece;
}

3. The jQuery

$(function() {
  $('.label-over').each(function() {
    var elem = $(this);
    $('label[for="' + $(this).attr('id') + '"]').click(function() {
      elem.focus();
    });
    if ($(this).val() != '') {
      $('label[for="' + $(this).attr('id') + '"]').hide();
    }
  }).focus(function() {
    $('label[for="' + $(this)[0].id + '"]').hide();
  }).blur(function() {
    if($(this).val() == '') {
      $('label[for="' + $(this)[0].id + '"]').show();
    }
  }).change(function(){
    if($(this).val() != '') {
      $('label[for="' + $(this)[0].id + '"]').hide();
    }
  })
})

Awesome CSS3 animation menus

I’ve found some creative animation menus done only with CSS3 on codrops. The icons are a Web Symbols typeface included with @font-face so the animation on the icon is very intuitive and simple to understand.

On the demo page you can see 10 examples of animations that you can download.

The Markup

<ul class="ca-menu">
  <li>
    <a href="#">
      <span class="ca-icon">A</span>
      <div class="ca-content">
        <h2 class="ca-main">Exceptional Service</h2>
        <h3 class="ca-sub">Personalized to your needs</h3>
      </div>
    </a>
  </li>
  ...
</ul>

The CSS

I’ll write down the CSS only for the example shown in the screenshot above and only for the hover part.

.ca-menu li:hover{
  background-color: #000;
}
.ca-menu li:hover .ca-icon{
  color: #f900b0;
  font-size: 120px;
  opacity: 0.2;
  left: -20px;
  transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
  color: #f900b0;
  opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
  color: #fff;
  opacity: 0.8;
}

Download & Documentation

Demo

Creating a stitched border

Use this snippet  to get a stitched-like border on your elements.

<div>Today it's a beautiful day for styling.</div>

 

.stitched {
  padding: 15px 10px;
  margin: 10px;
  background: #3AB551;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3em;
  border: 2px dashed #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -moz-box-shadow: 0 0 0 4px #38A64C;
  -webkit-box-shadow: 0 0 0 4px #38A64C;
  box-shadow: 0 0 0 4px #38A64C;
  text-shadow: -1px -1px #2D853D;
  font-weight: normal;
}

Adding body class for IE

If you have style to add just for some IE versions, you can add a class to the body element (ie6, ie7, ie8). This can be done without any JS, only with conditional statements for IE in the markup.

<!--[if lt IE 7]>      <body>    <![endif]-->
<!--[if IE 7]>         <body>    <![endif]-->
<!--[if IE 8]>         <body class-"ie8 oldie">    <![endif]-->
<!--[if (gte IE 9) | !(IE)]><!-->      <body>  <!--<![endif]-->

Adding swipe to jCarousel

After using jCarousel in a project, and then testing it on mobile platforms, I’ve realized that you can’t swipe through the items and this should be the expected behavior for touch devices.

The solution is to add another nice plugin that allows you to use touch events, called jQuery Touchwipe. The code should look something like this:

$('#carousel').jcarousel({
  scroll: 1;
});

$('#carousel').touchwipe({
  wipeLeft: function() {
    $('#carousel').jcarousel('next');
  },
  wipeRight: function() {
    $('#carousel').jcarousel('prev');
  },
  min_move_x: 20,
  min_move_y: 20,
  preventDefaultEvents: false
});

The preventDefaultEvents option is set “true” on the plugin page example, but it prevents you to swipe up/down for usual scroll, so if you have to scroll down or up the page where the carousel is, you can set the option to “false”.

Targeting retina display with media query

Working at a mobile project (that includes jQuery mobile), I’ve encountered the following problem: I wanted to rewrite the default image for the checkboxes, that jQuery mobile provides. Just adding the new background like bellow wasn’t enough.

.ui-icon-checkbox-off,
.ui-icon-checkbox-on {
  background: url(/images/mobile/checkbox-off.png) no-repeat;
  -webkit-background-size: 56px 58px;
  -moz-background-size: 56px 58px;
  background-size: 56px 58px;
  width: 56px;
  height: 58px;
}
.ui-icon-checkbox-on {
  background: url(/images/mobile/checkbox-on.png) no-repeat;
}

The code above works only on normal devices, but on retina displays the css from jQuery mobile wasn’t rewritten. For that, I’ve created an image twice as big as the previous one, and used the following code:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
         .ui-icon-checkbox-off {
           background: url(/images/mobile/checkbox-off2x.png) no-repeat;
         }
         .ui-icon-checkbox-on {
           background: url(/images/mobile/checkbox-on2x.png) no-repeat;
         }
}

How to prevent CSS and JS files from being cached

By default, external files such as javascript and css are cached by the browser. If you need to change this and you don’t want the browser to cache you files, use the following tip:

<link href="css/style.css?<?php echo time(); ?>" rel="stylesheet" type="text/css" />
<!-- The result will look like this -->
<link href="/stylesheet.css?1234567890" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/site-script.js?<?php echo time(); ?>"></script>
 <-- The result will look like this-->
<script type="text/javascript" src="js/site-script.js?1234567890"></script>

It’s a very simple technique and doesn’t affect your CSS or JavaScript code in any way.