How To Use Impress.Js | Cube Websites Blog
yesterday by 44sunsets
Yesterday, I wrote about Impress.js, an awesome JavaScript library for creating online presentations. Since posting online, I’ve had several people ask how exactly to use it, as there’s no set documentation on the actual project page. This guide will help you get started and allow you to create a simple slideshow, but after completing it please bear in mind that there’s so much more that can be done with it. The only limit is your creativity!
This tutorial is available for you to view and download on GitHub
impress.js
tutorial
guide
impress
js
This tutorial is available for you to view and download on GitHub
yesterday by 44sunsets
JavaScript Garden
yesterday by 44sunsets
JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.
JavaScript Garden does not aim to teach you JavaScript. Former knowledge of the language is strongly recommended in order to understand the topics covered in this guide. In order to learn the basics of the language, please head over to the excellent guide on the Mozilla Developer Network.
javascript
quirks
strange
oddities
reference
programming
developer
development
js
learning
subtle
bugs
common
mistakes
beginner
JavaScript Garden does not aim to teach you JavaScript. Former knowledge of the language is strongly recommended in order to understand the topics covered in this guide. In order to learn the basics of the language, please head over to the excellent guide on the Mozilla Developer Network.
yesterday by 44sunsets
How To Build an Animated Header in jQuery
february 2012 by 44sunsets
Why not give a little flair to your header. This tutorial will show you how to animate your header’s background image using jQuery to give your website that little extra something.
What We Are Building
We are going to build a header that animates it’s background. We will also encase the header in shadow for the little extra dramatic effect.
jquery
animated
header
banner
background
shadow
dark
image
scrolling
moving
animation
js
What We Are Building
We are going to build a header that animates it’s background. We will also encase the header in shadow for the little extra dramatic effect.
february 2012 by 44sunsets
AutoSuggest jQuery Plugin | Drewwilson.com
november 2011 by 44sunsets
So I needed to add some auto-completing functionality to my project Build It With Me. I figured it would be easy to find a ready-made jQuery plugin to do the work for me. I was wrong.
Naturally I took it upon myself to solve this problem for all of you :) I created this plugin to be as general purpose as possible. As a result it ended up being vastly more customizable than any other jQuery auto-complete plugin. Not only that, I am using actual jQuery. For some reason all the other "jQuery" plugins don't really take advantage of the radness that is jQuery. Consequently, my plugin ended up being dramatically smaller in size (way less code). Just 7kb 8.8kb minified and only 6kb packed. Have fun with it!
AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.
javascript
jquery
plugin
autocomplete
autosuggest
auto
suggestions
suggestion
suggest
complete
autofill
js
webdev
Naturally I took it upon myself to solve this problem for all of you :) I created this plugin to be as general purpose as possible. As a result it ended up being vastly more customizable than any other jQuery auto-complete plugin. Not only that, I am using actual jQuery. For some reason all the other "jQuery" plugins don't really take advantage of the radness that is jQuery. Consequently, my plugin ended up being dramatically smaller in size (way less code). Just 7kb 8.8kb minified and only 6kb packed. Have fun with it!
AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.
november 2011 by 44sunsets
PDFObject: Standards-friendly PDF embedding
june 2011 by 44sunsets
In an ideal world, you would always embed your PDF files using an <object> element hard-coded in your HTML markup. Why? For starters, avoiding JavaScript usually means greater accessibility, greater searchability (important for those concerned with search engine optimization), and fewer browser compatibility issues. Since no JavaScript is being used, standardized markup is also quicker to load and less of a drain on computer and network resources.
pdfobject
pdf
js
javascript
html
object
embed
embedding
webstandards
standards
web
purehtml
adobe
june 2011 by 44sunsets
How to Track File Downloads in Google Analytics | Web Analytics Blog
june 2011 by 44sunsets
Out of the box, Google Analytics will not track how many times people download PDFs or other file types, simply because those files do not have the ability to request a tracking pixel. In this blog post, we’ll be covering the ways to properly track file downloads in Google Analytics.
Throughout this blog post, I’ll be assuming that you are wanting to track a PDF download, but keep in mind that you could use this same technique to track the download of a .mp3, .mp4, .xlsx, etc — it really does not matter. Additionally, I recommend tracking file downloads as events (so that you are not inflating pageviews on your site), but you could very well track them as pageviews. In the new Google Analytics v5, you can now setup events as goals!
ga
googleanalytics
analytics
google
js
jquery
download
downloads
tracking
track
pdf
doc
xls
ppt
mp3
event
events
pageviews
Throughout this blog post, I’ll be assuming that you are wanting to track a PDF download, but keep in mind that you could use this same technique to track the download of a .mp3, .mp4, .xlsx, etc — it really does not matter. Additionally, I recommend tracking file downloads as events (so that you are not inflating pageviews on your site), but you could very well track them as pageviews. In the new Google Analytics v5, you can now setup events as goals!
june 2011 by 44sunsets
FullCalendar - Full-sized Calendar jQuery Plugin
march 2011 by 44sunsets
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source and dual licensed under the MIT or GPL Version 2 licenses.
js
javascript
jquery
calendar
month
week
day
daily
weekly
monthly
view
google
googlecalendar
plugin
ajax
march 2011 by 44sunsets
Update: A New & Improved jQuery Script to Automatically Preload images from CSS | Filament Group, Inc., Boston, MA
january 2011 by 44sunsets
New version improvements
Among other small improvements, this release allows preloading images from any directory specified in the CSS. Also offers load status updates for text and image-based load bars.
jquery
js
javascript
css
preload
load
images
image
cache
webdev
Among other small improvements, this release allows preloading images from any directory specified in the CSS. Also offers load status updates for text and image-based load bars.
january 2011 by 44sunsets
Bibliotype — Craig Mod
january 2011 by 44sunsets
Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.
javascript
html
css
js
library
ipad
tablet
reading
ebook
book
viewer
january 2011 by 44sunsets
IIPImage » Demos
october 2010 by 44sunsets
IIPMooViewer – Ajax Javascript Viewer
iipmooviewer
moo
mootools
image
viewer
ajax
server
client
javascript
zoom
pan
viewing
zoomify
images
flash
js
panorama
october 2010 by 44sunsets
jPlayer : the CSS styleable jQuery audio player plugin
september 2010 by 44sunsets
jPlayer is a jQuery plugin that allows you to:
play and control audio files in your webpage
create and style an audio player using just HTML and CSS
add sound effects to your jQuery projects
support more devices using HTML5
All of this with HTML5 <audio> support for compliant browsers that allow mp3 or ogg format, while supporting other browsers using mp3 format with no visible Flash
jplayer
jquery
javascript
html5
audio
playback
player
script
js
sound
mp3
ogg
flash
fallback
plugin
plugins
webdev
css
play and control audio files in your webpage
create and style an audio player using just HTML and CSS
add sound effects to your jQuery projects
support more devices using HTML5
All of this with HTML5 <audio> support for compliant browsers that allow mp3 or ogg format, while supporting other browsers using mp3 format with no visible Flash
september 2010 by 44sunsets
Expand and collapse content accessibly with progressive enhancement, jQuery, and ARIA | Filament Group, Inc., Boston, MA
may 2010 by 44sunsets
Collapsible content areas are frequently presented in web sites and applications as a way to let users to control how content is shown or hidden on the page. Also called collapsibles, spin-downs, toggle panels, twisties, and content disclosures, they're ideal for selectively displaying optional information — like instructional text or additional details, for example — so users can focus on the task at hand and view this content only as needed.
The collapsible content area widget is fairly simple — a couple of HTML elements controlled with minimal CSS and JavaScript — but when we were researching our book, Designing with Progressive Enhancement, we discovered that many common approaches to creating collapsible content fail to incorporate accessibility features. Happily, there is a way to build collapsible content with progressive enhancement so it delivers an optimal accessible experience for sighted and screen reader users alike.
jquery
progressive
enhancement
JS
javascript
webdev
web
development
show
hide
showhide
collapse
expand
script
aria
accessible
accessibility
The collapsible content area widget is fairly simple — a couple of HTML elements controlled with minimal CSS and JavaScript — but when we were researching our book, Designing with Progressive Enhancement, we discovered that many common approaches to creating collapsible content fail to incorporate accessibility features. Happily, there is a way to build collapsible content with progressive enhancement so it delivers an optimal accessible experience for sighted and screen reader users alike.
may 2010 by 44sunsets
dygraphs JavaScript Visualization Library
april 2010 by 44sunsets
dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.
webdev
javascript
open
source
opensource
js
library
graph
graphing
zoom
zoomable
chart
charts
time
series
timeseries
charting
dygraphs
visualisation
visualization
web
webdesign
graphs
april 2010 by 44sunsets
Nivo Slider - The Most Awesome jQuery Image Slider
april 2010 by 44sunsets
16 unique transition effects
Simple clean & valid markup
Loads of settings to tweak
Built in directional and control navigation
Packed version only weighs 15kb
Supports linking images
Keyboard Navigation
HTML Captions
Free to use and abuse under the MIT license
Browser Support
Nivo Slider has been tested in the following browsers:
Internet Explorer v7+
Firefox v3+
Google Chrome v4+
Safari v4+
Opera v10+
webdev
web
design
development
javascript
jquery
image
images
slider
scroller
slideshow
script
gallery
transition
effects
imageslider
nivo
plugin
carousel
js
photo
Simple clean & valid markup
Loads of settings to tweak
Built in directional and control navigation
Packed version only weighs 15kb
Supports linking images
Keyboard Navigation
HTML Captions
Free to use and abuse under the MIT license
Browser Support
Nivo Slider has been tested in the following browsers:
Internet Explorer v7+
Firefox v3+
Google Chrome v4+
Safari v4+
Opera v10+
april 2010 by 44sunsets
BRAIN-MAPS-API - BRAINMAPS.ORG - BRAIN ATLAS, BRAIN MAPS, BRAIN STRUCTURE, NEUROINFORMATICS, BRAIN, STEREOTAXIC ATLAS, NEUROSCIENCE
april 2010 by 44sunsets
The Brain Maps API is a lightweight multiresolution image viewer with customizable label overlays that lets you embed BrainMaps images in your own web pages with JavaScript, and that can also be used with your own multiresolution images. It has been designed to be small and fast, and to consume very little memory, yet still be very functional and extensible. The Brain Maps API is a free service, available for any web site that is free to consumers.
webdev
web
development
JS
javascript
zoomify
zoom
zooming
replacement
image
viewer
ajax
april 2010 by 44sunsets
shiftzoom.js (javascript zoom and pan functionality for images)
april 2010 by 44sunsets
shiftzoom.js 3.2 allows you to add zoom and pan functionality to oversized images on your webpages. It also allows you to build interactive applications through the various user commands. It uses unobtrusive javascript to keep your code clean.
webdev
web
design
development
javascript
zoomify
replacement
shiftzoom
pan
scripts
js
zoom
zooming
panning
webdesign
unobtrusive
april 2010 by 44sunsets
Gracefully Degrade the Google Custom Search Form So That It Works Without Javascript - Chris Roos
february 2010 by 44sunsets
It struck me a couple of nights ago that it wasn’t possible to search my site without Javascript, because of Google Custom Search’s reliance on Javascript. I’m not sure whether I just overlooked the fact or whether I’d realised that it was bad and ignored it. Either way, I decided it was time to do something about it. I stripped out the google custom search form and replaced it with a form that actually searches the google index of my site.
javascript
web
JS
google
cse
googlecse
custom
search
engine
degrade
gracefully
graceful
degradation
progressive
enhancement
forms
off
february 2010 by 44sunsets
Highcharts - Interactive JavaScript charts for your webpage
january 2010 by 44sunsets
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
It works in all modern browsers including the iPhone and Internet Explorer from version 6. Standard browsers use the Canvas element and in some cases SVG for the graphics rendering. In Internet Explorer graphics are drawn using VML.
jquery
mootools
javascript
js
webdev
web
development
chart
charts
graphs
pie
graph
graphing
library
data
visualization
visualisation
svg
vml
highcharts
canvas
It works in all modern browsers including the iPhone and Internet Explorer from version 6. Standard browsers use the Canvas element and in some cases SVG for the graphics rendering. In Internet Explorer graphics are drawn using VML.
january 2010 by 44sunsets
Meerkat - A jQuery Plugin
december 2009 by 44sunsets
Meerkat, depending on the options you have set, will slide or fade in from the top or bottom of the browser window and remain in its fixed position while the rest of the page will scroll normally. You have a choice of providing a close option which will simply close Meerkat until the page has been reloaded, or a dontShow option, which will close Meerkat until the browser session has ended, or for a set amount of days, depending on the options you have defined.
jquery
plugin
js
javascript
webdev
meerkat
sliding
top
bottom
popup
message
box
messagebox
fading
fade
slide
slider
fixed
alert
news
urgent
cookie
cookies
december 2009 by 44sunsets
tipsy - Facebook-style tooltip plugin for jQuery
december 2009 by 44sunsets
Tipsy is a jQuery for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.
jquery
js
javascript
tooltip
tooltips
hover
effect
anchor
title
attribute
plugins
facebook
december 2009 by 44sunsets
PhoneGap | Cross platform mobile framework
november 2009 by 44sunsets
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.
If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the core features in the iPhone, Android and Blackberry SDKs, PhoneGap is for you.
iphone
opensource
development
tool
mobile
apps
javascript
js
framework
android
blackberry
phonegap
native
web
app
packaging
wrapper
cross
platform
phone
If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the core features in the iPhone, Android and Blackberry SDKs, PhoneGap is for you.
november 2009 by 44sunsets
Superfish - Suckerfish on 'roids
november 2009 by 44sunsets
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:
jquery
suckerfish
dropdown
dropdowns
menu
menus
javascript
hover
timed
delay
timeout
onmouseout
mouseout
js
webdev
web
design
development
css
plugin
dropdownmenu
november 2009 by 44sunsets
:hover Pseudo Class Bug Fix for IE6 | RobSpangler.com
november 2009 by 44sunsets
For those of you familiar with the :hover pseudo class, you probably know that IE6 and below is not.
A simple example of the :hover pseudo class in action is when you mouse over a Hyperlink and it changes color, or it becomes underlined or something dazzling like that. A more advanced example is applying :hover to other tags such as a <td> to make the data cell of a table change color, this is the example I’m going to talk about today.
To get this working in IE6 I have gone through a large amount of resources with javascript fixes, that work—but can be overly complicated. I have also attempted to use some .htc behavior fixes, which can be incredibly finicky and are also invalid CSS according to W3 standards.
But don’t worry! There is hope! Finally after wrestling with this issue for a long time and doing some good investigating for a decent fix, I found it through the use of jQuery.
jquery
js
javascript
fix
ie6
hover
pseudoclass
A simple example of the :hover pseudo class in action is when you mouse over a Hyperlink and it changes color, or it becomes underlined or something dazzling like that. A more advanced example is applying :hover to other tags such as a <td> to make the data cell of a table change color, this is the example I’m going to talk about today.
To get this working in IE6 I have gone through a large amount of resources with javascript fixes, that work—but can be overly complicated. I have also attempted to use some .htc behavior fixes, which can be incredibly finicky and are also invalid CSS according to W3 standards.
But don’t worry! There is hope! Finally after wrestling with this issue for a long time and doing some good investigating for a decent fix, I found it through the use of jQuery.
november 2009 by 44sunsets
Plugins | jQuery Plugins
november 2009 by 44sunsets
An Image Overlay plugin for the jQuery JavaScript library. Allows you to display additional information in a translucent pane above an image that gracefully appears when a user hovers over the image. Support for the metadata plugin is included. Brought to you by Jon Neal of ferretarmy.com.
jquery
JS
overlay
sliding
slider
image
images
photo
hover
november 2009 by 44sunsets
Setting Equal Heights with jQuery | Filament Group, Inc., Boston, MA
october 2009 by 44sunsets
We wrote a script to "equalize" the heights of boxes within the same container and create a tidy grid — with little overhead.
Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. When developing complex web applications or site designs we've found that it often makes the most sense from a usability and performance standpoint to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element's minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.
jquery
javascript
webdev
web
development
equal
height
heights
columns
grid
boxes
equalise
equalheight
layout
webdesign
css
js
Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. When developing complex web applications or site designs we've found that it often makes the most sense from a usability and performance standpoint to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element's minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.
october 2009 by 44sunsets
jQuery.validity
september 2009 by 44sunsets
jQuery.validity is a simple and powerful jQuery plug-in you can use to setup client-side form validation. Instead of writing validation manually or balancing some unwieldy server-side framework, validity allows you to design client-side validation in a manner that feels natural and straightforward.
jquery
form
input
validator
validation
js
javascript
unobtrusive
library
validity
valid
september 2009 by 44sunsets
Modernizr
august 2009 by 44sunsets
Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.
Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate TRUE and if not, it will be FALSE.
modernizr
html5
js
browserdetection
framework
compatibility
webdesign
javascript
css
css3
rgba
border-radius
detection
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.
Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate TRUE and if not, it will be FALSE.
august 2009 by 44sunsets
prettyGallery - by Stephane Caron
august 2009 by 44sunsets
prettyGallery another way to display galleries
by: Stéphane Caron
Once again, I wasn't satisifed with most of the gallery scripts out there. So I decided to build my own.
If you have any comment or ways to improve it, just leave me a comment!
Bellow you can see a demo of galleries.
jquery
gallery
slider
scroller
carousel
images
text
content
html
JS
javascript
image
photo
galleries
photos
prettygallery
photogallery
by: Stéphane Caron
Once again, I wasn't satisifed with most of the gallery scripts out there. So I decided to build my own.
If you have any comment or ways to improve it, just leave me a comment!
Bellow you can see a demo of galleries.
august 2009 by 44sunsets
syntaxhighlighter - Project Hosting on Google Code
july 2009 by 44sunsets
SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server.
web
design
css
development
javascript
JS
color
syntax
highlighting
highlighter
highlight
webdev
opensource
free
july 2009 by 44sunsets
jQuery Sparklines
march 2009 by 44sunsets
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9 and Internet Explorer 6 & 7.
Each example displayed below takes just 1 line of HTML or javascript to generate.
The plugin was written by Gareth Watts for Splunk Inc and released under the New BSD License.
jquery
sparklines
graph
graphs
JS
javascript
pie
line
chart
charts
plot
plotting
statistics
dynamic
The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9 and Internet Explorer 6 & 7.
Each example displayed below takes just 1 line of HTML or javascript to generate.
The plugin was written by Gareth Watts for Splunk Inc and released under the New BSD License.
march 2009 by 44sunsets
typeface.js -- Rendering text with Javascript, , and VML
october 2008 by 44sunsets
Instead of creating images or using flash just to show your site's graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. This is a work in progress, but…
imported
Bookmarks
JS
Javascript
custom
font
rendering
web
development
design
october 2008 by 44sunsets
Nesting Quotes And The Escape Character
october 2008 by 44sunsets
Many times you will work with strings which contain quotes. Since the JavaScript interpreter reads the first quote it encounters as the beginning of the string, and reads the very next quote it encounters as the end of the string, we need a way to…
imported
Bookmarks
JS
javascript
web
development
quotes
apostrophe
speech
mark
escape
character
october 2008 by 44sunsets
1 Bit Audio Player : A JavaScript-inserted Flash MP3 player for WordPress blogs and other websites
september 2008 by 44sunsets
1 Bit Audio Player is a very simple and lightweight Adobe Flash MP3 player with automatic JavaScript insertion. It's main purpose is to act as a quick in-page preview for audio files you link to from your website or blog. The player can be easi…
imported
Bookmarks
Flash
unobtrusive
JS
Javascript
player
audio
embedded
inline
preview
files
website
web
development
bookmarklet
light
lightweight
weght
simple
minimalist
september 2008 by 44sunsets
Highslide JS - JavaScript thumbnail viewer
august 2008 by 44sunsets
Highslide JS - JavaScript thumbnail viewer
imported
Bookmarks
highslide
JS
JavaScript
image
gallery
viewer
lightbox
animated
Flash
content
text
transition
fade
shadow
drag
open_source
august 2008 by 44sunsets
LiveValidation - Validation as you type
august 2008 by 44sunsets
A javascript library for all your client-side and form validation needs.
imported
Bookmarks
web
development
JS
javascript
form
validation
real-time
check
client-side
client
side
html
xhtml
august 2008 by 44sunsets
An alternative to sIFR: Facelift Image Replacement | Breathe new life into your web pages
august 2008 by 44sunsets
Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will…
imported
Bookmarks
facelift
IR
image
replacement
FLIR
JS
JavaScript
fonts
dynamic
generated
PHP
gd
Imagemagick
august 2008 by 44sunsets
sebtools: Maintaining a Session
july 2008 by 44sunsets
On the CF-Talk list, Richard Colman asked how he could keep a session alive for longer than the 30 minute limit imposed by Crystal Tech. Michael Dawson provided a very good answer (quoted below): I setup my intranet so that, even if th…
imported
Bookmarks
CF
ColdFusion
maintain
keep
alive
session
20
mins
minutes
interval
JS
JavaScript
server
call
timeout
workaround
keepalive
july 2008 by 44sunsets
cabel.name: FancyZoom 1.1
june 2008 by 44sunsets
This much-requested chunk of Javascript to zoom images inline, originally written for this blog but later rolled out to the Panic website and used for screenshots, is now polished up, bug-fixed, available for you to use on your website! Designe…
imported
Bookmarks
Cabel
Sasser
Cabel_Sasser
Panic
fancyzoom
zoom
JS
Javascript
web
development
design
image
zoomer
photo
smooth
animation
automatic
scaling
preload
drop
shadow
june 2008 by 44sunsets
Lightbox 2
june 2008 by 44sunsets
Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
imported
Bookmarks
lightbox
2
JS
javascript
unobtrusive
gallery
image
set
single
overlay
opacity
darkened
context
web
development
design
photos
june 2008 by 44sunsets
Calling Javascript within Javascript - WebDeveloper.com
april 2008 by 44sunsets
I ran into this same problem and couldnt find a work around for it. After reading James' post verified that when you include a javascript file from within javascript, it tries to run the "urchinTracker();" line before it runs the included "urchin.…
imported
Bookmarks
google
analytics
google_analytics
GA
urchin
urchintracker
IE6
Internet
Explorer
javascript
JS
error
object
expected
debug
hack
workaround
fix
solution
april 2008 by 44sunsets
Superfish - Suckerfish on 'roids
january 2008 by 44sunsets
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:
imported
Bookmarks
JS
superfish
CSS
web
design
JavaScript
accessible
graceful
degradation
gracefully
suckerfish
dropdown
menu
hover
delayed
mouseout
animation
jQuery
plugin
progressive
enhancement
vertical
horizontal
january 2008 by 44sunsets
Grid Layout
october 2007 by 44sunsets
Khoi Vinh has been touting Grid Layouts for years. From his efforts there have been many, many solutions to helping people use Grid Layouts successfully. Thanks to a recent brilliant idea of Jon Hicks and code execution by Teevio, I present to you…
imported
Bookmarks
layout
toggle
JS
JavaScript
generator
background
web
development._design
calculator
form
october 2007 by 44sunsets
The Man in Blue > Experiments > widgEditor
august 2007 by 44sunsets
widgEditor is an easily installed, easily customisable WYSIWYG editor for simple content. It replaces existing textareas with an improved editing pane using JavaScript, therefore if you don't have JavaScript (or your browser doesn't support HTML e…
imported
Bookmarks
WYSIWYG
web
development
JS
JavaScript
editor
HTML
textarea
standards
compliant
valid
XHTML
graceful
degradation
GNU
free
Cameron
Adams
august 2007 by 44sunsets
XRAY :: for web developers
august 2007 by 44sunsets
XRAY is a free cross browser tool that lets you see the box model in action for any element, letting you see beneath the skin of any web page. Just click the XRAY button to instantly answer those vital questions: where is the top and left of th…
imported
Bookmarks
Westciv
XRAY
web
design
development
tools
JS
JavaScript
bookmarklet
Safari
Firefox
WebKit
element
tag
inspector
inspect
box
model
properties
CSS
browser
august 2007 by 44sunsets
jQuery: The Write Less, Do More, JavaScript Library
july 2007 by 44sunsets
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
imported
Bookmarks
jQuery
JS
JavaScript
web
development
library
light
weight
lightweight
AJAX
simple
simplified
standards
compliant
cross-browser
cross
browser
july 2007 by 44sunsets
Seven ways to toggle an element with JavaScript
october 2006 by 44sunsets
There are litterally an unlimitted number of ways to toggle an element’s display with JavaScript. Some, more useful than others. Dating back to the late nineties, toggling is perhaps the oldest trick in the book within JavaScript development. However, t
web
development
JavaScript
JS
toggle
show
hide
expand
collapse
script
method
methods
techniques
Dustin
Diaz
october 2006 by 44sunsets
Javascript form validation - doing it right
august 2006 by 44sunsets
When using Javascript for form validation, there is a right way, a wrong way, a very wrong way, and a suicidally wrong way! Unfortunately many sites use one of the wrong ways, including even some which claim to be form-validation tutorials. This page trie
web
design
development
Javascript
JS
form
validation
script
download
library
august 2006 by 44sunsets
/packer/
august 2006 by 44sunsets
A JavaScript Compressor/Obfuscator
web
design
development
JS
Javascript
compress
compressor
compression
obfuscation
obfuscator
tool
online
script
august 2006 by 44sunsets
chris erwin dot com - CRIR: Checkbox Radio Input Replacement
july 2006 by 44sunsets
CRIR: Checkbox & Radio Input Replacement This combination of JavaScript and CSS will hide checkbox and radio inputs that have a class = "crirHiddenJS", an id, and a proper label tag. This will allow you to style the label however you wish using CSS, and t
web
design
development
JS
Javascript
checkbox
radio
input
box
boxes
replacement
technique
method
radiobutton
july 2006 by 44sunsets
QuirksMode - JavaScript
july 2006 by 44sunsets
The JavaScript part of my site contains all JavaScript pages except for the W3C DOM ones. It is by far the largest part of my site. I divided the pages in 'Beginner' and 'Intermediate' ones (the W3C DOM being 'Advanced'). If you're new to JavaScripting I
web
design
development
JS
Javascript
beginner
intermediate
tutorials
guide
introduction
explanation
learning
lessons
excellent
july 2006 by 44sunsets
Vivabit | The Web's Bollocks | Cheeky Tip: Default Function Arguments In JavaScript
july 2006 by 44sunsets
In other scripting languages like Ruby and Python you can give function arguments default values. This is really useful for keeping code concise and APIs simple while still maintaining the flexibility. In DOM Scripting, where we have file size to worry ab
web
design
development
JS
Javascript
function
default
argument
arguments
optional
value
functions
parameter
parameters
july 2006 by 44sunsets
Javascript - The this keyword
july 2006 by 44sunsets
ne of the most powerful JavaScript keywords is this. Unfortunately it is hard to use if you don't exactly know how it works. Below I explain how to use it in event handling. Later on I'll add some information about other uses of this. See also the source
web
design
development
JS
Javascript
this
keyword
inline
event
registration
handler
onclick
object
function
call
element
this.
july 2006 by 44sunsets
bobbyvandersluis.com | Using dynamic CSS to hide content before page load
july 2006 by 44sunsets
When you create an unobtrusive DOM script that initially hides content you will very likely experience a flash of visible content before it gets hidden. At the root of this issue lies the window.onload event which only executes after the whole document, i
web
design
JS
Javascript
unobtrusive
show
hide
behaviour
expand
contract
support
accessible
july 2006 by 44sunsets
Accessible JavaScript; Form help; A show & hide technique - webSemantics
july 2006 by 44sunsets
An example of showing and hiding adjacent span elements intended as extended form help, using accessible unobtrusive JavaScript. This work is a furtherance to a development by Chris Heilmann at onlinetools.org. The demonstration shows & hides a piece of h
web
design
JS
Javascript
show
hide
expand
contract
collapse
unobtrusive
event
handler
onclick
july 2006 by 44sunsets
Opening new windows with JavaScript, version 1.1 | 456 Berea Street
july 2006 by 44sunsets
After considering the suggestions made in the comments on my article Using JavaScript instead of target to open new windows and thinking some more about it, I’ve made some changes to the script. For the full story, please read the original article if yo
web
design
JS
Javascript
open
opening
new
window
windows
XHTML
Strict
july 2006 by 44sunsets
Simon Willison: Executing JavaScript on page load
july 2006 by 44sunsets
Peter-Paul Koch recently wrote: # In my opinion, recent advances in JavaScript theory call for the removal of the event handlers that some Web developers-and all WYSIWYG editors-deploy in large masses in their XHTML files, where they don’t belong. # Sou
Javascript
JS
web
design
event
handler
onload
window.onload
addLoadEvent
unobtrusive
behaves
nicely
best
practice
registering
register
july 2006 by 44sunsets
Behaviour : Using CSS selectors to apply Javascript behaviours
june 2006 by 44sunsets
After all the work of WASP and others to promote clean markup, valid pages and graceful degradataion via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html. The better way to do javascript is to do it unobtrusi
web
development
Javascript
AJAX
JS
separating
behaviour
behavior
hooks
best
practice
standards
june 2006 by 44sunsets
Unobtrusive Javascript
june 2006 by 44sunsets
On the following pages we will discuss and see how we can use Javascript, but still maintain accessibility. The technique to completely separate Javascript from the other two layers of web development has become commonly named "unobtrusive Javascript", as
web
design
development
Javascript
separating
behaviour
behavior
separation
best
practice
semantic
unobtrusive
JS
june 2006 by 44sunsets
Reflection.js
may 2006 by 44sunsets
Reflection.js 1.5 allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers,
Javascript
JS
reflection
script
mirror
effect
web
design
graphics
may 2006 by 44sunsets
Using javascript instead of target to open new windows | 456 Berea Street
may 2006 by 44sunsets
In my recent post about The target attribute and opening new windows, I stated that when I am faced with no other choice but to open a link in a new window, I prefer using unobtrusive JavaScript instead of the target attribute. The reason is that I always
web
design
webdesign
XHTML
CSS
strict
DOCTYPE
target
attribute
Javascript
JS
open
new
window
popup
valid
code
may 2006 by 44sunsets
deconcept › FlashObject: Javascript Flash detection and embed script
april 2006 by 44sunsets
FlashObject is a small Javascript file used for embedding Macromedia Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very searc
web
design
W3C
valid
standards
compliant
javascript
JS
Flash
detection
script
XHTML
april 2006 by 44sunsets
Lightbox JS v2.0
march 2006 by 44sunsets
Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
web
design
images
gallery
JS
javascript
fade
effect
darken
free
freeware
march 2006 by 44sunsets
related tags
accessibility ⊕ accessible ⊕ Adams ⊕ addLoadEvent ⊕ adobe ⊕ ajax ⊕ alert ⊕ alive ⊕ analytics ⊕ anchor ⊕ android ⊕ animated ⊕ animation ⊕ apostrophe ⊕ app ⊕ apps ⊕ argument ⊕ arguments ⊕ aria ⊕ attribute ⊕ audio ⊕ auto ⊕ autocomplete ⊕ autofill ⊕ automatic ⊕ autosuggest ⊕ background ⊕ banner ⊕ beginner ⊕ behaves ⊕ behavior ⊕ behaviour ⊕ best ⊕ blackberry ⊕ book ⊕ bookmarklet ⊕ Bookmarks ⊕ border-radius ⊕ bottom ⊕ box ⊕ boxes ⊕ browser ⊕ browserdetection ⊕ bugs ⊕ Cabel ⊕ Cabel_Sasser ⊕ cache ⊕ calculator ⊕ calendar ⊕ call ⊕ Cameron ⊕ canvas ⊕ carousel ⊕ CF ⊕ character ⊕ chart ⊕ charting ⊕ charts ⊕ check ⊕ checkbox ⊕ checker ⊕ checking ⊕ client ⊕ client-side ⊕ code ⊕ ColdFusion ⊕ collapse ⊕ color ⊕ columns ⊕ common ⊕ compatibility ⊕ complete ⊕ compliant ⊕ compress ⊕ compression ⊕ compressor ⊕ content ⊕ context ⊕ contract ⊕ control ⊕ cookie ⊕ cookies ⊕ cross ⊕ cross-browser ⊕ cse ⊕ css ⊕ css3 ⊕ custom ⊕ daily ⊕ dark ⊕ darken ⊕ darkened ⊕ data ⊕ day ⊕ debug ⊕ default ⊕ degradation ⊕ degrade ⊕ delay ⊕ delayed ⊕ design ⊕ detection ⊕ developer ⊕ development ⊕ development._design ⊕ Diaz ⊕ doc ⊕ DOCTYPE ⊕ download ⊕ downloads ⊕ drag ⊕ drop ⊕ dropdown ⊕ dropdownmenu ⊕ dropdowns ⊕ Dustin ⊕ dygraphs ⊕ dynamic ⊕ ebook ⊕ editor ⊕ effect ⊕ effects ⊕ element ⊕ embed ⊕ embedded ⊕ embedding ⊕ engine ⊕ enhancement ⊕ equal ⊕ equalheight ⊕ equalise ⊕ error ⊕ escape ⊕ event ⊕ events ⊕ excellent ⊕ expand ⊕ expected ⊕ explanation ⊕ Explorer ⊕ facebook ⊕ facelift ⊕ fade ⊕ fading ⊕ fallback ⊕ fancyzoom ⊕ files ⊕ Firefox ⊕ fix ⊕ fixed ⊕ flash ⊕ FLIR ⊕ font ⊕ fonts ⊕ fork ⊕ form ⊕ forms ⊕ framework ⊕ free ⊕ freeware ⊕ function ⊕ functions ⊕ ga ⊕ galleries ⊕ gallery ⊕ gd ⊕ generated ⊕ generator ⊕ GNU ⊕ google ⊕ googleanalytics ⊕ googlecalendar ⊕ googlecse ⊕ google_analytics ⊕ graceful ⊕ gracefully ⊕ graph ⊕ graphics ⊕ graphing ⊕ graphs ⊕ grid ⊕ guide ⊕ hack ⊕ handler ⊕ header ⊕ height ⊕ heights ⊕ hide ⊕ highcharts ⊕ highlight ⊕ highlighter ⊕ highlighting ⊕ highslide ⊕ hooks ⊕ horizontal ⊕ hover ⊕ html ⊕ html5 ⊕ ie6 ⊕ iipmooviewer ⊕ image ⊕ Imagemagick ⊕ images ⊕ imageslider ⊕ imported ⊕ impress ⊕ impress.js ⊕ inline ⊕ input ⊕ inspect ⊕ inspector ⊕ instructions ⊕ intermediate ⊕ Internet ⊕ interval ⊕ introduction ⊕ ipad ⊕ iphone ⊕ IR ⊕ javascript ⊕ jmpress ⊕ jplayer ⊕ jquery ⊕ js ⊖ keep ⊕ keepalive ⊕ keyword ⊕ layout ⊕ learning ⊕ lessons ⊕ library ⊕ light ⊕ lightbox ⊕ lightweight ⊕ line ⊕ link ⊕ load ⊕ maintain ⊕ mark ⊕ meerkat ⊕ menu ⊕ menus ⊕ message ⊕ messagebox ⊕ method ⊕ methods ⊕ minimalist ⊕ mins ⊕ minutes ⊕ mirror ⊕ mistakes ⊕ MIT ⊕ mobile ⊕ model ⊕ modernizr ⊕ month ⊕ monthly ⊕ moo ⊕ mootools ⊕ mouseout ⊕ moving ⊕ mp3 ⊕ native ⊕ new ⊕ news ⊕ nicely ⊕ nivo ⊕ obfuscation ⊕ obfuscator ⊕ object ⊕ oddities ⊕ off ⊕ ogg ⊕ onclick ⊕ online ⊕ onload ⊕ onmouseout ⊕ opacity ⊕ open ⊕ opening ⊕ opensource ⊕ open_source ⊕ optional ⊕ overlay ⊕ packaging ⊕ pageviews ⊕ pan ⊕ Panic ⊕ panning ⊕ panorama ⊕ parameter ⊕ parameters ⊕ pdf ⊕ pdfobject ⊕ phone ⊕ phonegap ⊕ photo ⊕ photogallery ⊕ photos ⊕ PHP ⊕ pie ⊕ platform ⊕ playback ⊕ player ⊕ plot ⊕ plotting ⊕ plugin ⊕ plugins ⊕ popup ⊕ ppt ⊕ practice ⊕ preload ⊕ prettygallery ⊕ preview ⊕ programming ⊕ progressive ⊕ properties ⊕ pseudoclass ⊕ purehtml ⊕ quirks ⊕ quotes ⊕ radio ⊕ radiobutton ⊕ reading ⊕ real-time ⊕ reference ⊕ reflection ⊕ register ⊕ registering ⊕ registration ⊕ rendering ⊕ replacement ⊕ rgba ⊕ Safari ⊕ Sasser ⊕ scaling ⊕ script ⊕ scripts ⊕ scroller ⊕ scrolling ⊕ search ⊕ semantic ⊕ separating ⊕ separation ⊕ series ⊕ server ⊕ session ⊕ set ⊕ shadow ⊕ shiftzoom ⊕ show ⊕ showhide ⊕ side ⊕ simple ⊕ simplified ⊕ single ⊕ slide ⊕ slider ⊕ slideshow ⊕ sliding ⊕ smooth ⊕ solution ⊕ sound ⊕ source ⊕ sparklines ⊕ speech ⊕ standards ⊕ statistics ⊕ strange ⊕ strict ⊕ subtle ⊕ suckerfish ⊕ suggest ⊕ suggestion ⊕ suggestions ⊕ superfish ⊕ support ⊕ svg ⊕ syntax ⊕ tablet ⊕ tag ⊕ target ⊕ technique ⊕ techniques ⊕ text ⊕ textarea ⊕ this ⊕ this. ⊕ time ⊕ timed ⊕ timeline ⊕ timeout ⊕ timeseries ⊕ tips ⊕ title ⊕ toggle ⊕ tool ⊕ tools ⊕ tooltip ⊕ tooltips ⊕ top ⊕ track ⊕ tracking ⊕ transition ⊕ tutorial ⊕ tutorials ⊕ unobtrusive ⊕ urchin ⊕ urchintracker ⊕ urgent ⊕ URL ⊕ valid ⊕ validation ⊕ validator ⊕ validity ⊕ value ⊕ vertical ⊕ video ⊕ view ⊕ viewer ⊕ viewing ⊕ visualisation ⊕ visualization ⊕ vml ⊕ W3C ⊕ web ⊕ webdesign ⊕ webdev ⊕ WebKit ⊕ website ⊕ webstandards ⊕ week ⊕ weekly ⊕ weght ⊕ weight ⊕ Westciv ⊕ window ⊕ window.onload ⊕ windows ⊕ workaround ⊕ wrapper ⊕ WYSIWYG ⊕ Xenu ⊕ xhtml ⊕ xls ⊕ XRAY ⊕ zoom ⊕ zoomable ⊕ zoomer ⊕ zoomify ⊕ zooming ⊕Copy this bookmark: