TagCSS3

CSS3+jQuery Animated Steps Indicator for Mobile

I wanted to try and create an animated steps indicator. This was primary for mobile. The code is a bit messy =). This could be replicated with just using jQuery, but i wanted to leverage CSS3.

View Demo Note: the demo is not as pretty =)

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1" />
	<title>CSS3 Animated Steps</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function(){
             $("#s1").click(function(){
                $("#progressbar").addClass("step1");
                 return false;
             });
            $("#s2").click(function(){
                $("#progressbar").addClass("step2");
                 return false;
             });
            $("#s3").click(function(){
                $("#progressbar").addClass("step3");
                 return false;
             });
        });
    </script>
    <style type="text/css">
        body{background-color:black;}
        #animatedSteps{
            width:280px;
            height:14px;
            margin: 80px auto 0 auto;
            position:relative;
            overflow:hidden;
            background-color:#fff;
        }
        #mask{
            background:transparent url(steps-mask.png) top left no-repeat;
            width:280px;
            height:14px;
            position:relative;
            z-index:2;
        }
        #progressbar{
            background: #e4f5fc; /* Old browsers */
            background: -moz-linear-gradient(top,  #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
            width:280px;
            height:14px;
            position:absolute;
            z-index:1;
            top:0;
            left:-278px;
           -webkit-transition: left 1s ease;
        }
        #progressbar.step1{
            left:-213px;   
        }
        #progressbar.step2{
            left:-139px;   
        }
         #progressbar.step3{
            left:-58px;   
        }
             
    </style>
    
</head> 
<body>   
    <div id="animatedSteps">
        <div id="mask"></div>
        <div id="progressbar"></div>
    </div>
    
    
    <button id="s1">Step 1</button> <br /><button id="s2">Step 2</button><br /> <button id="s3">Step 3</button>
    
</body>
</html>

Potentially new UI design pattern: Expandable Mobile Search Form

The Purpose:

On mobile display, every pixel counts. To minimize the space required to display the search form, it is displayed in a compact form and then expand to full width on :focus. This way more space can be used for other interface elements or content area.

Check out the extended article over at http://webdesignerwall.com

Mobile Friendly Clearable Text boxes Using jQuery

This is a quick and dirty example of how to make a mobile friendly text box clearable. This could easily be turned into a jquery plugin.

HTML:


<div class="ui-input">
		<input name="firstname" type="text"  id="firstname" placeholder="First Name">
		<span class="ui-icon-delete"></span>
	</div>
	
	<div class="ui-input">
		<input name="lastname" type="text" id="lastname" placeholder="Last Name">
		<span class="ui-icon-delete"></span>
	</div>

jQuery Code:


$(function(){
	$("input").focus(function(){
		$(this).parent().addClass("ui-focus");
		$(this).parent().find(".ui-icon-delete").show();
	});
	$("input").blur(function(){
		$(this).parent().removeClass("ui-focus");
	});

	$(".ui-icon-delete").click(function(){
		$(this).parent().find("input").val("");
		$(this).hide();
	});
});

CSS:


input{
			width:86%;
			padding: 7px 0 7px 5px;
			line-height: 1.4;
			font-size: 14px;
			border:none;
			outline: 0 !important;
			margin-left:5px;
		}
		#form{
			margin:10px auto;
			padding:10px;
		}
		.ui-input{
			-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
			box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
			position: relative;
			border: 1px solid #CCC;
			color: #333;
			text-shadow: 0 1px 0 white;
			background: white;
			border-radius:10px;
			background-clip: padding-box;
			margin-bottom:10px;			
		}
		.ui-focus{
			-webkit-box-shadow:  0px 0px 3px 2px rgba(0, 25, 288, 0.3);
			box-shadow:  0px 0px 3px 2px rgba(0, 93, 288, 0.3);
		}
		.ui-icon-delete{
			padding: 0;
			margin: 0;
			background: rgba(0, 0, 0, 0.398438) url(icons-18-white.png) -72px 50%;
			background-position: -72px 50%;
			background-size: 776px 18px;
			display:none;
			float:right;
			border:solid #fff 2px;
			width:18px;
			height:18px;
			position:relative;
			top:8px;
			right:8px;
			border-radius:20px;
			box-shadow:  0px 0px 3px 2px rgba(000, 000, 000, 0.2);
			cursor:pointer;
		}

View Demo

© 2017 Aldo Lugo

Theme by Anders NorenUp ↑