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.
Scroll dynamic content with Crawler
Reply With Quote
Bookmarks