Results 1 to 5 of 5

Thread: Jittery effect problem when using Text and Image Crawler v1.5

  1. #1
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Jittery effect problem when using Text and Image Crawler v1.5

    1) Script Title: Text and Image Crawler v1.5

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...wler/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?

    Code:
    <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>
    Last edited by djr33; 09-06-2011 at 11:02 PM. Reason: fix [/code] tag

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There's also another option, a script that moves in steps. One on DD here is:

    http://www.dynamicdrive.com/dynamici...epcarousel.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-s...-jquery-slider

    There are quite a number of these around.
    Last edited by jscheuer1; 09-08-2011 at 05:27 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default thank u

    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-)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •