Easy Ext - Start here -> Sliding Text

Sliding Text

Ext has some great effects (FX) which can be found in the Ext.FX class in the API, this page demonstrates how you can slide text around, or simply toggle it on and off.

I have wrapped up the sliding actions inside a function for fun here, you could just as easily keep the action in the event handler

We used...

Ext.FX : Provides useful effects to build upon.
slideOut -> Slides an element OUT of view in a given direction
slideIn -> Slides an element INTO view in a given direction
frame -> Projects a neat frame effect over an element when activated
Ext.Element : Provides methods/functions to retrive DOM/Page elements.
isVisible -> Detecting whether an element is visbile in the DOM (or not)

Try it out!

Slide some Text UP | Slide some Text DOWN | Show/Hide some Text (using a Toggle)

I am a div with an ID of 1, and the content under should slide up and down.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare fringilla ante. Sed auctor. Donec gravida interdum tellus. Aliquam vehicula mauris dapibus arcu. Phasellus nibh velit, hendrerit a, adipiscing vitae, eleifend quis, libero. Fusce eleifend iaculis erat. Suspendisse rhoncus nisi in arcu. Ut non augue. Ut consequat vehicula elit. Mauris quam. Vivamus iaculis, magna varius ornare porta, nulla diam venenatis libero, vel mattis dui pede vel dui. Praesent dapibus mauris non neque. Suspendisse eget orci. Suspendisse at nisl. Nam mauris dolor, mollis ut, mollis at, semper quis, augue. Morbi ornare. In eu mi non libero porttitor pharetra. Nullam sagittis vulputate orci. In eget sem quis nibh dignissim dignissim. Mauris in pede

I am a div too - hello!

The Javascript Code

// reference local blank image
//make sure YOUR path is correct!!
Ext.BLANK_IMAGE_URL = '../../ext-2.0.2/resources/images/default/s.gif';

//this runs on DOM load - you can access all the good stuff now.

Ext.onReady(function() {
	 
//easy Ext examples V1
//by Owen Lees

//this file shows some basic ext stuff that is aimed at page level usage

//simple function to slide text up and down and optionally hide..
var slideText = function(direction,element){

var slideMe = Ext.get(element);

switch(direction){
	//determine the direction of travel
	case 'up' :
			//lets check to see if this is visible and if not then its already hidden :)
			if (slideMe.isVisible()) {
				//if we get here then the element is visible
				slideMe.slideOut('t', {
					easing: 'easeOut',
					duration: .5,
					remove: false,
					useDisplay: true
				});
			}
		break;
	case 'down' :
			//lets check to see if this is visible and if it is then we do nothing :)
			if (!slideMe.isVisible()) {
				//if we get here then the element is visible
				slideMe.slideIn('t', {
					easing: 'easeOut',
					duration: .5
				});
			}		
		break;
	default :
		//the default action is simply to toggle the element
		slideMe.toggle();
		break
	
}
//ends the slider function	
}

Ext.get('1textup').on('click',function(e,t){
	//simple slide of this element
	slideText('up','slider');
	Ext.get(t.id).frame('cccccc',1);
});

Ext.get('1textdown').on('click',function(e,t){
	//simple slide of this element
	slideText('down','slider');
	Ext.get(t.id).frame('cccccc',1);
});

Ext.get('1texttoggle').on('click',function(e,t){
	//simple toggle of this element
	slideText('toggle','slider');
	Ext.get(t.id).frame('cccccc',1);
});
});

Easy Ext :)

Sliding Text

We used...

Try it out!

The Javascript Code

The PHP Code