JSFiddle

  • AngularJS: Infinite Scrolling

    No-Library (pure JS), HTML, CSS, JavaScript

    function Main($scope) {
        $scope.items = [];
        
        var counter = 0;
        $scope.loadMore = function() {
            for (var i = 0; i < 5; i++) {
                $scope.items.push({id: counter});
                counter += 10;
            }
        };
        
        $scope.loadMore();
    }
    
    angular.module('scroll', []).directive('whenScrolled', function() {
        return function(scope, elm, attr) {
            var raw = elm[0];
            
            elm.bind('scroll', function() {
                if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                    scope.$apply ...
  • detection of the scrolling to the end of an element using jQuery

    see:http://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery/6271466#6271466

    jQuery(
      function($)
      {
        $('#flux').bind('scroll', function()
                                  {
                                    if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
                                    {
                                      $(this).append("more<br>");
                                    }
                                  })
      }
    );
  • box-shadow example

    Mootools 1.4.1, HTML, CSS, JavaScript

    <p>The top of the &lt;pre&gt; is darkened with an inset black, transparent box-shadow:</p>
    
    <code>box-shadow: inset 0 1px 3px rgba(0 ...</code>
  • Implementing a 'snapped' event for 'draggable' widgets

    jQuery 1.7.2, HTML, CSS, JavaScript, jQuery UI 1.8.18

    $(document).ready(function() {
        $(".drag").draggable({
            drag: function(event, ui) {
                var draggable = $(this).data("draggable");
                $.each(draggable.snapElements, function(index, element ...
  • Facebook Home JS #13 is the latest revision

    Facebook Home JavaScript Prototype

    $(function(){
      $( "#user" ).draggable({ revert: true });
    });
  • Accessing bound data with Handlebars

    An example showing how to access the data that was bound to a specific element that was generated via a Handlebars template.

    (function() {
    
        var id = 0,
            cache = [];
            
        Handlebars.registerHelper("bindData", function(data) {
            var dataKey = id++;
            cache[dataKey] = data;
    
            return "data-handlebar-id=" + dataKey;
        });
    
        Handlebars ...
  • Accessing bound data with Handlebars

    An example showing how to access the data that was bound to a specific element that was generated via a Handlebars template.

    (function() {
    
        var id = 0,
            cache = [];
            
        Handlebars.registerHelper("bindData", function(data) {
            var dataKey = id++;
            cache[dataKey] = data;
    
            return "data-handlebar-id=" + dataKey;
        });
    
        Handlebars ...
  • JQuery Draggable with Gird Lines

    jQuery 2.0.0b1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    $(function() {
    
        $(".box").draggable({
           // containment: "body",
            drag: function() {
                $("#x").text($(this).offset().left);
                $("#y").text($(this).offset().top);
                $(this).prepend("<guide class=\"topline\"></guide>        <guide class=\"rightline\"></guide><guide class=\"botline\"></guide><guide class=\"leftline\"></guide>");
                $(this ...
  • JQuery Draggable with Gird Lines #9 is the latest revision

    jQuery 2.0.0b1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    
    $(function() {
        $(".box").draggable({
            containment: "#canvas",
            drag: function() {
                $(this).prepend("<guide class=\"topline\"></guide>        <guide class=\"rightline\"></guide><guide class=\"botline\"></guide><guide class=\"leftline\"></guide>");
                $(this).find($('.topline')).css('display', 'block');
                $(this).find($('.rightline')).css('display ...
  • JQuery Draggable with Gird Lines

    jQuery 2.0.0b1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    $(function() {
        $(".box").draggable({
            containment: "#canvas",
            drag: function() {
                $(this).find($('.topline')).css('display', 'block');
                $(this).find($('.rightline')).css('display', 'block');
                $(this ...