Skip to main content

Posts

Showing posts with the label Webdesign

Debounce in AngularJs with Examples

What is Debounce In generally debounce is nothing but to wait for sometime and do this action. With debounce, you can add a delay for updating the ngModel value.  Eg: if a user wants to update the model value after 2 sec (or) update the model value after some action then by just adding this debounce will do the job. ng-model and ng-model-options To use this debounce we need to know about ng-model and ng-model-options, so let us just briefly know about it. Data binding is one of the best feature of Angular Js. ng-model is the best option is to bind the data to the view. ng-model directive provides a two-way data-binding mechanism that makes the connection between your View-Model and various User Interface (UI) controls. So, ng-model knows how to bind your View-Model to something like an input[type=text]; and, conversely, it knows how to update the Input value when your View-Model changes. To have a good control on how the angular updates and manipulates the data AngularJs...

Make the Navigation Menus with equal width

For every website the navigation menu plays a key role. This navigation menu should be in clear and precise. To make the navigation menu look better even in the lower resolution we have to make them responsive by giving equal width to each item. Here is the procedure to make each menu item with equal width. To make all the elements having equal width and full width of the parent use as <ul>      <li>a</li>      <li>b</li>      <li>c</li>       <li>d</li> </ul> styles ul{ display:table; } li{ display:tabel-cell; float:none; text-align:center; }

Easy way to "Move the Screen to Top"

For any kind of website, if content is more then the user has to scroll down to read it.. If again he wants to scroll up to the top using a single click will make the user feel good.. To make this just keep a div as "position : absolute" at right bottom side as "Scroll to Top". So when clicked on it, just add this statement at the clicked event window.scrollTo(0,0)

Kinds of heights in HTML - JQuery

While Designing the website you may come across many types of heights.. Here are some of the heights.. height( ) : This gives the height of the element which excludes padding, border and margin. innerHeight( ) : This gives the height which includes padding but excludes border and margin. outerheight( ) : This gives the height including border but no margin. oouterHeight(true) : This gives the height including Margin...

HTML5 Storage with Example

Html5 has lot of advantages. This HTML made the easy for the web designers. While designing a Website, in any situation you may come across to store the data. The data needs to be accessed in many pages. For this problem the solution is WebStorage concept in the HTML5. There are two kinds of storages, They are     1.  LocalStorage     2.  SessionStorage LocalStorage :  Here the data is stored for ever. There is no time limit for variable to expire.      Eg.    localStorage.id="abc";     Here in this example.                 "id"  is the variable. "abc" is the value. This says that the value "abc" is stored in the variable "id".         To use this variable in the other page Just use the statement.                alert("localStorage.id");  SessionStorage:  Here the data is stored only for ...

Media Queries For Devices with their layout Widths (CSS)

There are Media Queries which help in making the website responsive. Here are some tips which will make easier to Understand the Media Queries to various devices Large Desktops : Layout Width will be from 1200px and Up               @media (min-width:1200px){                }   2.   Default : The Layout width will be from 980px and up   3.    Portrait Tablets : The Layout width will be from 768px and Above              @media (min-width:768px) and (max-width: 978px){               }   4.   Phones to Tablets: The Layout width will be from 767px and below             @media (max-width:767px){              }   5.   Phones :  The Layout width will be from 480px and below     ...