Despite my goal in recent years to always be a Flash Developer, recent discoveries after properly working in the Web Development field, have shown me the importance of being able to code well in other languages, particularly JavaScript and PHP. Thankfully my job which had an original job description of “Flash Developer” could better now be described as a “jack of all trades”. I have spend a lot of my time enhancing my skills in PHP, particularly in regards to the WordPress CMS, but I have also been given the opportunity to develop JavaScript utilities as well. One of them being the Stream Rotator, which I don’t have a copy on this site, however if you go to the LTE World Summit 2012 site, you can see an example of it in there. *note – this site is not live yet at time of publishing but it should be up and running in the next week or so for you to look at.
Whilst the JavaScript involved in this, many could argue to be pretty basic, for me it’s a large step forward from what I used to be able to do so I’m quite glad that I am able to publish and display something of real quality.
So the basic principal is as follow, the streams rotate on a timer and when the user clicks on the stream arrows, it will rotate either direction. Like I said before, it’s pretty simple but it also works very nicely. You can look below and see the code used to build it.
var imagewidth = 260;
var images = $('#stream_images li').length;
iwidth = imagewidth * images;
$('#stream_images').css({'overflow':'hidden','position':'relative'});
$('#stream_images ul').css({'width':iwidth,'position':'relative','left':-imagewidth});
$('#stream_images li:first').before($('#stream_images li:last'));
var textwidth = 220;
var texts = $('#stream_title li').length;
twidth = textwidth * texts;
$('#stream_title').css({'overflow':'hidden','position':'relative'});
$('#stream_title ul').css({'width':twidth,'position':'relative','left':-textwidth,'top':'0px'});
$('#stream_title li').css({'float':'left','padding':'0px','width':'220px'});
$('#stream_title li:first').before($('#stream_title li:last'));
intervalspace = 3000
interval = setInterval(function(){stream_move(-1)},intervalspace);
function stream_move(d){
clearInterval(interval)
var inewleft = parseInt($('#stream_images ul').css('left')) + (d * imagewidth);
$('#stream_images ul').animate({'left':inewleft},200, function(){
if (d == -1){
$('#stream_images li:last').after($('#stream_images li:first'));
}else{
$('#stream_images li:first').before($('#stream_images li:last'));
}
$('#stream_images ul').css({'left':-imagewidth});
});
var tnewleft = parseInt($('#stream_title ul').css('left')) + (d * textwidth);
$('#stream_title ul').animate({'left':tnewleft},200, function(){
if(d == -1){
$('#stream_title li:last').after($('#stream_title li:first'));
}else{
$('#stream_title li:first').before($('#stream_title li:last'));
}
$('#stream_title ul').css({'left':-textwidth});
});
interval = setInterval(function(){stream_move(-1)},intervalspace);
return false;
}
$('#stream_control #left').click(function(){
stream_move(-1);
});
$('#stream_control #right').click(function(){
stream_move(1);
});