Coding Tech Life: Responsive Web Design

Showing posts with label Responsive Web Design. Show all posts

AngularJS Prevent Event Propagation Click Example

AngularJS Prevent Event Propagation Click Example

Today I was stuck with a problem in angularjs. I have a table row and a button in table cell. I have bound event event for both table row and button. So I have to disable event on table row click when I click on button, in other words I have to stop propagation of event on button click.

I found a solution as below,

<a href="#" ng-click="functionName(); $event.preventDefault(); $event.stopPropagation();">

$event.stopPropagation(); alone was not working. When I used $event.stopPropagation(); alone, on click it was redirecting to some other page. When I tried adding $event.preventDefault(); $event.stopPropagation();. It worked.

Reference:
http://stackoverflow.com/questions/10931315/how-to-preventdefault-on-anchor-tags

Good Javascript Resources

These are some good websites I have found.
1. http://jstherightway.org/
2. http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/
...

Google's "material design lite" toolkit

Google's "material design lite" toolkit

Google wants to incoporate material design to all websites , releases toolkit.

http://www.getmdl.io

Nice loaders for web application

Nice loaders for web application. Performance tuned. MIT license.

http://connoratherton.com/loaders

Number Formatting in JavaScript using toLocaleString - Thousand Separator, Currency Formatter

Number Formatting in JavaScript using toLocaleString() - Thousand Separator, Currency Formatter

Today I came across toLocaleString() in javascript which can be used for formatting numbers. Thousand separator, currency formatting etc. can be achieved using this.

var num1= 2000;
num1.toLocaleString(); // "2,000"

Thousand separator is different for different countries. This is also possible using toLocaleString().

num1.toLocaleString("en-US");
"2,000"
num1.toLocaleString("de-DE");
"2.000"
num1.toLocaleString("ar-EG");
"٢٬٠٠٠"

Currency formatting can also be done.

num1.toLocaleString('ja-JP', { style: 'currency', currency: 'INR' })

"Rs.2,000"

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Responsive Website Using Bootstrap

Simple Responsive Website Using Bootstrap

Just found good tutorial to develop a responsive website using Bootstrap. Just add bootstrap libraries amd use some class names for div elements from css and the website will automatically resize with the change in resolution which makes your website accessible via mobile devices as well as desktop browsers.

Libraries: bootstrap.css, bootstrap-responsive.css, bootstrap.js, jquery.min.js.

Class names: container, row-fluid, span1,span2,...,span12,offset1,...

Just follow the Template:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-width=1.0">

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span6">
...content
</div>
</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

Try this small Example:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-width=1.0">

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span6">
<p>A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies, and became the ransom of the world. It was a perfect act. - <b>Mahatma Gandhi</b></p>

</div>
<div class="span6">
<p>Take up one idea. Make that one idea your life - think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success. -<b>Swami Vivekananda</b></p>
</div>
</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>