JavaScript slider made with haXe and JQuery

Haxe, JavaScript, , , ,

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.

My zip.

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 !

2 thoughts on “JavaScript slider made with haXe and JQuery”

  1. You should be using variables instead of repeating those ‘new JQuery(‘#animate’)’ or ‘new JQuery(‘#slider ul li’)’ so many times.

Leave a Reply

Your email address will not be published. Required fields are marked *