Ajax Updates |
- Color Changing Text and Backgrounds with jQuery
- Crafting an Animated Postcard With jQuery
- Lights Out – Dimming – Covering Background Content with jQuery
- DataDrop – Drag Grid Data in From a Spreadsheet with ExtJS
- jQuery Code Expander
- IxEdit – JavaScript based interaction design tool
| Color Changing Text and Backgrounds with jQuery Posted: 25 Oct 2009 11:57 AM PDT Here's a quick and easy way to cycle between multiple colors smoothly. Normally you would define the (background) color in the CSS and that would be the end of it. In this case we want to be able to adjust colors after the page has loaded, and not just once either – we're aiming for continuous adjustments. The lovely part about this whole thing is the small about of jQuery required to make it all happen. * How to generate a random RGB color value. This is an important first step as it provides an endless supply of color values to transition to/from with a single line of jQuery. var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; This line makes a variable called hue that contains an RGB formatted color value that will be processed by the color animations plugin in later steps. Take the time to download the jQuery Color Animations Plugin – this will be responsible for the transitions between the colors we will be randomly generating. After you have decided what will be changing color, we will make use of the color animation plugin. I have included '#div' as a placeholder for your own element/feel free to adjust the timer to your needs. $('#div').animate( { backgroundColor: hue }, 1000); Completed jQuery Now that we have a means of creating random colors and transitioning between them, let's put it together in a function so we can loop it. We'll call it spectrum(), it will be called initially when the page loads and then again from within the function. This is what your final jQuery should look like: $(document).ready(function() { spectrum(); function spectrum(){ var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; $('#div').animate( { backgroundColor: hue }, 1000); spectrum(); } }); At this point you now are the proud creator of an ever-changing-color background, congratulations! While we did this in the above example, you could think about limiting the colors displayed to a certain shade (ie. blues, reds, etc.) by playing around with the ranges of the numbers generated for the hue variable. If you wanted to change the background color of the body, the animation line would look like this: $('body').animate( { backgroundColor: hue }, 1000); Changing Text Color This goes pretty much along the same lines as the background color blurb above, with a few minor changes. If you wanted to change the text color of something with the class .colored, the animation line would look like this: $('.colored').animate( { color: hue }, 1000); Changing Image Color with PNG Frame This is the route that I chose to go in the live demo. Basically, I took a solid black PNG image and carved out the parts where I wanted the background to peek through. Then I applied the color animations to the background of the element containing this PNG frame.  Related Listings:
| |||||
| Crafting an Animated Postcard With jQuery Posted: 25 Oct 2009 11:41 AM PDT Nicely illustrated banners are…nice. But why not add a little pizazz by using animation like Flash websites do? Through Javascript web pages are becoming increasingly less static and all sorts of creative possibilities are opening up. In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere. Take a peek below to see an outline of what we'll be learning today. * The art of looping animations using setTimeout() The HTML Laying down the groundwork is pretty simple, essentially we create a canvas ('#content') and center it with '#wrapper' – pretty standard practice. The difference between this and the average layout lies in our use of 'position:absolute' to place each image, which is why there isn't any real hierarchy to all the elements with images. <div id="wrapper"> <div id="content"> <div id="sun"><img src="images/sun.gif"/></div> <div id="cloud1"><img src="images/cloud1.png"/></div> <div id="cloud2"><img src="images/cloud2.png"/></div> <div id="cloud3"><img src="images/cloud3.png"/></div> <div id="raft"><img src="images/raft.png"/></div> <div id="raftripple"><img src="images/raftripple.gif"/></div> <div id="greetings"><img src="images/greetings.png"/></div> <div id="stamp"><img src="images/stamp.png"/></div> </div> </div> The CSS Next up we will want to plug in all the CSS, I have included comments below to block out the importance of each style. *{ margin:0; padding:0; } body { text-align: center; background: #111; } //Width should match that of the child element #content #wrapper{ margin:0px auto; width:700px; } //The canvas for our postcard, must be position:relative/overflow:hidden #content{ position:relative; width:700px; height:300px; top:30px; overflow:hidden; border:5px solid #f5f5f5; background: url('images/scene_bg.jpg'); } #sun{ position:absolute; top:10px; left:30px; } //Note the negative left values that hide the clouds offscreen //The z-indexes define how the clouds with stack on top of each other #cloud1{ position:absolute; top:60px; left: -150px; z-index:5; } #cloud2{ position:absolute; top:40px; left: -250px; z-index:4; } #cloud3{ position:absolute; top:25px; left: -100px; z-index:3; } //Our raft/ripple under the raft, z-indexes stack them accordingly #raft{ position:absolute; top:220px; left: 312px; z-index:20; } #raftripple{ position:absolute; top:220px; left: 309px; z-index:19; } //The text and stamp both positioned off-screen and on top of everything #greetings{ position:absolute; top:-51px; left: 200px; z-index:21; } #stamp{ position:absolute; top:5px; left: 801px; z-index: 21; } At this point in the game you should be looking at something pretty similar to this: For those of you that aren't as familiar with the whole jQuery scene we're going to need to tag the following two lines into the of the page:<script type="text/javascript" src="<a class="linkification-ext" title="Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js">http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> The first line calls jQuery, but the second calls the Easing Plugin, which might not be as familiar to you. We will be making use of it later in the tutorial, so for convenience sake, I have provided it in the downloadable files. If you're one of those independent folks you could download it from the official site too, I won't be offended. Below I have outlined the format for making a function that does a looped animation, in this case it is called the rather ambiguous name – 'animate_element'. function animate_element(){ $("#element").animate({left:"+=100px"},1000).animate({left:"-=100px"}, 1000) setTimeout("element()",2000); } If we pay attention the the first line of code within the function, we can see that it runs two animations, one after the other. $("#element").animate({left:"+=100px"},1000).animate({left:"-=100px"}, 1000) The first of the two moves the element 100px from the left relative to it's current location – as denoted by the '+='. When that animation is complete the next will be triggered, which does the exact opposite and moves the element back to it's starting location. When the animations finish then we want to have the same function called again, so that they will be repeated. We do this via setTimeout(), which can trigger events based on a timer. 1. setTimeout("element()",2000); The key point to notice is that the timer (2000 in this case) should be the sum of all the animation times in the previous line. This essentially will allow for each of the animations to complete (1000 + 1000), before restarting the function. After having just educated yourself in the setup for an animation, you should be be more than qualified to follow along in this next step, where we define a series of animation loops. Instead of doing a separate function for each individual animation, those that take the same amount of time to complete can be grouped together. function sun_raft(){ $("#sun").animate({opacity:".7"},1000).animate({opacity:"1"},1000); $("#raft").animate({top:"-=5px"},1000).animate({top:"+=5px"}, 1000); $("#raftripple").animate({opacity:".1"},1000).animate({opacity:"1"},1000); setTimeout("sun_raft()",2000); } function cloud1(){ $("#cloud1").animate({left:"+=850px"},10000).animate({left:"-150px"}, 0) setTimeout("cloud1()",10000); } function cloud2(){ $("#cloud2").animate({left:"+=950px"},9000).animate({left:"-250px"}, 0) setTimeout("cloud2()",9000); } function cloud3(){ $("#cloud3").animate({left:"+=800px"},6000).animate({left:"-100px"}, 0) setTimeout("cloud3()",6000); } In the instance of the clouds, which will be constantly scrolling across the screen, after they travel the distance, they are reset to their initial location via an animation that takes 0 time (therefore instantaneous). Now that we've defined the animations that will be looping let's combine them all into a function that we can then call when the page loads. function animation(){ sun_raft(); cloud1(); cloud2(); cloud3(); } Wonderfully simple. Now instead of having to type out 4 different functions each time, we can simply call animation(). Within our animated postcard we don't necessarily want everything looping – in this example we only want the "Greetings from Build Internet!" and stamp to animate once. In order to accomplish this, we're just going to tack the following two lines onto the end of the animation(): $("#greetings").animate({top: '125px' }, {queue:false, duration:600, easing:'easeOutBounce'}); $("#stamp").animate({left: '595px' }, {queue:false, duration:1200, easing:'easeOutBounce'}); You might have noticed the extra stuff built into animate(), don't panic, that's the Easing Plugin we talked about before doing it's job. There are a number of options to play with, but for this example I've opted for a bounce effect when the text and stamp roll in, it adds some nice flair. We've got everything in order we need to actually have an event trigger animation(), I want it to begin as soon as the page loads, so this is what mine will look like: $(document).ready(function() { setTimeout("animation()",300); }); Special Note : You may have noticed I added a setTimeout() before calling animation() – This is so the visitor/browser have time to get situated before firing off the animations. If your animations are triggered by a click or something of that nature, you won't need to encase animation() in a setTimeout(). Related Listings:
| |||||
| Lights Out – Dimming – Covering Background Content with jQuery Posted: 25 Oct 2009 11:14 AM PDT This is a quick and easy approach that tackles a pretty common technique. By the end of this tutorial you will be able to add pop up message boxes complete with dimmed background to your existing site. Feel free to take a look at the demo to scope out exactly what we'll be creating here today. You may already be familiar with Lightbox – which does a number of the things we are aiming to accomplish today, so as an added disclaimer – The purpose of this tutorial is simply to show you how to dim/cover the background while displaying a message box. Here's the gist: When a link is clicked a div that covers the entire page becomes visible and lays on top of the content. On top of that we have our message box which hides everything again when it gets closed. There are a number of different customizations we can make to this process, but it's important to have the overall picture before tweaking too much. <body> <!--The overlay and message box--> <div id="fuzz"> <div class="msgbox"> <a class="close" href="#" ><img src="close.jpg"/></a> </div> </div> <!--The content to be hidden--> <div id="content"> <a class="alert" href="#" >Alert Me!</a> </div> </body> When applying this to your own site, you will only need to include the top overlay and message box section, as the rest is just a placeholder for this example. The one element from the "content to be hidden" section you will want/need to grab is the ".alert" link which will be the trigger for the message box when clicked. I have named the overlay layer "fuzz" as it will be TV-style static, this is easily adjustable in case that's not what you want – more on that in Step 2. Next up let's take care of the styling for our overlay and message box: /*Styles for fuzz overlay & message box*/ #fuzz{ position:absolute; top:0; left:0; width:100%; z-index:100; background: url('fuzz.gif'); display:none; text-align:left; } /*Message box, positioned in dead center of browser*/ .msgbox{ position:absolute; width:300px; height:200px; z-index:200; border:5px solid #222; background: #FFF; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; } .msgbox img {border:none; margin:5px;} /*The "X" in the upper right corner of msgbox*/ .close{ top:0px; float:right; } If you want to change the overlay (#fuzz) to anything other than static, it is a simple matter of changing the background image – I have also included a semi-transparent black png that can be used for the dim effect in the attached files. I have commented each item below to help guide you along: $(document).ready(function(){ //Adjust height of overlay to fill screen when page loads $("#fuzz").css("height", $(document).height()); //When the link that triggers the message is clicked fade in overlay/msgbox $(".alert").click(function(){ $("#fuzz").fadeIn(); return false; }); //When the message box is closed, fade out $(".close").click(function(){ $("#fuzz").fadeOut(); return false; }); }); //Adjust height of overlay to fill screen when browser gets resized $(window).bind("resize", function(){ $("#fuzz").css("height", $(window).height()); }); As far as customization at this stage, you could simply choose to replace fadeIn/Out with show/hide for instant results. You could also go as far as having the message box slide in from off screen. Quite a few possibilities, get creative with it. Keep in mind that the message box can act as a canvas for whatever you like, you're not limited to just text. I'm always fascinated to see what you can come up with. I have included two separate variations in the attached files – one with a static overlay and the other with a simple dimmed background – to help you along. Related Listings:
| |||||
| DataDrop – Drag Grid Data in From a Spreadsheet with ExtJS Posted: 25 Oct 2009 11:02 AM PDT Andrea Giammarchi came up with, it was so cool – very cool – but totally useless in the form it was in (from a UX standpoint). It was a proof of concept, so I wasn’t expecting it to be useful right away, in fact all I was expecting is that it give me an idea – and it did. If we could drag our tabular data into grids from other programs we could circumvent the need to upload a data file to a web server to be read and parsed, then spit back out to our browser in a readable format. Anyone who has ever had to parse Excel files on the server side knows how much of a pain it is, we might be lucky if we get a CSV file or some other simple format, but in the real world the end user running their spreadsheet program has no clue what simple tabular data is. Using the same concept from Andrea’s example page, we can create a zone within the grid which will accept dragged data from a spreadsheet. The behavior that we are taking advantage of is the way in which an html textarea will accept dragged data from a spreadsheet and format it as tab delimited data. My first version of the plugin is rough around the edges, but works in all browsers (minus Opera) very reliably. Being a plugin, the usage is straight forward, there are no configuration values that need to be defined at this time. { xtype: 'grid', ..., plugins: [Ext.ux.grid.DataDrop], ... } Check out the screencast below to see it in action – I am dragging rows of data from OpenOffice Calc directly to an ExtJS Grid. Related Listings:
| |||||
| Posted: 25 Oct 2009 10:48 AM PDT There is a problem on the web. Displaying actual programming code takes away a lot of space of the webpage (especially the longer ones). You can split up the code in several parts, but that’s really hard to read for programmers. You can leave it “as it is” and users would have to scroll a lot if they’re not interested in the code itself. And scrollbars in code-examples – that’s just horrible (and yes – that’s what I have on this website). I created a solution for this problem and call it the jQuery Code Expander. It does exactly what you think it does – Expand any code you want to place online using jQuery. Although the HTML is very simply, it’s vital to make this technique work. It looks like this: <pre class="jcexpander"><code> <!-- Your code goes here --> </code></pre> The pre-element has a class (jcexpander) and one child element (code). That’s all we need! Once again, the CSS is really small, but this is another key to let this technique be a success. I’ve only placed the important stuff here – you can view the full CSS in the download. pre.jcexpander { width:80%; height:500px; overflow:hidden; } As you can see, the pre element has been trimmed down. The overflow is set to hidden so you won’t see the scrollbars. You should have a cropped version of the code block right now. Now, on to the jQuery part! jQuery There is something really important going on over here: Although the pre-element has been cropped down, the code-element hasn’t. This means, that when you request the size of the code-element, you would get the size of how big it really is (when it wasn’t cropped). That information is what we’re going to use next. I came up with the following script (which also adds the icon on top). Comments are added to make things clear. * * Author: Marco Kuiper (http://www.marcofolio.net/) */ google.load("jquery", "1.3.1"); google.setOnLoadCallback(function() { // We'll need to loop through each <pre> element // with the class "jcexpander" $("pre.jcexpander").each(function(){ // Only do something when the inner element (the <code> element) // is bigger than the parent (<pre>) element if( $("code", this).height() > $(this).height() || $("code", this).width() > $(this).width()) { // We'll need to store the original values of the sizes // since we'll use it to "grow back" $(this).data('originalHeight' , $(this).height()); $(this).data('originalWidth', $(this).width()); // Create a IMG element for the overlay var icon = document.createElement("img"); $(icon).css({ 'position' : 'absolute'}); $(icon).attr("src", "images/fullscreen.png"); // Append the image to the </pre><pre> element $(icon).prependTo($(this)); // When the </pre><pre> element is hovered, this happens // First function is "over", second is "out" $(this).hover(function(){ // Fade out the image $(icon).fadeOut(); // Read the size of the <code> element var codeWidth = $("code", this).width(); var codeHeight = $("code", this).height(); // Size the <pre> element to be just as big // as the <code> element $(this) .stop() .animate({ width : codeWidth + "px", height : codeHeight + "px" }, 1500); }, function(){ // Fade in the image $(icon).fadeIn(); // Size the <pre> element back to the // original size. $(this) .stop() .animate({ width : $(this).data('originalWidth') + "px", height : $(this).data('originalHeight') + "px" }, 1500); }); } }); }); And that’s it! You can now try the script or just view the demo. Conclusion and Download Pretty cool, don’t you think? If you want to implement this on your website, you might want to mess with the CSS (z-index and position) to make sure it doesn’t break anything of your layout. I’m also aware of the problem that, if you expand the bottom box and scroll down, the window flashes. It’s because there is a background image and I sadly don’t thing there’s a solution for this.
Related Listings:
| |||||
| IxEdit – JavaScript based interaction design tool Posted: 25 Oct 2009 10:40 AM PDT IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase of your web application. What is Interaction? Interactions are visual changes of the screen which occur when users act on user interface elements. In other words, interactions are the behaviors of the user interface. For instance, when a user click a button, an image switches to another, or when a user drags an edge, the viewport expands. Those are interactions. Users are doing their jobs with a computer through various interactions generally. To implement interactions on a web page, programming with JavaScript is needed. However, it is hard to manage JavaScript for many designers. Therefore, making well-designed web interactions is difficult in general. IxEdit solves this problem. If you have basic knowledge about HTML and CSS, you can create interactions as you like. JavaScript coding is no longer needed. Changing class name of target element dynamically due to user action is the most basic technique of web interactions. By that, the styles you have made for the class will be applied dynamically, then the presentation of the target element will change. With this technique, most of the visual changes you want may be made out actually. In this sample, when you click the “Add/Remove Class” button, the specific class will be added to or removed from the target element. So the styles of the target element and its inclusion will be changed in a lump. <ul id="menu"> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> </ul> #menu { background-color: #d7dde5; width: 300px; font-size: 14px; padding: 8px 24px; } ul.decorated { list-style-type: none; background-image: url(bg-grad.gif); border: 1px solid #999; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding:12px 0 14px 0 !important; text-align: center; background-repeat: repeat-x; background-color: #ddd; } ul.decorated li { display: inline; margin: auto 2px; padding: 0; } ul.decorated a { color: #000; text-decoration: none; border: 1px solid #999; background-image: url(bg-button-grad.gif); background-repeat: repeat-x; background-position: left top; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-shadow: white 0px 1px 0px; margin: 0; overflow: visible; font-size: 12px; line-height: 18px; padding: 4px 12px; font-weight: bold; } 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.