Results 1 to 3 of 3

Thread: Marquee Scroll with Text and Images updated from Another Document

  1. #1
    Join Date
    Jun 2019
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Marquee Scroll with Text and Images updated from Another Document

    I am looking for a Marquee Scroll which can pick up the content from another Text file on the server. The text should be reloaded after completing one scrolling cycle so that if the text file is updated the new content is automatically displayed in the next scrolling cycle. The format of Text file can be defined by the script. For example it can be like this with HTML tags to properly format the text.

    HTML Code:
    <div><font face="Arial Narrow" size="7"><b><img src="image 1.gif">Message Text 1</b></font></div>
    <div><font face="Arial Narrow" size="7"><b><img src="image 2.gif">Message Text 2</b></font></div>
    <div><font face="Arial Narrow" size="7"><b><img src="image 3.gif">Message Text 3</b></font></div>
    <div><font face="Arial Narrow" size="7"><b><img src="image 4.gif">Message Text 4</b></font></div>
    <div><font face="Arial Narrow" size="7"><b><img src="image 5.gif">Message Text 5</b></font></div>
    <div><font face="Arial Narrow" size="7"><b><img src="image 6.gif">Message Text 6</b></font></div>
    There is a similar example here http://www.dynamicdrive.com/dynamici...ajaxticker.htm which works fine but but it is not really a Marquee. t shows all the messages one by one with fade effect in a box. I need a Marquee which scrolls from right to left like a normal HTML Marquee. Can anybody help?
    Last edited by keyboard; 06-24-2019 at 12:45 PM. Reason: Format: HTML Tags

  2. #2
    Join Date
    Mar 2011
    Posts
    1,897
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    Ok so I hacked something together. Please note it is very rough and should not be used in production. I am writing this at 1AM and there are no comments.
    I will clean it up later.
    I'll post each piece of code separately, but I'll also attach a zip if you want to just download everything
    This is coded in ES6 which should be widely compatible now. If you need backwards compatibility you'll need to change that.

    index.html
    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="marquee.js"></script>
    		<link rel="stylesheet" type="text/css" href="marquee.css">
    	</head>
    	<body>
    		<div id="marquee"></div>
    	</body>
    	<script type="text/javascript">
    		let marquee = new Marquee({
    			"src": "test.txt",
    			"el": "marquee",
    			"delay": 3,
    			"duration": 10
    		});
    	</script>
    </html>
    marquee.js
    Code:
    class Marquee {
    	constructor(options) {
    
    		/*
    			options:
    
    				src:
    					Path to the text file containing new line delimited text to scroll (path relative from current location)
    					Default is "text.txt"
    
    				duration:
    					The amount of time in seconds for the text to scroll across the parent div (#marquee by default)
    					Default is 3 seconds
    
    				delay:
    					The amount of time between each chunk of text starting to scroll
    					Default is 3 seconds
    
    				el:
    					The ID of the element to put the scrolling text into
    					If this isn't provided, an element with ID #marquee is added to the page
    
    		*/
    
    		this.src = options.src || "text.txt";
    		this.duration = options.duration || 3;
    		this.delay = (options.delay * 1000) || 3000;
    
    		this.index = 0;
    		this.lines = [];
    
    		if(options.el) {
    			this.el = document.getElementById(options.el);
    		} else {
    			this.el = document.createElement("div");
    			this.el.id = "marquee";
    			document.body.appendChild(this.el);
    		}
    
    		this.loadFile(this.src);
    
    		setInterval(() => {
    			this.animate();
    		}, this.delay);
    		
    	}
    
    	loadFile(path) {
    		//Reset the index
    		this.index = 0;
    		let self = this;
    
    		//Load the file containing the text with an XMLHTTPRequest
    		let req = new XMLHttpRequest();
    		req.overrideMimeType("text/plain");
    		req.open("GET", `./${path}`, true);
    		req.onreadystatechange = function() {
    			//If the request worked
    			if(req.readyState == 4 && req.status == "200") {
    				self.lines = req.responseText.split("\n");
    			}
    		};
    		req.send();
    	}
    
    	animate() {
    		//Only animate if there's text available
    		if(this.lines.length == 0) {
    			return;
    		}
    
    		//Create a new div to contain the scrolling text
    		let textEl = document.createElement("div");
    		textEl.innerHTML = this.lines[this.index];
    		textEl.style.cssText = `animation-duration:${this.duration*2}s; -webkit-animation-duration:${this.duration*2}s`;
    
    		this.el.appendChild(textEl);
    
    		this.index += 1;
    
    		//If we've reached the last line in the text file, reload it
    		if(this.index === this.lines.length) {
    			this.loadFile(this.src);
    		}
    
    		//Remove the container div once the scrolling text is off-screen
    		setTimeout(this.removeElement.bind(this, textEl), this.duration * 1000 + 3000);
    	}
    
    	removeElement(textEl) {
    		this.el.removeChild(textEl);
    	}
    }
    marquee.css
    Code:
    @keyframes marquee {
    	from {
    		left:100%;
    	}
    	to {
    		left:-100%;
    	}
    }
    
    @-webkit-keyframes marquee {
    	from {
    		left:100%;
    	}
    	to {
    		left:-100%;
    	}
    }
    
    #marquee {
    	background:#AFEEEE;
    	width:50%;
    	overflow:hidden;
    	position:absolute;
    	height:20px;
    }
    
    #marquee div {
    	position:absolute;
    	white-space:nowrap;
    	animation-name:marquee;
    	animation-timing-function:linear;
    	animation-iteration-count:infinite;
    	-webkit-animation-name:marquee;
    	-webkit-animation-timing-function:linear;
    	-webkit-animation-iteration-count:infinite;
    }
    test.txt
    Code:
    <span style="color:blue">Example 1 - Blue</span>
    <span style="font-weight:bold">Example 2 - Bold</span>
    <span style="font-size:.5em">Example 3 - Small</span>
    Example 4 - None
    p.s. The font tag you used in your example is widely deprecated now and should not be used.


    ZIP FILE
    marquee.zip
    Last edited by keyboard; 06-25-2019 at 10:29 AM.

  3. #3
    Join Date
    Mar 2011
    Posts
    1,897
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    Ok, I've cleaned up the code a bit, added comments and fixed a few problems.
    I've edited my last post with the updated code (and zip file).
    Check the top of marquee.js to see the options available.

    Its still not perfect, but it works pretty well.
    Let me know if there's any problems.

    keyboard

    --edit
    p.s. It appears that chrome doesn't run animations while the web page is out of focus, so if you switch to a new tab all the text will bunch up.

Similar Threads

  1. Marquee Scroll from Another Document
    By spiper in forum Looking for such a script or service
    Replies: 5
    Last Post: 12-10-2012, 05:48 PM
  2. Replies: 1
    Last Post: 09-13-2009, 05:20 PM
  3. Make Text Bold/Coloured When RSS Is updated?
    By lookielookies in forum Looking for such a script or service
    Replies: 0
    Last Post: 09-12-2008, 12:29 PM
  4. Replies: 0
    Last Post: 12-21-2006, 12:24 AM
  5. Text/Message scroll using Marquee
    By babumazumder in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-01-2005, 10:19 AM

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
  •