Advanced Search

Results 1 to 5 of 5

Thread: DD Image scroller how can I get it to move with dragging mouse

  1. #1
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default DD Image scroller how can I get it to move with dragging mouse

    1) Script Title:
    Text and Image Crawler v1.53
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...wler/index.htm
    3) Describe problem:
    Hi, how can I modify this script in order to drag the crawler side to side instead of being automatic?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Use this updated version of the script (right click and 'Save As'):

    http://home.comcast.net/~jscheuer1/s.../crawlerca3.js

    It has a lot of new additions, read about them inside the script if you're interested.

    For what you want though, just use 'drag' for the mouse property and 0 for the inc, ex:

    Code:
    <script type="text/javascript">
    marqueeInit({
    	uniqueid: 'mycrawler',
    	style: {
    		'padding': '5px',
    		'width': '450px',
    		'background': 'lightyellow',
    		'border': '1px solid #CC3300'
    	},
    	inc: 0, //speed - pixel increment for each iteration of this marquee's movement
    	mouse: 'drag' //mouseover behavior ('pause' 'cursor driven' or false)
    
    });
    </script>
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If there are any problems, just lest me know.

    Or you can have an inc, but then it gets hard to drag the crawler. You drag it, then if you reposition the mouse to get a better hold on it to drag it farther, it starts moving again. But you can setup a toggle button to turn it on and off. If you want to know how that works, just ask.
    Last edited by jscheuer1; 07-11-2013 at 08:15 AM. Reason: code improved, English usage
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    okay_thanks (07-11-2013)

  4. #3
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    WOW. This is working great! Thank you.
    I was also wondering if there is a way to dynamically update the marquee as you click so we can add the images 1 at a time?
    I have this simple javascript code I have written and I have an onclick attribute in the div.
    <div class="marquee" id="scroller" style="overflow: hidden;" onclick="loadImage(this);">
    Is there a way to modify the code to these specifications?
    Code:
    	
    function loadImage(where){
    	var img = document.createElement("img");
      	img.src = "2.jpeg"; 
      	img.style.position="static";
      	img.style.float = "left";
      	img.style.overflow="hidden";
      	img.width=350;
      	img.height=350;
      	where.parentNode.appendChild(img);
    	}

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    The only two ways to add an image or images to the crawler once it's there I can think of are to either insert them into the crawler as it is (it's no longer .marquee#scroller, and has two internal divs that contain duplicate trains of images, so the image would have to be cloned and put into each of those) and then running the scripts resize function. Or, completely removing the crawler as it is, replacing it with what it was before it was initialized, which would have had to have been saved, then adding the image and reinitializing it. I actually have done something like the latter before and it works. The former would be tidier for your purposes, but would require further customization of the script, and I'm not certain it would be workable. When I have more time I will look into it.

    I have to break for lunch, then errands, then some things around the house that need attention. So later tonight or tomorrow. Maybe over the weekend. If it doesn't work, I'll show you how to save, remove, reinit.
    - John
    ________________________

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

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    OK, I tried with only updating the content and then resizing. It didn't work. Then I decided to make updating via the other method I mentioned (removing and replacing the crawler) a part of the script. In so doing I noticed a lot of other things I wanted to change. But to make a long story short (or at least shorter than it would be if I went into all of that), for what you're asking, use the latest alpha version of the script (not all of the latest changes are documented in its comment section, right click and 'Save As'):

    http://home.comcast.net/~jscheuer1/s...crawlerca5s.js

    And, when you init your crawler, use a unique variable name to set it to, example:

    Code:
    <script type="text/javascript">
    var crawler1 = marqueeInit({
    	uniqueid: 'mycrawler',
    	style: {
    		'padding': '5px',
    		'width': '450px',
    		'background': 'lightyellow',
    		'border': '1px solid #CC3300'
    	},
    	inc: 0, //speed - pixel increment for each iteration of this marquee's movement
    	mouse: 'drag' //mouseover behavior ('pause', 'cursor driven', 'drag', 'drag pause', 'drag cursor driven', or false)
    
    });
    </script>
    Then, when you want to update it you can do like:

    Code:
    crawler1 = crawler1.update(the_new_content);
    So you could make up an image like you have in your post:

    Code:
    function loadImage(){
    	var img = document.createElement("img");
      	img.src = "2.jpeg"; 
      	img.style.position="static";
      	img.style.float = "left";
      	img.style.overflow="hidden";
      	img.width=350;
      	img.height=350;
      	crawler1 = crawler1.update(img);
    }
    But I would advise against adding all that style to it. The script will style the image so that it behaves properly in the crawler. However, it's fine to set the width and height of the image, even required if the dimensions you are setting are different than the image's native dimensions.

    Alternatively you can simply add it as HTML:

    Code:
    crawler1 = crawler1.update('<img src="2.jpg" alt="" width=350 height=350>');
    which is good if you have more than one to add at once:

    Code:
    crawler1 = crawler1.update('<img src="2.jpg" alt="" width=350 height=350><img src="3.jpg" alt="" width=350 height=350>');
    There are other ways. You can add an image by its id if it's already on the page, perhaps in a hidden div. Or you can add an entire div full of images by its id if it's a div on the page (again, perhaps hidden) - only the images will be added:

    Code:
    crawler1 = crawler1.update(document.getElementById('some_div_or_img_id'));
    Or you can create a div element, fill it with created img elements and use a reference to the div element, all of its images will be added:

    Code:
    crawler1 = crawler1.update(reference_to_the_created_div);
    Other things you can do are change the default options for the crawler, like its mouse, style, moveatleast, inc, etc., properties (any of the properties that can be set when you first create a crawler, except of course its uniqueid property) by adding an options object after the new content:

    Code:
    crawler1 = crawler1.update('<img src="2.jpg" alt="" width=350 height=350>', {inc: 10, mouse: 'drag cursor driven'});
    If you add overwrite: true (with or without other option changes):

    Code:
    crawler1 = crawler1.update('<img src="2.jpg" alt="" width=350 height=350>', {overwrite: true});
    The new content will overwrite that in the current crawler, rather than add to it. You can even use update to simply change the options:

    Code:
    crawler1 = crawler1.update(null, {inc: 10, mouse: 'drag cursor driven'});
    Finally, you can specify a third parameter 'horizontal' or 'vertical' to change the orientation of the crawler (it's dimensions via its style object option should probably be changed as well if you want to do this, and the layout of the page would have to be flexible enough or at least have room enough for the changed direction crawler).

    But, as I say, for what you asked for, simply adding an image, just create it and add a reference to it using the update function (first example above).

    One thing you may have noticed is that I used mouse: 'drag cursor driven' Drag can now be used by itself or combined with either 'pause' or 'cursor driven'

    Any questions, just let me know.
    Last edited by jscheuer1; 07-15-2013 at 06:32 AM. Reason: add a coma
    - John
    ________________________

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

Similar Threads

  1. javascript on mouse move
    By akanesakura in forum JavaScript
    Replies: 5
    Last Post: 11-03-2008, 02:41 AM
  2. Replies: 1
    Last Post: 05-25-2007, 03:39 PM
  3. Move An MC Away From Mouse Movements...
    By tomyknoker in forum Flash
    Replies: 1
    Last Post: 05-23-2007, 03:01 PM
  4. IE mouse dragging in iframe
    By jamiller in forum HTML
    Replies: 5
    Last Post: 05-13-2007, 02:32 AM
  5. Move the mouse over a link and have the image of your choice
    By thebommer2005 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-06-2006, 04:20 PM

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
  •