Monday, July 20, 2009

Making position: fixed; work in IE 6

What is position: fixed;?
position: fixed; is an alternative to position: absolute; position: relative; and position: static;.
position: fixed; is basically the same as position: absolute; except that when the user scrolls the page, the element does not scroll with it, it just says exactly where it was. There are many pages that want to use this in order to position logos or menus.

What is wrong with position: fixed;?
Well, ... nothing. The problem is that the most popular browser - Internet Explorer for Windows - does not understand it, and instead of reverting to position: absolute; which would be better than nothing, it reverts to position: static; as specified by the CSS standard. This has the same effect as having no positioning at all. Note that IE 7 from beta 2 upwards does support position: fixed; (if you use a document type declaration that triggers strict mode) so I will exclude IE 7 from this fix.

As a result, serveral people write scripts that use setInterval to reposition an absolutely positioned element every few miliseconds, or (ignoring Netscape 4) when the onscroll event is detected. This produces a slightly jerky effect. It would be better if the position: fixed; style could be applied in browsers that supported it, and browsers that didn't could use position: absolute; and JavaScript. Some authors use the > CSS selector to isolate Internet Explorer and leave the element positioned absolutely in that browser, without the scrolling effect.

div#fixme { position: absolute; left: 0px; top: 0px; }
body > div#fixme { position: fixed; }

So what is the Solution?
Well, possibly. It would be neater if it could be done with just CSS, and I have found a way to take things one step closer to that.
When Microsoft added their proprietary 'expression's to CSS in Internet Explorer 5, I jumped at the chance to use these to position the absolute element. Expressions should automatically update according to changes in the browser, such as scrolling the page, or resising the window.

div#fixme {
left: expression( document.body.scrollLeft + 'px' );
top: expression( document.body.scrollTop + 'px' );
body > div#fixme { position: fixed; left: 0px; top: 0px; }

But major disappointment. Due to a bug in Internet Explorer's interpretation of expressions, it does not update this, so it just stayed at 0,0.
However, while playing around with some CSS, I noticed something slightly odd. If I assigned the value to a variable, then used that to assign it to the expression inline, it did update in Internet Explorer 5.5 and 6. It is slightly jerky, but not as bad as many script driven positioning techniques.

top: expression( ( ignoreMe = document.body.scrollTop ) + 'px' );

Of course, in Internet Explorer 6, the variable is assigned to document.documentElement.scrollTop when in standards compliant mode, so I needed to check for this as well. IE 7 must also be excluded from the fix.

omitMe= document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop

And we may want to position the element somewhere other than 0,0:

top: expression( ( 10 + ( omitMe= document.body.scrollTop ) ) + 'px' );

Of course, this also won't validate as CSS, so I prefer to put the extra CSS inside a conditional comment. This also allows lesser browsers like Netscape 4 to use the normal left and top positions.

<style type="text/css">
#fixme {
/* IE lesser browsers will use this */
position: absolute; left: 20px; top: 10px;
body > div#fixme {
/* used by Mozilla,Safari */
position: fixed;
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 10 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );

What about other palcements?
We can work out window size using the clientHeight property of the documentElement object in 'standards compliant mode' (What a load of rubbish! If IE was standards compliant, we wouldn't have to go through all of this stupidity in the first place - but I digress ...), and the body object in quirks mode (see the window size part of my JavaScript tutorial for more details). We can then get the size of the element itself using fixme.offsetHeight. This is IE's shorthand for the more normal expression:


Thankfully, the window and element size do not need any tricks to force them to update, but we will still need to do the check for standards/quirks mode.
The default setup uses the right and bottom properties, so browsers that support the standards correctly will work using them. Then in IE 5.5+, these will be reset to auto, and the left and top positions will be used instead. Remember that for right or bottom emulation like this, the offsets used in the expression must become negative.

<style type="text/css">
#fixme {
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
position: absolute; right: 20px; bottom: 10px;
body > div#fixme {
/* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
position: fixed;
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );

So here the final tags you need to Have to Fix the Footer at bottom of the page
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
#footer { 
 position: absolute;
 bottom: 0;
div#footer {
 position: absolute;
body > div#footer {
 position: fixed;
/* This selector is need to be used in conditional comment so it will apply to the specific browser only. Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
*html div#footer {
 bottom: expression( ( - 0 - footer.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( omitMe = document.documentElement.scrollBottom ? document.documentElement.scrollBottom : document.body.scrollBottom ) ) + 'px' );

Lets Try yourself !!!

Friday, April 24, 2009

Adobe Introducing New Amazing Product Called "Flash Catalyst"

Adobe Flash Catalyst is a new professional interaction design tool for rapidly creating application interfaces and interactive content without coding. These can range from interactive Ads, product guides and design portfolios to user interfaces for applications. Flash Catalyst enables designers to start from static compositions created in Adobe Photoshop CS4, Illustrator CS4, or Adobe Fireworks CS4 and convert the artwork into applications and interactive content. The designer does this by visually defining events, transitions and motion. Flash Catalyst can output a finished Flash SWF or AIR application that’s ready to publish on the web. In addition designers can provide the project file to developers who can use Adobe Flex to add additional functionality such as connection to back-end systems.

Increase your Creative Productivity
  • Leverage your existing skills: Use your existing design skills without having to learn new ones
  • with Creative Suite: Create your designs in Photoshop CS4, Illustrator CS4 or Fireworks CS4 and import native files with all layers and pages intact
  • Fast design: Turn static graphics into dynamic content by selecting objects and specifying actions from menus
  • Round-trip workflow: Easily move back and forth between Creative Suite and Flash Catalyst while preserving your work

Empowering Interaction Design
  • Easy interactivity: Add interactivity based on states and events instead of timelines.
  • Interactivity without coding: Do interaction design without coding

  • Consistent Execution: Know that your designs will work exactly as you create them. No risk of losing something in translation.
  • Expressive: Creative compelling designs by leveraging the rich typography, graphics, video and audio capabilities of the Adobe Flash Platform.
  • Span the range of simple to complex projects: Develop a range of projects from simple Ad banners to complex application interfaces.

  • Faster time to market through agile design and development workflows that support iterative development
    • Agile prototyping and iterative design: Try a number of different designs quickly. Work with developers in parallel without losing fidelity.
    • Leverage your work: Quickly transition from wireframe to design to working application while reusing your work at each stage
    • Separate pixels from plumbing: Adobe Flash Catalyst and Adobe Flex Builder are a powerful combination enabling seamless collaboration to build stunning applications and interactive content
    • Fast time to market and easy deployment: Create and publish your projects to the web or collaborate with developers using a single project file.

    Monday, April 6, 2009

    How to Create Dreamweaver Spry HTML data set?

    The Adobe Spry framework has made Ajax easy and approachable for non-developers. It is, by far, one of the simplest ways to take data, load it via Ajax, and display it on a web page. As easy as Spry makes it, there are still times when the actual creation of the data may be a bit difficult. The person creating the website may not know how to create XML or how to write the SQL to get the data. But what if you could leverage your existing HTML knowledge to use the common table as your data source? Or any other simple HTML? The Spry HTML data set lets you create a data set from any structured HTML. To make it even easier, Dreamweaver provides a simple way to use Spry as this article demonstrates.

    In Dreamweaver, Create a new HTML file and save it as shipdata.html, in this file copy and past the code below. You will see this is nothing more than a simple page with basic HTML and a table.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <table id="shipdata">
    <th>Crew Size</th>
    <th>Combat Kills</th>
    <td>Lady Luck</td>

    Let's pretend that this HTML page represents data for our fleet of planet-conquering space ships. Our intern, Pablos Hyperion Parris, can barely dress himself and certainly can't be trusted to do any programming. He can, however, write basic HTML. We've tasked him to update the HTML page with various stats regarding our fleet. You can open this HTML page and view it in your browser. Since it's just an HTML table there isn't much to it. Let's see if we can make this a bit more interesting?

    • Within the folder you created for this article, right-click and create a new file named test1.html.
    • Place your mouse within the <body> tags and click to set the cursor there
    • Next, locate the Insert toolbar (see Figure 1). If it isn't visible, go to the Window menu and select Insert. On the toolbar select Spry.
    • Insert toolbar
    • Click the Spry Data Set menu item. This brings up the Spry Data Set wizard.
      You have quite a few options here, but I'll keep it simple for this first demonstration. Leave the data type as HTML. The Data Set Name is just used to uniquely identify the data that will be displayed on the page. There is no need to change this. Also keep the Detect option at its default, Tables.
    • Spry Wizard
    • Click the Browse button for Specify Data File. Select shipdata.html and Spry automatically loads the page and looks for tables The wizard automatically looks for tables in the HTML file.
      As you can see, it has found the data from the HTML table and given you a nice preview of the values from each cell.
    • Spry Wizard
    • Click the yellow arrow marker next to the table and the Data Preview section will be populated. The populated Data Preview section.
    • Spry Wizard
    • Click Next. This part of the wizard lets you define the behavior of the data set when it is rendered on the page. You don't have to do anything here, but it would be helpful to modify a few settings.
    • Spry Wizard
    • Click the Length(m), Crew_Size, and Combat_Kills columns. For each of these, change the type from string to number. This will aid in sorting the data correctly.
    • Set Sort Column at the bottom to Name. This will sort the data set by ship name when the data is loaded. Click Next to the go to the last page of the wizard.
    • Spry Wizard
    • This page lets you define how the data set will be used on the page. You have four options and each is explained pretty well. For your first demo, select Insert table, the top-most option, and then click Done.
    • Save the file and open it in your browser. The first thing you will notice is that the first ship is Big Bertha. This is proof that Spry was able to load the HTML and then sort it by name.
    • Now click the headers. You can sort the data both ascending and descending by any column you want.

    What's cool about this is that you took a static, simple HTML table and converted it into something much richer. Feel free to edit the table and change items like Crew_Size.

    Sunday, April 5, 2009

    What is Photoshop ?

    This is the first post about Photoshop, So I want to discuss about what is the photoshop because most of the new designers doesn't know about photoshop. This post is for them.

    Thomas and John Knoll began development on photoshop in year 1987. And the version 1.0 was released by Adobe in 1990. The program was intended from the start as a tool for manipulating images that were digitized by a scanner.

    Check the Screen Shots Below...

    Welcome Screen of the Photoshop 1.0 Version
    Welcome Screen of the Photoshop 1.0 Version

    Tool's & Menu Pallets of the  Photoshop 1.0 Version
    Tool's & Menu Pallets of the Photoshop 1.0 Version

    Adobe Photoshop is the most popular Pixel Based Image Editing Program for the Print publishing, Broadcast & Media and Web Industries. Adobe developed this Amazing Program, adobe is one of the most popular Software companies in the world.

    Photoshop is available on a wide array of platforms ranging from Mac to Windows to UNIX. Using Photoshop you can create a graphical images for the following mediums:-

    1. Print Media
      • From visiting Card to Large Format Digital Advertising Banners all kind of designs you can create using photoshop.
      • Photoshop is mostly popular for its advantage of Photo Manipulation and Decimalization, Almost from last Two Decades simply say photoshop is the king in photo industry, It has wide range of tools for Photo Manipulations.
      • Photoshop Integrated Camera Raw plug-in & Light room progrrames are became the latest must-have tool for professional photographers.
    2. Broadcast Media
      • Now a day’s Broadcast and Television Media becomes more poplar, so the opportunities in this industry also increased. All kind of background slides for videos and layout designs are created in Photoshop only later they will be imported into Video Editing Tools like After Effects and Primer Pro etc.

    3. Web Designing
      • The Major Contribution to the web medium by the Photoshop, because from the scratch the web layouts are prepared in Photoshop only.
      • Not only for Layout design but also you can make gif animations and image optimization in Photoshop.

    So Friends lets dig in to photoshop and make some creative stuff, lets get started. . .