Examples. Build an Auto-Scrolling Slideshow That Works With and Without JavaScript. Create a jQuery slideshow that enables you to click through each slide when JavaScript is disabled, without having to display all slides one under the other. Introduction There are several tutorials that walk people through how to create a jQuery slideshow, but there aren't many that focus on making it function without JavaScript. This is because most people believe it isn't possible but I am going to explain an exceedingly simple method that shows it is indeed possible.
You'll soon be kicking yourself and asking "How did I not think of that? "… In this tutorial I will cover the following: Step 1: Writing the markup First things first, we need to write the markup that our slideshow will use. This isn't quite complete yet but as a general rule of thumb, we should always start with the bare minimum and enhance/add to it when necessary.
Step 2: Add some CSS We're not going to be creating the most beautiful slideshow today as I just want to demonstrate the functionality more than anything. Auto-Moving Parallax Background. A while back I did a little demo on parallax backgrounds. As a quick review, parallax is that effect where there are different layers of backgrounds that all move at a different rate creating a very unique 3D effect (think Sonic the Hedgehog).
In that original demo, the only way to see the parallax action take place was resize the browser window. Recently, Paul Hayes took that example and ran with it. He used the extremely cool -webkit-transition attributes to make the parallax effect move without needing to resize the browser window or use javascript. Paul did an awesome job and the demo works great, but of course because it uses the proprietary css extention, it only works in very modern WebKit based browsers (Safari 4 and Google Chrome). While Paul's example is ideally how this type of effect will be done in the future, I thought it might be cool to toss a little JavaScript in the original and get an auto-moving version out there that should work in all browsers*.
How it Works Share On. 404/403 Website Error Pages With PHP Auto-Mailer. Website error pages are perhaps one of the most overlooked pieces of a fully rounded website. Not only are they important but they give you the opportunity to have a little fun. Although many web developers rely on server logs to keep an eye out for hits on error pages, I'm going to take a different approach by using a PHP generated email. In addition, we will spice up the design a bit, add basic navigation and link to the website sitemap. About Error Pages The most common error page - the one in which you are most likely to be familiar with - is the "404 Not Found page". Default error pages are quite boring (as you can see above) and offer no purpose to visitors other than letting them know some boring error happened. Check for custom error page support First, check to make sure your hosting provider allows you to use your own error pages. Configure .htaccess Add the following lines to your .htaccess file: Now save the .htaccess file and upload it to the document root directory.
The Code. Getting the real time in JavaScript - James Padolsey. Getting the time in JavaScript is pretty simple. Using the Date constructor will give us the time as set on the user’s computer, but what if we want the accurate time, or the time in a different timezone? Even with getTimezoneOffset() you’re still relying on the client! It turns out that the only way of getting a complete and accurate time from any timezone requires a little bit of server interaction. Luckily there are a few APIs out there that offer this service (actually, there’s only one; well I couldn’t find any others)! Here we’re using the ‘json-time’ API developed by Simon Willson: JSON-time Usage The first parameter of the callback function is the time (having been passed through the Date constructor), so you can use Date methods such as getSeconds() etc. For reference, here’s a list of all the available timezones (to use one, remove the backslash). jQuery version MooTools version You’ll need to download the JsonP class.
Acrylic - Times. News shouldn't be like email. Pulp takes your favorite news feeds and presents them in a beautifully friendly & familiar format, making it easy to quickly scan through headlines, previews, and photos to find the stories that interest you most. It's like your very own personalized newspaper, designed for your Mac & iPad.
See What's New The latest articles are automatically highlighted, letting you see what's new and how long ago they were posted. Read Later Save interesting articles to the shelf, the perfect place to queue up stories that you want to check out later. Customize Click the Edit button at any time to add, remove, or re-arrange your feeds and pages. Welcome to Pulp. Tap the Edit button at any time to add, remove, or re-arrange your feeds and pages. Pulp is unlike any other newsreader you've seen. Coffee breaks aren't endless, so Pulp makes it easy to save articles you want to read later. Dealing with RSS and URLs can be a pain. Maximum Table Functionality: DataTables. DataTables is a jQuery plugin for adding advanced interaction controls to HTML tables. It can add pagination, filtering and multi-column sorting functions to tables with ease.
The plugin has multilanguage support & many features that make it flexible: Smart handling of column widthsState savingHidden columnsDynamic creation of tablesAjax auto loading of dataAlternative pagination typesSorting column(s) highlighting DataTables can also be extended with the plug-in support it provides & its look can be totally customized via CSS. A Consideration of Variable and Function Scope in JavaScript. Many aspects of JavaScript code development are taken for granted, and scope is really no different. Of course, in many cases where minimal code is required, variable scope (or function scope) is a non-issue.
But if you’re planning to get into larger application development with JavaScript, then you need to understand at least the basics on scope in JavaScript. Using some simple code examples, I’m going to run through the basics of scope and try to give beginning to intermediate JavaScript developers a better grasp of this very important concept. Execution Context JavaScript programs have what is referred to as the execution context of a variable or function, which defines exactly what data the function or variable has access to. Here is a simple example to illustrate two different contexts in one JavaScript program: In the above code, we’re declaring two variables, sport and player. Demo 1 – Demonstrating Two Different Contexts What Exactly is the Global Context? Here is a demo page: Summary. Flexible MooTools Tree Control: Mif.Tree. Mif.Tree is a quality solution for creating tree menus with MooTools. The code is very flexible & lets you control every part of the navigation like: Adding new rowsDrag’n dropsSorting, renaming & more.
The tree menu created can also be browsed via keyboard & supports checkboxed tree menus. Mif.Tree is very well-documented & presents vaious examples. Feature-Rich JavaScript Tree Component: jsTree. JsTree is a cross-browser, free & flexible JavaScript tree component with various features. It can create the tree from the following data sources: predefined HTMLJSONXML Different types of nodes (open, close, rename, create, delete) can be created & supports various callbacks (onchange, oncreate, ondelete, onload, etc …). A great feature is async loading for creating dynamic trees by simply mentioning an URL for requesting data when needed. Other features of jsTree: drag & drop of nodesmultiple node selectionmultilingual – same tree in as many languages as you like ability to customize the look & feelanimated open/close of nodesoptional keyboard navigation ability to move nodes between multiple trees The component can also work as a jQuery plugin.
Best. PHP. Excellent JavaScript Navigation Techniques and Examples. JavaScript. Typeface. Framework.