Integrating Javascript Scrolling News

Need some suggestions - i have a bit of javascript code that will do vertical scrolling news. Its a great bit of code, you dont need to worry about putting anything in the HEAD, just plop it in the content and away it goes. However, i dont want to have to manually edit the code when someone whats to cycle the news items so im trying to work out an asset listing to help me out. only issue, when i create the asset listing matrix wraps each one in a div tag (which then breaks the script).


is there a better approach? as i mentioned, once we launch i want a non-techie to be able to easily select which stories to include.



here’s the code (without the div tags from the asset listing around each news item) - you can preview our demo page with it working at the following url - note its a demo site! not finished :slight_smile: - its the v_content section i have tried to place in an asset listing to no avail.



CIT Demo - scroll is bottom left




    News and Events
    
    
    /* USE WORDWRAP AND MAXIMIZE THE WINDOW TO SEE THIS FILE
    ========================================
     V-NewsTicker v2.2
     License : Freeware (Enjoy it!)
     (c)2003 VASIL DINKOV- PLOVDIV, BULGARIA
    ========================================
     For IE4+, NS4+, Opera5+, Konqueror3.1+
    ========================================
     Get the NewsTicker script at:
     http://www.smartmenus.org/
     LEAVE THESE NOTES PLEASE - delete the comments if you want */
    
    // BUG in Opera:
    // If you want to be able to control the body margins
    // put the script right after the BODY tag, not in the HEAD!!!
    // === 1 === FONT, COLORS, EXTRAS...
    
    v_font='arial,sans-serif,helvetica';
    v_fontSize='11px';
    v_fontSizeNS4='11px';
    v_fontWeight='normal';
    v_fontColor='#000000';
    v_textDecoration='none';
    v_fontColorHover='';//		| won't work
    v_textDecorationHover='none';//	| in Netscape4
    v_bgColor='';
    
    // set [='transparent'] for transparent
    // set [='url(image_source)'] for image
    
    v_top=0;//	|
    v_left=0;//	| defining
    v_width=248;//	| the box
    v_height=110;//	|
    v_paddingTop=10;
    v_paddingLeft=10;
    v_position='relative';// absolute/relative
    v_timeout=2500;//1000 = 1 second
    v_slideSpeed=30;
    v_slideDirection=0;//0=down-up;1=up-down
    v_pauseOnMouseOver=true;
    
    // v2.2+ new below
    
    v_slideStep=1;//pixels
    v_textAlign='center';// left/center/right
    v_textVAlign='middle';// top/middle/bottom - won't work in Netscape4
    
    // === 2 === THE CONTENT - ['href','text','target']
    // Use '' for href to have no link item
    
    v_content=[
    
    ['http://www.smartmenus.org/','Health Science Student Clinics
Need a boost in health and vitality?Contact 6205 4727 for bookings.
Student Clinics are located at Bruce Campus.
',''], ['','Industry Newsletter LaunchedCIT has launched Industry Connection; the bi-monthly newsletter for industry, business and Friends of CIT. Sign-up Now!',''], ['http://www.smartmenus.org/','Term 4 2008 CIT CoursesThe following is a list of courses that are available for application for Term 4 2008.',''] ]; // === v_ua=navigator.userAgent;v_nS4=document.layers?1:0;v_iE=document.all&&!window.innerWidth&&v_ua.indexOf("MSIE")!=-1?1:0;v_oP=v_ua.indexOf("Opera")!=-1&&document.clear?1:0;v_oP7=v_oP&&document.appendChild?1:0;v_oP4=v_ua.indexOf("Opera")!=-1&&!document.clear;v_kN=v_ua.indexOf("Konqueror")!=-1&&parseFloat(v_ua.substring(v_ua.indexOf("Konqueror/")+10))<3.1?1:0;v_count=v_content.length;v_cur=1;v_cl=0;v_d=v_slideDirection?-1:1;v_TIM=0;v_fontSize2=v_nS4&&navigator.platform.toLowerCase().indexOf("win")!=-1?v_fontSizeNS4:v_fontSize;v_canPause=0;function v_getOS(a){return v_iE?document.all[a].style:v_nS4?document.layers["v_container"].document.layers[a]:document.getElementById(a).style};function v_start(){var o,px;o=v_getOS("v_1");px=v_oP&&!v_oP7||v_nS4?0:"px";if(parseInt(o.top)==v_paddingTop){v_canPause=1;if(v_count>1)v_TIM=setTimeout("v_canPause=0;v_slide()",v_timeout);return}o.top=(parseInt(o.top)-v_slideStep*v_d)*v_d>v_paddingTop*v_d?parseInt(o.top)-v_slideStep*v_d+px:v_paddingTop+px;if(v_oP&&o.visibility.toLowerCase()!="visible")o.visibility="visible";setTimeout("v_start()",v_slideSpeed)};function v_slide(){var o,o2,px;o=v_getOS("v_"+v_cur);o2=v_getOS("v_"+(v_cur<v_count?v_cur+1:1));px=v_oP&&!v_oP7||v_nS4?0:"px";if(parseInt(o2.top)==v_paddingTop){if(v_oP)o.visibility="hidden";o.top=v_height*v_d+px;v_cur=v_curv_paddingTop*v_d){o.top=parseInt(o.top)-v_slideStep*v_d+px;o2.top=parseInt(o2.top)-v_slideStep*v_d+px}else{o.top=-v_height*v_d+px;o2.top=v_paddingTop+px}setTimeout("v_slide()",v_slideSpeed)};if(v_nS4||v_iE||v_oP||document.getElementById&&!v_kN&&!v_oP4){ document.write(".vnewsticker,a.vnewsticker{font-family:"+v_font+";font-size:"+v_fontSize2+";color:"+v_fontColor+";text-decoration:"+v_textDecoration+";font-weight:"+v_fontWeight+"}a.vnewsticker:hover{font-family:"+v_font+";font-size:"+v_fontSize2+";color:"+v_fontColorHover+";text-decoration:"+v_textDecorationHover+"}");v_temp="
"+(v_iE?"
":"");for(v_i=0;v_i<v_count;v_i++)
v_temp+="<div "+(v_nS4?"name":"id")+"=v_"+(v_i+1)+" style='position:absolute;top:"+(v_height*v_d)+"px;left:"+v_paddingLeft+"px;width:"+(v_width-v_paddingLeft*2)+"px;height:"+(v_height-v_paddingTop*2)+"px;clip:rect(0,"+(v_width-v_paddingLeft*2)+","+(v_height-v_paddingTop*2)+",0);overflow:hidden"+(v_oP?";visibility:hidden":"")+";text-align:"+v_textAlign+"' class=vnewsticker>"+(!v_nS4?"<table width="+(v_width-v_paddingLeft*2)+" height="+(v_height-v_paddingTop*2)+" cellpadding=0 cellspacing=0 border=0><tr><td width="+(v_width-v_paddingLeft*2)+" height="+(v_height-v_paddingTop*2)+" align="+v_textAlign+" valign="+v_textVAlign+" class=vnewsticker>":"")+(v_content[v_i][0]!=""?"<a href='"+v_content[v_i][0]+"' target='"+v_content[v_i][2]+"' class=vnewsticker"+(v_pauseOnMouseOver?" onmouseover='if(v_canPause&&v_count>1){clearTimeout(v_TIM);v_cl=1}' onmouseout='if(v_canPause&&v_count>1&&v_cl)v_TIM=setTimeout(\"v_canPause=0;v_slide();v_cl=0\","+v_timeout+")'":"")+">":"<span"+(v_pauseOnMouseOver?" onmouseover='if(v_canPause&&v_count>1){clearTimeout(v_TIM);v_cl=1}' onmouseout='if(v_canPause&&v_count>1&&v_cl)v_TIM=setTimeout(\"v_canPause=0;v_slide();v_cl=0\","+v_timeout+")'":"")+">")+v_content[v_i][1]+(v_content[v_i][0]!=""?"</a>":"</span>")+(!v_nS4?"</td></tr></table>":"")+"</div>";v_temp+=(v_iE?"</div>":"")+"</div>";document.write(v_temp);setTimeout("v_start()",1000);if(v_nS4)onresize=function(){location.reload()}}

</script>

<!-- ======================= --></pre>

Hi Bruce,

I presume you have most of the code quoted in the bodycopy and the span part for the story in a Type Format?

That being the case, all you need to do is open the properties of the wysiwyg and change it from block display to none. Block display wraps the contents in a div with the asset id as the div id. You should also probably set the container to raw html if you have not already done so as this will ensure that what you TYPE is what you get!

To make is easy for content editors to swap out, point the asset list at some news stories. You editors can then add and deleted stories to their hearts content, and the asset list will do the fomatting. One gotcha though: the content in the WYSIWYG in the news item will need to be clean HTML.

cheers,

Richard

Thanks for you help, managed to get it displaying (although i have to put in a generic news item at the end to fix the comma between each entry). didnt realise the block/none trick - but the selection is either Block / Inline / raw HTML - the 'inline' worked.

cheers

[quote]Thanks for you help, managed to get it displaying (although i have to put in a generic news item at the end to fix the comma between each entry). didnt realise the block/none trick - but the selection is either Block / Inline / raw HTML - the 'inline' worked.


cheers[/quote]

Hi Bruce, I meant raw HTML - I did not have Matrix open! inline puts span tags around the element which don't upset the script.



To get rid of the comma issue, you can set a position format in the asset listing.



The normal type format will have the comma at the end, and then you set a position format based on the number of items. If there are 4 items then set position format 4 to be the same as the other but with no comma at the end.



R.

didnt realise you could do that (ill file it away for a rainy day) - unfortunately the number will change depending on the whims of the business owner, i can live with a standard news item in the rotation.


You could always use a different javascrip solution that does not rely on you adding the titles between commas in the js.

There are some great jQuery scripts that I can do this, and it is just a nice, clean unordered list. :)

[quote]You could always use a different javascrip solution that does not rely on you adding the titles between commas in the js.


There are some great jQuery scripts that I can do this, and it is just a nice, clean unordered list. :)[/quote]



This is the one we use. It is based on MooTools since that is the library we use on our site. We use the Google CDN to deliver the library so it is very efficient.