After playing with haXe and Php, it was time to try haXe and JavaScript! I used the JQuery library included in haXe. For more information on haXe JS take a look on its website.
Click here to see the slider in action. It uses keyboards and a timer. The slider centers a picture with a 50px margin, there is also a red or green filter.
The html part :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Slider</title> <meta name="description" content="" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="slider.js"></script> </head> <body> <div id="haxe:trace"></div> <div id="slider"> <div id="animate"> <ul> <li><img src="img/pic1.jpg" alt="img1"/></li> <li><img src="img/pic2.jpg" alt="img2"/></li> <li><img src="img/pic3.jpg" alt="img3"/></li> <li><img src="img/pic1.jpg" alt="img4"/></li> </ul> </div> </div> </body> </html> |
A part of the CSS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | #slider { position: absolute; left: 50px; right: 50px; overflow: hidden; } #animate { position: relative; z-index: 5; } #animate ul { position:absolute; left: 1px; list-style: none; overflow: hidden; margin: 0; padding: 0; } #animate li { float: left; text-align: center; background-color: red; overflow: hidden; } #animate li:nth-child(odd) { background-color: green; } #animate li img { opacity: 0.7; } .carousel-previous { position: relative; z-index: 100; } .carousel-next { position: relative; z-index: 100; } |
And finally the haXe part :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | package; import haxe.Timer; import js.Dom; import js.JQuery; import js.Lib; class Slider { private var _timer:Timer; private var _timerSpeed:Int; private var _countTimer:Int; private var _timerIsRunning:Bool; private var _jqSlider:JQuery; private var _jqAnimate:JQuery; private var _jqAnimateUlLi:JQuery; private var _nbrElements:Int; private var _elementWidth:Int; private var _sliderWidth:Int; private var _animateWidth:Int; private var _margin:Int; static function main () { new JQuery (Lib.document).ready(function(evt) { new Slider(); }); } public function new() { _jqSlider = new JQuery('#slider'); _jqAnimate = new JQuery('#animate'); _jqAnimateUlLi = new JQuery('#animate ul li'); // required by Chrome for the width() function Lib.window.onload = _onload; Lib.window.onresize = _onresize; } private function _onload(evt:Event):Void { _nbrElements = _jqAnimateUlLi.length; _jqSlider.css("height", Std.string(new JQuery('#slider ul li').height()) + "px"); _elementWidth = _jqAnimateUlLi.width(); _animateWidth = _elementWidth * _nbrElements; new JQuery("#animate ul").width(_animateWidth); _onresize(); _timerSpeed = 5000; _countTimer = 0; _timer = new Timer(_timerSpeed); _timer.run = _tick; _timerIsRunning = true; Lib.document.onkeyup = _onkeypress; _jqSlider.prepend('<input class="carousel-previous" type="button" value="Previous">'); _jqSlider.append('<input class="carousel-next" type="button" value="Next">'); new JQuery('.carousel-previous').click(function(evt) { _moveLeft(); if (_timerIsRunning) _timerIsRunning = false; }); new JQuery('.carousel-next').click(function(evt) { _moveRight(); if (_timerIsRunning) _timerIsRunning = false; }); } private function _onresize(?evt:Event):Void { _sliderWidth = _jqSlider.width(); // bitwise operator FTW ! _margin = Std.int(_sliderWidth - _elementWidth >> 1); _jqAnimateUlLi.css("margin-left", Std.string(_margin) + "px"); } private function _tick():Void { if (_timerIsRunning) _moveRight(); } private function _onkeypress(evt:Event):Void { if (evt.keyCode == 39) _moveRight(); if (evt.keyCode == 37) _moveLeft(); } private function _moveRight():Void { //pre incrementation FTW ! if (++_countTimer == _nbrElements) { _jqAnimate.animate({left: 0}); _countTimer = 0; } else { _jqAnimate.animate({left: '-=' + Std.string(_elementWidth + _margin) + "px"}); } } private function _moveLeft():Void { //post incrementation FTW ! if (_countTimer-- != 0) { _jqAnimate.animate({left: '+=' + Std.string(_elementWidth + _margin) + "px"}); } else { _jqAnimate.animate({left: '-=' + Std.string((_elementWidth + _margin) * (_nbrElements - 1)) + "px"}); _countTimer = _nbrElements - 1; } } } |
Handle JS with haXe is easy, managing JQuery too. Once again the haXe api is your friend. Like for Php you can use external libraries and wrap them, see the documentation. Also take a look on the haXe magic.
That’s it for the haXe experimentation to replace native languages, now I will focus on NME, Flash Stage3D, and my school project using Sparrow & Chipmunk in Objective-C. More information later !
You should be using variables instead of repeating those ‘new JQuery(‘#animate’)’ or ‘new JQuery(‘#slider ul li’)’ so many times.
You’re right, I will update it ASAP. Thanks !