Tags: jquery

Ok/Cancel buttons with jqModal

2008/09/22 @ 00:12

I recently quit using gwt and started using jQuery for a personal project of mine and I wanted to be able to show some modal dialog boxes using jQuery. As it turns out there is an easy to use plugin that does exactly this called jqModal. jqModal makes it simple to create modal dialogs by simply setting a css class on the tag you want to open the dialog and on the tag in the dialog that you want to close it.

<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">
<p>This is my dialog.</p>
<a href="#" class="jqmClose">Close</a>
</div>
<pre><code>
$().ready(function() {
  $('#dialog').jqm();
});
</code></pre>

That's easy but gives you a pretty minimalistic popup dialog. Any tag with the jqmClose class will simply close the dialog. What if you want to do something with OK and Cancel options? What if you want to do some fancy fade in/fade out no matter what happens? This tripped me up for a but much luckily only took about a few minutes to straiten out and test.

<a href="#" class="jqModal">Update</a>
...
<div class="jqmWindow" id="dialog">
<p>I'm going to update. Is that ok?</p>
<a href="#" class="dialogok">OK</a> <a href="#" class="jqmClose">Cancel</a>
</div>
$("#dialog #dialogok").bind("click",
  function() {
    /* Do your update logic here. */
    $('#dialog').jqmHide();
  }
);
 
var newFieldHide = function(hash) {
  hash.w.fadeOut('2000',function() { hash.o.remove(); });
};
var newFieldShow = function(hash) {
  hash.w.fadeIn("2000");
};
$("#dialog").jqm({onHide:newFieldHide, onShow:newFieldShow});

So I'm basically closing the dialog manually in the OK case and closing it automatically using the jqmClose class in the Cancel case. In both cases the onHide trigger is called and fades out the dialog.

  Tags: dialog, Javascript, jqmodal, jquery

Twitter Page Code

2008/06/19 @ 19:14

Twitter

I took a look at twitter.com/" title="Twitter">Twitter's code as an example of a site that gets lots of traffic and noticed a couple things.

  1. They use Amazon S3 to store images
  2. They split the javascript, favicons, and css up across 3 or 4 subdomains (assets0.twitter.com, assets2.twitter.com, etc.)
  3. They include prototype and a version of jQuery as well as a version of script.aculo.us.
    		<script src="http://assets3.twitter.com/javascripts/prototype.js?1213829093" type="text/javascript"></script>
    		<script src="http://assets1.twitter.com/javascripts/effects.js?1213829093" type="text/javascript"></script>

    		<script src="http://assets0.twitter.com/javascripts/application.js?1213829093" type="text/javascript"></script>
    		<script src="http://assets0.twitter.com/javascripts/jquery-1.2.3.min.js?1213829093" type="text/javascript"></script>

It kind of surprised me that they include a version of prototype AND jQuery AND script.aculo.us since they aren't really light javascript files. Prototype comes in at 123kb, jQuery is 53kb, and script.aculo.us is 38kb. Seems to me that even with caching and all they could significantly reduce download traffic by sticking to one javascript library. I'm sure there is some wierd reason they do it though.

  Tags: Javascript, jquery, prototype, twitter