Posts

Showing posts with the label JQuery

Boggle Find word Game using HTML5 Canvas

This is my very first attempt to make a game using HTML5 Canvas API. Please share in comments, your true score obtained in first attempt (I want to know scoring patterns). Also any feedback is appreciated (thoughts, error or even any praise ;-) Works in Chrome and Firefox. HOW TO PLAY? Just like any other Find-A-Word game, You've to find words. Click and Drag to select "car" in proper order (selecting "rac" is invalid). Unlike other Find-A-Word games, You've to find the same word in the Grid. There are 19 occurrences of "car" in the grid. Seconds Left:    CARs Left: startGame CanvasLeft: CanvasTop: X: Y: CurrentCell: Draw line from till Quadrant Angle
Post a Comment
Read more

Pending AJAX terminating on window.location.href issue

Consider following 2 lines executed together: $.ajax('url',options) window.location.href= 'some url'; Many browsers (Chrome for example) terminate Ajax request when they encounter redirect call. Q. Why would I need ajax and redirect together? A. There can be many reasons. Most important being tracking scripts which does analytic on page visits. Q. Can't I solve that by making async as false for Ajax? A. Definitely Yes! $.ajax('url',{async:false}) would resolve the problem. But what if AJAX call is wrapped deep inside some third party plugin you're using where you've no control over ajax attributes? In this case you won't have the flexibility to apply async:false. To resolve this, you can make use of $.active property in JQuery. This property (damn useful) gives a count of number of open xmlHttpRequests on a page. So, coming back to our problem, you can do following to ensure plugin's ajax executes before redirect: SomPluginCalledHavingAja...
Post a Comment
Read more

JQuery Bind v/s Live v/s Delegate v/s On comparison matrix

Image
Bind Live Delegate On Min version required 1.0  1.3 1.4.2 1.5 Recommended No Absolute No Yes Of course Yes! DOM changes considertion No Yes Yes Yes Custom Events Yes Yes Yes Yes Readability Good Good V. Good V. Good Cross-Browser Yes Yes Yes Yes Revert Unbind() Die() Undelegate() Off() Cancel Event Propagation Yes No Yes Yes Shortcuts Yes No No No Meaning of Labels - Min Version : Minimum JQuery version that supports this event binder - Recommended : Recommendation by JQuery site and other prominent community members - Dom Change Consideration : Does this event binder respects elements  dynamically added later (More on this below) - Custom Events : Does it allows to trigger custom events (other than standard ones like click etc.) - Readibility : How easy is it to read and understand what's script doing (bit subjective) - Cross Browser : Is it cross browser compatible? - Revert : Corresponding method to undo event binding - Cancel Event Propagation : Is it possible to cancel ev...
Post a Comment
Read more

Talking Smiley with SVG, CSS and JQuery

Image
Intent of this article is to show a simple SVG demo that has CSS and JQuery as icing on the cake . I've no business with Images...! JQuery and SVG created me...! SVG = Scalable Vector Graphics SVG provides a means to create vector graphics using markup language that is almost supported by all major modern web browsers including Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari. With giving a touch of scripting language, you can create cool graphics for web. Folowing is the code I wrote for creating SVG & JQuery Smiley . <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style type="text/css"> .eyes,#mouth{ fill:#000000; stroke:white; stroke-width:1 } </style> <script> var open=true; $(function(){ //mouth setInterval( function(){ open = !open; $("#mouth").attr("rx",open?10...
Post a Comment
Read more

Handling CSS with JQuery

1. Modify class at runtime 1.1. If an element has multiple classes attached and you need to remove one of class (say 'oldclass') $(selector).removeClass("oldclass") 1.2. If you want to add a new class to an element (say 'newclass') $(selector).addClass('newclass') 1.3. If you want to replace one of the class associated with element (say replace 'oldclass' with 'newclass') $(selector).removeClass('oldclass').addclass('newclass') 1.4. If you want to replace all classes with a different class $(selector).attr('class','newclass') // with this one 2. Notes on using multiple classes. 2.1. If you want to specify multiple classes to an element, separate them with space. <div class="class1 class2 class3"></div> OR $('div').addClass('classA classB') OR $('div').addClass('classA').addClass('classB') 2.2. More than the sequence in which classes are spe...
Post a Comment
Read more