Null object Error Help Please ..........
Jayakumar
2/08/2011
package {
import flash.events.MouseEvent;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.utils.setTimeout;
import flash.net.URLRequest;
import flash.display.MovieClip;
import flash.display.Loader;
import fl.transitions.*;
import fl.transitions.easing.*;
public class gallery {
private var ref:Object;
private var lastObj:Object;
private var firstObj:Object;
private var numberOfImages:Number=9;
private var arr:Array=[];
private var Width:Number;
private var Height:Number;
private var imageCount:Number=1;
private var lastValue:Number;
private var timer:Timer;
private var firstObject:Object;
private var lastObject:Object;
public function gallery(obj:Object) {
ref=obj;
ref.image_mc.oldX=ref.image_mc.x;
ref.nxt_mc.addEventListener(MouseEvent.CLICK,moveNext);
ref.prev_mc.addEventListener(MouseEvent.CLICK,movePrev);
loadAllImage();
for (var i=1; i<=numberOfImages; i++) { attachClip(i,lastObj); arr.push(i); } firstObject=ref.image_mc.getChildAt(0); lastObject=ref.image_mc.getChildAt(ref.image_mc.numChildren-1); } private function movePrev(evnt:MouseEvent) { var currentX=ref.image_mc.oldX+(Width+Number(10)); var myTweenX = new Tween(ref.image_mc, "x", Strong.easeOut,ref.image_mc.x,currentX,0.5, true); var myTweenY = new Tween(ref.image_mc, "y", Strong.easeOut,ref.image_mc.y,ref.image_mc.y,0.5, true); ref.image_mc.oldX=currentX var id=setTimeout(removeLast,200) } private function moveNext(evnt:MouseEvent) { var currentX=ref.image_mc.oldX-(Width+Number(10)); var myTweenX = new Tween(ref.image_mc, "x", Strong.easeOut,ref.image_mc.x,currentX,0.5, true); var myTweenY = new Tween(ref.image_mc, "y", Strong.easeOut,ref.image_mc.y,ref.image_mc.y,0.5, true); ref.image_mc.oldX=currentX var id=setTimeout(removeFirst,200) } private function removeFirst() { try { if (lastObject==null) { lastObject=ref.image_mc.getChildByName('thumNail_'+numberOfImages); } var firstId:Number=firstObject.name.split('_')[1]; var lastId:Number=lastObject.name.split('_')[1]; firstObject.x=(lastObject.x+lastObject.width)+Number(10); if ((firstId+1)>numberOfImages) {
firstId=0;
}
firstObject=ref.image_mc.getChildByName('thumNail_'+(firstId+1));
lastObject=ref.image_mc.getChildByName('thumNail_'+firstId);
} catch (Err:*) {
}
}
private function removeLast() {
try {
if (firstObject==null) {
firstObject=ref.image_mc.getChildByName('thumNail_'+1);
}
if (lastObject==null) {
lastObject=ref.image_mc.getChildByName('thumNail_'+numberOfImages);
}
var firstId:Number=firstObject.name.split('_')[1];
var lastId:Number=lastObject.name.split('_')[1];
lastObject.x=(firstObject.x-firstObject.width)-Number(10);
if ((lastId-1)<0) {
lastId=numberOfImages
}
lastObject=ref.image_mc.getChildByName('thumNail_'+(lastId-1));
firstObject=ref.image_mc.getChildByName('thumNail_'+lastId);
} catch (Err:*) {
}
}
private function loadAllImage() {
try {
var url:String='images/image_'+imageCount+'.jpg';
imageCount++;
var req:URLRequest=new URLRequest(url);
var loader:Loader=new Loader();
loader.load(req);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadingCompleted);
} catch (Err:*) {
}
}
private function loadingCompleted(evnt:Event) {
loadAllImage();
}
private function attachClip(arg:Number,Obj:Object,num:Number=0) {
var thumNail:thumnail_mc=new thumnail_mc();
thumNail.name='thumNail_'+arg;
Width=thumNail.width;
Height=thumNail.height;
if (Obj) {
if (num!=0) {
thumNail.x=(Obj.x-Obj.width)-Number(10);
firstObj=thumNail;
} else {
thumNail.x=(Obj.x+Obj.width)+Number(10);
}
} else {
}
lastObj=thumNail;
thumNail._txt.text=String(arg);
ref.image_mc.addChild(thumNail);
loadThumNailImages(thumNail,arg);
}
private function loadThumNailImages(thumNail:Object,arg:Number) {
var url:String='images/image_'+arg+'.jpg';
var req:URLRequest=new URLRequest(url);
var loader:Loader=new Loader();
loader.load(req);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoadCompleted);
thumNail.image.addChild(loader);
}
private function imageLoadCompleted(evnt:Event) {
var target=(evnt.target.content);
target.parent.parent.width=Width;
target.parent.parent.height=Height/2;
}
}
}
import flash.events.MouseEvent;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.utils.setTimeout;
import flash.net.URLRequest;
import flash.display.MovieClip;
import flash.display.Loader;
import fl.transitions.*;
import fl.transitions.easing.*;
public class gallery {
private var ref:Object;
private var lastObj:Object;
private var firstObj:Object;
private var numberOfImages:Number=9;
private var arr:Array=[];
private var Width:Number;
private var Height:Number;
private var imageCount:Number=1;
private var lastValue:Number;
private var timer:Timer;
private var firstObject:Object;
private var lastObject:Object;
public function gallery(obj:Object) {
ref=obj;
ref.image_mc.oldX=ref.image_mc.x;
ref.nxt_mc.addEventListener(MouseEvent.CLICK,moveNext);
ref.prev_mc.addEventListener(MouseEvent.CLICK,movePrev);
loadAllImage();
for (var i=1; i<=numberOfImages; i++) { attachClip(i,lastObj); arr.push(i); } firstObject=ref.image_mc.getChildAt(0); lastObject=ref.image_mc.getChildAt(ref.image_mc.numChildren-1); } private function movePrev(evnt:MouseEvent) { var currentX=ref.image_mc.oldX+(Width+Number(10)); var myTweenX = new Tween(ref.image_mc, "x", Strong.easeOut,ref.image_mc.x,currentX,0.5, true); var myTweenY = new Tween(ref.image_mc, "y", Strong.easeOut,ref.image_mc.y,ref.image_mc.y,0.5, true); ref.image_mc.oldX=currentX var id=setTimeout(removeLast,200) } private function moveNext(evnt:MouseEvent) { var currentX=ref.image_mc.oldX-(Width+Number(10)); var myTweenX = new Tween(ref.image_mc, "x", Strong.easeOut,ref.image_mc.x,currentX,0.5, true); var myTweenY = new Tween(ref.image_mc, "y", Strong.easeOut,ref.image_mc.y,ref.image_mc.y,0.5, true); ref.image_mc.oldX=currentX var id=setTimeout(removeFirst,200) } private function removeFirst() { try { if (lastObject==null) { lastObject=ref.image_mc.getChildByName('thumNail_'+numberOfImages); } var firstId:Number=firstObject.name.split('_')[1]; var lastId:Number=lastObject.name.split('_')[1]; firstObject.x=(lastObject.x+lastObject.width)+Number(10); if ((firstId+1)>numberOfImages) {
firstId=0;
}
firstObject=ref.image_mc.getChildByName('thumNail_'+(firstId+1));
lastObject=ref.image_mc.getChildByName('thumNail_'+firstId);
} catch (Err:*) {
}
}
private function removeLast() {
try {
if (firstObject==null) {
firstObject=ref.image_mc.getChildByName('thumNail_'+1);
}
if (lastObject==null) {
lastObject=ref.image_mc.getChildByName('thumNail_'+numberOfImages);
}
var firstId:Number=firstObject.name.split('_')[1];
var lastId:Number=lastObject.name.split('_')[1];
lastObject.x=(firstObject.x-firstObject.width)-Number(10);
if ((lastId-1)<0) {
lastId=numberOfImages
}
lastObject=ref.image_mc.getChildByName('thumNail_'+(lastId-1));
firstObject=ref.image_mc.getChildByName('thumNail_'+lastId);
} catch (Err:*) {
}
}
private function loadAllImage() {
try {
var url:String='images/image_'+imageCount+'.jpg';
imageCount++;
var req:URLRequest=new URLRequest(url);
var loader:Loader=new Loader();
loader.load(req);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadingCompleted);
} catch (Err:*) {
}
}
private function loadingCompleted(evnt:Event) {
loadAllImage();
}
private function attachClip(arg:Number,Obj:Object,num:Number=0) {
var thumNail:thumnail_mc=new thumnail_mc();
thumNail.name='thumNail_'+arg;
Width=thumNail.width;
Height=thumNail.height;
if (Obj) {
if (num!=0) {
thumNail.x=(Obj.x-Obj.width)-Number(10);
firstObj=thumNail;
} else {
thumNail.x=(Obj.x+Obj.width)+Number(10);
}
} else {
}
lastObj=thumNail;
thumNail._txt.text=String(arg);
ref.image_mc.addChild(thumNail);
loadThumNailImages(thumNail,arg);
}
private function loadThumNailImages(thumNail:Object,arg:Number) {
var url:String='images/image_'+arg+'.jpg';
var req:URLRequest=new URLRequest(url);
var loader:Loader=new Loader();
loader.load(req);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoadCompleted);
thumNail.image.addChild(loader);
}
private function imageLoadCompleted(evnt:Event) {
var target=(evnt.target.content);
target.parent.parent.width=Width;
target.parent.parent.height=Height/2;
}
}
}
Comprehensive List of Browser-Specific CSS Hacks
Jayakumar
12/11/2010
Comprehensive List of Browser-Specific CSS Hacks
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
IE7 only
* + html .element { margin-bottom: 10px; }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
IE7 only
* + html .element { margin-bottom: 10px; }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
Border-radius Shorthand Syntax
Jayakumar
11/09/2010
border-radius Shorthand Syntax :
Resolved: The border-radius shorthand shall take 1–4 values that set each of the four corners to circular radii, as in the -moz-border-radius shorthand. That is,
border-radius: TL TR BR BL;
border-radius: TL BL+TR BR;
border-radius: TL+BR TR+BL;
border-radius: ALL;
Bascially the syntax is TL TR BR BL (clockwise from top-left) and missing values are filled in by repeating the pattern, just as with border-style et al.
Rationale: The WG concludes from comments such as those on css3.info and from evaluating commonly-used effects such as tabs that designers are more likely to set different circular rounding effects on each corner than they are to set a common elliptical effect on all four corners. Therefore the border-radius shorthand should cater foremost to this usage.
Resolved: The border-radius shorthand shall take 1–4 values that set each of the four corners to circular radii, as in the -moz-border-radius shorthand. That is,
border-radius: TL TR BR BL;
border-radius: TL BL+TR BR;
border-radius: TL+BR TR+BL;
border-radius: ALL;
Bascially the syntax is TL TR BR BL (clockwise from top-left) and missing values are filled in by repeating the pattern, just as with border-style et al.
Rationale: The WG concludes from comments such as those on css3.info and from evaluating commonly-used effects such as tabs that designers are more likely to set different circular rounding effects on each corner than they are to set a common elliptical effect on all four corners. Therefore the border-radius shorthand should cater foremost to this usage.
IE browser Hacks
Jayakumar
7/22/2010
IE 6 and below
* html {}
IE7 only
* + html .element { margin-bottom: 10px; }
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
IE 7
html > body #ie7 { *display: block; }
IE 6
body #ie6 { _display: block; }
IE8 Standards-Mode Only:
.test { color /*\**/: blue\9 }
All IE versions, including IE8 Standards Mode:
.test { color: blue\9 }
For Example code using hacks:
margin-top:10\9; for IE8
* margin for IE7 , IE6
* html margin and _margin for IE6
* html {}
IE7 only
* + html .element { margin-bottom: 10px; }
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
IE 7
html > body #ie7 { *display: block; }
IE 6
body #ie6 { _display: block; }
IE8 Standards-Mode Only:
.test { color /*\**/: blue\9 }
All IE versions, including IE8 Standards Mode:
.test { color: blue\9 }
For Example code using hacks:
margin-top:10\9; for IE8
* margin for IE7 , IE6
* html margin and _margin for IE6
5 Tips of Defining Vertical Centering With CSS Tags:
Jayakumar
4/01/2010
5 Tips of Defining Vertical Centering With CSS Tags:
There are a multiple ways to defining vertical centering objects with CSS, but it can be difficult to select the easiest one. I’m going to share you all the best ways I’ve seen.
Vertical centering with CSS is not a every's cup of tea. There are many different ways that may not compatible with some browsers. Let’s review 5 different ways to vertically centering objects:
Method 1
This method sets some
There are a multiple ways to defining vertical centering objects with CSS, but it can be difficult to select the easiest one. I’m going to share you all the best ways I’ve seen.
Vertical centering with CSS is not a every's cup of tea. There are many different ways that may not compatible with some browsers. Let’s review 5 different ways to vertically centering objects:
Method 1
This method sets some
s to display like a table, so we can use the table’s vertical-align property (which works very differently for other elements).
Content goes here
Method 2
This method will use an absolutely positioned div, which has the top set to 50% and the top margin set to negative half the height of the content. This means the object must have a fixed height, that is defined by CSS.
Because it has a fixed height, you may want to set
Content Here
Method 3
In this method, we will insert a div above the content element. This will be set to
Content here
Method 4
This method uses a
Content here
Method 5
This method will only centre a single line of text. Simply set the
Content here
Content goes here
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}Method 2
This method will use an absolutely positioned div, which has the top set to 50% and the top margin set to negative half the height of the content. This means the object must have a fixed height, that is defined by CSS.
Because it has a fixed height, you may want to set
overflow:auto; to the content div, so if there is too much content to fit in, a scrollbar will appear, instead of the content continuing on outside the div!Content Here
#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}Method 3
In this method, we will insert a div above the content element. This will be set to
height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.Content here
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}Method 4
This method uses a
position:absolute; div with a fixed width and height. The div is then told to stretch to top:0; bottom:0;. It can’t because of the fixed height, so margin:auto; will make it sit in the middle. This is similar to using the very common margin:0 auto; to horizontally centre block elements.Content here
#content {position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:240px; width:70%;}Method 5
This method will only centre a single line of text. Simply set the
line-height to the height of the object, and the text sits in the middleContent here
#content {height:100px; line-height:100px;}Mozilla implements @font-face
Jayakumar
3/25/2010
Mozilla employee John Daggett has provided some try‐out builds of Firefox with support for the
@font-face from CSS3’s web-fonts module. Currently available for Windows and Mac only—no Linux build yet—there remain several caveats as described in his comment on bug 70132, the most important of which being that the same‐site origin restriction is turned on by default, which means that most examples on the web will not work until you turn it off.
CSS3 Pseudo-Class Selectors Emulation in Internet Explorer
Jayakumar
3/24/2010
Keith Clark, an independent web developer from the UK, has developed a JavaScript solution to IE’s CSS3 shortcomings in relation to CSS3 selectors. CSS3 selectors became the first W3C module to reach proposed recommendation status back in December 2009.
His ie-css3.js project (currently in beta) allows Internet Explorer, versions 5 through 8, to identify CSS3 pseudo-class selectors and render any style rules defined with them. All this is achieved by simply including the script, along with Robert Nyman’s DomAssistant, within the head element of your web pages.
Supported Pseudo-Classes
- :nth-child
- :nth-last-child
- :nth-of-type
- :nth-last-of-type
- :first-child
- :last-child
- :only-child
- :first-of-type
- :only-of-type
- :empty
Limitations of the project
- Style sheets MUST be added to the page using atag. Page level stylesheets or inline styles won’t work. You can still use @import in your style sheets.
- Style sheets MUST be hosted on the domain as the page.
- Style sheets using file:// protocol will not work due to browser security restrictions.
- The :not() pseudo-class is not supported.
- The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won’t be reflected.
How does it work?
ie-css3.js downloads each style sheet on the page and parses it for CSS3 pseudo-class selectors. If a selector is found it’s replaced by a CSS class of a similar name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Next, Robert Nyman’s DOMAssistant is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied them.Finally, the original stylesheet is replaced with the new version and any elements targeted with CSS3 selectors will be styled.
Bypassing IE’s CSS parser
In accordance with the W3C specs, a web browser should discard style rules it doesn’t understand. This presents a problem — we need access to the CSS3 selectors in the style sheet but IE throws them away.To avoid this issue each style sheet is downloaded using a XMLHttpRequest. This allows the script to bypass the browsers internal CSS parser and gain access to the raw CSS file.
Find out more and Download
ie-css3.js is released under the MIT License and can be downloaded from the project page on Keith Clark’s website.You’ll also need to download Robert Nyman’s DOMAssistant.
Subscribe to:
Posts
(
Atom
)
