Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Scroll dynamic content with Crawler

  1. #1
    Join Date
    Mar 2011
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default 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&hellip;</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?
    Last edited by siluet; 06-01-2012 at 02:59 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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:&nbsp;</h2>
    	<p class="track">Loading&nbsp;&hellip;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2011
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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&hellip;</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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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:&nbsp;<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:&nbsp;</h2>
    	<p class="track">Loading&nbsp;&hellip;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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.
    - John
    ________________________

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

  5. #5
    Join Date
    Mar 2011
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Works good. Small details: <h2>Now Playing:&nbsp;</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;
    }

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

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

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

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

    siluet (06-02-2012)

  8. #7
    Join Date
    Mar 2011
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    How to center crawler output on the screen?

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

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

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

  10. #9
    Join Date
    Mar 2011
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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>
    Last edited by siluet; 06-04-2012 at 01:39 PM.

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

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

    should be done from within this marquee container "style"
    The code in your post is an example of using added markup and styles:

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

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

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
  •