JASE V 4.0
Loading...
JASE V 4.0

Jase itself


JASE V 4.0

What's new

!If your using an older version of Jase please notice!
There is no more support for older versions of jase. Some functions came obsolete and are not available any longer. Some others are new.
E.g. animate is gone and changed its place with Jmations "jmation". Also wipe is no longer available and changed its place with Jmations "WIPE". Which are both Object.prototype functions now. And many more. Please read all about the new Jase before changing.

What is Jase and why it has been refreshed completely?

Jase can do alot things JQuery can. So you can use it as standalone or with JQuery together. I came up with jase, when jquery was new. Jquery has (still has) some deficiencies which i solved with Jase. JQuery is perfect. Please don't misunderstand. But it has it's limitations that can sometimes only be solved by using a JQuery addon.
I was really annoyed about all the JQuery restrictions. Of course, as a javascript coder, i always got my job done. But what for do i need jquery than?
So i came up with the very first jase. This had similar functions than jquery, but better. E.g. animate (which is jmation now). Also JQuery's ajax (which i changed to an old ActionScript function called loadVars. It's a lot faster).
So i got rid of all those restrictions and can do my job in half time now. And you will too.
What limitations? What restrictions? i hear the JQuerydisciples say. Well. JQuery is almost a new coding language based on Javascript. But to be honest. Most of them completely forgot how to handle javascript itself. Yes there are restrictions. BUT AGAIN JQuery is great. And i'm still using it (along with jase).

Next reason for Jase is that no Javascript library (not even JQuery) has the "nowadays" needed mobile support as long your not using a addon. With Jase it's almost possible to create Mobilesites with native look. Bootsrap is perfect (my favorite to be honest) but also bootsrap can't do it. And until Apple and Android will not deter anything (only to sell their almost useless apps), why should't we get our benefits out of it?

Jase is meant as a helper or assistant not more or less. You can use it with or without JQuery but it's absolutely no replacement to JQuery.

Why Jase has been refreshed and not just updated?

Jase never meant to be open source as e.g. JQuery is. So i never took care to be "in line" with other framewoks. But now Jase came a topic for other coders. So i decided to start with an "open source" too. So i had to fix it to work with JQuery. PLUS some functions are the same like JQuery. To avoid errors, those functions in Jase are capitalised. Take care You can use Jase along with JQuery, but you can't mix up Jase with JQuery. J('#myelement').hide() will not work. $('#myelement').HIDE() will not work either. Use $('#myelement').hide() or J('#myelement').HIDE().

Jase always comes with jmation and Jcss as default

There is no way to get Jase alone. Other Jase addons like Jparallax, Jsvg, Jmedia etc. are free to use as well but also works only with Jase. Please read about details of Jmation and Jcss in their sections.

Fixed arguments

Never ever change or overwrite them
This window vars are:
bw, bh, bt, bl (used by client Width and Height calculation)
hexDigit (used by hexconversion)
wSVG (BOOLEAN true or false. If browser can handle SVG it's true. Otherwise false)
mobile (BOOLEAN true or false. If current device mobile device it's true. Otherwise false)
safarirules (BOOLEAN true or false. If current browser is safari it's true. Otherwise false)
ierules (BOOLEAN true or false. If current browser is IE it's true. Otherwise false)
applerules (BOOLEAN true or false. If current device is IPhone,IPad etc. it's true. Otherwise false)

lat, lng, trackerResults, trackingacces (used by geolocation, if used)
ch, cw (current Client height and Client width, changes by resizing)

toucher, touchdown, touchup, touchmove (Mouse and touchevents, will be explained below)
loadFunctionlist, scrollFunctionlist, pScroll (will be explained below)
Anything else will come by explanation of Jase.

Window events

Load DOCUMENT

Use:

 
J('body').LOADED(function(){alert('LOADED');
	});




as a counterpart of JQuery's $( document ).ready() or stick with JQuery (if using). As you want to

Use always J('body').LOADED instead of J('#myelement').LOADED. Works each way but doesn't make any sense

ON RESIZE OR ORIENTATIONCHANGE (Arguments cw and ch)

Use:

 
J('body').RESIZE(function(){alert('resized to new Width '+cw+'px and new height'+ch+'px');
	});






Use always J('body').RESIZE instead of J('#myelement').RESIZE. Works each way but doesn't make any sense

Check arguments cw (document width) and ch (document height) to get new dimensions.

ON WINDOWSCROLL (Argument pScroll)

Use:

 
J('body').SCROLL(function(){alert('Scrollposition now is '+pScroll);
	});






Use always J('body').SCROLL instead of J('#myelement').SCROLL. Works each way but doesn't make any sense. SCROLL only catches window.scroll. Not element.scroll.

Check pScroll to get new scroll position.

Mouse or Touch events

MOUSE and TOUCH EVENTS DEMO

HOVER, TOUCH, CLICK ME TO SEE TRIGGERED EVENT
The grey element has the id "mouseevent". Thats the code: (Check it with your mobile too)

 
J('#mouseevent').DOWN(function(){this.HTML('MOUSEDOWN OR TOUCHDOWN ON RELATIVE POSITION X '+this.relX+' Y '+this.relY+' AND ABSOLUTE POSITION X '+this.absX+' Y '+this.absY+' and Width of '+this.absW+' HEIGHT '+this.absH);
	}).UP(function(){this.HTML('MOUSEUP OR TOUCHUP ON RELATIVE POSITION X '+this.relX+' Y '+this.relY+' AND ABSOLUTE POSITION X '+this.absX+' Y '+this.absY+' and Width of '+this.absW+' HEIGHT '+this.absH);
	}).OVER(function(){this.HTML('MOUSEOVER');
	}).OUT(function(){this.HTML('MOUSEOUT');
	}).MOVE(function(){if(this.isDown){this.HTML('MOVING OR TOUCHMOVE ON RELATIVE POSITION X '+this.relX+' Y '+this.relY+' AND ABSOLUTE POSITION X '+this.absX+' Y '+this.absY+' and Width of '+this.absW+' HEIGHT '+this.absH);
		}});




MOUSEDOWN / TOUCHDOWN

Use:

 
J('#myelement').DOWN(function(){//DO SOEMTHING. "this" is your clicked element
	});




DOWN adds a couple of informations to your element. PLUS by calling J('#yourelement').DOWN(function(e){//e is window.event}); you'll get back the window event.

or you may use J('#myelement')[touchdown] or document.getElementById('myelement')[touchdown]
touchdown is equivalent to "mousedown" but respects mobiles as well. You don't have to do something like myelement.onmousedown=myelement.ontouchdown=myelement onmspointerdown etc. Just [touchdown].
It's recommended to use "DOWN" (e.g. myelement.DOWN(FUNCTION) instead of touchdown if possible for your needs.

MOUSEUP / TOUCHUP

Use:

 
J('#myelement').UP(function(){//DO SOEMTHING. "this" is your mouseup triggered element
	});




UP adds a couple of informations to your element. PLUS by calling J('#yourelement').UP(function(e){//e is window.event}); you'll get back the window event.

or you may use J('#myelement')[touchup] or document.getElementById('myelement')[touchup]
touchup is equivalent to "mouseup" but respects mobiles as well. You don't have to do something like myelement.onmouseup=myelement.ontouchup=myelement onmspointerup etc. Just [touchup].
It's recommended to use "UP" (e.g. myelement.UP(FUNCTION) instead of touchup if possible for your needs.

MOUSEMOVE / TOUCHMOVE

Use:

 
J('#myelement').MOVE(function(){//DO SOEMTHING. "this" is your moving triggered element
	});




UP adds a couple of informations to your element. PLUS by calling J('#yourelement').MOVE(function(e){//e is window.event}); you'll get back the window event.

or you may use J('#myelement')[touchmove] or document.getElementById('myelement')[touchmove]
touchmove is equivalent to "mousemove" but respects mobiles as well. You don't have to do something like myelement.onmousemove=myelement.ontouchmove=myelement onmspointermove etc. Just [touchmove].
It is not recommended to use "MOVE" for everything. MOVE will never delete myelement.onmousemove or set it to null. You have to do manually: (myelement[touchmove]=null;), but then: once deleted you have to call it again by myelement.MOVE() or myelement[touchmove]. You may catch myelement.isDown to check if your current element is still pressed and go with that information. But the mousemove keeps running in background. Think about CPU.

MOUSEOVER / MOUSEOUT (NOT FOR MOBILES)

Use for mouseover:

 
J('#myelement').OVER(function(){//DO SOEMTHING. "this" is your element
	});




Or for mouseout:

 
J('#myelement').OUT(function(){//DO SOEMTHING. "this" is your element
	});




Both, OVER and OUT returns nothing

Summary

All of them (OVER,OUT,DOWN,UP,MOVE) expects an OPTIONAL function (as you see in the demo) and can be chained (see in the demo too)

Keydown and Keyup events

Demonstration of restricted texfields

KEYDOWN

KEYUP

Try it

Use NUMBERS as restriction for KEYUP and check out the format option.
Call KEYUP and KEYDOWN like this:

 
myinputtextortextareaelement.KEYDOWN({OBJECTKEYS});
 myinputtextortextareaelement.KEYUP({OBJECTKEYS});




or chain them like this

 
myinputtextortextareaelement.KEYDOWN({OBJECTKEYS}).KEYUP({OTHEROBJECTKEYS});




How to

Both (KEYUP and KEYDOWN) expects an OBJECT (field.KEYDOWN(OBJECT); and field.KEYUP(OBJECT);

OBJECT KEYS FOR BOTH

  • "restrict:" [STRING or ARRAY of STRINGS]. Possible values are:
    • 'LETTERS'
    • 'LETTERS' (ONLY CHARS FROM aA - zZ and SPACE)
    • 'NUMBERS' (ONLY NUMBERS FROM 0 - 9)
    • 'SPECIALCHARS' ('!','"','§','$','&','(',')','?','´','`',"'",'_',',','.','#')
    • 'MATHCHARS' ('=','%','+','-','*','/')
    • 'CODECHARS' ('{','}','[',']','~',';')
    • or manually given 'Xd5/%!VB etc.'
    Call for only one restriction: e.g. restrict:'LETTERS'
    or more than one
    restrict:['LETTERS','SPECIALCHARS']

  • "block:" [STRING] Here you may specify unwanted chars. Let's say you've setted 'LETTERS' and 'SPECIALCHARS' as restriction but don't want the chars § and # just add this: block:'§#'
  • "limit:" [NUMBER] Use this to set a max number of chars. (Perfect for textarea with limited signs)
  • "action:" [FUNCTION] E.g. "action:function(e){//SOMEONE's typing something}" We'll go thru this under "ACTION AND RETURNS"

OBJECT KEYS FOR KEYUP ONLY

  • "format:" [STRING] Use this only along restriction "NUMBERS"
    Explanation:
    Let's say you need a formated Phonenumber. Use e.g. "format:'(3), 3, 3, 5'. So its an automatically setted limit of 14 (3+3+3+5) and the result would be this "(555), 123, 456, 12345" if the user's typing 55512345612345. format works with all strings as long there are numbers in it to check the length of number sections. Numbers bigger 9 won't work. You can't use format:'(10), 3, 3'.

ACTION AND RETURNS

By using the action key you may catch a lot of things and react to it.

field.KEYDOWN({action:function(e){
            alert(this.currentCode); // currentCode is your keyCode

            alert(this.currentKey); // currentKey is a string for only some keyCodes. And returns 'left','right','up','down' (if arrows are pressed) and 'spacebar','escape','shift','control','capslock','tab','delete','insert','backspace','enter' and 'not listed' if it's another keyCode

            alert(this.currentString); // currentString is the current char (abZh765 etc.)

// And you can call e (window.event) by itself.         }
});

KEYDOWN and KEYUP in a chain

Type Numbers as much as possible (Don't worry. It's LIMITED)

 
J('#pho').KEYDOWN({restrict:'NUMBERS',limit:24}).KEYUP({format:'(3) 4 / 4 /5'});




I used limit(KEYDOWN) and format(KEYUP). So limit should be unneeded. Let's compare with ethe same example without limit.

 
J('#phoNolimit').KEYDOWN({restrict:'NUMBERS'}).KEYUP({format:'(3) 4 / 4 /5'});




See the difference? That's why you should use both in some cases.

One call for multiple fields

120 chars left
120 chars left

 
J('.keychecks').KEYDOWN({limit:120}).KEYUP({action:function(){document.getElementById(this.id+'out').HTML((120-this.value.length)+' chars left');
		}});




Both fields has id's plus an element below (for the "How many chars left" return) with the same id+out. But both elements has the same classname
class="keychecks". And that's the key im calling. You can do taht with unlimited numbers of fields.

About J

The J() method is similar to JQuerys $(). But absolutely not the same. J is made for html elements only. J requires a [STRING] as argument.

J arguments

  • 'body' returns document.body
  • '#myid' returns the element with the id "myid" if available
  • '.myclass' returns all elements with "myclass" within their class attribute
That's it and there is nothing more planned.

What J does

Calling by className ".myclassname"

In this case J goes thrue the DOM and looks for all elements with "myclassname" within their class attribute and returns them as an array or as single object (if there's only one with class="myclassname". Everything behind J('.myclassname')DOSOMETHING will have effect to all objects that were found.

Calling by id "#myid"

Primary it did the same that it does with calling a className. But then i've changed my mind. An id should be unique. Anything else is dirty coding and i don't support that. So in this case there will never ever be an array (even if there is more elements with the same id). In summary, it returns the same as document.getElementById('myid') does. Everything behind J('#myid')DOSOMETHING will have effect to document.getElementById('myid').

Calling by "body"

Also a document.body exists only once in a document. So it's the same like document.body. Everything behind J('body')DOSOMETHING will have effect to document.body.

Pro and contra

Compared with JQuery's $() J is pretty sparsely. But it does exactly what it's supposed to be. J returns exactly what you're looking for. No nested Object with the whole stream as JQuery does. You easly can go like "J('#myid').style.left='50%';". Can't do that with JQuery.

But there is something Don't know if thats a pro or a contra, and i don't know how JQuery handle that either. J runs thru the whole DOM by each call. I thought about store the requests and get the results from there by next call of course. But then i've noticed that this wont work for dynamic stuff like "calling new element by ajax or create them by javascript". Next call they'd be ignored.

So if you need to do something with the same unique element again and again you should't do this:

J('#myelement').style.top='10px';
J('#myelement').style.left='10px';
J('#myelement').style.width='100px';
etc.
Because it's stupid. It's the same thing than using document.getElementById('myelement') all the time.

Do this instead

var myelement=J('#myelement');
myelement.style.top='10px';
myelement.style.left='10px';
myelement.style.width='100px';

Of course you have to use J('.myelement') all the time if you're going to work on more then one element at once.

J('.myelement').style.top='10px';
J('.myelement').style.left='10px';
J('.myelement').style.width='100px';

So all elements with "myelement" within their class atribute will be effected.

EACH

Multiple calls at once

 
<script type="text/javascript">
J('.query').EACH(function(element){
	    element.style.left=0+'px';
	});
</script> 


EACH (FUNCTION)

Each element with className "query" goes to left 0 Pixel. Function argument is "this". A call with this.style.left=0+'px' is not all the time possible. So use the returned argument instead.

Prototypes / addPrototype

Many frameworks causes errors or may stop the script completely by using Object.prototype. (JQuery sometimes does) I don't know what this restriction is good for. There's no reason for. Object.prototypes are important for good coding.
That's why i came up with addPrototype

addPrototype

allow you to add Object.prototypefunctions for each framework.
Function to use for a single element

 
<script type="text/javascript">
addPrototype('FUNCTIONNAME',function(params){
	    var myelement=this;
	    //HERES MY FUNCTION and params say HELLO
	    return this;
	});
</script> 


Now you can call it by document.getElementById('myel').FUNCTIONNAME('HELLO'); or J('#myel').FUNCTIONNAME('HELLO');
By "return this" you even may add other prototypefunctions in chain.

J('#myel').FUNCTIONNAME('HELLO').OTHERFUNC().NEXTFUNC();

But that's quick and dirty and restricts you to use it for only one element by call. Better way is to add your prototypefunction that way, that more elements can call it by one call. E.g. J('.allelementswiththisclassname').FUNCTIONNAME('HELLO');
To do so, see "Function to use for multiple elements".

Not in the examples but recommend
Check if element exists to avoid errors.
addPrototype('FUNCTIONNAME',function(params){ if(this){ .........................

Not for jase only

You may use addPrototype for any framework you'd like to work with. Even JQuery.
Function to use for multiple elements

 
<script type="text/javascript">
addPrototype('FUNCTIONNAME',function(params){
	    if(is_array(this)){
		        if(params){
			        var argus=new Array();
			            for(var i=0;
			 &lt;
			 this.length;
			 i++){
				                var obje=params;
				                argus.push(obje);
				            }
			        }
		        for(var i=0;
		 &lt;
		 this.length;
		 i++){
			            if(argus){
				                this[i].FUNCTIONNAME(argus[i]);
				            }else{
				                this[i].FUNCTIONNAME();
				            }
			        }
		    }else{
		        var myelement=this;
		        //HERES MY FUNCTION and params say HELLO
		        return this;
		    }
	});
</script> 


Now you can call it by J('.allelementswiththisclassname').FUNCTIONNAME('HELLO');

GET AND ADD STUFF TO ELEMENTS

Like JQuery Jase has WIDTH,HEIGHT,LEFT,TOP and HTML too.
!Restriction! Never use them with document.body or J('body').

HEIGHT

GET HEIGHT OF A ELEMENT
alert(document.getElementById('myelement').HEIGHT());
or
alert(J('#myelement').HEIGHT());
If no argument is given, it returns the offsetHeight of the element
SET HEIGHT OF A ELEMENT
document.getElementById('myelement').HEIGHT('100px'));
or
J('#myelement').HEIGHT('50%'));
An argument [STRING OR NUMBER] is given. So elements height has effect if possible.
If argument is a NUMBER or a STRING without px or %, height will be setted to PIXEL. Otherwise if argument is e.G. '50%', elements height will be setted to 50%.

WIDTH

GET WIDTH OF A ELEMENT
alert(document.getElementById('myelement').WIDTH());
or
alert(J('#myelement').WIDTH());
If no argument is given, it returns the offsetWidth of the element
SET WIDTH OF A ELEMENT
document.getElementById('myelement').WIDTH('100px'));
or
J('#myelement').WIDTH('50%'));
An argument [STRING OR NUMBER] is given. So elements width has effect if possible.
If argument is a NUMBER or a STRING without px or %, width will be setted to PIXEL. Otherwise if argument is e.G. '50%', elements width will be setted to 50%.

LEFT

GET OFFSETLEFT OF A ELEMENT
alert(document.getElementById('myelement').LEFT());
or
alert(J('#myelement').LEFT());
If no argument is given, it returns the offsetLeft of the element
SET LEFT OF A ELEMENT
document.getElementById('myelement').LEFT('100px'));
or
J('#myelement').LEFT('50%'));
An argument [STRING OR NUMBER] is given. So elements left has effect if possible.
If argument is a NUMBER or a STRING without px or %, left will be setted to PIXEL. Otherwise if argument is e.G. '50%', elements left will be setted to 50%.

TOP

GET OFFSETTOP OF A ELEMENT
alert(document.getElementById('myelement').TOP());
or
alert(J('#myelement').TOP());
If no argument is given, it returns the offsetTop of the element
SET TOP OF A ELEMENT
document.getElementById('myelement').TOP('100px'));
or
J('#myelement').TOP('50%'));
An argument [STRING OR NUMBER] is given. So elements top has effect if possible.
If argument is a NUMBER or a STRING without px or %, top will be setted to PIXEL. Otherwise if argument is e.G. '50%', elements top will be setted to 50%.

HTML

GET INNERHTML OF A ELEMENT
alert(document.getElementById('myelement').HTML());
or
alert(J('#myelement').HTML());
If no argument is given, it returns the innerHTML of the element
SET INNERHTML OF A ELEMENT
document.getElementById('myelement').HTML('NEW CONTENT'));
or
J('#myelement').HTML('NEW CONTENT'));
An argument [STRING] is given. So elements innerHTML is your given STRING.

AJAX

Get and send informations to and from other files or server

CLICK OR TOUCH ME TO SEE DEMO AND DETAILS
TESTBOX
TESTBOX2

HOW AJAX WORKS

myelement.AJAX({OBJECTKEYS});

OBJECT KEYS

  • "url:" [STRING] URL to file for send or get imformations.
  • "method:" [STRING 'post' or 'get'] How to send your informations. Default is 'post'
  • "evalHTML:" [BOOLEAN, true or false] Should the results become executable innerHTML for your element (Yes true, No, false). Default is true
  • "pureHTML:" [BOOLEAN, true or false] Should the results become non executable innerHTML for your element (SCRIPT inside will be ignored) (Yes true, No, false). Default is false. If evalHTML and pureHTML both false, the results will not be innerHTML for your element.
  • "onReady:" [FUNCTION] When ajax was successfully you can get the results as pureHTML to work with it. EXAMPLE (onReady:function(results){alert(results); //this is your element} We go closer to onReady soon)
  • "execute:" [BOOLEAN true or false] Default is false. Set execute to true and evalHTML or pureHTML goes to false. No innerHTML. But it's running the scripts in background. Useful to run scripts in background like e.g. (SESSION CONTROL or whatever). Javascript on your loaded script also uses the arguments and functions you use on main page.

OBJECT KEYS YOU CAN'T USE

  • "onLoad:" used by AJAX itself. Also don't use the Keys above to add your values.

OBJECT KEYS FOR YOUR VALUES

  • "anythingyouwant:" [VALUE [STRING, ARRAY, WHATEVER]] E.g. myvalue:'Yeah thats me' will come to your phpfile as $_POST['myvalue'] = 'Yeah thats me'. Or with get as $_GET['myvalue']

onReady

Catch the results or do anything else when file has loaded or data has sendet.
result is required
If your using pure PHP without any echos (blank site) than your data will be sended as well, but the result is null. So onReady will not be called.
In this case (and if you need onReady to call) add an echo to your php file. Or just outside php a char or string. (E.g "DONE")

EXAMPLE of onReady

onReady:function(results){

//call this as your element. results is what your file gives back. If your file contains HTML, alert(results) will return the HTML. But thats pureHTML. If there is any javascriptcode in it, it will not be executed. If you need javascriptcode to be executed use evalScript(results)


}

FILEUPLOAD

With UPLOAD

!NOTICE!
This demonstration is only meant to show how the function UPLOAD works. Can't do that without showing any results too. So i used the simple HTML5 audio and video Object to show what you've uploaded. But those are no part of UPLOAD. UPLOAD is just a way to upload stuff (crossbrowser support) and work with it. UPLOAD is not a converter for audio or video formats. Maybe your browser can't play what you've uploaded. Window phone (what i've also tested with) can't play it's own video files and seem to crash or stuck. (But it's only taking forever to load it).

UPLOAD results in a base64 String, what also can be a result, that some files are not able to play. But i'm not saving any files on my server. So thats the way it has to go for this demonstration. Sorry.
Please click on the upload Buttons to see how UPLOAD works With mobile you may scroll down to see results.

HOW UPLOAD WORKS

With this function you don't need to add any form or input file elements to achieve an upload.
Use: myhtmlelement.UPLOAD({OBJECTKEYS}); instead. It does almost everything for you.

UPLOAD uses FileReader which is supported by almost all modern browsers (even Safari on Mac or Apple). In my tests only Windows Safari can't work with FileReader. In that case UPLOAD offers a fallback function to upload to the server directly (no reload. Works in background) if you have a php or whatever serversite file on your server and use the OBJECT KEY fallback (E.g. fallback:'myfile.php').

Maybe you're seeing an upload progressbar during uploading. In that case your browser don't support FileReader and the upload take a while. Otherwise (with FileReader) the upload works clientwise almost instantly in no time.

Result will be an base64 string of your file that easily can be sended to your server with E.g. AJAX. UPLOAD don't do that for you automatically.

Let's go thru it

OBJECT KEYS (SETTINGS)

  • "maxmb:" [NUMBER] maximum Filesize (MB). Default is 5
  • "filetype:" [STRING] accepted filetype E.g. 'image' or 'audio' or 'video'. Default is 'image'
    • By using 'image' this fileformats are defined as default. 'jpg jpeg png xpng gif bmp tiff'
    • By using 'audio' this fileformats are defined as default. 'wav mp3 m4a'
    • By using 'video' this fileformats are defined as default. 'mp4 mov qt avi mpeg webm wmf mkv flv vob ogv ogg rm'
    • By using another filetype, you need to specify fileformats manually
  • "fileformat:" [STRING] accepted fileformats. Write them like e.g. this: 'bmp jpeg png' seperated by blank
  • "fallback:" [STRING] For browsers without FileReader support. E.g. fallback:'upoad.php' (will be sended with name "file": $_FILES['file'])

OBJECT KEYS (FUNCTIONS)

  • "startUpload:" [FUNCTION] returns name, type and size of file when upload begins
    Example
    startupload:function (name,type,size){
    //this is my object and name, type and size are values to work with
    }
  • "onFinish:" [FUNCTION] After successfull upload.
    Example
    onFinish:function (base64string){
    //this is my object and base64string is the file to work with
    //if FileReader is not supported, than this could be an url to your file. Depends on your fallback file
    }
  • "onError:" [FUNCTION] When something went wrong.
    Example
    onError:function (errorcode){
    //this is my object and errorcode say what went wrong
    }
  • "readerData:" [FUNCTION] Get readerDataResults
    Example
    readerData:function (e){
    //this is my object and e is the readerDataResult
    }

ERROR CODES

  • 'WFF' = Wrong File Format
  • 'WFT' = Wrong File Type
  • 'MFS' = Max File Size reached (file is to big)
  • 'MFB' = Missing Fallback File
  • [NUMBER] = Just XMLHttpRequest error code. Google by yourself what this all can be

RETURNS

  • myelement.FILETYPE (this) = [STRING] Filetype
  • myelement.FILENAME (this) = [STRING] Filename
  • myelement.FILEFORMAT (this) = [STRING] Fileformat
  • myelement.FILESIZE (this) = [NUMBER] Filesize
  • myelement.MBSIZE (this) = [NUMBER] Filesize in MB
  • myelement.OBJECT (this) = [OBJECT] your OBJECT again to call for e.G. your settings. (myelement.OBJECT.maxmb)

Example code


 
<button id="fbtnImage" type="button" class="btn btn-success">Select Image (10MB max)</button>
<script type="text/javascript">
var ImageOBJ={
	    maxmb:10,
	    readerData:function(e){/*get reader e results*/},
	    onFinish:function(base){
		                    //Do something with base64 string of uploaded file
		    },
	    onError:function(errstr){
		                    //Do something with errorcode erstr
		    },
	    fallback:'userupload.php',
	    startUpload:function(name,type,size){
		                    //Upload has startet
		    }
	}
J('#fbtnImage').UPLOAD(ImageOBJ);
</script>


Progressbar for fallback

If you want to have a progressbar you should go that way:
Check first if FileReader ist supported or not

 
<script type="text/javascript">
var onServer=false;
//Check if browser supports FileReader
if('FileReader' in window) {
	//Yes
	}else{
	//NO
	onServer=true;
	getIspeed();
	}
</script> 


Function getIspeed is a nice function i found on internet and which came part of Jase now. Thanks to unknown Author.
Don't use getIspeed to much for the same site. For desktop once is absolutely okay. For mobiles you may call this function frequently, because the Internetspeed could change.

getIspeed returns the current User Download speed (Not the upload speed) and comes back with 3 arguments toc check for.
  • speedBps = Bytes per second
  • speedKbps = Kilobytes per second
  • speedMbps = Megabytes per second
Now compare filesize with one of those

 
<script type="text/javascript">
startUpload:function(name,type,size){
	    if(onServer){
		        var MB=(this.FILESIZE/1000000).toFixed(2);
		        var aproxtime=Math.floor(((MB/(speedMbps))*250)*1000);
		    }    
	}
</script> 


Now you know the approximately seconds you user would need to upload it's file and can go with it

 
<script type="text/javascript">
    startUpload:function(name,type,size){
	        if(onServer){
		            var MB=(this.FILESIZE/1000000).toFixed(2);
		            var aproxtime=Math.floor(((MB/(speedMbps))*250)*1000);
		            intervalset(aproxtime,function(percent){
			            var loads=(MB/100*percent).toFixed(2);
			            /*percent: NUMBER 0 - 100
			            loads: NUMBER of how many MB are uploaded
			            */   
			            });
		        }    
	    },onFinish:function(base){
	            /*base is your data:base64 STRING
	            Now check for missing FileRead again 
	            and clear the interval in case upload was finished earlier than calculatet
	            */
	            if(onServer){
		                if(intervalon){deleteinterval=true;
			}
		            }
	    }
</script> 


Example for fallback.php (Works. Just upload to your server)


 
<?php  
function orientationfind($p=''){
	    if(file_exists($p)){ 
		        chmod($p0755);
		 $exif exif_read_data($p);
		        $exif_ifd0 read_exif_data($p ,'IFD0' ,0);
		        if (@array_key_exists('DateTime'$exif_ifd0)) {
			            $camDate $exif_ifd0['DateTime'];
			}
		        switch($exif['Orientation']) 
		            {
			              case 3: 
			                       exec('/usr/bin/convert  '.$p.'  -orient top-left -rotate -180  '.$p);
			                    break;
			                case 6: 
			                    exec('/usr/bin/convert  '.$p.'  -orient top-left -rotate 90  '.$p);
			                    break;
			                case 8:    
			                    exec('/usr/bin/convert  '.$p.'  -orient top-left -rotate -90  '.$p);
			                    break;
			}
		        }
	}
function imageToBase64 $file NULL ,$del=true,$jpg=true) {
	        $ed='';
	        if($jpg){
		            $ed='.jpg';
		        }
	        if($jpg){$ofile=$file;
		            $file=$ofile.$ed;
		        }
	        $size=getimagesize($file);
	        $end=explode('.',$file);
	        $ending=strtolower($end[(count($end)-1)]);
	        if($ending=='jpg'){$ending='jpeg';
		}
	        $content file_get_contents ($file);
	        $f=base64_encode($content);
	        if(file_exists($ofile) && $del){
		            unlink($ofile);
		        }
	        if(file_exists($file) && $del){
		            unlink($file);
		        }
	        $rep=array('dataimage/jpegbase64','dataimage/pngbase64','dataimage/gifbase64',' ');
	        $repb=array('','','','+');
	        return 'data:image/'.strtolower($ending).';
	base64,'.str_replace($rep,$repb,$f);
	}
if(!is_dir('userupload')){mkdir('userupload');
	}
if(isset($_FILES['file'])){
	    $end=explode('.',$_FILES['file']['name']);
	    $ending=$end[count($end)-1];
	    $name='userupload/'.md5($_SERVER['REMOTE_ADDR']).'.'.$ending;
	    if(move_uploaded_file($_FILES['file']['tmp_name'],$name)){
		        $mime=explode('/',strtolower(mime_content_type($name)));
		        $mime=$mime[0];
		        if($mime=='image'){
			            orientationfind($name);
			            echo str_replace(' ','+',imageToBase64 ($name ,true,false));
			        }else
		        if($mime=='audio'){
			        $content file_get_contents ($name);
			        $f=base64_encode($content);
			        $ba='data:'.$mime.'/'.$ending.';
			base64,'.$f;
			        echo str_replace(' ','+',$ba);
			        if(file_exists($name)){
				            unlink($name);
				        }
			        }
		    }
	} 



VSCROLL and WHEEL

Smooth animated scroll by wheel or customized scrollbar, as on this page. Disabled for mobiles

Call by script

Customized Scrollbar (VSCROLL)

 
<script type="text/javascript">
myelement.VSCROLL({barColor:'rgba(255,255,200,0.8)',btnColor:'#325684',btnColorOpacity:90,barClass:'content_inset_shadow',btnClass:'content_shadow',alwaysShow:true});
//or
J('#elementid').VSCROLL({barColor:'rgba(255,255,200,0.8)',btnColor:'#325684',btnColorOpacity:90,barClass:'content_inset_shadow',btnClass:'content_shadow',alwaysShow:true});
</script>


Mousewheel (WHEEL)

 
<script type="text/javascript">
myelement.WHEEL({scrollRangeY:100});
//or
J('#elementid').WHEEL({scrollRangeY:100});
</script>


Call by data attribute

Customized Scrollbar (VSCROLL)

 
<body data-vscroll="barColor:#FFFFFF|btnColor:#333333|btnColorOpacity:95|barClass:content_inset_shadow|btnClass:content_shadow"></body>
//or 
<div data-vscroll="barColor:#FFFFFF|btnColor:#333333|btnColorOpacity:95|barClass:content_inset_shadow|btnClass:content_shadow"></div>




Mousewheel (WHEEL)

 
<body data-wheel="scrollRange:20"></body>
//or 
<div data-wheel="scrollRange:20"></div>



OBJECT KEYS

VSCROLL

  • "alwaysShow:" [BOOLEAN] Default false. Set to true if your scrollbar should stay all the time. (No fadeout, fadein on mouseover)
  • "time:" [NUMBER, Milliseconds] Default 1600 (or 1.6 seconds). Time to scroll calculated on complete scrollHeight
  • "ease:" [STRING] Default 'regularinout' Easetype of scroll animation
  • "width:" [NUMBER] Percentage of Scrollbar width (0-100)
    !Percent! not pixel
    Each browser has its own scrollbar width which is fixed. You can create a thinner scrollbar but not a broader. Use e.g. 50 for half width of regular Scrollbar width.
  • "barColor:" [STRING, HEX, RGB or even RGBA] Default 'rgba(0,0,0,0)' Color of scrollbar
  • "btnColor:" [STRING, HEX, RGB or even RGBA] Default '#CCCCCC' Color of scrollbarbutton
  • "barColorOpacity:" [NUMBER 0 - 100] Opacity of scrollbar. If you're using barColorOpacity + 'rgba' as color, 'rgba' will be changed according to barColorOpacity
  • "btnColorOpacity:" [NUMBER 0 - 100] Opacity of scrollbarbutton. If you're using btnColorOpacity + 'rgba' as color, 'rgba' will be changed according to btnColorOpacity
  • "barRadius:" [NUMBER] Adds rounded corners to scrollbar.
  • "btnRadius:" [NUMBER] Adds rounded corners to scrollbarbutton. Default is 2
  • "barClass:" [STRING] Adds your own css class for scrollbar.
  • "btnClass:" [STRING] Adds your own css class for scrollbarbutton.
if you're using VSCROLL as data attribute, use the same keys but seperate them by PIPE (|) and skip quotes on strings.

WHEEL

  • "scrollRange:" [NUMBER, as percent] Default 100. Defines scrolldistance by delta (1 or -1). (ClientHeight/100*scrollRange)
  • "scrollEase:" [STRING] Default 'regularinout' Easetype of scroll animation
  • "scrollTime:" [NUMBER, Milliseconds] Default 500 (or half second). Time to scroll calculated on scrollRange
if you're using WHEEL as data attribute, use the same keys but seperate them by PIPE (|) and skip quotes on strings.

Examples

Scroll "Lorem Ipsum"

Lorem ipsum dolor

sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor

sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

One call, mutlitple scroll

Divs has classname of myscroller

Lorem ipsum dolor

sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor

sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 
<script type="text/javascript">
        J('.myscroller').WHEEL().VSCROLL();
</script>


!Call WHEEL first!

Useful function that comes with Jase

I found some of this functions on internet and fixed them to my needs. Thanks to the unknown authors.

base64 and utf8

Base64 Encode

 
<script type="text/javascript">
var string='HELLO WORLD';
var based=base64_encode(string);
alert(based);
</script>


Base64 Decode

 
<script type="text/javascript">
var decoded=base64_decode(based);
alert(decoded);
</script>


Example

Hello World

Click to encode

UTF8 Encode

Encodes String to utf8

 
<script type="text/javascript">
var string='Thats a ~ %## weird char string';
alert(utf8_encode(string));
</script>


UTF8 Decode

Decodes String from utf8

 
<script type="text/javascript">
var string='Thats a ~ %## weird char string';
alert(utf8_decode(string));
</script>


Colortransformation

rgbaFromColor

Returns an rgba String according to arguments color and opacity

 
<script type="text/javascript">
var color='#FFFFFF';
var opacity=30;
rgbaFromColor(color,opacity);
//Returns rgba(255,255,255,0.3)
</script>


or

 
<script type="text/javascript">
var color='rgb(255,255,255)';
var opacity=30;
rgbaFromColor(color,opacity);
//Returns rgba(255,255,255,0.3)
</script>


or

 
<script type="text/javascript">
var color='rgba(255,255,255,0.8)';
var opacity=30;
rgbaFromColor(color,opacity);
//Returns rgba(255,255,255,0.3)
</script>


rgba2rgb

Makes rgb out of rgba

 
<script type="text/javascript">
var color='rgb(255,255,255,1)';
alert(rgba2rgb(color));
//Returns rgb(255,255,255)
</script>


hex2rgb

Returns an array ([R,G,B]) out of a hex color

 
<script type="text/javascript">
var color='#FFFFFF';
alert(color.hex2rgb());
//Returns [255,255,255]
</script>


hex2rgba

Returns rgba out of a hex color

 
<script type="text/javascript">
var color='#FFFFFF';
alert(color.hex2rgba());
//Returns rgba(255,255,255,1)
</script>


rgb2rgba

Makes rgba out of rgb

 
<script type="text/javascript">
var color='rgb(255,255,255)';
alert(rgb2rgba(color));
//Returns rgba(255,255,255,1)
</script>


xrgb2hex

Makes hex out of rgb

 
<script type="text/javascript">
var color='rgb(255,255,255)';
alert(xrgb2hex(color));
//Returns #FFFFFF
</script>


str_replace, implode, explode, eregi and strlen

Known from php

str_replace


 
<script type="text/javascript">
var string='Hello World';
alert(str_replace('Hello','Moon',string));
//Returns Hello Moon
</script>


or with array

 
<script type="text/javascript">
var string='This is a $%& String with ? weird % § chars in it';
var a=['$','%','&','?','§'];
var b=['','','','',''];
alert(str_replace(a,b,string));
//Returns This is a  String with  weird   chars in it
</script>


strlen


 
<script type="text/javascript">
var string='Hello World';
alert(strlen(string));
//Returns 11
</script>


implode


 
<script type="text/javascript">
var arr=['Hello','World'];
alert(implode(' ','arr',string));
//Returns Hello World
</script>


explode

explode(delimiter, string, limit)

 
<script type="text/javascript">
var string='Hello,World';
alert(explode(',',string));
//Returns array ['Hello','World]
</script>


eregi


 
<script type="text/javascript">
var string='Hello World';
alert(eregi('World',string));
//Returns true
alert(eregi('Moon',string));
//Returns false
</script>


A better way than indexOf.

Arrays: unique, array_unique, array_merge and array_multisort

Please google for this PHP functions. Works the same way.
There are more functions (like number_format), but i ran out of time for this free project. Please come back frequently to check for docu updates.