Ajax Updates |
- FireCrystal – Firefox extension for designers and programmers
- Opacity to Show Focus with jQuery
- Fancy FAQs with MooTools Sliders: Version 2
- MooTools ScrollSpy Script
- Form Element AJAX Spinner Attachment Using jQuery
| FireCrystal – Firefox extension for designers and programmers Posted: 24 Oct 2009 09:51 AM PDT FireCrystal is a Firefox extension that helps designers and programmers alike figure out how interactive behaviors on the web work. FireCrystal allows users to “rewind” their interactions with web pages while showing the relevant code. It is currently an alpha release and can suffer from very long load times or crashes in more Javascript-intensive pages FireCrystal is a visual debugger for Firefox. Users can record an interaction with a web page and replay that interaction along with the relevant code.  Related Listings:
| |||||
| Opacity to Show Focus with jQuery Posted: 24 Oct 2009 09:15 AM PDT A few days back I debuted a sweet article that made use of MooTools javascript and opacity to show focus on a specified element. Here's how to accomplish that feat using jQuery. $(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); }); There you have it. Opacity is a very simple but effective tool for building an attractive interface. Related Listings:
| |||||
| Fancy FAQs with MooTools Sliders: Version 2 Posted: 24 Oct 2009 07:52 AM PDT A little over a year ago I authored a post titled Fancy FAQs with MooTools Sliders. My post detailed a method of taking boring FAQs and making them more robust using the world's best javascript framework: MooTools. I've taken some time to improve my original code for optimal performance and functionality. The HTML <div id="faqs"> <h3>This is question 1</h3> <div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae....</p> </div> <h3>This is question 2</h3> <div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae....</p> </div> </div> Our MooTools javascript will be reliant upon a simple HTML structure of H3s followed by DIVs. The CSS #faqs h3 { cursor:pointer; } #faqs h3.active { color:#d74646; } #faqs div { } You see I have very little CSS above — just the bare necessities. It's up to you to make the content even more sexy. Maybe add some tweening on the content DIV when they show and hide. The MooTools Javascript window.addEvent('domready',function() { $$('#faqs h3').each(function(header,i) { var state = false, answer = header.getNext('div'); answer.slide('out'); header.addEvent('click',function(e) { state = !state; answer.slide(state ? 'in' : 'out'); if(state) { header.addClass('active'); } else { header.removeClass('active'); } }); }); }); We start by grabbing all of the H3 tags within the designated parent element. We then: 1. Cycle through each heading (the "question") Another Take The above code is accessible but sacrifices a clean effect during normal page load because you see a "flicker" of all of the answers displaying before javascript hides them. If accessibility is less of a concern and you want a smoother effect, consider adding the following CSS and javascript: #faqs div { height:0; overflow:hidden; } …and the javascript… window.addEvent('domready',function() { $$('#faqs h3').each(function(header,i) { var state = false; var answer = header.getNext('div'); answer.slide('out'); header.addEvent('click',function(e) { state = !state; answer.slide(state ? 'in' : 'out'); if(state) { header.addClass('active'); } else { header.removeClass('active'); } }); answer.setStyles({ overflow: '', height: 'auto' }); }); }); Source: http://davidwalsh.name/fancy-faqs Related Listings:
| |||||
| Posted: 24 Oct 2009 07:48 AM PDT I've been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific functionality with just a few simple parameters. /* scroll spy plugin / class */ var ScrollSpy = new Class({ /* implements */ Implements: [Options,Events], /* options */ options: { min: 0, mode: 'vertical', max: 0, container: window, onEnter: $empty, onLeave: $empty, onTick: $empty }, /* initialization */ initialize: function(options) { /* set options */ this.setOptions(options); this.container = $(this.options.container); this.enters = this.leaves = 0; this.max = this.options.max; /* fix max */ if(this.max == 0) { var ss = this.container.getScrollSize(); this.options.max = this.options.mode == 'vertical' ? ss.y : ss.x; } /* make it happen */ this.addListener(); }, /* a method that does whatever you want */ addListener: function() { /* state trackers */ this.inside = false; this.container.addEvent('scroll',function() { /* if it has reached the level */ var position = this.container.getScroll(); var xy = this.options.mode == 'vertical' ? position.y : position.x; /* if we reach the minimum and are still below the max... */ if(xy >= this.options.min &amp;&amp; xy < = this.max) { /* trigger Enter event if necessary */ if(!this.inside) { /* record as inside */ this.inside = true; this.enters++; /* fire enter event */ this.fireEvent('enter',[position,this.enters]); } /* trigger the "tick", always */ this.fireEvent('tick',[position,this.inside,this.enters,this.leaves]); } else { /* trigger leave */ if(this.inside) { this.inside = false; this.leaves++; this.fireEvent('leave',[position,this.leaves]); } } }.bind(this)); } }); Options for ScrollSpy include: * min: (defaults to 0) The minimum value of the X or Y coordinate, depending on mode. Events for ScrollSpy include: * Tick: Fires on each scroll event within the min and max parameters. Receives as parameters: So now that we have the basics down, lets check out some example usages. In this example, when you scroll down a defined number of pixels, you get a “Scroll to Top” link in the lower right hand part of the screen. When you’re back at the top, ScrollSpy is directed to hide the link. <a href="#top" id="gototop" class="no-click no-print">Top of Page</a> The CSS #gototop { display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:70px; background:url(/wp-content/themes/walshbook/images/add_content_spr.gif) 5px -8px no-repeat #eceff5; color:#3b5998; font-size:11px; text-decoration:none; position:fixed; right:5px; bottom:5px; padding:7px 7px 7px 20px; } #gototop:hover { text-decoration:underline; } The MooTools / ScrollSpy Javascript window.addEvent('domready',function() { /* smooth */ new SmoothScroll({duration:500}); /* link management */ $('gototop').set('opacity','0').setStyle('display','block'); /* scrollspy instance */ var ss = new ScrollSpy({ min: 200, onEnter: function(position,state,enters) { $('gototop').fade('in'); }, onLeave: function(position,state,leaves) { $('gototop').fade('out'); }, container: window }); }); Example 2: “The Show” When you click the link in this example, the window scrolls to the right. During the scrolling process, ScrollSpy shows and hides content blocks based on where in the scrolling process the window is. <!-- SLIDER 1 --> <div style="position:relative; height:400px;"> <div id="slider1" class="slider" style="margin-left:1000px;"> <h2>ScrollSpy!</h2> <p> ScrollSpy is a new plugin that watches where you scroll and allows you to perform actions based on the the position of the given element! </p> </div> <!-- SLIDER 2 --> <div id="slider2" class="slider" style="margin-left:1600px;"> <h2>ScrollSpy 2!</h2> <p> Another area! </p> </div> <!-- SLIDER 3 --> <div id="slider3" class="slider" style="margin-left:2200px;"> <h2>ScrollSpy 3!</h2> <p> You've met another criteria!! </p> </div> <!-- SLIDER 4 --> <div id="slider4" class="slider" style="margin-left:2800px;"> <h2>ScrollSpy 4!</h2> <p> You've met the last criteria!! </p> </div> <div style="clear:both;"></div> </div> <!-- RIGHT-MOST AREA --> <div style="float:right;" id="right2">&amp;nbsp;</div> The CSS .slider { padding:10px; background:#eee; width:300px; height:300px; float:left; z-index:500; } The MooTools / ScrollSpy Javascript window.addEvent('domready',function() { /* sliders */ var slide1 = new Fx.Slide('slider1',{ duration: 400, wheelStops: false }); slide1.hide(); var slide2 = new Fx.Slide('slider2',{ duration: 400, wheelStops: false }); slide2.hide(); var slide3 = new Fx.Slide('slider3',{ duration: 200, wheelStops: false }); slide3.hide(); var slide4 = new Fx.Slide('slider4',{ duration: 200, wheelStops: false }); slide4.hide(); /* scrollspy instance */ var ss1 = new ScrollSpy({ min: 400, max: 700, onEnter: function(position,state,enters) { slide1.slideIn(); }, onLeave: function(position,state,leaves) { slide1.slideOut(); }, container: window, mode: 'horizontal' }); /* scrollspy instance */ var ss2 = new ScrollSpy({ min: 900, max: 1500, onEnter: function(position,state,enters) { slide2.slideIn(); }, onLeave: function(position,state,leaves) { slide2.slideOut(); }, container: window, mode: 'horizontal' }); /* scrollspy instance */ var ss3 = new ScrollSpy({ min: 1500, max: 2300, onEnter: function(position,state,enters) { slide3.slideIn(); }, onLeave: function(position,state,leaves) { slide3.slideOut(); }, container: window, mode: 'horizontal' }); /* scrollspy instance */ var ss4 = new ScrollSpy({ min: 2200, max: 2500, onEnter: function(position,state,enters) { slide4.slideIn(); }, onLeave: function(position,state,leaves) { slide4.slideOut(); }, container: window, mode: 'horizontal' }); /* left to right scroll */ $('show2').addEvent('click',function(e) { e.stop(); var to = $('right2').getPosition(); to.y = 0; to.x = to.x - 300; var scroll = new Fx.Scroll(window,{ duration: 20000, offset: to }).start(); }); }); Related Listings:
| |||||
| Form Element AJAX Spinner Attachment Using jQuery Posted: 24 Oct 2009 07:39 AM PDT Form Element AJAX Spinner Attachment Using jQuery I'll show you how to implement that same functionality using jQuery. The XHTML <select class="ajax"> <option value="">-- Select a Site--</option> <option value="David Walsh Blog">David Walsh Blog</option> <option value="Script & Style">Script & Style</option> <option value="Band Website Template">Band Website Template</option> </select> <br /><br /> <input type="text" id="my-text" class="ajax" /> Elements with the "ajax" CSS class will be our target. The jQuery Javascript $(document).ready(function() { //create image $('<img src="move-spinner.gif" id="spinner" />').css('position','absolute').hide().appendTo('body'); //for every field change $('.ajax').change(function() { //get element position var position = $(this).offset(); //position image $('#spinner').css({ top: position.top , left: position.left + $(this).width() + 30 }).fadeIn(); //ajax $.post('< ?php echo $_SERVER['REQUEST_URI']; ?>',{ ajax:1, value: $(this).val() },function() { $('#spinner').fadeOut(); }); }); }); We inject the spinner image into the page and reposition it depending on which field is doing the request. Very simple! Source: http://davidwalsh.name/ajax-spinner-jquery Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.