Log in

View Full Version : Jittery effect problem when using Text and Image Crawler v1.5


a.s.
09-06-2011, 10:50 PM
1) Script Title: Text and Image Crawler v1.5

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

3) Describe problem:

It was working absolutely fine and now images are "shaking" while moving at any speed. I tried to use conveyor belt script instead the crawler.js - same jittery effect. Please help. This is the first web page I'm making myself. How to make pictures to run smoothly with mouse stopover?



<body>

<?php include 'includes/header.php'; ?>





<div id="main" role="main">



<div class="marquee" id="mycrawler3">
<img src="images/colour/01.png" width="624" height="624" />
<img src="images/colour/02.png" width="624" height="624" />
<img src="images/colour/03.png" width="624" height="624" />
<img src="images/colour/04.png" width="624" height="624" />
<img src="images/colour/05.png" width="624" height="624" />
<img src="images/colour/06.png" width="624" height="624" />
<img src="images/colour/07.png" width="624" height="624" />
<img src="images/colour/08.png" width="624" height="624" />
<img src="images/colour/09.png" width="624" height="624" />
<img src="images/colour/10.png" width="624" height="624" />
<img src="images/colour/11.png" width="624" height="624" />
<img src="images/colour/12.png" width="624" height="624" />
<img src="images/colour/13.png" width="929" height="624" />
<img src="images/colour/14.png" width="624" height="624" />
<img src="images/colour/15.png" width="624" height="624" />
<img src="images/colour/16.png" width="624" height="624" />
<img src="images/colour/17.png" width="943" height="624" />

</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler3',
style: {
'padding': '2px',
'width': '100%',
'height': '624px',
'background-color': '#000',
'margin-bottom': '100px'
},
inc: 10, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'pause', //mouseover behavior ('pause' 'cursor driven' or false)
direction: 'left',
moveatleast: 10,
neutral: 160,
savedirection: false,
random: false,
stopped: true


});
</script>

</div>


<?php include 'includes/footer.php'; ?>

</body>
jscheuer1
09-08-2011, 02:49 PM
There are many factors that can impact that. Some that are beyond your control:


CPU speed - faster is better
Browser - not sure which is best for this script
Graphics card - one that writes more frames per nanosecond is better
Monitor - one that has a higher refresh rate is better
Memory - maybe, if so more is better


Others you can:


Speed of the Crawler - slower is smoother
Number of images in the Crawler - less is smoother
Size of the images in the Crawler - smaller is smoother


There could be others in each category, those are just the ones I can think of at the moment.
djr33
09-08-2011, 04:53 PM
It's shaking for me at the moment. I'm using FF on a computer at my university. It's not top of the line, but it works well enough for browsing.

I think it may be a problem with the design of the script: so many images are all held in memory that it is just overloading the browser. Maybe a different script would work around this by not holding all of the images in memory at the same time. I'm not sure what the best workaround would be. On a faster computer, I'm sure it would be fine.

This is based on the demo page. Your specific code is probably irrelevant-- this is an inherent property of the script. But to confirm: do you have the same problems on the demo page, or is it worse on your page? If it is worse and you have more images than in the demo, that is clearly the reason, though the solution is not clear.

One simple option is to change from a scroller to a slideshow: just switch from one image to the other. That won't have any graphics issues like this, even (hopefully) on slow computers.
jscheuer1
09-08-2011, 05:18 PM
There's also another option, a script that moves in steps. One on DD here is:

http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

Others from elsewhere (They have more or at least different options, perhaps other advantages/disadvantages):

http://sorgalla.com/jcarousel/

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

There are quite a number of these around.
a.s.
09-09-2011, 04:52 PM
Thank you for replies and advice. I have probably too big and too many images to make it work smoothly. At the moment looking for different solution with a custom horizontal scrollbar to place it under the div with all images. Can u recommend one to use?
Ive spent a day trying to integrate this one http://jscrollpane.kelvinluck.com/; but can t find out how to get rid of a vertical and use only horizontal scrollbar.

im far far from pro in any of this, which makes things close to magic-)