Slider<\/title>\r\n\t<meta name=\"description\" content=\"\" \/>\r\n\t<link rel=\"stylesheet\" href=\"style.css\" type=\"text\/css\" \/>\r\n\r\n\t<script type=\"text\/javascript\" src=\"slider.js\"><\/script>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\t<div id=\"haxe:trace\"><\/div>\r\n\r\n\t<div id=\"slider\">\r\n\r\n\t\t<div id=\"animate\">\r\n\t\t\t<ul>\r\n\t\t\t\t<li><img decoding=\"async\" src=\"img\/pic1.jpg\" alt=\"img1\"\/><\/li>\r\n\t\t\t\t<li><img decoding=\"async\" src=\"img\/pic2.jpg\" alt=\"img2\"\/><\/li>\r\n\t\t\t\t<li><img decoding=\"async\" src=\"img\/pic3.jpg\" alt=\"img3\"\/><\/li>\r\n\t\t\t\t<li><img decoding=\"async\" src=\"img\/pic1.jpg\" alt=\"img4\"\/><\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/div>\r\n\r\n\t<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n<p>A part of the CSS :<\/p>\n<pre lang=\"css\" line=\"1\">#slider {\r\n position: absolute;\r\n left: 50px;\r\n right: 50px;\r\n overflow: hidden;\r\n}\r\n\r\n#animate {\r\n position: relative;\r\n z-index: 5;\r\n}\r\n\r\n#animate ul {\r\n\r\n position:absolute;\r\n left: 1px;\r\n\r\n list-style: none;\r\n overflow: hidden;\r\n margin: 0; padding: 0;\r\n}\r\n\r\n#animate li {\r\n float: left;\r\n text-align: center;\r\n background-color: red;\r\n overflow: hidden;\r\n}\r\n\r\n#animate li:nth-child(odd) {\r\n background-color: green;\r\n}\r\n\r\n#animate li img {\r\n opacity: 0.7;\r\n}\r\n\r\n.carousel-previous {\r\n position: relative;\r\n z-index: 100;\r\n}\r\n\r\n.carousel-next {\r\n position: relative;\r\n z-index: 100;\r\n}<\/pre>\n<p>And finally the haXe part :<\/p>\n<pre lang=\"actionscript3\" line=\"1\">package;\r\n\r\nimport haxe.Timer;\r\n\r\nimport js.Dom;\r\nimport js.JQuery;\r\nimport js.Lib;\r\n\r\nclass Slider {\r\n\r\n\tprivate var _timer:Timer;\r\n\tprivate var _timerSpeed:Int;\r\n\tprivate var _countTimer:Int;\r\n\tprivate var _timerIsRunning:Bool;\r\n\r\n\tprivate var _jqSlider:JQuery;\r\n\tprivate var _jqAnimate:JQuery;\r\n\tprivate var _jqAnimateUlLi:JQuery;\r\n\r\n\tprivate var _nbrElements:Int;\r\n\tprivate var _elementWidth:Int;\r\n\tprivate var _sliderWidth:Int;\r\n\tprivate var _animateWidth:Int;\r\n\tprivate var _margin:Int;\r\n\r\n\tstatic function main () {\r\n\t\t\r\n\t\tnew JQuery (Lib.document).ready(function(evt) {\r\n\t\t\t\r\n\t\t\tnew Slider();\r\n\t\t});\r\n\t}\r\n\r\n\tpublic function new() {\r\n\r\n\t\t_jqSlider = new JQuery('#slider');\r\n\t\t_jqAnimate = new JQuery('#animate');\r\n\t\t_jqAnimateUlLi = new JQuery('#animate ul li');\r\n\r\n\t\t\/\/ required by Chrome for the width() function\r\n\t\tLib.window.onload = _onload;\r\n\t\t\r\n\t\tLib.window.onresize = _onresize;\r\n\t}\r\n\r\n\tprivate function _onload(evt:Event):Void {\r\n\r\n\t\t_nbrElements = _jqAnimateUlLi.length;\r\n\r\n\t\t_jqSlider.css(\"height\", Std.string(new JQuery('#slider ul li').height()) + \"px\");\r\n\r\n\t\t_elementWidth = _jqAnimateUlLi.width();\r\n\t\t_animateWidth = _elementWidth * _nbrElements;\r\n\t\tnew JQuery(\"#animate ul\").width(_animateWidth);\r\n\r\n\t\t_onresize();\r\n\r\n\t\t_timerSpeed = 5000;\r\n\t\t_countTimer = 0;\r\n\t\t_timer = new Timer(_timerSpeed);\r\n\t\t_timer.run = _tick;\r\n\t\t_timerIsRunning = true;\r\n\r\n\t\tLib.document.onkeyup = _onkeypress;\r\n\r\n\t\t_jqSlider.prepend('<input class=\"carousel-previous\" type=\"button\" value=\"Previous\">');\r\n\t\t_jqSlider.append('<input class=\"carousel-next\" type=\"button\" value=\"Next\">');\r\n\r\n\t\tnew JQuery('.carousel-previous').click(function(evt) {\r\n\t\t\t\r\n\t\t\t_moveLeft();\r\n\r\n\t\t\tif (_timerIsRunning)\r\n\t\t\t\t_timerIsRunning = false;\r\n\t\t});\r\n\r\n\t\tnew JQuery('.carousel-next').click(function(evt) {\r\n\r\n\t\t\t_moveRight();\r\n\r\n\t\t\tif (_timerIsRunning)\r\n\t\t\t\t_timerIsRunning = false;\r\n\t\t});\r\n\t}\r\n\r\n\tprivate function _onresize(?evt:Event):Void {\r\n\r\n\t\t_sliderWidth = _jqSlider.width();\r\n\r\n\t\t\/\/ bitwise operator FTW !\r\n\t\t_margin = Std.int(_sliderWidth - _elementWidth >> 1);\r\n\r\n\t\t_jqAnimateUlLi.css(\"margin-left\", Std.string(_margin) + \"px\");\r\n\t}\r\n\r\n\tprivate function _tick():Void {\r\n\r\n\t\tif (_timerIsRunning)\r\n\t\t\t_moveRight();\r\n\t}\r\n\r\n\tprivate function _onkeypress(evt:Event):Void {\r\n\r\n\t\tif (evt.keyCode == 39)\r\n\t\t\t_moveRight();\r\n\r\n\t\tif (evt.keyCode == 37)\r\n\t\t\t_moveLeft();\r\n\t}\r\n\r\n\tprivate function _moveRight():Void {\r\n\r\n\t\t\/\/pre incrementation FTW !\r\n\t\tif (++_countTimer == _nbrElements) {\r\n\r\n\t\t\t_jqAnimate.animate({left: 0});\r\n\r\n\t\t\t_countTimer = 0;\r\n\r\n\t\t} else {\r\n\t\t\t_jqAnimate.animate({left: '-=' + Std.string(_elementWidth + _margin) + \"px\"});\r\n\t\t}\r\n\t}\r\n\r\n\tprivate function _moveLeft():Void {\r\n\r\n\t\t\/\/post incrementation FTW !\r\n\t\tif (_countTimer-- != 0) {\r\n\r\n\t\t\t_jqAnimate.animate({left: '+=' + Std.string(_elementWidth + _margin) + \"px\"});\r\n\r\n\t\t} else {\r\n\r\n\t\t\t_jqAnimate.animate({left: '-=' + Std.string((_elementWidth + _margin) * (_nbrElements - 1)) + \"px\"});\r\n\r\n\t\t\t_countTimer = _nbrElements - 1;\r\n\t\t}\r\n\t}\r\n}<\/pre>\n<p>Handle JS with haXe is easy, managing JQuery too. Once again the <a href=\"http:\/\/haxe.org\/api\" target=\"_blank\">haXe api<\/a> is your friend. Like for Php you can use external libraries and wrap them, see the <a href=\"http:\/\/haxe.org\/doc\/js\/extern_libraries\" target=\"_blank\">documentation<\/a>. Also take a look on the <a href=\"http:\/\/haxe.org\/doc\/advanced\/magic\" target=\"_blank\">haXe magic<\/a>.<\/p>\n<p><a href=\"http:\/\/www.aymericlamboley.fr\/blog\/wp-content\/uploads\/2012\/03\/slider.zip\">My zip<\/a>.<\/p>\n<p>That’s it for the haXe experimentation to replace native languages, now I will focus on <a href=\"http:\/\/www.haxenme.org\/\" target=\"_blank\">NME<\/a>, Flash Stage3D, and my school project using <a href=\"http:\/\/gamua.com\/sparrow\/\" target=\"_blank\">Sparrow<\/a> & <a href=\"http:\/\/chipmunk-physics.net\/\" target=\"_blank\">Chipmunk<\/a> in Objective-C. More information later !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 … <a href=\"http:\/\/www.aymericlamboley.fr\/blog\/javascript-slider-made-with-haxe-and-jquery\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript slider made with haXe and JQuery<\/span> <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[70,84],"tags":[71,86,112,87,113],"_links":{"self":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/570"}],"collection":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/comments?post=570"}],"version-history":[{"count":13,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/570\/revisions"}],"predecessor-version":[{"id":1280,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/570\/revisions\/1280"}],"wp:attachment":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/media?parent=570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/categories?post=570"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/tags?post=570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":570,"date":"2012-03-01T14:42:27","date_gmt":"2012-03-01T13:42:27","guid":{"rendered":"http:\/\/www.aymericlamboley.fr\/blog\/?p=570"},"modified":"2014-11-01T14:54:42","modified_gmt":"2014-11-01T13:54:42","slug":"javascript-slider-made-with-haxe-and-jquery","status":"publish","type":"post","link":"http:\/\/www.aymericlamboley.fr\/blog\/javascript-slider-made-with-haxe-and-jquery\/","title":{"rendered":"JavaScript slider made with haXe and JQuery"},"content":{"rendered":"

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<\/a>.<\/p>\n

Click here<\/a> 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.<\/p>\n

<\/p>\n

The html part :<\/p>\n

\r\n\r\n\r\n\t\r\n\tSlider<\/title>\r\n\t<meta name=\"description\" content=\"\" \/>\r\n\t<link rel=\"stylesheet\" href=\"style.css\" type=\"text\/css\" \/>\r\n\r\n\t<script type=\"text\/javascript\" src=\"slider.js\"><\/script>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\t<div id=\"haxe:trace\"><\/div>\r\n\r\n\t<div id=\"slider\">\r\n\r\n\t\t<div id=\"animate\">\r\n\t\t\t<ul>\r\n\t\t\t\t<li><img decoding=\"async\" src=\"img\/pic1.jpg\" alt=\"img1\"\/><\/li>\r\n\t\t\t\t<li><img decoding=\"async\" src=\"img\/pic2.jpg\" alt=\"img2\"\/><\/li>\r\n\t\t\t\t<li><img decoding=\"async\" src=\"img\/pic3.jpg\" alt=\"img3\"\/><\/li>\r\n\t\t\t\t<li><img decoding=\"async\" src=\"img\/pic1.jpg\" alt=\"img4\"\/><\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/div>\r\n\r\n\t<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n<p>A part of the CSS :<\/p>\n<pre lang=\"css\" line=\"1\">#slider {\r\n  position: absolute;\r\n  left: 50px;\r\n  right: 50px;\r\n  overflow: hidden;\r\n}\r\n\r\n#animate {\r\n  position: relative;\r\n  z-index: 5;\r\n}\r\n\r\n#animate ul {\r\n\r\n  position:absolute;\r\n  left: 1px;\r\n\r\n  list-style: none;\r\n  overflow: hidden;\r\n  margin: 0; padding: 0;\r\n}\r\n\r\n#animate li {\r\n  float: left;\r\n  text-align: center;\r\n  background-color: red;\r\n  overflow: hidden;\r\n}\r\n\r\n#animate li:nth-child(odd) {\r\n  background-color: green;\r\n}\r\n\r\n#animate li img {\r\n  opacity: 0.7;\r\n}\r\n\r\n.carousel-previous {\r\n  position: relative;\r\n  z-index: 100;\r\n}\r\n\r\n.carousel-next {\r\n  position: relative;\r\n  z-index: 100;\r\n}<\/pre>\n<p>And finally the haXe part :<\/p>\n<pre lang=\"actionscript3\" line=\"1\">package;\r\n\r\nimport haxe.Timer;\r\n\r\nimport js.Dom;\r\nimport js.JQuery;\r\nimport js.Lib;\r\n\r\nclass Slider {\r\n\r\n\tprivate var _timer:Timer;\r\n\tprivate var _timerSpeed:Int;\r\n\tprivate var _countTimer:Int;\r\n\tprivate var _timerIsRunning:Bool;\r\n\r\n\tprivate var _jqSlider:JQuery;\r\n\tprivate var _jqAnimate:JQuery;\r\n\tprivate var _jqAnimateUlLi:JQuery;\r\n\r\n\tprivate var _nbrElements:Int;\r\n\tprivate var _elementWidth:Int;\r\n\tprivate var _sliderWidth:Int;\r\n\tprivate var _animateWidth:Int;\r\n\tprivate var _margin:Int;\r\n\r\n\tstatic function main () {\r\n\t\t\r\n\t\tnew JQuery (Lib.document).ready(function(evt) {\r\n\t\t\t\r\n\t\t\tnew Slider();\r\n\t\t});\r\n\t}\r\n\r\n\tpublic function new() {\r\n\r\n\t\t_jqSlider = new JQuery('#slider');\r\n\t\t_jqAnimate = new JQuery('#animate');\r\n\t\t_jqAnimateUlLi = new JQuery('#animate ul li');\r\n\r\n\t\t\/\/ required by Chrome for the width() function\r\n\t\tLib.window.onload = _onload;\r\n\t\t\r\n\t\tLib.window.onresize = _onresize;\r\n\t}\r\n\r\n\tprivate function _onload(evt:Event):Void {\r\n\r\n\t\t_nbrElements = _jqAnimateUlLi.length;\r\n\r\n\t\t_jqSlider.css(\"height\", Std.string(new JQuery('#slider ul li').height()) + \"px\");\r\n\r\n\t\t_elementWidth = _jqAnimateUlLi.width();\r\n\t\t_animateWidth = _elementWidth * _nbrElements;\r\n\t\tnew JQuery(\"#animate ul\").width(_animateWidth);\r\n\r\n\t\t_onresize();\r\n\r\n\t\t_timerSpeed = 5000;\r\n\t\t_countTimer = 0;\r\n\t\t_timer = new Timer(_timerSpeed);\r\n\t\t_timer.run = _tick;\r\n\t\t_timerIsRunning = true;\r\n\r\n\t\tLib.document.onkeyup = _onkeypress;\r\n\r\n\t\t_jqSlider.prepend('<input class=\"carousel-previous\" type=\"button\" value=\"Previous\">');\r\n\t\t_jqSlider.append('<input class=\"carousel-next\" type=\"button\" value=\"Next\">');\r\n\r\n\t\tnew JQuery('.carousel-previous').click(function(evt) {\r\n\t\t\t\r\n\t\t\t_moveLeft();\r\n\r\n\t\t\tif (_timerIsRunning)\r\n\t\t\t\t_timerIsRunning = false;\r\n\t\t});\r\n\r\n\t\tnew JQuery('.carousel-next').click(function(evt) {\r\n\r\n\t\t\t_moveRight();\r\n\r\n\t\t\tif (_timerIsRunning)\r\n\t\t\t\t_timerIsRunning = false;\r\n\t\t});\r\n\t}\r\n\r\n\tprivate function _onresize(?evt:Event):Void {\r\n\r\n\t\t_sliderWidth = _jqSlider.width();\r\n\r\n\t\t\/\/ bitwise operator FTW !\r\n\t\t_margin = Std.int(_sliderWidth - _elementWidth >> 1);\r\n\r\n\t\t_jqAnimateUlLi.css(\"margin-left\", Std.string(_margin) + \"px\");\r\n\t}\r\n\r\n\tprivate function _tick():Void {\r\n\r\n\t\tif (_timerIsRunning)\r\n\t\t\t_moveRight();\r\n\t}\r\n\r\n\tprivate function _onkeypress(evt:Event):Void {\r\n\r\n\t\tif (evt.keyCode == 39)\r\n\t\t\t_moveRight();\r\n\r\n\t\tif (evt.keyCode == 37)\r\n\t\t\t_moveLeft();\r\n\t}\r\n\r\n\tprivate function _moveRight():Void {\r\n\r\n\t\t\/\/pre incrementation FTW !\r\n\t\tif (++_countTimer == _nbrElements) {\r\n\r\n\t\t\t_jqAnimate.animate({left: 0});\r\n\r\n\t\t\t_countTimer = 0;\r\n\r\n\t\t} else {\r\n\t\t\t_jqAnimate.animate({left: '-=' + Std.string(_elementWidth + _margin) + \"px\"});\r\n\t\t}\r\n\t}\r\n\r\n\tprivate function _moveLeft():Void {\r\n\r\n\t\t\/\/post incrementation FTW !\r\n\t\tif (_countTimer-- != 0) {\r\n\r\n\t\t\t_jqAnimate.animate({left: '+=' + Std.string(_elementWidth + _margin) + \"px\"});\r\n\r\n\t\t} else {\r\n\r\n\t\t\t_jqAnimate.animate({left: '-=' + Std.string((_elementWidth + _margin) * (_nbrElements - 1)) + \"px\"});\r\n\r\n\t\t\t_countTimer = _nbrElements - 1;\r\n\t\t}\r\n\t}\r\n}<\/pre>\n<p>Handle JS with haXe is easy, managing JQuery too. Once again the <a href=\"http:\/\/haxe.org\/api\" target=\"_blank\">haXe api<\/a> is your friend. Like for Php you can use external libraries and wrap them, see the <a href=\"http:\/\/haxe.org\/doc\/js\/extern_libraries\" target=\"_blank\">documentation<\/a>. Also take a look on the <a href=\"http:\/\/haxe.org\/doc\/advanced\/magic\" target=\"_blank\">haXe magic<\/a>.<\/p>\n<p><a href=\"http:\/\/www.aymericlamboley.fr\/blog\/wp-content\/uploads\/2012\/03\/slider.zip\">My zip<\/a>.<\/p>\n<p>That’s it for the haXe experimentation to replace native languages, now I will focus on <a href=\"http:\/\/www.haxenme.org\/\" target=\"_blank\">NME<\/a>, Flash Stage3D, and my school project using <a href=\"http:\/\/gamua.com\/sparrow\/\" target=\"_blank\">Sparrow<\/a> & <a href=\"http:\/\/chipmunk-physics.net\/\" target=\"_blank\">Chipmunk<\/a> in Objective-C. More information later !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 … <a href=\"http:\/\/www.aymericlamboley.fr\/blog\/javascript-slider-made-with-haxe-and-jquery\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript slider made with haXe and JQuery<\/span> <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[70,84],"tags":[71,86,112,87,113],"_links":{"self":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/570"}],"collection":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/comments?post=570"}],"version-history":[{"count":13,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/570\/revisions"}],"predecessor-version":[{"id":1280,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/570\/revisions\/1280"}],"wp:attachment":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/media?parent=570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/categories?post=570"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/tags?post=570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}