|
JavaScript - Javascript Infinate Scroller Issue With Code And Animation
Hi guys,
I have a little experience in Javascript and would like to learn a bit more etc. I am currently working for a company which wants me create / find a image scroller using javascript and jquery. I found one which seems very suitable... I have customized the CSS and have coded it all up... The problem i'm having is that the image scroller is scrolling 3 images at a time. I would like it to scroller one at a time whilst showing all the images... Example scroller: [ pic 1] [pic 2] [pic 3] [pic 4] after scroll [pic 2] [pic 3] [pic 4] [pic 1] after next scroll [pic 3] [pic 4] [pic 1] [pic 2] and so forth. If you look at this code you will see what I mean... please help me learn and please help me complete this... im sure its just a little adjustment... but me not being too great at javascript... it makes me feel like im shooting in the dark. Thanks alot Code: <style type="text/css" media="screen">
<!--
body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; }
#textbanner {width:168px; height:118px; float:left;}
.infiniteCarousel {
width: 618px;
position: relative;
}
.infiniteCarousel .wrapper {
width: 618px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
height: 115px;
margin: 0 0px;
position: relative;
top: 0;
border: 1px solid #E1E1E1;
}
.infiniteCarousel ul a img {
border: 0px solid #666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.infiniteCarousel .wrapper ul {
width: 625px; /* single item * n */
list-style-image:none;
list-style-type:none;
margin:0;
padding:0px 0px 0px 4px;
position: absolute;
top: 0px;
left: 0px;
}
.infiniteCarousel ul li {
display:block;
float:left;
padding: 0px 0px 0px 0px;
height: 85px;
width: 206px;
}
.infiniteCarousel ul li img {
-webkit-transition: border-color 20ms;
}
.infiniteCarousel ul:hover li img {
border-color: #666;
}
.infiniteCarousel ul:hover li:hover img {
border-color: #000;
}
.infiniteCarousel ul li a img {
display:block;
}
.infiniteCarousel .forward {
background-position: 0 0;
right: 0;
}
.infiniteCarousel .back {
background-position: 0 -72px;
left: 0;
}
.infiniteCarousel .forward:hover {
background-position: 0 -36px;
}
.infiniteCarousel .back:hover {
background-position: 0 -108px;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
(function () {
$.fn.infiniteCarousel = function () {
function repeat(str, n) {
return new Array( n + 1 ).join(str);
}
return this.each(function () {
// magic!
var $wrapper = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul').width(9999),
$items = $slider.find('> li'),
$single = $items.filter(':first')
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapper.innerWidth() / singleWidth),
currentPage = 1,
pages = Math.ceil($items.length / visible);
/* TASKS */
// 1. pad the pages with empty element if required
if ($items.length % visible != 0) {
// pad
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
// 2. create the carousel padding on left and right (cloned)
$items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li');
// 3. reset scroll
$wrapper.scrollLeft(singleWidth * visible);
// 4. paging function
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 1000, function () {
// if page == last page - then reset position
if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
page = 1;
} else if (page == 0) {
page = pages;
$wrapper.scrollLeft(singleWidth * visible * pages);
}
currentPage = page;
});
}
// 6. bind the back and forward links
$('a.back', this).click(function () {
gotoPage(currentPage - 1);
return false;
});
$('a.forward', this).click(function () {
gotoPage(currentPage + 1);
return false;
});
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
// THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
$(this).bind('next', function () {
gotoPage(currentPage + 1);
});
});
};
})(jQuery);
$(document).ready(function () {
// THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
var autoscrolling = true;
$('.infiniteCarousel').infiniteCarousel().mouseover(function () {
autoscrolling = false;
}).mouseout(function () {
autoscrolling = true;
});
setInterval(function () {
if (autoscrolling) {
$('.infiniteCarousel').trigger('next');
}
}, 500);
});
</script>
</head>
<body>
<div id="textbanner"><img src="http://i46.tinypic.com/2r423yc.jpg" alt="" width="168" height="117" /></div>
<div class="infiniteCarousel">
<div class="wrapper">
<ul>
<li><a href="www.google.com"><img src="http://i49.tinypic.com/eu4x81.jpg" alt="" width="202" height="116" /></a></li>
<li><img src="http://i49.tinypic.com/2ex8ttw.jpg" alt="" width="202" height="116" /></li>
<li><img src="http://i45.tinypic.com/2gy0pkz.jpg" alt="" width="202" height="116" /></li>
</ul>
</div>
</div>
</body>
</html>
Similar TutorialsHi I have a javascript scroller on my site which was added automatically by the web design progam Web Page Maker. It works well..... but..... does anybody know how to make the scrolling faster on mousedown. Its painfully slow at the moment. I dont know ANYTHING about javascripting really. heres the code: <div id="g_iFrame1div" style="position:absolute; left:68px; top:273px; z-index:29"> <table border="0" cellpadding="0" cellspacing="0" width=628> <tr><td> <iframe src="iframes/news_latest.htm" name="g_iFrame1" width="606" height="487" src="" scrolling="no" frameborder="0"></iframe> </td><td align="center" valign="middle" width="22"><img src="arrow_up.gif" alt="up" border=0 vspace="5" hspace="3" onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(-3,2)" onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(-1,20)" onMouseOver="bsh_g_iFrame1(-1,20)" onMouseOut="esh_g_iFrame1()"><br> <img src="arrow_down.gif" alt="down" border=0 vspace="5" hspace="3" onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(3,2)" onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(1,20)" onMouseOver="bsh_g_iFrame1(1,20)" onMouseOut="esh_g_iFrame1()"> <script type="text/javascript" language="javascript"> function bsh_g_iFrame1(step,time){hs_g_iFrame1=setInterval("sh_g_iFrame1("+step+")",time)} function esh_g_iFrame1(){clearInterval(hs_g_iFrame1)} function sh_g_iFrame1(step) { scrollx=g_iFrame1.document.body.scrollLeft scrolly=g_iFrame1.document.body.scrollTop scrolly=scrolly+step g_iFrame1.window.scroll(scrollx,scrolly) } </script> thanks Stuey Hi, I'm trying to make something along the lines of a dynamic animated GIF. In other words, I'm trying to write a script to flip through images based on the current time. Before folks start suggesting other ways to do this, know that this is just a proof of concept. The reason for doing it this way is so that I can eventually control the animation either in response to interaction or external data queries (I'm looking into that js weather api). Code: int startTime = getTime();
float speed = 1.0;
image frames = new Array();
//load frames into array
for(int i = 0; i < 12; i++){
frames[i] = new Image(640,480);
frames[i].src = "frames/" + i + ".JPG";
}
//playback
int i = 0;
while(i < frames.length){
if( ((getTime()-startTime) % (speed*33)) == 0){
document.currentFrame.src = frames[i].src;
i++;
}
}
Thanks, Zach I have a basic scroller list code, which works when I use it on a HTML page. However if I duplicate it and change the text, only one of the lists functions. I even tried to use a script from a free website online and duplicate that on the page and it still does not work twice. Could somebody help with this? Hi, I will really appreciate if someone could take a look at my code below and inform me where I'm going wrong, because I can't seem to tell. The instructions a -the file starts with the text "Avalon Books" on the left edge of the page. -the text moves to the center of the page. -After the text reaches the center, the image file kids.jpg appears -Every two seconds thereafter, the image file is swapped with the next image file in the stack (there are 3 images in total). I am only posting the few relevant functions where the problem could be. All the other functions are working properly. I am new to JavaScript so any help will be really appreciated. Thank you This is the main file: Code: function placeObjects(){
var W = (0.5)*winWidth(); //gets the width of user's browser.
placeIt("avalon",0,0); //placeIt function is working fine.
placeIt("kids",W-75,100);
placeIt("fiction",W-75,100);
placeIt("nfiction",W-75,100);
setZ("kids",3); //setZ function is below.
setZ("fiction",2);
setZ("nfiction",1);
moveAvalon();
}
function moveAvalon(){
var x = xCoord("avalon");
if(x <= (W-125)){
shiftIt("avalon", 10, 0);
setTimeout("moveAvalon()",50);
}
else swapImages(); //if x is greater than W-125
}
function swapImages(){
showIt("kids");
showIt("fiction");
showIt("nfiction");
setTimeout("swapIt(kids,fiction,nfiction)",2000); //syntax could be wrong here?
}
</script>
</head>
<body onload="placeObjects()"> //calls the first function on load.
...............
</body>
</html>
and here is the second file that contains all the functions (I am posting 2 of those functions): Code: function setZ(id, z){
var object=document.getElementById(id);
object.style.zIndex="z";
}
function swapIt(id1, id2, id3){
var object1=getObject(id1);
var object2=getObject(id2);
var object3=getObject(id3);
var z1;
var z2;
var z3;
object1.style.zIndex="z1";
object2.style.zIndex="z2";
object3.style.zIndex="z3";
object1.style.zIndex="z3";
object2.style.zIndex="z1";
object3.style.zIndex="z2";
}
Hi, I created JavaScript animation and the picture after animation finished disappear. Could anyone tell me or point me how to resolve this kind of issue? I tested it in IE as well as Firefox.. I could send the code but it is quite long for posting, but the screenshots from before and after animation is finished are as below. thanks in advance for any help. trotsky Okay, I've posted the code with just the two fields needed to solve my problem. If I type in a date of 04/16/2011 in the "sentence date" field, then click the calculate button, the date 03/05/2011 is displayed in the "Due to Reviewer" field. It subtracts 42 days from the date enetred into the "Sentence Date" field. My problem is, sometimes when I type in a date in the "Sentence Date", such as 04/16/2011, 42 days prior falls on a weekend & I need it to always be on a weekday. So with that said, is it possible to put some type on function in the code where if the date falls on a weekend (Saturday or Sunday), it will roll back & display Friday's date? Thanks again for the help! <html> <head> <script type="text/javascript"> var valid; function d2(v) { return (v<10)?("0"+v):v; } function dcheck(form) { var s = form.sent_date.value; var sent = new Date(s); var dr = form.due_rev.value var due_rev = new Date(dr); if (isNaN(due_rev)) { due_rev = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-42); } form.sent_date.value = (sent.getFullYear()+0) + "-" + d2(sent.getMonth()+1) + "-" + d2(sent.getDate()); form.due_rev.value = (due_rev.getFullYear()+0) + "-" + d2(due_rev.getMonth()+1) + "-" + d2(due_rev.getDate()); return true; } </script> </head> <body> <form method="post" action="add.php"> </select> </br> <b>Sentence Date: MM/DD/YYYY</b> <br /> <input type="text" name="sent_date" size="30" /><br /> <p><input type="button" value="Calculate" onclick="return dcheck(this.form);"> </p> <b>Due to Reviewer:</b> <br /> <input type="text" name="due_rev" size="30" /><br /> <br> </form> </body> </html> Hi, I'm trying to edit a script that allows multiple drop downs, and simply adds a table depending on the answers (ready for form submittion) this works 100% in firefox, but falls over in IE.... this is the code Code: <script type="text/javascript">
function f (sel) {
var d = document, dv;
if (d.getElementById) {
for (var ii=0; ii < sel.options.length; ii++) {
dv = d.getElementById(sel.options[ii].value);
if(dv) dv.style.display = sel.options[ii].selected? "block": "none";
}
}
}
function convf (sl) {
if (sl.selectedIndex==1) {
var disp = document.getElementById('yesc');
disp.style.display='block';
} else {
var disp = document.getElementById('yesc');
disp.style.display='none';
}
}
</script>
<!--[if IE]>
<script type="text/javascript">
function f(sel){
var d=document, dv;
if(d.getElementById){
for(var ii=0; ii<sel.options.length; ii++){
dv=d.getElementById(sel.options[ii].text);
if(dv)
dv.style.display=sel.options[ii].selected?"block":"none";
}
}
}
</script>
<![endif]--> <script type="text/javascript">
function showhide()
{
var radi = document.getElementById('radio1');
var row1 = document.getElementById('one');
var row2 = document.getElementById('two');
if (radi.checked == true) {
row1.style.display = '';
row2.style.display = 'none';
}
else {
row1.style.display = 'none';
row2.style.display = '';
}
}
</script>
any ideas why this wont work? http://www.engtechjobs.co.uk/candreg.php I can get the lightbox to work perfectly fine, and I love how seamlessly it works, I however am running some more java script on my page and am running into some problems. When I apply the lightbox it takes away the functionality of my other script, and I am not sure why this is so. I am using 2.04 version of lightbox: http://www.huddletogether.com/projects/lightbox2/ Here is the other script that is getting either turned off or overridden, I'm not quiet sure. <script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 3750); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script> I am assuming there is some conflict with either an onload..or something I'm really not sure I would greatly appreciate your help. Hi, I have beginner skills using JS and, with alot help, have developed a script for an animation of a white noise pattern (TV screen noise). I need to use the animation in an eLearning educational lesson. The animation works OK but the sharpness of the animated pixels is poor (for example, looks blurry in FF). I wonder if someone can suggest a way to sharpen the animation? This would be a big help. The CSS simply creates a 640 x 640 canvas: canvas{ border:1px solid black; height:640px; width:640px; } The JS for the animation follows: (function(){ var viewbmd, px = [], timer, itsNoisy, stage, random = Math.random ; init(); function init(){ stage = document.querySelector("canvas"); viewbmd = stage.getContext("2d"); itsNoisy = true; stage.onclick = manageNoise; initNoise(); timer = setInterval(onTick, 50) } function initNoise(){ var array = [], d, val; for (var i = 0; i < 255; i++) { array[i] = 0xffffff * (i % 2); } for(i = 0; i < 6400; i++){ d = random()*256|0; val = array[d]; viewbmd.fillStyle = "rgb(" + val + ", " + val + ", " + val + ")"; viewbmd.fillRect(i%80, ((i)/80)|0, 8, 8); } px = viewbmd.getImageData(0, 0, 80, 80); } function onTick(){ flipSomePixels(160); viewbmd.putImageData(px, 0, 0); } function flipSomePixels(howMany/*:int*/){ for (var i = 0; i < howMany; i++){ var pxidx = (Math.random()*(px.data.length/4))|0; for(var j = 0; j < 3; j++){ px.data[pxidx*4+j] = !px.data[pxidx*4+j] ? 255 : 0; } } } function manageNoise(){ itsNoisy ? clearInterval(timer) : timer = setInterval(onTick, 50); itsNoisy = !itsNoisy; } })(); Any help appreciated. Kind Regards, saratogacoach I've got a code. I've listed it below. The only question I have which I am sure I'm just overlooking it, but I need to find a way to squeeze this to the top of the screen and to the left. Where can I modify this on this code? The first section is the whole file. Thanks! Edit: I'm trying to remove the awkward gap on top and to the left. I merged the .js file since this will only be a file that is updated with new news. Code: <html>
<head>
<script type="text/javascript">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
/* Update 4/2011 to v1.5 - Adds optional random property. Set it to true to use.
Fixes browser crash from empty crawlers, ad and image blocking software/routines.
Fixes behavior in some IE of breaking script if an image is missing.
Adds alt attributes to images without them to aid in diagnosis of missing/corrupt
images. This may be disabled with the new optional noAddedAlt property set to true.
Internal workings enhanced for greater speed of execution, less memory usage.
*/
///////////////// No Need to Edit - Configuration is Done in the On Page Call(s) /////////////////
function marqueeInit(config){
if(!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function(){
if(!document.createElement) return;
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0, tTRE = [/^\s*$/, /^\s*/, /\s*$/, /[^\/]+$/],
req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = /(-(.))/;
String.prototype.encamel = function(s, m){
s = this;
while((m = dash.exec(s)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
@end @*/
if(!ie5){
dash = /-(.)/g;
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
}
if(ie && iever < 8){
marqueeInit.table = [];
window.attachEvent('onload', function(){
marqueeInit.OK = true;
for(var i = 0; i < marqueeInit.table.length; ++i)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el){
while((el = el.parentNode))
if(el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id){
if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
marqueeInit.table.push(id);
return;
}
if(!document.getElementById(id))
setTimeout(function(){marqueeInit.run(id);}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag){
var r = [], i = 0, e;
while((e = tag.firstChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while((e = tag.lastChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if((e = tag.firstChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if((e = tag.lastChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function randthem(tag){
var els = oldie? tag.all : tag.getElementsByTagName('*'), i = els.length - 1, childels = [], newels = [];
for (i; i > -1; --i){
if(els[i].parentNode === tag){
childels.push(els[i]);
newels.push(els[i].cloneNode(true));
}
}
newels.sort(function(){return 0.5 - Math.random();});
i = childels.length - 1;
for (i; i > -1; --i){
tag.replaceChild(newels[i], childels[i]);
}
}
function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
if(this.mq.random){
randthem(tag);
}
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse === 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
if(!ims[i].alt && !this.mq.noAddedAlt){
ims[i].alt = (tTRE[3].exec(ims[i].src)) || ('Image #' + [i + 1]);
if(!ims[i].title){ims[i].title = '';}
}
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete === 'boolean' && ims[i].complete)
ic++;
else {
ims[i].onload = ims[i].onerror = function(){
if(++ic === ims.length)
cObj.setup(c);
};
}
if(ic === ims.length)
this.setup(c);
}
}
else this.setup(c)
}
Marq.prototype.setup = function(c){
if(this.mq.setup) return;
this.mq.setup = this;
var s, w, cObj = this, exit = 10000;
if(this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if(this.mq.mouse === 'cursor driven'){
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
if(this.mq.moveatleast){
this.mq.inc = this.mq.moveatleast;
if(this.mq.savedirection){
if(this.mq.savedirection === 'reverse'){
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction === 'right'? 'left' : 'right';};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;};
}
} else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
}
else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s && --exit){
w = isNaN(this.cw[0])? this.w - s : --this.cw[0];
if(w < 1 || this.w < Math.max(1, s)){break;}
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
}
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function(){
var cObj = this;
if(this.mq.inc){
this.mq.inc -= 1;
this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
}
}
Marq.prototype.runit = function(){
var cObj = this, d = this.mq.direction === 'right'? 1 : -1;
if(this.mq.stopped || this.mq.stopMarquee){
setTimeout(function(){cObj.runit();}, 300);
return;
}
if(this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if(d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if(d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e){
e = e || window.event;
if(this.timer) clearTimeout(this.timer);
var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX === 'number'?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2, rb = (w + this.r) / 2;
while((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb? 'left' : 'right';
this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e){
if(e && e.relatedTarget){var c = e.relatedTarget; if(c === this.c) return true;
while ((c = c.parentNode)) if(c === this.c) return true;}
return false;
}
function resize(){
for(var s, w, m, i = 0; i < marqueeInit.ar.length; ++i){
if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
while(m.c.offsetWidth > m.w - s){
w = isNaN(m.cw[0])? m.w - s : --m.cw[0];
if(w < 1){break;}
m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
}
if (window.addEventListener)
window.addEventListener('resize', resize, false);
else if (window.attachEvent)
window.attachEvent('onresize', resize);
})();
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
</script>
</head>
<body>
<font color="white" face="arial" size="2" background="#0066CC">
<div class="marquee" id="mycrawler" align="left">
2/21/12 Today is testing the marquee. This will be used for announcements. Stay tuned!!!                        
</div></font>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '1px',
'width': '1000px', //change to 1000 for normal, change to 0 for off
'background': '#0066CC',
'border': '0px solid black'
},
inc: 1, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'false', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true
});
</script>
</body>
</html>
I am using a Theme Tester on my site so normal users can not see the changes being made. If you can help me, please send me a PM & I will give you a temporary login so you can login & see the new site, and the issue I am having. Basically, I am trying to get this http://flowplayer.org/tools/demos/sc.../navigator.htm scroller to work, but it is not happening at all. Not sure what is going on. Please advise. Thanks! Hi, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...
Would anyone know why (and the fix) when I place my cursor over the scrolling thumbnails under the main slideshow rotator on my site they "disappear"? http://americanwebmakers.com/demo_college Thanks in advance! Hello, i'm trying to post news on my site. so i was able to reached this http://www.shmtestforums.uphero.com/...ller/test.html but i couldn't get, exactly what i want. i really want is when load the page it should shows only 3 rows then after few seconds(say 2 seconds), the 1st row should disappear and bellow 3 rows should come up (eg. when google_1 row is disappear, google_2 & google_3 & google_4 rows should come up) this rotation should be continuous i tried this many. but no positive result. so please.... please....help me to solve this. this is the problematic java script, Code: <script type="text/javascript">
var scrollspeed=cache=1
var initialdelay=500
function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}
function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}
function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}
if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller
</script>
thank you . Does anyone have a scroller that goes side to side, to display links for a website? I have a similar thing that goes up and down: www.sjwum.org This one will not adapt to side to side. So who knows of a scroller that moves horizontally and when you click on something it is a link to another page on the website? Thanks Hey fellow coders. I've been searching for a script, but I'm coming up empty. The script will display products in a single row full screen left to right. To slide the products there is a pull bar. You can see how the exact script works on http://www.logitech.com/en-us/keyboards/keyboards. Does anybody know of a complete script, or at least one that is close enough to alter. Thanks much.
I need to make a very simple text scroller (either vertical or horizontal) using JavaScript. Can anyone point me in the right direction? Thank you I can't seem to find what I need but I know it exists. I trying to find a vertical scroller that will automatically have the text scroll upwards but have an arrow above and arrow below to be able to control the direction of the scrolling text, or a script with no arrows but still allow me to take control by mousing over the text to scroll up or down. Thanks Hi All, I am trying to introduce a vertical scroller to my site, I got the code from a tutorial and slightly tweaked the html to meet my needs but now the content doesn't scroll. Would someone be willing to take a quick look and see if they can spot anything? None of this code has been altered! Code: <script type="text/javascript">
$(document).ready(function(){
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible:10,
auto:500,
speed:1000
});
});
</script>
This is the HTML and PHP part: Code: <div id="newsticker-demo">
<div class="newsticker-jcarousellite">
<br/>
<?php
$query = mysql_query("SELECT * FROM employers WHERE featured = 'Yes' AND image != '' ORDER BY rand()");
$i=0;
//$query = mysql_query("SELECT * FROM employers WHERE f_emp_active = 'Yes' and image !='' ORDER BY rand()");
echo '<div>';
while ($aqm=mysql_fetch_array($query)){
?>
<div>
<div>
<div class="thumbnail">
<div align="center"><a href="company.php?companyname=<?php echo $string ?>">
<img src="<?=$fullurl?>/thumbnail.php?gd=2&src=employers/logo/big/<?=$aqm[image]?>&maxw=<?=$a18[width]?>" alt="<?=$aqm[companyname]?>" title="<?=$aqm[companyname]?>" class="noborder" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<br/>
<br/>
<?php
if($i==5){
echo '</div><div>';
}
$i++;
}
echo '</div>';
?>
</div>
</div>
|
|||||||