The Beauty of dojo.require()
Aug 6, 2010 Ajax, CSS, General, HTML, JavaScript, PHP, Resources, Tutorials, Wordpress
I’ve been working full time with Dojo for the past four months and one of my favorite parts of the toolkit is the dojo.require system. The dojo.require system allows you to asynchronously request Dojo modules within the current page without needing to adjust your core Dojo build or needing to go out and download the given plugin. dojo.require is quite comprehensive but I wanted to give you a taste of dojo.require and how it works on a very basic level.
Direct Link Read the rest of this entry »
Tags: Ajax, browsers, dojo, Facebook, jQuery, MooTools, mysql, PHP, Security, stumbleupon, Style, Tutorials, twitter
Using PHP Sessions
Aug 3, 2010 Ajax, CSS, General, HTML, JavaScript, PHP, Tutorials, Wordpress
When you get to a stage when you need to pass user data from one page to another you have the option to do this without the user knowing by using PHP Session variables. Sessions are basically server-side cookies which have a corresponding client side cookie that contains a reference to its server-side counterpart. When a user visits a page, the client sends the reference code to the server, and PHP will then match that reference code to a server-side cookie and load the data in the …
Direct Link Read the rest of this entry »
Tags: Ajax, CSS, Facebook, iphone, PHP, reference, sessions, stumbleupon, trends, widgets
Display Delicious Bookmark Count on Your Web Page
Jul 21, 2010 Ajax, CSS, General, HTML, JavaScript, PHP, Resources, Tutorials, Wordpress
Although it’s unnecessary to display the bookmark button for Delicious because who still not using quick delicious plugin to bookmark such as: Delicious Bookmarks (for Firefox) or Delicious Extension (for Chrome). However, that is a good idea when displaying the count of Delicious bookmarks to show visitors how interesting your content is. These tips will help you to add the Delicious counter to your web page content.
Direct Link Read the rest of this entry »
Tags: Ajax, animation, count, delicious, HTML, JavaScript, latest-tweets, networks, PHP, Popular Posts, stumbleupon, Tutorials
Sexy Link Transformations with CSS
Jul 14, 2010 Ajax, CSS, General, HTML, JavaScript, PHP, Resources, Tutorials, Wordpress
I was recently visiting MooTools Developer Christoph Pojer’s website and noticed a sexy link hover effect: when you hover the link, the the link animates and tilts to the left or the right. To enhance the effect, the background color of the link is changed. I scoped out his JavaScript file to see how he created the effect but there were no link effects in it — the effects were being created with just CSS! View Demo The CSS .cpojer-links a { display: inline-block; padding: 4px; outline: 0; color: #3a599d; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } .cpojer-links a:hover { background: #3a599d; text-decoration: none; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-transform: scale(1.05) rotate(-1deg); -moz-transform: scale(1.05) rotate(-1deg); -o-transform: scale(1.05) rotate(-1deg); transform: scale(1.05) rotate(-1deg); } .cpojer-links a:nth-child(2n):hover { -webkit-transform: scale(1.05) rotate(1deg); -moz-transform: scale(1.05) rotate(1deg); -o-transform: scale(1.05) rotate(1deg); transform: scale(1.05) rotate(1deg); } Christoph utilized the transition functionality of each browser (since each has their own prefix.) The transition duration is set to 250 milliseconds and the scale/rotate is given to a default setting.
Direct Link Read the rest of this entry »
Tags: browsers, CSS, css / design, dojo, JavaScript, MooTools, stumbleupon, Style, weather
Dive Into Dojo Series: Dijit and Charting
Jul 14, 2010 Ajax, CSS, General, HTML, JavaScript, PHP, Resources, Tutorials, Wordpress
I just wanted to give you all a heads up that I’ve started a Dive Into Dojo series over on the SitePen blog . The series will aim to cover the basics of jumping into the world of the Dojo Toolkit. The first two posts in the series focus on the amazing charting and Dijit UI classes.
Direct Link Read the rest of this entry »
Tags: Ajax, CSS, dijit, dive-into-dojo-charting, Facebook, HTML, html / xhtml / xml, JavaScript, jQuery, PHP, Resources, stumbleupon, tools-tutorials, Tutorials
jQuery form titles
Jul 7, 2010 Ajax, CSS, General, HTML, JavaScript, PHP, Tutorials, Wordpress
I thought I’d share a little technique that I occasionally use when coding forms with a limited amount of space. It’s a simple effect that allows you to contain the form input or textarea title within the form allowing the user to click inside the form input to remove it. You often see this used on search fields The JavaScript firstly we assign a class of ‘form-field’ as well as adding the attribute ‘defaultVal’ with the text that we want to display in our input field.
Direct Link Read the rest of this entry »
Tags: Ajax, analytics, delicious, Design, Facebook, HTML, JavaScript, mobile, PHP, stumbleupon, Tutorials, web-tools
Google Font API
Jul 6, 2010 Ajax, CSS, General, HTML, JavaScript, PHP, Resources, Tutorials, Wordpress
Google recently debuted a new web service called the Font API. Google’s Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website. Let’s take a quick look at the ways by which the Google Font API can be used.
Direct Link Read the rest of this entry »
Tags: CSS, css / design, epic-discussion, Facebook, fonts, HTML, MooTools, PHP, stumbleupon, Style, Tutorials
Make Dijit’s FilteringSelect Widget Display an Empty Option Value Label
Jul 5, 2010 Ajax, CSS, General, HTML, JavaScript, PHP, Resources, Tutorials, Wordpress
I was recently working with the FilteringSelect Dojo Dijit widget and realized that when the first OPTION in the SELECT widget had a label with an empty value (like “Choose one…” or “Select you state”), the label wasn’t displaying. That’s no good! What I did was monkey patch the widget’s prototype to make sure that label was displaying when it was loaded. The Dojo JavaScript /* Modify ComboBox and FilteringSelect to use default label if value is “” */ (function(){ var oldPMIP = dijit.form.FilteringSelect.prototype.postMixInProperties; dijit.form.FilteringSelect.prototype.postMixInProperties = function(){ if(!this.store && this.srcNodeRef.value == ”){ var srcNodeRef = this.srcNodeRef, nodes = dojo.query(“> option[value='']“, srcNodeRef); if(nodes.length){ this.displayedValue = dojo.trim(nodes[0].innerHTML); } } oldPMIP.apply(this,arguments); }; })(); Like my previous monkey patching tutorial , we’re essentially modifying the prototype of the Dojo Dijit (FilteringSelect, in this case) we’d like to act differently.
Direct Link Read the rest of this entry »
Tags: Ajax, browser, CSS, david-walsh, dojo, Facebook, filtering, HTML, microsoft, MooTools, mysql, PHP, stumbleupon, Style, Tutorials
WebKit Marquee CSS: Bringin’ Sexy Back
Jul 5, 2010 Ajax, CSS, General, HTML, JavaScript, PHP, Resources, Tutorials, Wordpress
We all joke about the days of Web yesteryear . You remember them: stupid animated GIFs (flames and “coming soon” images, most notably), lame counters, guestbooks, applets, etc. Another “feature” we thought we had gotten rid of was the marquee.
Direct Link Read the rest of this entry »
Tags: CSS, HTML, JavaScript, marquee, microsoft, Security, stumbleupon, the-css-format
