Adds a “bottom” event that will be triggered when the user has scrolled to the bottom or within proximity to the bottom of an element. This is essentially a the same as my previous scrollLoader plugin, though more generic for other use cases.

Syntax

$(element).bottom(options);

Options

proximity (optional – default: 0): How close to the scrollbar is to the bottom of the element before triggering a load. Use proximity: 0 for absolute bottom.
Proximity = (total scroll height – current scroll position) / total scroll height.

Example Usage

// we start with 1 page of data
var page = 1;
$(document).ready(function() {
    $(window).bottom();
    $(window).bind("bottom", function() {
        var obj = $(this);
        // since this ajax call might take a while
        if (!obj.data("loading")) {
            obj.data("loading", true);
            $("#news_list").append("<li>Loading...</li>");
            $.getJSON("/news/list?page=" + (++page), function(data) {
                // remove the loading text
                $("#news_list li:last").remove();
                for (var i = 0; i < data.news.length; i++) {
                    $("#news_list").append("<li>" + data.news[i].headline + "</li>");
                }
                // now that the ajax call is done, we can re-enable this
                obj.data("loading", false);
            });
        }
    });
});

Demo - bottom bound to both the window and an element with overflow: auto
Download at GitHub - jquery.bottom-1.0.js

public class UserBean {

    protected String username, email, location;

    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }

    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }

    public String getLocation {
        return location;
    }
    public void setLocation(String location) {
        this.location = location;
    }
}

One of the annoyances of this (at least for me) is that you end up creating a bunch of getter/setter methods that don’t do anything special – they either return the encapsulated variable or set it. So, I wrote a base class that uses PHP5’s magic methods to take care of all of those generic getters and setters.

abstract class Bean {
    public function __call($name, $arguments) {
        if (strpos($name, 'get') === 0) {
            $property = strtolower(substr($name,3,1)) . substr($name,4);
            return $this->$property;
        }
        elseif (strpos($name, 'set') === 0) {
            $property = strtolower(substr($name,3,1)) . substr($name,4);
            return $this->$property = $arguments[0];
        }
        else {
            throw new Exception("Method $name does not exist");
        }
    }

    public function __get($name) {
        $getter = 'get' . ucfirst($name);
        if (method_exists($this, $getter)) {
            return call_user_func(array($this, $getter));
        }
        return $this->$name;
    }

    public function __set($name, $value) {
        $setter = 'set' . ucfirst($name);
        if (method_exists($this, $setter)) {
            call_user_func(array($this, $setter), $value);
        }
        else {
            $this->$name = $value;
        }
    }
}

Using the above abstract class, the example UserBean in PHP would become just:

class UserBean extends Bean {
    protected $username, $email, location;
}

And you can access the bean as follows, without having to write any of these functions:

$user = new UserBean();
$user->setUsername('Jim');
echo $user->getUsername();

If you needed to do any additional work in the getter function, you can just create a getter function like you normally would:

class UserBean extends Bean {
    protected $username, $email, location;
    public function getUsername() {
        return "User: $username";
    }
}

In addition, if you want cleaner syntax (i.e. when mixing PHP with your HTML), you could also access properties of the bean directly, and the getter/setter functions will be called automatically if they exist. Since the properties are “protected”, attempts to access the properties will get routed to the __get and __set functions, where it will attempt to call a getter/setter if it exists.

$user = new UserBean();
$user->username = 'Jim';
echo $user->username;;

Load extra content when the user scrolls the window or an element towards the bottom. This is probably most useful when you want to use Ajax to load the extra content.

Syntax

$(element).scrollLoader(options);

Options

ratio (optional – default: .05): How close to the scrollbar is to the bottom of the element before triggering a load. Use ratio: 0 for absolute bottom.
Ratio = (total scroll height – current scroll position) / total scroll height.

loadContent (required): Function to execute when the scrollbar reaches the specified ratio.

Available Triggers

$(element).trigger("enableLoad"); // enables this plugin

$(element).trigger("disableLoad"); // disables this plugin

$(element).trigger("manualLoad"); // manually trigger the loadContent function

Example Usage

var offset = 2;
$(document).ready(function() {
  $(window).scrollLoader({
    loadContent: function() {
      $("#news_list").append("<li>Loading...</li>");
      // since this ajax call might take a while
      $(window).trigger("disableLoad");
      $.getJSON("/news/list?offset=" + offset++, function(data) {
        // remove the loading text
        $("#news_list li:last").remove();
        for (var i = 0; i < data.news.length; i++) {
          $("#news_list").append("<li>" + data.news[i].headline + "</li>");
        }
        // now that the ajax call is done, we can re-enable this
        $(window).trigger("enableLoad");
      });
    }
  });
});

Demo - scrollLoader bound to both the window and an element with overflow: auto
Download - jquery.scroll.loader.js

if(c.modal) {if(!A[0])L('bind');A.push(s);}

to

if(c.modal) {A.push(s);}

Or just get the updated file here.

Since jqModal’s source is minified, I’m not 100% sure what the removed piece of code was meant to do, but from what I’ve tested, the behavior is still the same.

Quick demos are here:

• IE7 Flicker
• No more flicker!

Description: Information on how to delete your account from all of the major social networking, blogging, shopping, etc. sites and services across the web.

• bracket.css
• tournament4.html
• tournament8.html
• tournament16.html
• tournament32.html

Free to use/steal/copy.

After I read this article on Smashing Magazine (also CSS-Tricks), I didn’t really find any of those solutions acceptable since they require extra markup. I want to be able to have objects equal spaced just using code like this:

  <div id="container">
    <img src="circle1.png" alt="" />
    <img src="circle2.png" alt="" />

    <img src="circle3.png" alt="" />
    <img src="circle4.png" alt="" />
  </div>

Using the property text-align: justify by itself will not work because the last line of paragraphs aren’t justified – so when you have only one line, justification does nothing. With CSS3, there’s a property called text-justify that lets you specify how you want the text justified. Using text-justify: distribute-all-lines, the last line of a paragraph will be justified. So with the following CSS applied to the “container” above, we can achieve equal spacing objects.

  #container {
    text-align: justify;
    text-justify: distribute-all-lines;
  }

The only problem: since text-justify is a part of CSS3, support for it isn’t widely available. This won’t work on Firefox 3.0.8, Opera 9.64, Safari 3.2.2, and Google Chrome. The browsers that it does work on: Internet Explorer 5.5, 6, and 7 (I don’t have 8 installed to try).

Live demo here.

flickr photo set