Velocity JS – more advance way to handle jQuery animations….


http://julian.com/research/velocity/index.html

  • Overview

    Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow.

  • Compatibility

    Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, Velocity uses jQuery’s $.queue(), and thus interoperates seamlessly with jQuery’s $.animate(), $.fade(), and $.delay(). Since Velocity’s syntax is identical to $.animate()’s, none of your code needs to change.

  • Quickstart

    Download Velocity, add it to your page, and replace all instances of $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices — especially on smartphones.

Learning AngularJS – best resources to learn angularjs for beginners.


AngularJS –HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

  1. https://github.com/jmcunningham/AngularJS-Learning
  2. http://techslides.com/angular-js-demos-examples-and-resources/
  3. https://leanpub.com/recipes-with-angular-js/read
  4. https://www.youtube.com/watch?v=i9MHigUZKEM
  5. https://www.youtube.com/watch?v=QETUuZ27N0w
  6. https://www.youtube.com/watch?v=TRrL5j3MIvo&index=11&list=PLmtADjkIi7R9_HFpGdosdOrDsAkHQVSq3
  7. https://egghead.io/technologies/angularjs
  8. http://ng-learn.org/
  9. http://henriquat.re/intro/angular/angularjsForDotNetDevelopers.html  – (2 min learning of angularjs for .net developers…)

And Last but not least ofcource – AngularJS.org  & http://ng-learn.org/

Some jquery plugins for AngularJS

  1. https://github.com/jirikavi/AngularJS-Toaster    (toastr notification plugin)
  2. https://github.com/codef0rmer/angular-dragdrop
  3. https://github.com/revolunet/angular-carousel
  4. https://github.com/nlaplante/angular-google-maps
  5. https://github.com/simpulton/angularjs-wizard
  6. https://github.com/angular-ui/bootstrap
  7. http://vitalets.github.io/angular-xeditable/  (Inline editing using angular)                    e.g.http://plnkr.co/edit/2UFfaG?p=preview           http://jsfiddle.net/christianacca/gpgD4/          http://jsfiddle.net/Thw8n/4/     http://icelab.com.au/articles/click-to-edit-with-angularjs/                http://scotch.io/tag/angular-js
  8. https://github.com/pikock/bootstrap-magic  ( Bootstrap themer for angular)
  9. https://github.com/nervgh/angular-file-upload  (file uploader)
  10. https://github.com/arunisrael/angularjs-geolocation
  11. https://github.com/2fdevs/videogular
  12. https://github.com/Wintellect/Angular-MVC-Cookbook
  13. http://juampy72.github.io/angularjs_form/
  14. https://github.com/webux/ux-angularjs-datagrid
  15. https://github.com/Augus/ngAnimate (best animations with angular)
  16. https://github.com/gsklee/ngStorage     – localStorage and sessionStorage done right for AngularJS.
  17. https://github.com/angular-ui/ui-date
  18. https://github.com/eu81273/angular.treeview
    1. http://jimliu.github.io/angular-ui-tree/
  19. https://github.com/fabiobiondi/angular-fullscreen
  20. https://github.com/darylrowland/angucomplete
  21. http://blog.brentmckendrick.com/angularjs-visual-studio-2012-intellisense/
  22. http://mozilla.github.io/pdf.js/
  23. https://github.com/allaud/quick-ng-repeat
  24. https://github.com/frapontillo/angular-filters (Useful AngularJS filters)
  25. http://chieffancypants.github.io/angular-hotkeys/  (AngularJS Keyboard Shortcut)
  26. https://github.com/wpalahnuk/angular-gm (Angular Google Map )
  27. https://github.com/revolunet/angular-carousel  (Angular Carousel)
  28. https://github.com/wpalahnuk/ngAutocomplete  (Angular Auto Complete)
  29. https://github.com/zensh/ui-autocomplete  (another AutoComplete with Angular)
  30. http://ngmodules.org/modules/AngularJS-Toaster   (Toaster Notification using Angular)
  31. http://pgwjs.com/pgwmodal/   (Another modal dialog service)
  32. BootStrap Window Using JQUERY – https://github.com/Flyer53/jsPanel-bootstrap
  33. http://plnkr.co/edit/l13dwaGeUqBy79sEW4Zi?p=preview   ( Custom Filter Directive plunkr & ng-if example)

 

 

AngularJS – Beginners guide

A bunch of links to blog posts, articles, videos, etc for learning AngularJS. This list is in its early stages. Feel free to submit a pull request if you have some links/resources to add. Also, I try to verify that the articles below have some real content (i.e. aren’t 2 paragraph blog posts with little information) to ensure I’m not listing “fluff” pieces. If you have an idea for a better way to organize these links, please let me know. As I find similar posts in the “General Topics” section, I will break them out into their own categories.

AngularJS

Books

Videos

Help

General Topics

Scopes

Dependency Injection

Directives

Services/Providers

Routing

Promises/Deferred

Forms

Code Organization

Testing

RESTful Stuff

UI Stuff

Hosted Backends

Text editor bundles

Originally published by Jeff Cunningham on github

Moment.JS “A javascript date library for parsing, validating, manipulating, and formatting dates.”


“A javascript date library for parsing, validating, manipulating, and formatting dates.”

Moment was designed to work both in the browser and in Node.JS.

Currently the following browsers are used for the ci system: ie8, ie9 on Windows 7, stable Chrome on Windows XP, Safari 10.8 on Mac and stable Firefox on Linux.

All code will work in both environments. All unit tests are run in both environments.

_ It supports all possible Date manipulation , formats and zone detection & most importantly ASP.NET JSON date format like “/date(1396293230)/” i.e. EPOCH Time / Unix timestamp

Read more  ….http://momentjs.com/docs/

Happy Coding.. 🙂

ASP.NET / MVC / Jquery : Metro Styles Web applications


For creating web application with Metro Style, we have good options compare to creating WPF or pure winforms applications with those complex styles. 

Few packages which I have used in my projects are as below – 

Bootstrap Metro – http://aozora.github.io/bootmetro/ 

Metro UI – http://metroui.org.ua/

Metro BootStrap – http://talkslab.com/metro-bootstrap/components.html  ( I never used this but hear that its nice too)

Bootswatch – http://bootswatch.com/cosmo/

Metro UI Template – http://metro-webdesign.info/

 

Hope this helps someone to choose proper , if you find anything really nice which you think someone can use it, please let me know and i will be happy to put it here… 

Happy Coding..:)

 

Pure – A Set of Small, Responsive CSS Modules


A set of small, responsive CSS modules that you can use in every web project.

 Pure is ridiculously tiny. The entire set of modules clocks in at 5.7KB minified and gzipped, without forgoing responsive styles, design, or ease of use. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.

Get it from here – 

Google Map API v3 : Custom Markers with Bubble, Pins, Text etc…


https://developers.google.com/chart/infographics/docs/dynamic_icons#bubbles

Example:

var callmarker = new google.maps.Marker({
‘position’: new google.maps.LatLng(latitude, longitude),
‘map’: map,
‘scaleControl’: true,
‘icon’: ‘https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|’ + callnumber + ‘|’ + hex.replace(‘#’, ”) + ‘|000000’,
‘clickable’: true

});

Example for icon

chst=d_bubble_text_small&chld=bb|Launch+site|C6EF8C|000000

 

How to populate a dropdownlist with json data in jquery?


 

<html>
    <head></head>
    <body>
      <select id="DLState">
      </select>
    </body>
    </html>

    /*javascript*/
    var jsonList = {"Table" : [{"stateid" : "2","statename" : "Alabama"},
                {"stateid" : "3","statename" : "Arkansas"},
                {"stateid" : "4","statename" : "Mississippi"},
                 {"stateid" : "5","statename" : "New York"},
                 {"stateid" : "6","statename" : "Oregon"}]}

    $(document).ready(function(){
      var listItems= "";
      for (var i = 0; i < jsonList.Table.length; i++){
        listItems+= "<option value='" + jsonList.Table[i].stateid + "'>" + jsonList.Table[i].statename + "</option>";
      }
      $("#DLState").html(listItems);
    });    

get parent’s id using JQuery ..


<ul id ="myList">
<li><a href="www.example.com">link</a></li>
</ul>

How can I get the id of the ul (myList) using jquery? My j-script event is triggered when the a link is clicked. I have tried:

$(this).parent().attr('id');

But it gets the id of the li, I need to go one higher, and I cant attach the click to the li either.

SOLUTION

$(this).parent().parent().attr('id');

EDIT:

$(this).closest('ul').attr('id');

Is a more foolproof solution.

Jquery: disable html form elements at once


To disable all input elements within div use the following code:
$(‘#message :input’).attr(‘disabled’, true);

To disable all select elements within div use the following code:
$(‘#message :select’).attr(‘disabled’, true);

To disable all submit buttons within div use the following code:
$(“#message :submit”).attr(“disabled”, “true”);

Explanation:

  • The DIV tags ID is message
  • attr– Access a property on the first matched element.
  • $(“selector“)
  • If disabled is set to false the element won’t be disabled