I would also like to see this. Does it remove the gap after a certain amount of content is inserted or will it always have the gap?…even if there is a work-around until it’s coded into plugin please let us know….
Hi Guys –
Sorry for the extreme delay in response. I’ve been super busy. Out of vacation for 5 weeks and back to loads of work.
Just to set expectations, I work on the plugin only over the weekends. During the week, I have a full time job as a Systems Analyst.
I am getting a bunch of these requests and seems like I can’t get away with not doing this any longer. I will see if I can find a Open Source scroller and try to change the engine.
In the mean time, if you see any good jQuery scrollers that have gapless loops, please email me at pvamsik at hotmail dot com.
I would be extremely happy to see this. I have a state website that I am doing for a NFP organization that really loved your widget but the gap killed it.
For what I can provide for you, check this site http://www.lionsclubs.org/EN/index.php
After inspecting the element it looks like they have a div inside of a div and it changes position. Not sure if this helps or not but I checked the source of this and it’s a standard html page…so they are hooking into that page and doing this.
Thank you so much, I can’t wait for this to happen!
Ok, I messed with techryan’s link and stripped away the fat and left what little I understood and “normalized” some of the code to make it generic. I’ll include the html below. Hope it helps.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function(){
var speed = 50;
var delay = 300;
var mheight = $("#marquee").attr("height");
var kjoer;
$("<div></div>").addClass("alternate").height(mheight).css("position", "relative").css("overflow", "hidden").appendTo("body");
$("<div></div>").addClass("scroller").css({"position": "absolute", "top": "0px"}).appendTo(".alternate");
$("#marquee").hide().children().appendTo("div.scroller");
var dim = $(".scroller").clone().appendTo(".alternate").height();
$(".scroller:eq(1)").css("top", dim);
function scroll(){
$(".scroller").each(function(){
var a = parseInt($(this).css("top"));
$(this).css("top", a-1);
if (a<(0-dim)) tick($(this));
});
};
function tick(obj){
obj.css("top", dim);
};
function wait(){
kjoer = setInterval(scroll, speed);
}
var go = setTimeout(wait,delay)
$(".scroller").hover(function(){clearTimeout(go); clearInterval(kjoer);}
,function(){kjoer = setInterval(scroll, speed);})
});
</script>
</head>
<body>
<h2>Header</h2>
<div height="900" id="marquee">
<div class="article">Test1</div>
<div class="article">Test2</div>
<div class="article">Test3</div>
<div class="article">Test4</div>
<div class="article">Test5</div>
<div class="article">Test6</div>
<div class="article">Test7</div>
<div class="article">Test8</div>
<div class="article">Test9</div>
<div class="article">Test10</div>
</div>
</body>
</html>
Thanks nospam2k.
I was able to get much further but I have a problem. I cannot use this code in the plugin since the code has no License terms and as such cannot be used in open source code. We cannot use it in a plugin without explicit permission from the developer to do so.
If you do build a plugin with the code above, you’ll be using it in a gray area. I would suggest care when using on sites.
Thanks
Vamsi
I finally have a working continuous scroller. I need testers to test out my scroller. If you are interested, please go to my website http://sirisgraphics.com/ and send me an email using the Contact Us page.
Please be sure to send me your correct email. I will email the plugin as a zip file to you. Not putting the plugin on my site yet.
Thanks
Vamsi
