In this tutorial I’ll be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!
The plan
First, let’s list exactly what we’ll be creating here and what features it’ll have:
- This interface will contain several widgets.
- Each widget can be collapsed, removed and edited.
- The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique).
- The user will be able to edit the color and title of each widget.
- Each widget can contain any amount of regular HTML content, text, images, flash etc.
Please note that we will only be covering the front-end aspect of the project in this tutorial. Obviously you could integrate this UI with a solid server-side system which could take care of saving preferences and customised widgets.
Since it’s all about the user and because the idea was influenced by iGoogle we’re going to be calling this project ‘iNettuts’. Read the rest of this entry »
Simple or Rich
A simple call such as $(“img[title]“).tooltip(); will enable tooltips by taking advantage of the element’s title attribute. If you want complex tooltips with images, tables, forms and links that’s possible by placing the tooltip element manually next to the trigger element.
Configure design, timing and positioning
Use CSS to create rounded borders, arrows, gradients or shadows. Big or small, high or low. Use the configuration to tweak pre and post-delays and positioning to your personal needs.
Fading, sliding, dynamic
Tooltip comes with two built-in effects: toggle, and fade and one separate effect, slide, and you can easily build your own effects. The dynamic plugin will dynamically change the tooltip’s position so that it always stays in the viewport.
File size: 1.10 Kb
This tool has all the features and configuration options you’ll possibly need, such as effect and a plugin framework, scripting API and an event model. A smaller codebase is easier to control and results in snappier behaviour. Without gzipping the size is 3.5 Kb.
Read the rest of this entry »
I’m pleased to present you with part one of a two part series on creating a photo site using PHP, jQuery, and AJAX. Originally, I intended to fit the entire tutorial into one screencast, but that quickly became a pipe dream as I realized that there was simply too much to cover. Nevertheless, even if you only watch this first video, you should learn a great deal.
We’ll be retrieving images from a database, creating a simple login form with authentication, and will then allow for our database to be asynchronously updated. Sounds good? If so, let’s get into it.
| Character |
HTML
Code* |
Character
Code |
Description of Character |
|
Character |
HTML
Code* |
Character
Code |
Description of Character |
|
	 |
|
horizontal tab |
|
Π|
Π|
|
capital OE ligature |
|
|
|
line feed |
|
‘ |
‘ |
‘ |
left curly quote mark |
|
|
|
carriage return |
|
’ |
’ |
’ |
right curly quote mark/apostrophe |
|
  |
|
space |
|
“ |
“ |
“ |
left curly quote marks |
| ! |
! |
|
exclamation point |
|
” |
” |
” |
right curly quote marks |
| “ |
" |
" |
straight quote marks |
|
• |
• |
• |
bullet |
| # |
# |
|
hash mark/number sign |
|
– |
– |
– |
“en” (short) dash |
| $ |
$ |
|
dollar sign |
|
— |
— |
— |
“em” (long) dash |
Read the rest of this entry » |
<script src="http://b3graphics.net/resume/_layout/js/cufon-yui.js" type="text/javascript"></script>
<script src="http://b3graphics.net/resume/_layout/js/Aller.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('p');
Cufon.replace('.item h2');
Cufon.replace('h2.cv-section-name');
</script>
/**********************************/
<p><cufon style="width: 111px; height: 48px;" alt="Shrikant ">
<canvas style="width: 187px; height: 59px; top: -8px; left: -9px;" height="59" width="187">
</canvas><cufontext>Shrikant </cufontext>
</cufon><cufon style="width: 123px; height: 48px;" alt="Chavan"
><canvas style="width: 183px; height: 59px; top: -8px; left: -9px;" height="59" width="183">
</canvas><cufontext>Chavan</cufontext></cufon></p>
Well, we did promise we’d get around to a tutorial eventually, so here you have it! The Engage Interactive school for all things internet proudly presents: How to build a website with orientation specific content especially for the iPhone!
This tutorial will cover the basic setup and creation of a web page for the iPhone that will detect and change the content based on the phones orientation. You will need some way of viewing your files on the iPhone or you wont see the fruits of your labour. We’d suggest uploading it to a location on the web and browsing to it on the phone. Other than that everything else can be done with any old text editor. Anyway, enough chat – Onward to the tutorial!
UPDATE:
I completely forgot to mention how to detect the iPhone on your normal website and send it to your iPhone version. I’ve added the script here.
Setting up your page
Just like any other web browser, Safari needs all the usual html code at the top and bottom of the page and there’s still no harm in throwing a few keywords in for good measure as Google will still be able to spider your content. In addition there are also some iPhone specific meta tags you can use to control the way content is rendered. I have an example of what the code in the head tag should look like below.
<head>
<title>Engage Interactive</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link rel="apple-touch-icon" href="images/template/engage.png"/>
</head>
<body onorientationchange="updateOrientation();">
</body>
Read the rest of this entry »
Section 1 – Getting Started with your Cisco Lab
Section 2 – Basic Cisco Router and Switch Management
Form using div
Paste it in body where form starts
<div>
<div>name</div>
<div><input type="text" /></div>
</div>
<!-- -->
<div>
<div>name</div>
<div><input type="text" /></div>
</div>
<!-- -->
<div>
<div>name</div>
<div><input type="text" /></div>
</div>
Read the rest of this entry »
A day or two ago, ![[info]](http://l-stat.livejournal.com/img/userinfo.gif)
olsen_systa posted a question about how to get a certain effect applied to what was once a photo of one of the Olsen twins. It’s taken some time and experimentation to develop an answer, but I’ve developed a technique which closely approximates the desired effect and have turned the experiment into a tutorial, making a different Olsen image into something like this.
About this tutorial:
- Made in/for Photoshop CS, compatibility with earlier versions dependent on availability of a certain filter.
- May not be translatable to other software due to the above dependency.
- Skill level: intermediate (layer mask, saved selection, filter use)
- The results of the tutorial are highly dependent on the source image possessing certain characteristics. Expect your results to be different if your source image doesn’t have lighting and color qualities very similar to the source image in this tutorial.
- Dialup users should be able to load this tutorial without difficulty. Most images are linked to rather than loaded inline.
I stumbled upon an image of one of the Olsen twins (don’t know which one, don’t normally pay enough attention to them to be able to tell them apart) different from the source for olsen_systa’s sample image, but well suited to this task. Note the white background, good range of highlights/midtones/shadows, and the lack of a shadow obscuring any part of the face. This image is ideal because it requires no manipulation prior to using the Threshold command (coming up soon). Other images may need a lot of color correcting before they could be made suitable for use in this tutorial, especially as regards shadows on the face. Choose your images wisely. Read the rest of this entry »
0