Author Archives: narayanaiyer

displaying and formatting card number using javascript

Dear Blog readers, welcome back..

Now we are talking about very good real time challenges about displaying card number with the mask of star(*) and random blank space between every 4 characters.

UI Developer facing following challenges in displaying and formatting card number:

  • – Star(*) not aligning vertical middle
  • – Need space between every 4 digits

Its developed for low band width internet connection and CC payment pages.

tools used html, javascript and css

Here we go..

<style>
#cardNoVal span{
	font-size:165%;
}
.star{
	font-size: 1.5em !important;
    position: relative;
    bottom: -0.2em;
    letter-spacing: 1px;
}
</style>
<h3>Card Number</h3>
<div>
	<input type="hidden" id="cardNo"  name="cardNo" value="**** **** **** 1234" />
	<span id="cardNoVal">**** **** **** 1234</span>
</div> 

<script type="text/javascript">
	var str = document.getElementById("cardNo").value;
	//alert(str);
	var res = str.split("");
	//alert(res);
	var out = '';
	for (var z = 0; z < str.length; ++z) {
	    var ch = str.charAt(z);
	    if (ch == '<') {
	        while (ch != '>') {
	            out += ch;
	            ch = str.charAt(++z);
	        }
	        out += ch;
	        continue;
	    }
	    if((z == 3)||(z == 8)||(z == 13)){
	    	//alert(ch);
		    if(ch == "*"){
		    	out += '' + ch + ' ';
		    } else {
		    	out += '' + ch + ' ';
		    }	
	    } else {
	    	//alert(ch);
		    if(ch == "*"){
		    	out += '' + ch + '';
		    } else {
		    	out += '' + ch + '';
		    }	
	    }
	}
	//alert(out);
	document.getElementById("cardNoVal").innerHTML = out;
</script>

Simple Responsive Menu

Following Simple Responsive Menu created with html, css and basic jQuery. Instant of using plugin its very easy to use and configuration in quick time.

CSS

<style>
.res-mainmenu a{
		display:inline-block;
		float:left;
		padding: 5px;
    	border-top: 0px solid #eee;
		}
.res-menu{
		 display: none;
	}	
@media (max-width: 935px) {
	.res-mainmenu a{
		display:block;
		float:none;
		padding: 5px;
    	border-top: 1px solid #eee;
		}
	.res-menu{
		 display: block !important;
	}	
	.header  {
    width: 98%;
    text-align: center;
    padding:0 1%;
    border: 0;
	}
	.header  .mm-group{
	    display: none;
	}
	.header .active {
    	border-bottom: 0px solid #f45821;
    	color: #fff;
		background-color:#f45821;
	}
}
</style>

jQuery

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function () {
    // responsive menu
	var WinWidth = $(document).width();
	//alert(WinWidth);
	if(WinWidth < 935){
		$(".res-menu").show();
		$(".header").addClass("res-mainmenu");
	}
	$(".res-menu").click(function(){
		//alert("responsive open");	
		$(".header").find(".mm-group").slideToggle();
	});
});
</script>

HTML

<div class="header">
    <div class="mm-group">
        <a href="#home">Home</a>
        <a href="#overview">PRODUCT OVERVIEW</a>
        <a href="#features">Features</a>
        <a href="#benefits">Benefits</a>
        <a href="#resources">Resources</a>
        <a href="#enquiry">enquiry</a>
    </div>
    <div class="res-menu" style="display:none;">Menu</div>
 </div>

Javascript Date and Time Calendar

Date and time calendar is supporting from older IE browsers.

Here Step by Step instruction to implement with your existing code or simply

and use it.

include following javascript files in head part.

 

<!-- Date and time picker -->
<script src="js/datetimepicker.js"></script>

call calendar functions in onclick or onfocus as per following syntex

onclick="javascript:NewCssCal('date-picker')"

calendar javascript holding lot of different method of calling calendar function as below

1. Date Format : MM-dd-YYYY

onclick="javascript:NewCssCal ('demo1')"

2. with differnent date format

onclick="javascript:NewCssCal ('demo2','ddMMyyyy')"

3. Date format with feature date

onclick="javascript:NewCssCal ('demo6','yyyyMMdd','','','','','future')"

4. Date format with past date

onclick="javascript:NewCssCal ('demo6','yyyyMMdd','','','','','past')"

5. Date with arrow

onclick="javascript:NewCssCal ('demo1','mmddyyyy','arrow')"

6. Date and time

onclick="javascript:NewCssCal ('demo1','MMddyyyy','dropdown',true,'12',true)"

7. Date and time with feature date

onclick="javascript:NewCssCal ('demo7','yyyyMMdd','dropdown',true,'12',true,'future')"

8. Date and time without seconds

onclick="javascript:NewCssCal ('demo1','MMddyyyy','dropdown',true,'12')"

9. Date and time with seconds

onclick="javascript:NewCssCal ('demo1','MMddyyyy','dropdown',true,'24',true)"

This blow very useful to you… see you in next post

75+ Free jQuery CSS3 Image Hover Effects

http://www.designrazzi.com/2013/free-image-hover-effects/

Responsive website media query syntax

Dear UI developers, This is for another responsive media query syntax order. If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design.

image001

The first step to creating our responsive layouts is to plan out what resolutions we’re going to cater for. Common resolutions include the 320px portrait width of smartphones, 768px portrait width of tablets, 1024px landscape width of tablets (and typical netbook resolutions) as well as various desktop monitor resolutions. It’s worth mentioning that a layout that only caters for preset resolutions is often referred to as being ‘adaptive’, whereas a truly ‘responsive’ layout will be built using ems or percentages, allowing an infinite level of scaling.

I’m adding the media queries and additional declarations to a separate CSS file, but they could be added to your main stylesheet.

 

<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

 

The width of the original layout is 960px, so any resolution below this value will generate horizontal scrollbars and cut-off the content. Therefore the first of our media queries will target screens with a width of less than 960px;.

@media screen and (max-width: 960px) {

	}

The next most popular resolution under 960px width is 768px to cater for portrait tablet screens. This Typo design is built using a grid, so to stay true to the layout we can simply remove a column to leave a width of 758px. The original layout can then be narrowed down to fit by reducing the margin on the content div as well as reducing the overall width of the sidebar.

@media screen and (max-width: 758px) {

	}

The value of 758px can then be used for the next media query, so anything smaller than this size will trigger the next layout. At this point the sidebar is too narrow to be made any smaller, so instead it can be naturally flowed underneath the main content when the grid is narrowed by a few more columns. This means the actual sidebar div’s width can be increased to fill the width of the new layout and its child elements floated to fill out the extra horizontal space.

Other areas such as the header have become too narrow to hold the logo and navigation side by side, so the navigation elements are altered to span the width of the layout on a new line.

@media screen and (max-width: 524px) {

	}

The third and final media query in our responsive layout will cater for extremely small resolutions such as smartphones. This particular layout is narrower than the original content width, so this div also needs altering with a new declaration in the media queries CSS file. The extremely narrow view has dropped each of the post-info links on a new line, but decreasing the margin between them helps repair some of the floats.

This is basic, you have to write syntax more than this three 3 media query syntax in real time. for testing purpose you can test with following options

From server means:

http://responsinator.com/

from local hard disk:

using firefox you can test with developer add-on tools menu >> web developer  >> responsive design view(with shortcut of  Ctrl + Shift+M for windows) Lot of responsive patterns available in following path, you can use it in your real time…

http://bradfrost.github.io/this-is-responsive/patterns.html

 

Thanks for reading this article.

CSS 3 code generator

http://css3generator.com/

Screen Shot 2013-08-18 at 4.44.32 PM