I am attempting to modify a jQuery vertical news ticker for a customer and cannot see a simple way to do it in the code.
The following webpage is my testing area for this:
http://www.tecuity.com/sos
The "More Quick Links" section on the right hand side of the page scrolls its elements vertically in groups of three. I need it to scroll one element at a time both automatically on the timer and manually when a user clicks on the up and down arrows.
I realize that the code implementing the animation is driven off of the number of displayed items and not the total number of items. If anyone understands this better and can let me know if there is a fairly simple method to adjust the sliding interval to one at a time, I would appreciate it very much. Or if anyone knows of a different code snippet I can use, that is an option. Must be auto and manual though.
Thanks.
The jquery function I am using is as follows:
The html is as follows:
The following webpage is my testing area for this:
http://www.tecuity.com/sos
The "More Quick Links" section on the right hand side of the page scrolls its elements vertically in groups of three. I need it to scroll one element at a time both automatically on the timer and manually when a user clicks on the up and down arrows.
I realize that the code implementing the animation is driven off of the number of displayed items and not the total number of items. If anyone understands this better and can let me know if there is a fairly simple method to adjust the sliding interval to one at a time, I would appreciate it very much. Or if anyone knows of a different code snippet I can use, that is an option. Must be auto and manual though.
Thanks.
The jquery function I am using is as follows:
(function($) {
$.fn.extend({
jsCarousel: function(options) {
var settings = $.extend({
scrollspeed: 1500,
delay: 6000,
itemstodisplay: 5,
autoscroll: false,
circular: true,
masked: true,
onthumbnailclick: null,
orientation: 'v'
}, options);
return this.each(function() {
var oclass = 'horizontal';
if (settings.orientation == 'v')
oclass = 'vertical';
var slidercontents = $(this).addClass('jscarousal-contents-' + oclass + '');
var slider = $('<div/>').addClass('jscarousal-' + oclass + '').attr('id', slidercontents.attr('id'));
var backbutton = $('<div/>').addClass('jscarousal-' + oclass + '-back');
var forwardbutton = $('<div/>').addClass('jscarousal-' + oclass + '-forward');
slidercontents.removeAttr('id');
slidercontents.before(slider);
slider.append(backbutton);
slider.append(slidercontents);
slider.append(forwardbutton);
var total = $('> div', slidercontents).css('display', 'none').length;
var index = 0;
var start = 0;
var current = $('<div/>');
var noOfBlocks;
var interval;
var display = settings.itemstodisplay;
var speed = settings.scrollspeed;
var top;
var left;
var height;
var containerHeight;
var containerWidth;
var direction = "forward";
var scrolling = true;
function initialize() {
index = -1;
noOfBlocks = parseInt(total / display);
if (total % display > 0) noOfBlocks++;
index = noOfBlocks - 1;
var startIndex = 0;
var endIndex = display;
var copy = false;
var allElements = $('> div', slidercontents);
$('> div', slidercontents).remove();
if (settings.masked)
allElements.addClass('thumbnail-inactive').hover(function() { $(this).removeClass('thumbnail-inactive').addClass('thumbnail-active'); }, function() { $(this).removeClass('thumbnail-active').addClass('thumbnail-inactive'); })
for (var i = 0; i < noOfBlocks; i++) {
if (total > display) {
startIndex = i * display;
endIndex = startIndex + display;
if (endIndex > total) {
startIndex -= (endIndex - total);
endIndex = startIndex + display;
copy = true;
}
}
else {
startIndex = 0;
endIndex = total;
}
var wrapper = $('<div/>')
allElements.slice(startIndex, endIndex).each(function(index, el) {
if (!copy)
wrapper.append(el);
else wrapper.append($(el).clone(true));
});
wrapper.find("img").click(
function() {
if (settings.onthumbnailclick != null) {
settings.onthumbnailclick($(this).attr('src'));
}
});
slidercontents.append(wrapper);
}
if (settings.onthumbnailclick != null)
$('> div > div', slidercontents).css('cursor', 'pointer');
$('> div', slidercontents).addClass('hidden');
$('> div > div', slidercontents).css('display', '');
/*vertical*/
if (settings.orientation == 'v') {
top = $('> div:eq(' + index + ')', slidercontents).css('top');
if (top == 'auto') top = "0px";
containerHeight = slidercontents.height();
height = slidercontents.get(0).offsetHeight;
$('> div', slidercontents).css('top', '-' + containerHeight + 'px');
$('> div:eq(' + index + ')', slidercontents).stop(false, true).animate({ 'top': top }, speed, function() { scrolling = false; });
}
/*horizontal*/
if (settings.orientation == 'h') {
left = $('> div:eq(' + index + ')', slidercontents).css('left');
containerWidth = slidercontents.width();
height = slidercontents.get(0).offsetHeight;
$('> div', slidercontents).css('left', '-' + containerWidth + 'px');
$('> div:eq(' + index + ')', slidercontents).stop(false, true).animate({ left: 0 }, speed, function() { scrolling = false; });
}
$('> div:eq(' + index + ')', slidercontents).addClass('visible').removeClass('hidden');
slider.mouseenter(function() { if (settings.autoscroll) stopAnimate(); }).mouseleave(function() { if (settings.autoscroll) animate(); });
if (settings.autoscroll)
animate();
forwardbutton.click(function() {
if (!scrolling) {
direction = "forward";
if (settings.circular)
if (index <= 0) index = noOfBlocks;
showThumbs();
}
});
backbutton.click(function() {
if (!scrolling) {
direction = "backward";
if (settings.circular)
if (index >= noOfBlocks - 1) index = -1;
showThumbs();
}
});
}
initialize();
function stopAnimate() {
scrolling = false;
clearTimeout(interval);
slider.children().clearQueue();
slider.children().stop(false, true);
}
function animate() {
clearTimeout(interval);
if (settings.autoscroll)
interval = setTimeout(changeSlide, settings.delay);
}
function changeSlide() {
if (direction == "forward") {
if (index <= 0) index = noOfBlocks;
} else {
if (index >= noOfBlocks - 1) { index = -1; }
}
showThumbs();
interval = setTimeout(changeSlide, settings.delay);
}
function getDimensions(value) {
return value + 'px';
}
function showThumbs() {
scrolling = true;
var current = $('.visible', slidercontents);
var scrollSpeed = speed;
if (direction == "forward") {
index--;
if (index >= 0) {
if (settings.orientation == 'v') {
$('>div:eq(' + index + ')', slidercontents).css('top', getDimensions(containerHeight)).removeClass('hidden').addClass('visible').stop(false, true).animate({ 'top': top }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'top': '-=' + getDimensions(containerHeight) }, scrollSpeed, function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('top', top);
scrolling = false;
});
}
else {
$('>div:eq(' + index + ')', slidercontents).css('left', getDimensions(containerWidth)).removeClass('hidden').addClass('visible').stop(false, true).animate({ 'left': '-=' + getDimensions(containerWidth) }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'left': '-=' + getDimensions(containerWidth) }, scrollSpeed, function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('left', left);
scrolling = false;
});
}
}
else
index = 0;
}
else if (direction == "backward") {
index++;
if (index < noOfBlocks) {
if (settings.orientation == 'v') {
$('>div:eq(' + index + ')', slidercontents).removeClass('hidden').addClass('visible').css({
'top': getDimensions(-containerHeight)
}).stop(false, true).animate({ 'top': top }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'top': '+=' + getDimensions(containerHeight) }, scrollSpeed,
function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('top', getDimensions(-containerHeight));
scrolling = false;
});
}
else {
$('>div:eq(' + index + ')', slidercontents).removeClass('hidden').addClass('visible').css({
'left': getDimensions(-containerWidth)
}).stop(false, true).animate({ 'left': '+=' + getDimensions(containerWidth) }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'left': '+=' + getDimensions(containerWidth) }, scrollSpeed,
function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('left', getDimensions(-containerWidth));
scrolling = false;
});
}
} else index = noOfBlocks - 1;
}
}
});
}
});
})(jQuery);
The html is as follows:
<script type="text/javascript">
$(document).ready(function() {
$('#carouselv').jsCarousel({
autoscroll: true,
itemstodisplay: 3,
scrollspeed: 1500,
delay: 6000
});
});
</script>
<style type="text/css">
#qlink a
{
font-weight:bold;
}
.ql-img
{
padding-right: 10px;
float: left;
width: 50px;
height: 50px;
}
.ql-innertext
{
padding:10px 0;
border-bottom: 1px solid #517da6;
min-height:112px;
}
.jscarousal-vertical
{
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.jscarousal-vertical-back, .jscarousal-vertical-forward
{
width: 100%;
height: 14px;
color: black;
position: relative;
cursor: pointer;
z-index:100;
}
.jscarousal-vertical-back
{
background-image: url(images/qlink_up.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
.jscarousal-vertical-forward
{
background-image: url(images/qlink_down.jpg);
background-repeat: no-repeat;
background-position: top;
}
.jscarousal-contents-vertical
{
overflow: hidden;
height: 410px;
}
.jscarousal-contents-vertical > div
{
position: absolute;
top: 22px;
width: 100%;
height: 820px;
overflow: hidden;
}
.hidden
{
display: none;
}
.visible
{
display: block;
}
</style>
<h3 class="toplong">More Quick Links</h3>
<div id="qlink">
<div id="vWrapper">
<div id="carouselv">
/*Element 1*/
<div class="ql-innertext">
<img />
<span></span>
</div>
/*Element 2*/
<div class="ql-innertext">
<img />
<span></span>
</div>
/*Element 3*/
<div class="ql-innertext">
<img />
<span></span>
</div>
/*Element 4*/
<div class="ql-innertext">
<img />
<span></span>
</div>
/*Element 5*/
<div class="ql-innertext">
<img />
<span></span>
</div>
</div>
</div>
</div>
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Distinguished Expert awards are presented to the top veteran and rookie experts to earn the most points in the top 50 topics.