Venkat's Planet

Today we shall see on how to create and fasten the development of angular js using available Angular tools. Here we discuss more on tools like yo, grunt and bower. Yo  handles the scaffolding of the application. creates the structure of the application. Grunt  Concentrates on the build process. grunt helps in automating the tasks. the less work you have to do when performing the repetetive tasks like minification, uglyfing, watching files. Bower  mainly used in managing the application dependencies. Bower works by fetching and installing packages all over and saves the dependencies you are looking for.. By using these tools the user can concentrate more on feature development. So using these tools creates the development structure, runs the code in localhost, reloading the page when code changes. There are thousands of grunt plugins available which can make our tasks simple. Same for the bower which make development simple by adding the required dependencies and k...

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...

We see in many places the label values or some other places that the text is very long. If the text is too long it wraps to the new line. But if you dont want text to wrap to new line and show ellipsis. This below CSS style will help you. Eg: <p class="ellipsisStyles"> This is an example to show the usage of long text with ellipsis </p> If you want this text not to be wrapped and to be showed as "This is an example to ..." with ellispsis. .ellipsisStyles{      text-overflow:ellipsis;      overflow:hidden;      width:100px;      whitespace: no-wrap; }

Change/increment the background position using JQuery dynamically Background position is one of the style in the background style group. As the name defines this background position is to position the background image. We may come across some situations where we need to move the background as in the games, or in the parallax effect. The main line to work as moving background Suppose u need the clouds moving as the background, just use this code and that works fine.           $("div").animate({"background-position":"+=20%"}); use this statement repeatedly using some looping technique. you will see the clouds moving at background...

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; }

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)

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...

Navigation Links Place an Imporatant role in crwaling the whole website. So for developers there are many ways in Navigationg the control from one page to another page. Here we discuss, how the navigation is done in different languages. JavaScript : Window.Location="home.php"; Php: Header("Location:home.php"); Html: <a href="home.php"> Home </a> Jquery: $(window).attr("location","home.php"); In the above examples, The control is transfered from current page to the "home.php" page

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 ...

There may be a situation where you are bored of seeing the whole regular fonts in the css. So there is also possibiltiy to add some new fonts in the css as new Font-Family. @font-face { font-family: myFont; src: url(yourDesiredFont.ttf); } This is the css style you need to add in css. Here the source(src) is the font you want to use... you can use any kind of font, search in google for different kind of fonts. When you refer the font-family for the next time you can directly refer to this new font you have added. Usage h1 { font-family: myFont;         font-size:24px; }

Here is the small JQuery code for getting the value of the dropdown box which is selected. HTML <select name="dropDownMenu"> <option>Option1</option> <option>Option1</option> <option>Option1</option> </select> JS $(document).ready(function(){ $("select").change(function(){ var str=""; str=$("select option:selected").text(); alert(str); }); });

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     ...

javaScript Code <script> $(document).ready(function() { var img_array =[ "food1.jpg", "food3.jpg" ,"food4.jpg"]; var i=-1; var interval=setInterval(function(){slide()},5000); function slide() {                 i++;                 $('#banner').attr('src',img_array[i]).effect("bounce","slow");                 if(i==2)                 {                                 i=-1;                 }      ...