DeDestruct

Javascript Image Zoom Effect

Ayush Saran — Thu, 07 Aug 2008 15:00:08 +0000

Simple Image Zoom Effects

Asked by Gina a design student

how do i write code in javascript or html.. for..when i click on the image , the image shoud enlarge

Fancy Zoom

Cabel has released his in-page javascript zoom effect library, as seen on the Panic website.

How to Use:

1. Download the FancyZoom package from Cabel’s Blog http://www.cabel.name/2008/02/fancyzoom-10.html

2.Add the following two lines of code to the section at the top of your web page(s):

3.Add onload=”setupZoom()” inside your page’s existing tag. For example:

4. Done! links to images in your page will automatically zoom the images when clicked.

See more posts under: Resources
OR see posts tagged with: effect | javascript

You may also like:

Easy to Learn resources for Web Design beginners

Ayush Saran — Thu, 07 Aug 2008 14:07:09 +0000

Asked by Shaheel.S working in design from India

Of all the vast resources available in learning the XHTML and CSS, which one is easier for beginners to learn from.

There are a lot of web design resources for beginners, But lets focus on just 3 kinds.

Paid
If you can afford them Lynda.com offers some great online tutorials that beginners can take at their own pace. These are interactive video tutorials and require a monthly subscription of approx $25/month.

Free
A free alternative is the popular W3Schools Online tutorials and reference website.

Paper
There is a wealth of well-written and easy to follow HTML and CSS Books, I recommended buying this one after you finish the online tutorials.Bulletproof Web Design by Dan Cederholm. This books takes examples of websites that are not coded well and then shows you how to make it better.

Other beginners and semi-professionals, where did you look to start learning HTML and CSS ?

See more posts under: Resources
OR see posts tagged with: books | css | html | Tutorials

You may also like:

Omoplata setup

Kris Crousore — Thu, 26 Jun 2008 16:40:36 +0000

how do you set up an omoplata from bottom half guard?

Asked by Otto lai, a pretty cool guy from San Diego

Thanks for the random question of the month otto. For those few that are not into MMA or Brazilian Jiu-Jitsu (BJJ) an omoplata is a shoulder lock applied with your legs. And half guard is the position between full guard and side mount or full mount when the fighter on the bottom has control of one leg. Enjoy.

See more posts under: News & Events, Tips & Tweaks, Tutorials

You may also like:

Designing for Internet Exploder 6

Ayush Saran — Tue, 24 Jun 2008 11:40:16 +0000

Is there a definitive checklist for IE6 testing?

Asked by Jay Stonch a design student from San Diego

What conventional considerations are there for IE when designing a website?
I understand that there are box model differences, but is there, like, a “definitive checklist”
of things you need to adjust for when designing across browsers?

We dont have a “definitive checklist” for Internet Explorer and tend to squash bugs as we go

BUT before you even tackle the problems of IE6, remember to code using web standards and test early and often. Ensure you have valid code, javascript included. Also make sure you have a full, valid doctype.

But a checklist is probably a good idea so lets start building one.

1. The PNG Issue

Internet Explorer does not support transparent PNGs by default and you have to load them through the AlphaImageLoader or use the htc method. Both are explained in detail by Kris Crousore here: Cross Browser Transparency with PNG.

2. The min-width issue

Internet Explorer does not support the CSS min-width and min-height properties. Some people use the IE Dynamic Expression to set the width. Ive had mixed success with this method and recommend designing around it instead of using the hack.

/* Dynamic Expression */
width: expression(document.body.clientWidth < 910 ? “900px” : “100%” );
}

learn more about Dynamic Expressions here.

3. The double margin bug

Internet Explorer doubles margins on floated elements when the margin is on the same side as the float. These floated elements need to be display:inline.

4. Clearing Floats

Clearing floats in IE is challenging. Some people clear floats by adding an empty div or a horizontal rule with the clear:both property. Most of the time the problem is the parent div.

Jason says: When ever you float an element add an overflow:hidden property to it. Suddenly that div is now seeing the floating div. Also adding a hard width and height can fix this as well, but who works in absolutes (pun intended).

5. Ordered Lists

Sometimes IE6 doesn’t display the padding when you add background images to a numbered list. I havent seen this consistently and switch to using a un-ordered list if this happens.

6. Can Has Layout ?

satzansatz.de explains hasLayout as:

Layout is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.

This quality can be irreversibly triggered by some CSS properties. Some HTML elements have “layout” by default.

Microsoft developers decided that elements should be able to acquire a “property” (in an object-oriented programming sense) they referred to as hasLayout, which is set to true when this rendering concept takes effect.

hasLayout can cause some strange effects with some elements especially margin issues where some block elements seem to behave as inline ones. An easy way to spot hasLayout issues is the IE Developers Toolbar.

A simple hasLayout Fix is to apply a width or height usually by using the star hack to apply a small height to IE6 and below only. Since IE6 treats any height as a min-height it will therefore resize itself accordingly.

* html #container {
height: 1%;
}

7. Small Height Bug

IE6 wont collapse to a smaller height than the base font-size. So it makes the boxes atleast as tall as the base font size.

This can be fixed with a font-size: 0; or overflow:hidden;

8. Pseudo Hover States on Elements

There are none. Except on links and there is no simple CSS Fix. You can use javascript to add the onMouseOver trigger but make sure it degrades gracefully.

9. The Box-Model

Last but not least we have the king of all annoyances itself. The box-model bug. Internet Explorer adds the margin and padding differently from other modern browsers.

The trick is to avoid padding on the container and add it to the child elements instead.

10. ????
Im sure we have missed some more bugs, anyone care to add them to the comments and I will include them in the post.

See more posts under: Tips & Tweaks

You may also like:

Picking the right Content Management System [CMS]

Ayush Saran — Sun, 08 Jun 2008 04:17:29 +0000

Picking the best CMS Solution, Easy to use OR Feature-Heavy?

Asked by Shaun MacDougall a freelance developer from San Diego

What, in your opinion, would be the best reason to choose a CMS like wordpress over an open source CMS like joomla? or vis versa?

In my experience systems like Joomla and Drupal scare clients

Feature heavy CMS systems can intimidate clients who hesitate to learn and use them.

The 3 level deep Joomla menus can confuse even the most web-savy users.

This entirely defeats the purpose of building with a CMS.
You will spend more time walking clients through the endless Joomla menus, then it would have taken for you to make the changes in raw HTML yourself. Since the point of Content Management Systems is to allow clients to manage and update the content themselves, it doesn’t make sense to pick a system that non web-savy users are reluctant to use.

For most websites a simple wordpress based CMS works great.

The menus don’t intimidate clients
Simple WYSIWYG editor makes content changes easy.
Themes are easy to design and build
Plugins are easy to install and use

But for certain solutions joomla/drupal are better suited, such as:

Extensible User Profiles: for membership sites and portals
Modifiying the Back-end: messing with the wordpress core is not recommended
E-Commerce: plugins exist but wordpress, just doesn’t perform as well as a dedicated cart system

In conclusion your clients and their needs will determine which CMS platform to use.
So pick a CMS that your clients will use without need for handholding.

p.s. Check out the WordPress vs. Drupal - Content Management Systems blog over at MakeUseOf.com

See more posts under: Tips & Tweaks

You may also like:

Web 2.0 Design Traits

Chris Poteet — Sun, 25 May 2008 18:40:14 +0000

What are common design elements in “Web 2.0″?

Asked by Emelda a designer from India

Can you please give me a run-down of common Web 2.0 design elements for making my theme?

Hi Elmeda thanks for your question. Well, there are some common traits in the movement dubbed “web 2.0.”

A focus on “creative minimalism” with creative use of white space.
Gradients
Oversized fonts
Oversized headers/footers
Bold use of color
Large icons

Here are two articles that go into much more depth then I will here.

But I should warn you that many of these elements are quickly becoming design cliches. Don’t fall into the trap of designing something like everyone else has. Blaze a new trail, be original, but certainly take the good elements common in Web 2.0 design into your projects.

See more posts under: Tips & Tweaks
OR see posts tagged with: design | web2.0

You may also like:

How-To: CSS Conditional Comments

Ayush Saran — Fri, 04 Apr 2008 04:13:31 +0000

Writing User-Agent specific CSS

Asked by Andrew a freelance designer from Chicago

How come when i have the “if IE” link to the css, it doesn’t change at all?
It’s linked correctly and the “if IE” is correct, but the css just isn’t showing.
I think cause the link to the regular css is over-riding the “if IE” one. Why won’t it work?

Right off the top of my head.
If you are using multiple versions of Internet Explorer on the same machine you will experience issues with version targeting like “If IE”.So if you are using a Standalone IE6 or Standalone IE7, refer to the manufacturers of the standalones for workarounds.

Conditional comments and version targeting

Conditional comments only work in Internet Explorer, and are used to target specific versions. They use the HTML Comment structure, and thus are placed in the HTML not the CSS.

Example

This makes them perfect for linking to alternate IE only stylesheets, which for example, wouldn’t use 24-bit PNG transparency etc.

Troubleshooting

This script comes off the very handy Quirksmode.org website. It will run through the different versions available to show you what your browser is behaving as.

From: http://www.quirksmode.org/css/condcom.html

According to the conditional comment this is Internet Explorer

According to the conditional comment this is Internet Explorer 5

According to the conditional comment this is Internet Explorer 5.0

According to the conditional comment this is Internet Explorer 5.5

According to the conditional comment this is Internet Explorer 6

According to the conditional comment this is Internet Explorer 7

According to the conditional comment this is Internet Explorer 5 and up

According to the conditional comment this is Internet Explorer lower than 6

According to the conditional comment this is Internet Explorer lower or equal to 5.5

According to the conditional comment this is Internet Explorer greater than 6

Its always preferable to avoid using conditional targeting and try to work within the css to support the major browsers, but unfortunately the real world sometimes calls for harsher measures.

For the adventurous, try the conditional comments and mix them with progressive enhancement.

See more posts under: Tips & Tweaks
OR see posts tagged with: compatability | css | internet explorer

You may also like:

HowTo: Cross-Browser Cursor Position in Textareas

Ayush Saran — Sun, 23 Mar 2008 02:58:53 +0000

How do I get the current position of the cursor in a TEXTAREA using Javascript?

Asked by Frank Peterson a design student from New York

How do I get the current position of the cursor in a TEXTAREA using Javascript? I’ve only found scripts on inserting at the current position but not on returning the number of the cursor’s position.

Getting the position of the cursor couldn’t be easier in Firefox.

get selection in firefox, opera, …
var textarea = document.getElementById(”myTextArea”);
textarea.focus();
alert(textarea.selectionStart);

Making it cross-browser

The problem as always is Internet Explorer 6. It returns the ’selectionStart’ as undefined. So we need a way to check for IE6 and use an alternate method.
Luckily there are multiple IE6 workaround available.

This one uses 3 selection ranges.
1) All the text before the cursor
2) The cursor position [including highlighting]
3) All the text after the cursor

From: http://linebyline.blogspot.com/2006/11/textarea-cursor-position-in-internet.html

var before_range = document.body.createTextRange();
before_range.moveToElementText(textarea); // Selects all the text
before_range.setEndPoint(”EndToStart”, selection_range); // Moves the end where we need it

var after_range = document.body.createTextRange();
after_range.moveToElementText(textarea); // Selects all the text
after_range.setEndPoint(”StartToEnd”, selection_range); // Moves the start where we need it

var before_finished = false, selection_finished = false, after_finished = false;
var before_text, untrimmed_before_text, selection_text, untrimmed_selection_text, after_text, untrimmed_after_text;

// Load the text values we need to compare
before_text = untrimmed_before_text = before_range.text;
selection_text = untrimmed_selection_text = selection_range.text;
after_text = untrimmed_after_text = after_range.text;

Here is the finished code, it sends an alert message when the function cursorPosition(); is called.
You can attach this to an event like keypress, keyup etc. or call it in your functions.

Combining the Firefox and IE selection codes
function cursorPosition(){
var textarea = document.getElementById(”myTextArea”);
textarea.focus();

// get selection in firefox, opera, …

if (typeof(textarea.selectionStart) == ‘number’)

{ alert(textarea.selectionStart);

}else if(document.selection){
var selection_range = document.selection.createRange().duplicate();

if (selection_range.parentElement() == textarea) { // Check that the selection is actually in our textarea
// Create three ranges, one containing all the text before the selection,
// one containing all the text in the selection (this already exists), and one containing all
// the text after the selection.
var before_range = document.body.createTextRange();
before_range.moveToElementText(textarea); // Selects all the text
before_range.setEndPoint(”EndToStart”, selection_range); // Moves the end where we need it

var after_range = document.body.createTextRange();
after_range.moveToElementText(textarea); // Selects all the text
after_range.setEndPoint(”StartToEnd”, selection_range); // Moves the start where we need it

var before_finished = false, selection_finished = false, after_finished = false;
var before_text, untrimmed_before_text, selection_text, untrimmed_selection_text, after_text, untrimmed_after_text;

// Load the text values we need to compare
before_text = untrimmed_before_text = before_range.text;
selection_text = untrimmed_selection_text = selection_range.text;
after_text = untrimmed_after_text = after_range.text;

// Check each range for trimmed newlines by shrinking the range by 1 character and seeing
// if the text property has changed. If it has not changed then we know that IE has trimmed
// a \r\n from the end.
do {
if (!before_finished) {
if (before_range.compareEndPoints(”StartToEnd”, before_range) == 0) {
before_finished = true;
} else {
before_range.moveEnd(”character”, -1)
if (before_range.text == before_text) {
untrimmed_before_text += “\r\n”;
} else {
before_finished = true;
}
}
}
if (!selection_finished) {
if (selection_range.compareEndPoints(”StartToEnd”, selection_range) == 0) {
selection_finished = true;
} else {
selection_range.moveEnd(”character”, -1)
if (selection_range.text == selection_text) {
untrimmed_selection_text += “\r\n”;
} else {
selection_finished = true;
}
}
}
if (!after_finished) {
if (after_range.compareEndPoints(”StartToEnd”, after_range) == 0) {
after_finished = true;
} else {
after_range.moveEnd(”character”, -1)
if (after_range.text == after_text) {
untrimmed_after_text += “\r\n”;
} else {
after_finished = true;
}
}
}

} while ((!before_finished || !selection_finished || !after_finished));

// Untrimmed success test to make sure our results match what is actually in the textarea
// This can be removed once you’re confident it’s working correctly
var untrimmed_text = untrimmed_before_text + untrimmed_selection_text + untrimmed_after_text;
var untrimmed_successful = false;
if (textarea.value == untrimmed_text) {
untrimmed_successful = true;
}
// ** END Untrimmed success test

var startPoint = untrimmed_before_text.length;
alert(startPoint);

}
}
}

You can test this on the live demo page.

Big thanks to http://linebyline.blogspot.com/2006/11/textarea-cursor-position-in-internet.html

See more posts under: Tips & Tweaks
OR see posts tagged with: forms | javascript

You may also like:

How-To: Display Recently Updated Posts in Wordpress

Ayush Saran — Wed, 19 Mar 2008 03:51:12 +0000

Get WordPress to show the last 10 posts modified.

Asked by Jamie a Student from Florida

Is there a plugin or hack to get WordPress to show the last 10 posts I’ve modified.

I often update my old posts with new information, but I’d like to have a list of the ones I’ve just recently updated.

I dont care about recent posts, but recently UPDATED ones.

Theres plugins to do this, But I’m going to show you how to code this yourself.

There is a pre-defined Template Tag in wordpress named wp_get_archives.

By default it only shows yearly, monthly (Default), daily , weekly or postbypost(date published).

We will base our hack on this function and extend it to sort posts by last updated.

Writing a Plugin

This will be a quick and easy plugin, great for newbies who have yet to write heir first plugin.
All you need to follow along is a text editor, notepad will do fine.

Follow along or skip to the end for the finished plugin.

Step 1

Start a new file in your text editor and add the following lines. These define your plugin to wordpress.
You can replace my name and urls with your own.

/*
Plugin Name: Last Updated Posts
Plugin URI: http://www.dedestruct.com/plugins/
Description: Returns a list of the most recently updated posts.
Version: 0.1
Author: Ayush Saran [ the Insomniac @ dedestruct.com ]
Author URI: http://www.ayushsaran.com/
*/

function dd_recently_updated($args = ”) {

}

?>

Save the file as last-updated.php in your plugins folder. usually /wp-content/plugins/

Step 2

From the base of your wordpress install find wp-includes/general-template.php.
This file contains the definition for wp_get_archives which will serve as our reference.

Open the file and ~line 350 you will see function wp_get_archives($args = ”) {

Copy the first 15 lines of the function into your blank plugin file.

You can delete the text ‘type’ => ‘monthly’, since we will only be offering the type of updated.

You should end up with a file that looks like this.
/*
Plugin Name: Last Updated Posts
Plugin URI: http://www.dedestruct.com/plugins/
Description: Returns a list of the most recently updated posts.
Version: 0.1
Author: Ayush Saran [ the Insomniac @ dedestruct.com ]
Author URI: http://www.ayushsaran.com/
*/

function dd_recently_updated($args = ”) {
global $wpdb, $wp_locale;

$defaults = array(
‘limit’ => ‘5′, ‘format’ => ‘html’, ‘before’ => ”,
‘after’ => ”, ’show_post_count’ => false
);

$r = wp_parse_args( $args, $defaults );
extract( $r, EXTR_SKIP );

if ( ” != $limit ) {
$limit = (int) $limit;
$limit = ‘ LIMIT ‘.$limit;
}

}

?>

Step 3 - Modifying The Database Query

Back to the wp-includes/general-template.php.

Examine the last if..else statement.
$arcresults = $wpdb->get_results(”SELECT * FROM $wpdb->posts $join $where ORDER BY $orderby $limit”);

Here $orderby is defined as “post_date DESC “. This will fetch the posts and order them by the date published. We want to use the date modified as the condition for the sorting.

If you look at the database created by wordpress you will see that there is a column for post_modified that saves the date and time that any post was last modified.

We willl update the orderby to read $orderby = “post_modified DESC “;

Step 4 - Adding the new conditions

Copy over the filters line 392 -394 . And copy one of the if..else conditions to the new file, preferably postbypost.

Remove the IF conditions and the OR(||) statements. This may get confusing so refer to the code here for what you should have remaining.

The Finished Plugin
/*
Plugin Name: Last Updated Posts
Plugin URI: http://www.dedestruct.com/plugins/
Description: Returns a list of the most recently updated posts.
Version: 0.1
Author: Ayush Saran [ the Insomniac @ dedestruct.com ]
Author URI: http://www.ayushsaran.com/
*/

function dd_recently_updated($args = ”) {
global $wpdb, $wp_locale;

$defaults = array(
‘limit’ => ‘5′, ‘format’ => ‘html’, ‘before’ => ”,
‘after’ => ”, ’show_post_count’ => false
);

$r = wp_parse_args( $args, $defaults );
extract( $r, EXTR_SKIP );

if ( ” != $limit ) {
$limit = (int) $limit;
$limit = ‘ LIMIT ‘.$limit;
}

//filters
$where = apply_filters(’getarchives_where’, “WHERE post_type = ‘post’ AND post_status = ‘publish’”, $r );
$join = apply_filters(’getarchives_join’, “”, $r);

$orderby = “post_modified DESC “;
$arcresults = $wpdb->get_results(”SELECT * FROM $wpdb->posts $join $where ORDER BY $orderby $limit”);
if ( $arcresults ) {
foreach ( $arcresults as $arcresult ) {
if ( $arcresult->post_date != ‘0000-00-00 00:00:00′ ) {
$url = get_permalink($arcresult);
$arc_title = $arcresult->post_title;
if ( $arc_title )
$text = strip_tags(apply_filters(’the_title’, $arc_title));
else
$text = $arcresult->ID;
echo get_archives_link($url, $text, $format, $before, $after);
}
}
}

}

?>

Step 5 - Final Steps

Log into your admin panel and activate the new plugin from the Plugins section.

You can now get the most recently updated posts by calling the dd_recently_updated function

Usage

dd_recently_updated(’limit=3′); ?>

The default output is a list… i.e. wrapped in

tags
The default limit is 5, you can change that to reflect your needs

See more posts under: Tutorials
OR see posts tagged with: plugins | wordpress

You may also like:

How-To: Extract People and Objects in Photoshop

Ayush Saran — Wed, 12 Mar 2008 06:10:53 +0000

What is the best way to isolate a person/item in Photoshop?

Asked by Brian Purkiss a Freelance Designer from San Antonio, Texas

I currently use paths, the pen tool, and then add a layer mask.
Is there a better way, or is that it?

There isnt a single best method to Isolate Objects in Photoshop

The recommended approach is a combination of the pen tool, layer Masks and Extract.

The Pen Tool & Masks

The Pen Tool works best when you have large-resolution Images that have smooth curves or simpler, more geometric figures. It gets hard to use around organic objects and areas like flowing hair or leaves on a tree.

Here is a videos of the Pen tool in action, it’s part of the hilarious ‘You Suck at Photoshop’ series by Donnie Hoyle. See the rest here.

And a surprisingly good tutorial from about.com on - Removing the Background with Photoshop Pen Tool

Some Free Pen Tool Practice Templates that you can download and trace to sharpen your pen tool skills

The Extract Filter

The Extract Filter, can be found in your Filters Menu [not in Filter Gallery]. Its useful for more organic areas like hair and leaves where there are too many edges to trace with the pen tool.

I could explain the process setp by step, but theres a great video on youtube that takes you through all the options and is easy to follow.

More videos from this series can be found at www.TutVid.com

Tips

There are many ways to extract using photoshop but do yourself a favor and follow these tips.

Garbage In = Garbage out: Start with high-res Images, they will let you zoom deeper and make precise paths vs guessing where the aliased pixels end.

Pick subjects with strong contrast: The Contrast helps distinguish it from the background and makes the extract process easier.

Non-Destructive Editing: Dont use the Eraser, use Masks with Smart Objects so you can always revert back to a previous stage and try a different process, especially with the extract filter. It will take some trial and Error.

p.s. check out photoshopdisasters.blogspot.com for some hilarious real-world photoshop bloopers such as this one

See more posts under: Tutorials
OR see posts tagged with: photoshop | Tutorials

You may also like: