Scroll dynamic content with Crawler

1) Text and Image Crawler v1.5

2) http://www.dynamicdrive.com/dynamici...wler/index.htm

3) configuring Crawler to scroll dynamically generated content

I'm trying to configure Crawler to scroll dynamically generated content which is printed on page inside the divs tag <div id="nowplaying"></div>. The Now playing data is fetched via the API.TrackHistory API, and updates automatically. API script: http://www.di.fm/assets/pages/channe...c37fba2b409.js
I want also that Crawler use internal css on page, not an existing external CSS from a remote site.
Sample:

Code:

<!doctype html> <html lang="en"> <head> <title>Vocal Chillout Radio</title> <meta charset="utf-8"> <link href="http://www.di.fm/assets/pages/channels-ebbd11f02478ee3ff9b606cd2a858afc.css" media="screen" rel="stylesheet" type="text/css" /> <script src="http://www.di.fm/assets/modernizr-2f0c525027ca1ae88a69b5315a71aa63.js" type="text/javascript"></script> </head> <body> <div id="nowplaying"> <h2>Now Playing</h2> <p class="track">Loading…</p> </div> <div id="history"> <h2>Track History</h2> <ol class="list"></ol> </div> <script src="http://www.di.fm/assets/platform/base-86d34655702e3523fcdbd83e3415bef4.js" type="text/javascript"></script> <script> NS('AudioAddict.API').Config = { url: 'http://api.v2.audioaddict.com/v1', // 'http://api.v2.audioaddict.com/v1', listenUrl: 'http://listen.di.fm', network: 'di', networkName: 'Digitally Imported', networkUrl: 'http://www.di.fm/', channelBase: '/', calendarEventBase: '/calendar/event/', member: null }; </script> <script src="http://www.di.fm/assets/pages/channels-b7d8e25e114f1efee1838c37fba2b409.js" type="text/javascript"></script> <script> var CurrentChannel = {"channel":{"ad_channels":"","asset_id":1591,"asset_url":"http://static.audioaddict.com/a5b0bd27de43d04e1da9acf5b8883e85.png","channel_director":"Solarsoul","created_at":"2012-04-18T17:16:47-04:00","description":"Enjoy the relaxing vocal sounds of Ibiza chillout","forum_id":null,"id":142,"key":"vocalchillout","name":"Vocal Chillout","network_id":1,"old_id":138,"premium_id":null,"tracklist_server_id":8591,"updated_at":"2012-04-18T22:38:54-04:00"}}.channel; </script> </body> </html>

How to adjust Crawler for this task?

We would do it a lot like we did it before, only instead of having to fetch a page, the content we want would be right on the page in a display: none; division. This works:

Code:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://www.di.fm/assets/modernizr-2f0c525027ca1ae88a69b5315a71aa63.js" type="text/javascript"></script> <script type="text/javascript" src="crawler.js"> // 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 demo page) </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> // Update Content to Crawler Script (c)2012 John Davenport Scheuer // as first seen in http://www.dynamicdrive.com/forums/showthread.php?p=275450#post275450 // username: jscheuer1 - This Notice Must Remain for Legal Use // requires Text and/or Image Crawler Script v1.5, and jQuery jQuery(function($){ // do not edit this line: var $tempcont = $('<span style="display: none;"></span>').appendTo('body'), tc, count, marq, $omarkup, // jQuery css class selector of nested span in crawler that receives updates: contentselector = '.scroll', // jQuery css selector of element with updated content: datacontainer = '#nowplaying', specs = { // init specs for crawler: uniqueid: 'mycrawler', style: { 'padding': '5px', 'width': '300px', 'background': '#ffffe0', 'border': '1px solid #c30', 'font': 'bold 90% sans-serif' }, inc: 8, // speed or 'cursor driven' top speed - pixel increment for each iteration of this marquee's movement mouse: 'cursor driven', // mouseover behavior ('pause' 'cursor driven' or false) moveatleast: 1, // if 'cursor driven' minimum speed when cursor is off marquee neutral: 50, // size of neutral area in the center of 'cursor driven' marquee savedirection: true }; // end crawler init specs ////////////////////////// No Need to Edit Below Here ////////////////////////// $omarkup = $('#' + specs.uniqueid).clone(); $(contentselector).html($(datacontainer).text()); count = marqueeInit.ar.length; marqueeInit($.extend({}, specs)); function update(){ $tempcont.html($(datacontainer).text()); if((tc = $tempcont.html()) !== $('.marquee' + count + ' ' + contentselector).html()){ marq = marqueeInit.ar[count].setup; marq.runit = function(){return;}; marq.c.onmouseover = marq.c.onmousemove = marq.c.onmouseout = null; $(marq.c.parentNode).css({display: 'none'}).after($omarkup.clone().find(contentselector).html(tc).end()).remove(); count = marqueeInit.ar.length; marqueeInit($.extend({}, specs)); } } setInterval(update, 10000); }); </script> </head> <body> <div class="marquee" id="mycrawler"> <span class="scroll"></span> </div> <div style="display: none;"><div id="nowplaying"> <h2>Now Playing: </h2> <p class="track">Loading …                                                </p> </div> <div id="history"> <h2>Track History</h2> <ol class="list"></ol> </div> <script src="http://www.di.fm/assets/platform/base-86d34655702e3523fcdbd83e3415bef4.js" type="text/javascript"></script> <script> NS('AudioAddict.API').Config = { url: 'http://api.v2.audioaddict.com/v1', // 'http://api.v2.audioaddict.com/v1', listenUrl: 'http://listen.di.fm', network: 'di', networkName: 'Digitally Imported', networkUrl: 'http://www.di.fm/', channelBase: '/', calendarEventBase: '/calendar/event/', member: null }; </script> <script src="http://www.di.fm/assets/pages/channels-b7d8e25e114f1efee1838c37fba2b409.js" type="text/javascript"></script> <script> var CurrentChannel = {"channel":{"ad_channels":"","asset_id":1591,"asset_url":"http://static.audioaddict.com/a5b0bd27de43d04e1da9acf5b8883e85.png","channel_director":"Solarsoul","created_at":"2012-04-18T17:16:47-04:00","description":"Enjoy the relaxing vocal sounds of Ibiza chillout","forum_id":null,"id":142,"key":"vocalchillout","name":"Vocal Chillout","network_id":1,"old_id":138,"premium_id":null,"tracklist_server_id":8591,"updated_at":"2012-04-18T22:38:54-04:00"}}.channel; </script></div> </body> </html>

Hi,

I have some questions about how it works:
Why we can no put content right inside the "mycrawler" divs? i.e.

<div class="marquee" id="mycrawler">
<div id="nowplaying">
<p class="track">Loading…</p>
</div>
</div>

Do we still need update content via update() setInterval? As content of <div id="nowplaying"> updates automatically via API.
There is about 10sec delay before track appears after reloading page, the base page itself load content almost instantly.

I noticed content div shrunk in width to about 100px wide when short text name displayed, and have normal lenght 300px when long text track name.

How to set some spacing between trackname and duration?(or pair of colon as separator) The duration was styled via linked external css #nowplaying .duration class.

Is it safe to use two jQuery on one page? There is another jQuery v1.7.2 used in page: http://www.di.fm/assets/platform/bas...83e3415bef4.js

You can't put it right in the crawler, no. Crawler will not react well to updates. It doesn't know when they're coming. I'm not sure it could react properly to them if it did. And these updates go to an id. If you put an id in crawler, you will have 2 of them (crawler must duplicate its content to achieve continuous scrolling). Most javascript that writes to id will not work if there are 2 of them.

But I think we can work this out. I was already thinking that 10 seconds was excessive. With content that updates to the page automatically we could go as low as 20 milliseconds. We can't import the H2 or P elements because they're block level - only inline elements are allowed in a horizontal scroller. We could make them inline, but we don't have to. We can import the H2's text followed by the P's HTML, so we will have like (in each of two class="scroll" spans):

Code:

<span class="scroll">Now Playing: <span class="title">Zaa feat. Aneym - Feel Safe (Zaa's Nightology Mix)</span><span class="duration">3:34</span></span>

Then in the head:

Code:

<style type="text/css"> .duration:before { content: '- '; } .title, .duration { padding: 0 3px; } </style>

Here's the result:

Code:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .duration:before { content: '- '; } .title, .duration { padding: 0 3px; } </style> <script src="http://www.di.fm/assets/modernizr-2f0c525027ca1ae88a69b5315a71aa63.js" type="text/javascript"></script> <script type="text/javascript" src="crawler.js"> // 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 demo page) </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> // Update Content to Crawler Script (c)2012 John Davenport Scheuer // as first seen in http://www.dynamicdrive.com/forums/showthread.php?p=275450#post275450 // username: jscheuer1 - This Notice Must Remain for Legal Use // requires Text and/or Image Crawler Script v1.5, and jQuery jQuery(function($){ // do not edit this line: var $tempcont = $('<span style="display: none;"></span>').appendTo('body'), tc, count, marq, $omarkup, // jQuery css class selector of nested span in crawler that receives updates: contentselector = '.scroll', // jQuery css selector of element with updated content: datacontainer = '#nowplaying', specs = { // init specs for crawler: uniqueid: 'mycrawler', style: { 'padding': '5px', 'width': '300px', 'background': '#ffffe0', 'border': '1px solid #c30', 'font': 'bold 90% sans-serif' }, inc: 8, // speed or 'cursor driven' top speed - pixel increment for each iteration of this marquee's movement mouse: 'cursor driven', // mouseover behavior ('pause' 'cursor driven' or false) moveatleast: 1, // if 'cursor driven' minimum speed when cursor is off marquee neutral: 50, // size of neutral area in the center of 'cursor driven' marquee savedirection: true }; // end crawler init specs ////////////////////////// No Need to Edit Below Here ////////////////////////// $omarkup = $('#' + specs.uniqueid).clone(); var data = $(datacontainer); $(contentselector).html(data.find('h2').text() + data.find('.track').html()); count = marqueeInit.ar.length; marqueeInit($.extend({}, specs)); function update(){ var data = $(datacontainer); $tempcont.html(data.find('h2').text() + data.find('.track').html()); if((tc = $tempcont.html()) !== $('.marquee' + count + ' ' + contentselector).html()){ marq = marqueeInit.ar[count].setup; marq.runit = function(){return;}; marq.c.onmouseover = marq.c.onmousemove = marq.c.onmouseout = null; $(marq.c.parentNode).css({display: 'none'}).after($omarkup.clone().find(contentselector).html(tc).end()).remove(); count = marqueeInit.ar.length; marqueeInit($.extend({}, specs)); } } setInterval(update, 20); }); </script> </head> <body> <div class="marquee" id="mycrawler"> <span class="scroll"></span> </div> <div style="display: none;"><div id="nowplaying"> <h2>Now Playing: </h2> <p class="track">Loading …                                                </p> </div> <div id="history"> <h2>Track History</h2> <ol class="list"></ol> </div> <script src="http://www.di.fm/assets/platform/base-86d34655702e3523fcdbd83e3415bef4.js" type="text/javascript"></script> <script> NS('AudioAddict.API').Config = { url: 'http://api.v2.audioaddict.com/v1', // 'http://api.v2.audioaddict.com/v1', listenUrl: 'http://listen.di.fm', network: 'di', networkName: 'Digitally Imported', networkUrl: 'http://www.di.fm/', channelBase: '/', calendarEventBase: '/calendar/event/', member: null }; </script> <script src="http://www.di.fm/assets/pages/channels-b7d8e25e114f1efee1838c37fba2b409.js" type="text/javascript"></script> <script> var CurrentChannel = {"channel":{"ad_channels":"","asset_id":1591,"asset_url":"http://static.audioaddict.com/a5b0bd27de43d04e1da9acf5b8883e85.png","channel_director":"Solarsoul","created_at":"2012-04-18T17:16:47-04:00","description":"Enjoy the relaxing vocal sounds of Ibiza chillout","forum_id":null,"id":142,"key":"vocalchillout","name":"Vocal Chillout","network_id":1,"old_id":138,"premium_id":null,"tracklist_server_id":8591,"updated_at":"2012-04-18T22:38:54-04:00"}}.channel; </script></div> </body> </html>

About two jQuery's on one page - You shouldn't need it. Just use one. Make sure it comes before all scripts that use it.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Works good. Small details: <h2>Now Playing: </h2> text is not needed, I cutted it out. What should be changes for this?

Also should we add closing div in the end, it missing?

<div style="display: none;"><div id="nowplaying">
<p class="track">Loading&...</p>
</div>

The font styling can be done via 'mycrawler' style itself? As css in head section not affect .track class:

#nowplaying .track {
font-family:Verdana,Arial,Sans-Serif;
font-size:11px;
}

You can play around with it however you like. If you remove the text from H2, it will shorten the content. If the content gets too short, the crawler will become narrower. Most of the track descriptions are long enough to prevent that from happening, but some are very short. So I would keep it as is there. Even if you take it out and it does happen that a track's info is so short that the crawler shrinks, when the next track comes, if it's info is longer, the crawler will grow (up to the width set in the style object) to accommodate it.

As for styling the content once it's in the crawler goes, remember - there's only one element on the page with an id of nowplaying and it's in a display none division. And the .track P was left behind, only its innerHTM is brought into the crawler. If you want to style all of or some parts of the content displayed in the crawler, use the following hooks:

Code:

.scroll

Will style all text in the crawler, as will using the style object in the specs object.

Code:

.title

Will affect only the title span, which includes title plus any performer/composer information provided as well as any mix info provided. This will override .scroll and the style object, but only for the .title span.

Code:

.duration

Will style the minutes:seconds info. This will override .scroll and the style object, but only for the .duration span.

Again, the #nowplaying and .track hooks do not exist in the crawler and will do nothing because they only exist in the display none division.

How to center crawler output on the screen?

Use a standards invoking DOCTYPE. Then use 'margin': '0 auto' in the style object, ex:

Code:

. . . ery css selector of element with updated content: datacontainer = '#nowplaying', specs = { // init specs for crawler: uniqueid: 'mycrawler', style: { 'padding': '5px', 'width': '300px', 'background': '#ffffe0', 'border': '1px solid #c30', 'margin': '0 auto', 'font': 'bold 90% sans-serif' }, inc: 8, // speed or 'cursor driven' top speed - pixel increment for each iteration of this marquee's movement mouse: 'cursor driven', // mouseover behavior ('pause' 'cursor driven' or false) moveatleast: 1, // if 'cursor driven' minimum speed when cursor is off marquee neutral: 50, // size of neutral area in the center of 'cursor driven' marquee savedirection: true }; // end crawler init specs ////////////////////////// No Need to Edit Below Here ////////////////////////// $omarkup = $('#' + specs.unique . . .

As long as the parent element is the body, that will center it. If the parent is another element, it will center it within that element.

The centering should be done from within this marquee container "style", or it can be applied from an external CSS too? e.g.

. . . #centered { margin:0 auto; width:350px; } </style> ... <body> <div id="centered"> <div class="marquee" id="mycrawler"> <span class="scroll"></span> </div> </div>

That's right. What I gave you in my previous post was an example of:

Quote:

should be done from within this marquee container "style"

The code in your post is an example of using added markup and styles:

Quote:

it can be applied from an external CSS

There the style shown goes in the head of the page and the added markup goes around the crawler as shown.

The method I gave in my previous post is easier, less code at least. That's why it's the 'should be' method.

Either method requires a standards invoking DOCTYPE for IE to center the crawler. Other browsers will do it with or without a standards invoking DOCTYPE.

Just follow the instructions from my previous post and it should be fine.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Will it be OK to place crawler internal javascript code within header tags into an external javascript file?

Yes. Be sure to remove:

Code:

<script type="text/javascript">

and:

Code:

</script>

from it. And that you place its external tag in the same spot where it currently is in the head.

Hello,

a great script width it's mouse-control logic! Thanks for sharing this!

Sadly I have major performance issues viewing this Scroller/Crawler in Internet Explorer or Firefox browser. The scrolling isn't smooth, it sticks every few seconds. Google Chrome and Safari are okay. Second - is there any possibility to slow the speed below "1"?

Thanks a lot!
Moritz

Continuous animation has that problem in some browsers on some computers with some content. The smaller in both dimensions and byte size that your images can be, the smoother will be the scrolling action. There are other scripts for presenting changing content that, because they're not in constant motion, appear smoother. If you need larger images, perhaps one of those would be more suitable.

Step Carousel Viewer is one here on DD:

http://www.dynamicdrive.com/dynamici...epcarousel.htm

There are others around the web.