Tijden veranderen
jQuery vticker
Url waar het wel werkt: http://www.jugbit.com/jquery/vticker.php
Code (php)
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
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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.vticker-min.js"></script>
<script type="text/javascript">
$(function(){
$('#navigation').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 3
});
});
</script>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
</div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation">
<ul>
<li><div>Er is op dit moment 5400 kilo verloren door 400 nederlanders.</div></li>
<li><div>Er zijn op dit moment 3000 mensen online.</div></li>
<li><div>Het recept van de week is spinazie al le buffle.</div></li>
</ul>
</div>
<!-- End Wrapper -->
</body>
</html>
<script type="text/javascript" src="jquery.vticker-min.js"></script>
<script type="text/javascript">
$(function(){
$('#navigation').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 3
});
});
</script>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
</div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation">
<ul>
<li><div>Er is op dit moment 5400 kilo verloren door 400 nederlanders.</div></li>
<li><div>Er zijn op dit moment 3000 mensen online.</div></li>
<li><div>Het recept van de week is spinazie al le buffle.</div></li>
</ul>
</div>
<!-- End Wrapper -->
</body>
</html>
Gewijzigd op 27/05/2011 15:41:12 door Ocirina Ocirina
Gewijzigd op 27/05/2011 16:08:33 door - Ariën -
Als ik op de link klik opent hij de file gewoon?
In ieder geval bedankt
showItems: 3
eens in
showItems: 2
op regel 10.
of dump wat meer items in je navigation menu.
Gewijzigd op 27/05/2011 17:16:28 door - Mark -
code Vticker:
Code (php)
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
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
/*
* vertical news ticker
* Tadas Juozapaitis ( [email protected] )
* http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
*/
(function($){
$.fn.vTicker = function(options) {
var defaults = {
speed: 700,
pause: 4000,
showItems: 1,
animation: '',
mousePause: true,
isPaused: false,
direction: 'up',
height: 0
};
var options = $.extend(defaults, options);
moveUp = function(obj2, height, options){
if(options.isPaused)
return;
var obj = obj2.children('ul');
var clone = obj.children('li:first').clone(true);
if(options.height > 0)
{
height = obj.children('li:first').height();
}
obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
$(this).children('li:first').remove();
$(this).css('top', '0px');
});
if(options.animation == 'fade')
{
obj.children('li:first').fadeOut(options.speed);
if(options.height == 0)
{
obj.children('li:eq(' + options.showItems + ')').hide().fadeIn(options.speed).show();
}
}
clone.appendTo(obj);
};
moveDown = function(obj2, height, options){
if(options.isPaused)
return;
var obj = obj2.children('ul');
var clone = obj.children('li:last').clone(true);
if(options.height > 0)
{
height = obj.children('li:first').height();
}
obj.css('top', '-' + height + 'px')
.prepend(clone);
obj.animate({top: 0}, options.speed, function() {
$(this).children('li:last').remove();
});
if(options.animation == 'fade')
{
if(options.height == 0)
{
obj.children('li:eq(' + options.showItems + ')').fadeOut(options.speed);
}
obj.children('li:first').hide().fadeIn(options.speed).show();
}
};
return this.each(function() {
var obj = $(this);
var maxHeight = 0;
obj.css({overflow: 'hidden', position: 'relative'})
.children('ul').css({position: 'absolute', margin: 0, padding: 0})
.children('li').css({margin: 0, padding: 0});
if(options.height == 0)
{
obj.children('ul').children('li').each(function(){
if($(this).height() > maxHeight)
{
maxHeight = $(this).height();
}
});
obj.children('ul').children('li').each(function(){
$(this).height(maxHeight);
});
obj.height(maxHeight * options.showItems);
}
else
{
obj.height(options.height);
}
var interval = setInterval(function(){
if(options.direction == 'up')
{
moveUp(obj, maxHeight, options);
}
else
{
moveDown(obj, maxHeight, options);
}
}, options.pause);
if(options.mousePause)
{
obj.bind("mouseenter",function(){
options.isPaused = true;
}).bind("mouseleave",function(){
options.isPaused = false;
});
}
});
};
})(jQuery);
* vertical news ticker
* Tadas Juozapaitis ( [email protected] )
* http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
*/
(function($){
$.fn.vTicker = function(options) {
var defaults = {
speed: 700,
pause: 4000,
showItems: 1,
animation: '',
mousePause: true,
isPaused: false,
direction: 'up',
height: 0
};
var options = $.extend(defaults, options);
moveUp = function(obj2, height, options){
if(options.isPaused)
return;
var obj = obj2.children('ul');
var clone = obj.children('li:first').clone(true);
if(options.height > 0)
{
height = obj.children('li:first').height();
}
obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
$(this).children('li:first').remove();
$(this).css('top', '0px');
});
if(options.animation == 'fade')
{
obj.children('li:first').fadeOut(options.speed);
if(options.height == 0)
{
obj.children('li:eq(' + options.showItems + ')').hide().fadeIn(options.speed).show();
}
}
clone.appendTo(obj);
};
moveDown = function(obj2, height, options){
if(options.isPaused)
return;
var obj = obj2.children('ul');
var clone = obj.children('li:last').clone(true);
if(options.height > 0)
{
height = obj.children('li:first').height();
}
obj.css('top', '-' + height + 'px')
.prepend(clone);
obj.animate({top: 0}, options.speed, function() {
$(this).children('li:last').remove();
});
if(options.animation == 'fade')
{
if(options.height == 0)
{
obj.children('li:eq(' + options.showItems + ')').fadeOut(options.speed);
}
obj.children('li:first').hide().fadeIn(options.speed).show();
}
};
return this.each(function() {
var obj = $(this);
var maxHeight = 0;
obj.css({overflow: 'hidden', position: 'relative'})
.children('ul').css({position: 'absolute', margin: 0, padding: 0})
.children('li').css({margin: 0, padding: 0});
if(options.height == 0)
{
obj.children('ul').children('li').each(function(){
if($(this).height() > maxHeight)
{
maxHeight = $(this).height();
}
});
obj.children('ul').children('li').each(function(){
$(this).height(maxHeight);
});
obj.height(maxHeight * options.showItems);
}
else
{
obj.height(options.height);
}
var interval = setInterval(function(){
if(options.direction == 'up')
{
moveUp(obj, maxHeight, options);
}
else
{
moveDown(obj, maxHeight, options);
}
}, options.pause);
if(options.mousePause)
{
obj.bind("mouseenter",function(){
options.isPaused = true;
}).bind("mouseleave",function(){
options.isPaused = false;
});
}
});
};
})(jQuery);
BTW, Wat vinden jullie hier van? Klikje.
Wat moet ik nog allemaal veranderen?
Gewijzigd op 27/05/2011 22:11:55 door Ocirina Ocirina
Kunnen we die bekijken?
nou de link in mijn vorige post bevat de niet werkende nu.
Wat vind je zelf van het design. Wat moet ik veranderen?
Gewijzigd op 27/05/2011 22:27:10 door Niels K
Quote:
Uncaught ReferenceError: jQuery is not defined
jquery.vticker-min.js:6Uncaught ReferenceError: jQuery is not defined
ocirina.bplaced.net:12Uncaught ReferenceError: $ is not defined
jquery.vticker-min.js:6Uncaught ReferenceError: jQuery is not defined
ocirina.bplaced.net:12Uncaught ReferenceError: $ is not defined
Je moet we de jquery file inladen. Je laad nu de vticker zonder het jquery framework
Gewijzigd op 27/05/2011 23:30:01 door Vincent Huisman