|
JavaScript - Twitter Horizontal Ticker Creating Headaches
I've been going at this for a good week now, trying to figure out what the hell is going on.
I have this tweet ticker code that scrolls a live feed at the very top of the header. It runs on jQuery 1.5.0. The site I have has a vertically scrollTo div for each button pressed on the navigation. The problem I'm having is that as soon as I plug in the jQuery 1.5.0 which turns on the tweet ticker, it stops the overflow and the scrollTo. So when I click on any of the navigation buttons it jumps to the next page rather than scrolling smoothly. Can anyone please please help me. This is driving me crazy lol. Similar TutorialsHi I'm looking for a simple ticker that scrolls horizontally across the top of the homepage of a site I'm working on. Ideally I would like one for both Twitter and RSS feeds, but either is good. If anyone knows where I can find one that's simple to implement that would be great. Kind Regards First of all sorry if i have posted in the wrong forum! Ok my problem is with an RSS ticker for my website. I am having the error req is not defined. Im hoping its something very simple is the script is much complete! THIS IS THE GRAB.PHP CODE PHP Code: <? // [email]jim-jh@webcoding.co.uk[/email] // ticker stuff - grab remote stream // begin grab.php $_receivedRemoteData = "" ; $_requestedStream = $_SERVER['QUERY_STRING']; if ( preg_match("/http/i", $_requestedStream ) ) { $fp = @fopen( $_requestedStream, "r" ) ; if ( $fp ) { while ( !feof( $fp ) ) { $_receivedRemoteData .= @fread($fp, 1024); } @fclose($fp); } } header("content-type: text/xml") ; print $_receivedRemoteData ; // end grab.php ?> THIS IS THE TICKER.PHP FILE CODE Code: <style>
.headlines {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.headlines:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.globalheader {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #990000;
text-decoration: none;
}
</style>
<span align="left" width="100%" id="scroller" style="align:left;z-index:99; position:relative; display;">
<span class=globalheader>BBC NEWS RSS TICKER:</span><br/>
<span class="headlines">Loading RSS feeds....</span>
</span>
<script src="ticker.js"></script>
AND THIS IS THE JS CODE WHERE I THINK THE PROBLEM MAY BE. PHP Code: function getRequest() { var con = new Array(); var _ms_XMLHttpRequest_ActiveX = ""; var req; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { if (_ms_XMLHttpRequest_ActiveX) { req = new ActiveXObject(_ms_XMLHttpRequest_ActiveX); } else { var versions = ["Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i = 0; i < versions.length ; i++) { try { req = new ActiveXObject(versions[i]); if (req) { _ms_XMLHttpRequest_ActiveX = versions[i]; break; } } catch (objException) { // trap; try next one } } } } con[0]=req; con[1]=_ms_XMLHttpRequest_ActiveX; return con; } function loadRSS(url) { //alert("running"); try { if ( _ms_XMLHttpRequest_ActiveX1 ) { rssRequest.onreadystatechange = processRSS; rssRequest.open("GET", url, true); rssRequest.send(null); } else { if (rssRequest) { rssRequest.onreadystatechange = processRSS; rssRequest.open("GET", url, true); rssRequest.send(null); } } } catch ( rssRequestException ) {} } function getChildNode( myElement, naming ) { return myElement.getElementsByTagName(naming)[0].firstChild.nodeValue; } function processRSS() { var cycle = 0; try { if (rssRequest.readyState == 4) { if (rssRequest.status == 200) { response = rssRequest.responseXML.documentElement; if ( response ) { var items = response.getElementsByTagName("item"); for ( var i = 0 ; i < items.length; i++ ) { var title = getChildNode(items[i],"title"); var desc = getChildNode(items[i],"description"); var link = getChildNode(items[i],"link"); rssItems[cycle] = title + " - " + desc; linkItems[cycle] = link; ++cycle; } } } else { alert("There was a problem retrieving the XML data:\n" + req.statusText); } } } catch ( jsException ) {alert(jsException.message);} } var httpArc2 = getRequest(); var rssRequest = httpArc2[0]; var _ms_XMLHttpRequest_ActiveX1 = httpArc2[1]; var rssItems = new Array(); var linkItems = new Array(); function openWindow(url){ window.open(url); } var storyCount = 0; var itemLen = 0; function tickTock(){ var obj = document.getElementById("scroller"); var myTimeout = 50; var str; var st = rssItems[storyCount]; if ( itemLen > st.length ) { storyCount++; if ( storyCount >= rssItems.length ) { storyCount = 0; } itemLen = 0; myTimeout=2000; setTimeout("tickTock()", myTimeout); } else { ++itemLen; str = rssItems[storyCount].toString(); str = str.substring(0,itemLen) + "_"; obj.innerHTML = "<span class=globalheader>BBC NEWS RSS TICKER:</span><br/><a href=\"javascript:openWindow('"+linkItems[storyCount]+"')\" class=headlines>" + str + "</a>"; setTimeout("tickTock()", myTimeout); } } setTimeout("tickTock()", 3000); loadRSS("/grab.php?http://news.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml"); IS THERE ANYONE THAT CAN HELP WITH THIS? I have this horizontal news ticker which works just perfect in ie7 regarding to speed, but when looking at the same page in ie8 the speed is very slow... Has anybody else encountered this, and if yes... How do I solve this? Code: initialize: function(element, options) {
this.setOptions({
marHeight: 18,
marWidth: 565,
steps: 20,
speed: 20,
direction: 'left',
pauseOnOver: true,
pauseOnContainerOver: true
}, options);
this.timer = null;
this.textElement = null;
this.mooqueeElement = element;
this.constructMooquee();
}
Thanks in advance :-) Hello, i have got a code for a ticker bar that is written in javascript and i can change most things except the colour of the writting, witch is one of the things that really does need to be changed as its rather dull at the moment. This is the code i found: <script language="JavaScript1.2"> //Specify the marquee's width (in pixels) var marqueewidth="960px" //Specify the marquee's height var marqueeheight="28px" //Specify the marquee's marquee speed (larger is faster 1-10) var marqueespeed=2 //configure background color: var marqueebgcolor="004080" //Pause marquee onMousever (0=no. 1=yes)? var pauseit=1 //Specify the marquee's content (don't delete <nobr> tag) //Keep all content on ONE line, and backslash any single quotations (ie: that\'s great): var marqueecontent='<nobr><font face="Arial"> Term Ends on Friday 18th Febuary.</nobr>' ////NO NEED TO EDIT BELOW THIS LINE//////////// marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS var copyspeed=marqueespeed var pausespeed=(pauseit==0)? copyspeed: 0 var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>') var actualwidth='' var cross_marquee, ns_marquee function populate(){ if (iedom){ cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee cross_marquee.style.left=parseInt(marqueewidth)+8+"px" cross_marquee.innerHTML=marqueecontent actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth } else if (document.layers){ ns_marquee=document.ns_marquee.document.ns_marquee2 ns_marquee.left=parseInt(marqueewidth)+8 ns_marquee.document.write(marqueecontent) ns_marquee.document.close() actualwidth=ns_marquee.document.width } lefttime=setInterval("scrollmarquee()",20) } window.onload=populate function scrollmarquee(){ if (iedom){ if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8)) cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px" else cross_marquee.style.left=parseInt(marqueewidth)+8+"px" } else if (document.layers){ if (ns_marquee.left>(actualwidth*(-1)+8)) ns_marquee.left-=copyspeed else ns_marquee.left=parseInt(marqueewidth)+8 } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') if (iedom){ write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">') write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">') write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>') write('</div></div>') } else if (document.layers){ write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>') write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>') write('</ilayer>') } document.write('</td></table>') } } </script> Thanks. i have used a an ajax xml ticker script in my webpage here's the link to the page where i got the script : http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm The problem is as soon as it reaches the end of the content, It does not cycle up to the first news item immediately there is a gap of few seconds before starts showing the items again. Right now, I am trying to use this widget from widget box to figure stuff out but its not working. I want to make a moving ticker The text would be from a rss This is what there source was: <script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('23bf7f48-242e-489d-99b9-4a1ac7b47eac');</script> And inside it is this... (http://cdn.widgetserver.com/syndicat...nsertWidget.js) Code: //
//
//
if(!window.WIDGETBOX){(function(){var D=false;var C=function(){WIDGETBOX.setPageLoaded();};var B=function(){WIDGETBOX.setPageUnloaded();};WIDGETBOX={libs:{},version:"41509",urls:{runtimeBaseUrl:"http://widgetserver.com/syndication",galleryBaseUrl:"http://www.widgetbox.com",cdnRuntimeBaseUrl:"http://cdn.widgetserver.com/syndication",cdnGalleryBaseUrl:"http://pub.widgetbox.com",metricsBaseUrl:"http://t.widgetserver.com/t",proxyBaseUrl:"http://p.widgetserver.com/p",markupRuntimeBaseUrl:"http://widgetserver.com/syndication",mobileSiteRuntimeBaseUrl:"http://m.wbx.me",linkbarBaseUrl:"http://l.wbx.me/l",imageProxyBaseUrl:"http://i.widgetserver.com"},globals:{token:"",tokenTime:0,widgets:[],widgetCount:0,pageLoaded:false,pageUnloaded:false,eventListeners:[],pageLoadListeners:[],pageUnloadListeners:[],panels:[],panelCount:0,showPanelMarks:true,suppressGetWidget:false,disableGetWidget:false,suppressQuantcast:false,enableLogging:false,disableHitTracking:false,log:"",trustedPage:false,disableInstallerMenu:false,renderInstallerMenuInline:false,anchorEl:null,vid:null,startTime:new Date().getTime()},init:function(){if(!D){D=true;if(window.WIDGETBOXLOADLISTENERS){for(i=0;i<WIDGETBOXLOADLISTENERS.length;i++){A.addPageLoadListener(WIDGETBOXLOADLISTENERS[i]);}}A.addEvent(window,"load",C);A.addEvent(window,"unload",B);if(window.WIDGETBOXINITLISTENERS){for(i=0;i<WIDGETBOXINITLISTENERS.length;i++){try{WIDGETBOXINITLISTENERS[i]();}catch(E){WIDGETBOX.logMessage(E);}}}}},namespace:function(G){G=G.replace(".","/");if(G.indexOf("WIDGETBOX/")===0){G=G.substr(10);}if(G.indexOf("POSTAPP/")===0){G=G.substr(8);}var E=G.split("/");var I=WIDGETBOX;if(E){var H;for(var F=0;F<E.length;F++){H=E[F];if(!I[H]){I[H]={};}I=I[H];}}return G;},logMessage:function(E){if(A.globals.enableLogging){A.globals.log+=E+"\n";}},newLibInfo:function(G){G=G.replace(".","/");var J=G;var H="";var F=G.lastIndexOf("/");if(F>=0){H=G.substr(0,F);J=G.substr(F+1);}H=A.namespace(H);G=H+"/"+J;var I=G.replace("/","_").toLowerCase();var E={ns:H,name:J,path:G,id:I,status:null,callback:null};return E;},load:function(I,H,J){var G=A.newLibInfo(I);if(!WIDGETBOX.libs[G.id]){WIDGETBOX.libs[G.id]=G;G.status="loading";if(H){if(!G.listeners){G.listeners=[];}G.listeners.push(H);}var E=document.createElement("script");E.id="widgetbox_lib_"+G.id;E.type="text/javascript";E.setAttribute("async","true");if(!J){E.src=WIDGETBOX.urls.runtimeBaseUrl+"/"+G.path+".js?"+WIDGETBOX.version;}else{E.src=WIDGETBOX.urls.cdnRuntimeBaseUrl+"/"+G.path+".js?"+WIDGETBOX.version;}var F=document.documentElement.firstChild;if(!F||(F.nodeName&&F.nodeName.toLowerCase().indexOf("comment")>-1)){F=document.getElementsByTagName("head")[0];}F.appendChild(E);}else{G=WIDGETBOX.libs[G.id];if(H){if(G.status=="ready"){try{H(G);}catch(K){WIDGETBOX.logMessage(K);}}else{if(!G.listeners){G.listeners=[];}G.listeners.push(H);}}}},ready:function(F){var E=A.newLibInfo(F);if(!WIDGETBOX.libs[E.id]){WIDGETBOX.libs[E.id]=E;}E=WIDGETBOX.libs[E.id];return E.status=="ready";},setReady:function(G){var F=A.newLibInfo(G);if(!WIDGETBOX.libs[F.id]){WIDGETBOX.libs[F.id]=F;}F=WIDGETBOX.libs[F.id];F.status="ready";if(F.listeners){var E=0;for(E=0;E<F.listeners.length;E++){var H=F.listeners[E];try{H(F);}catch(I){WIDGETBOX.logMessage(I);}}}},addEvent:function(I,H,F,E){if(I.addEventListener){I.addEventListener(H,F,E);return true;}else{if(I.attachEvent){var G=I.attachEvent("on"+H,F);return G;}else{alert("Handler could not be attached");}}},removeEvent:function(H,G,F,E){if(H.removeEventListener){H.removeEventListener(G,F,E);return true;}else{if(H.detachEvent){return H.detachEvent("on"+G,F);}else{alert("Handler could not be removed");}}},addEventListener:function(E,G){if(G){if(!A.globals.eventListeners){A.globals.eventListeners={};}if(!A.globals.eventListeners[E]){A.globals.eventListeners[E]=[];}var F=A.globals.eventListeners[E];F[F.length]=G;}},notifyEventListeners:function(F){if(!A.globals.eventListeners){return ;}var G=A.globals.eventListeners[F];if(!G){return ;}for(var E=0;E<G.length;E++){var H=G[E];try{H(this);}catch(I){WIDGETBOX.logMessage(I);}}},addPageLoadListener:function(E){if(E){if(!A.globals.pageLoaded){A.globals.pageLoadListeners.push(E);}else{try{E();}catch(F){WIDGETBOX.logMessage(F);}}}},addPageUnloadListener:function(E){if(E){if(!A.globals.pageUnloaded){A.globals.pageUnloadListeners.push(E);}else{try{E();}catch(F){WIDGETBOX.logMessage(F);}}}},setPageLoaded:function(){if(A.globals.pageLoaded){return ;}A.globals.pageLoaded=true;A.removeEvent(window,"load",C);var F=A.globals.pageLoadListeners;var E;for(E=0;E<F.length;E++){try{F[E]();}catch(G){WIDGETBOX.logMessage(G);}}},setPageUnloaded:function(){if(A.globals.pageUnloaded){return ;}A.globals.pageUnloaded=true;A.removeEvent(window,"unload",B);var E=A.globals.pageUnloadListeners;for(i=0;i<E.length;i++){try{E[i]();}catch(F){WIDGETBOX.logMessage(F);}}},generateGUID:function(H,E){var I=(H)?H:Math.random;var K=(E)?36:32,M="0123456789abcdef".split(""),F,G=[];if(E){G[8]=G[13]=G[18]=G[23]="-";G[14]="4";}for(var J=0;J<K;J++){if(!G[J]){F=0|I()*16;G[J]=M[(J==19)?(F&3)|8:F];}}var L=G.join("");if(!WIDGETBOX.globals.vid){WIDGETBOX.globals.vid=L;}return L;},generateProxiedImageUrl:function(E,H,G,F){var I=E;I=this.urls.imageProxyBaseUrl+"/ip/origin=="+encodeURIComponent(I);if(H){I+="&&w=="+Math.round(H);}if(G){I+="&&h=="+Math.round(G);}if(F){I+="&&type=="+F;}I+="?token="+WIDGETBOX.globals.token;return I;},createElement:function(F,E){if(E){return E.ownerDocument.createElement(F);}else{return document.createElement(F);}}};POSTAPP=WIDGETBOX;var A=WIDGETBOX;A.init();})();}
//
//SOF: subscriber/InsertWidget.js
//
//support rendering a widget in an element by supplying and id to the element
WIDGETBOX.renderWidgetInElement = function(appId, parentNodeId) {
return WIDGETBOX.renderWidget(appId, false, parentNodeId);
},
WIDGETBOX.renderWidget = function(appId, mode, parentNodeId) {
if (!parentNodeId) {
parentNodeId = "widgetbox_widget_parent_" + WIDGETBOX.globals.widgetCount++;
document.write("<div id=\"" + parentNodeId + "\" style=\"line-height:0\"></div>");
}
function libReadyCallback() {
var parentNode = document.getElementById(parentNodeId);
if (!parentNode) {
document.write("<div id=\"" + parentNodeId + "\" style=\"line-height:0\"><span style=\"visibility:hidden\">-</span></div>");
parentNode = document.getElementById(parentNodeId);
}
WIDGETBOX.subscriber.Main.insertWidget(appId, null, parentNode, mode, null, null);
}
WIDGETBOX.load("subscriber.Main", libReadyCallback, true);
};
//
//EOF: subscriber/InsertWidget.js
What do i change and do to make this work? Hi Guys, I am using the following script: Code:
<script>
JQTWEET = {
// Set twitter username, number of tweets & id/class to append tweets
user: 'username',
numTweets: 3,
appendTo: '#shine-tweet-content',
// core function of jqtweet
loadTweets: function() {
$.ajax({
url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
type: 'GET',
dataType: 'jsonp',
data: {
screen_name: JQTWEET.user,
include_rts: true,
count: JQTWEET.numTweets,
include_entities: true
},
success: function(data, textStatus, xhr) {
var html = '<li class="tweet">TWEET_TEXT<div class="time">AGO</div></li>';
// append tweets into page
for (var i = 0; i < data.length; i++) {
$(JQTWEET.appendTo).append(
html.replace('TWEET_TEXT', JQTWEET.ify.clean(data[i].text) )
.replace(/USER/g, data[i].user.screen_name)
.replace('AGO', JQTWEET.timeAgo(data[i].created_at) )
.replace(/ID/g, data[i].id_str)
);
}
}
});
},
/**
* relative time calculator FROM TWITTER
* @param {string} twitter date string returned from Twitter API
* @return {string} relative time like "2 minutes ago"
*/
timeAgo: function(dateString) {
var rightNow = new Date();
var then = new Date(dateString);
if ($.browser.msie) {
// IE can't parse these crazy Ruby dates
then = Date.parse(dateString.replace(/( \+)/, ' UTC$1'));
}
var diff = rightNow - then;
var second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24,
week = day * 7;
if (isNaN(diff) || diff < 0) {
return ""; // return blank string if unknown
}
if (diff < second * 2) {
// within 2 seconds
return "right now";
}
if (diff < minute) {
return Math.floor(diff / second) + " seconds ago";
}
if (diff < minute * 2) {
return "about 1 minute ago";
}
if (diff < hour) {
return Math.floor(diff / minute) + " minutes ago";
}
if (diff < hour * 2) {
return "about 1 hour ago";
}
if (diff < day) {
return Math.floor(diff / hour) + " hours ago";
}
if (diff > day && diff < day * 2) {
return "yesterday";
}
if (diff < day * 365) {
return Math.floor(diff / day) + " days ago";
}
else {
return "over a year ago";
}
}, // timeAgo()
/**
* The Twitalinkahashifyer!
* http://www.dustindiaz.com/basement/ify.html
* Eg:
* ify.clean('your tweet text');
*/
ify: {
link: function(tweet) {
return tweet.replace(/\b(((https*\:\/\/)|www\.)[^\"\']+?)(([!?,.\)]+)?(\s|$))/g, function(link, m1, m2, m3, m4) {
var http = m2.match(/w/) ? 'http://' : '';
return '<a class="twtr-hyperlink" target="_blank" href="' + http + m1 + '">' + ((m1.length > 25) ? m1.substr(0, 24) + '...' : m1) + '</a>' + m4;
});
},
at: function(tweet) {
return tweet.replace(/\B[@?]([a-zA-Z0-9_]{1,20})/g, function(m, username) {
return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>';
});
},
list: function(tweet) {
return tweet.replace(/\B[@?]([a-zA-Z0-9_]{1,20}\/\w+)/g, function(m, userlist) {
return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/' + userlist + '">@' + userlist + '</a>';
});
},
hash: function(tweet) {
return tweet.replace(/(^|\s+)#(\w+)/gi, function(m, before, hash) {
return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>';
});
},
clean: function(tweet) {
return this.hash(this.at(this.list(this.link(tweet))));
}
} // ify
};
// start jqtweet!
JQTWEET.loadTweets();
</script>
To load the latest three tweets from a particular twitter account. I am trying to use newsticker.js to only display one at a time, and fade between different the three tweets. However, this is not working, it is working on any normal UL's but not these created using javascript. The page in question is at http://www.garethhardy.com/Shine/ Thanks in advance for any help guys. Dan Hello, I built a fairly simple page using mioplanet's javascript code for a news ticker. It works fairly well on Chrome, Firefox, Safari and IE7, but IE8 and IE9 can't display it properly. The website is here, and I ran it through w3c validator that pointed out multiple errors with divs nor properly closed (> missing), but on the code they're all there. I suspect the js is doing something funny, but I don't have enough knowledge to understand it. I'm posting the js code as customised by me: Code: TICKER1_CONTENT = document.getElementById("TICKER1").innerHTML;
TICKER1_RIGHTTOLEFT = false;
TICKER1_SPEED = 5;
TICKER1_STYLE = "font-family:inconsolata,courier new, courier, monospace; font-size:24px; color:#ff00cc; letter-spacing:1px";
TICKER1_PAUSED = false;
TICKER1_start();
function TICKER1_start() {
var tickerSupported = false;
TICKER1_WIDTH = document.getElementById("TICKER1").style.width;
var img = "<img src=TICKER1_space.gif width="+TICKER1_WIDTH+" height=0>";
// Firefox
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
document.getElementById("TICKER1").innerHTML = "<TABLE cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER1_STYLE+"' ID='TICKER1_BODY' width='100%'> </SPAN>"+img+"</TD></TR></TABLE>";
tickerSupported = true;
}
// IE
if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
document.getElementById("TICKER1").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER1_STYLE+"' ID='TICKER1_BODY' width='100%'></SPAN>"+img+"</DIV>";
tickerSupported = true;
}
if(!tickerSupported) document.getElementById("TICKER1").outerHTML = ""; else {
document.getElementById("TICKER1").scrollLeft = TICKER1_RIGHTTOLEFT ? document.getElementById("TICKER1").scrollWidth - document.getElementById("TICKER1").offsetWidth : 0;
document.getElementById("TICKER1_BODY").innerHTML = TICKER1_CONTENT;
document.getElementById("TICKER1").style.display="block";
TICKER1_tick();
}
}
function TICKER1_tick() {
if(!TICKER1_PAUSED) document.getElementById("TICKER1").scrollLeft += TICKER1_SPEED * (TICKER1_RIGHTTOLEFT ? -1 : 1);
if(TICKER1_RIGHTTOLEFT && document.getElementById("TICKER1").scrollLeft <= 0) document.getElementById("TICKER1").scrollLeft = document.getElementById("TICKER1").scrollWidth - document.getElementById("TICKER1").offsetWidth;
if(!TICKER1_RIGHTTOLEFT && document.getElementById("TICKER1").scrollLeft >= document.getElementById("TICKER1").scrollWidth - document.getElementById("TICKER1").offsetWidth) document.getElementById("TICKER1").scrollLeft = 0;
window.setTimeout("TICKER1_tick()", 30);
}
and this is how it's referred on the html file: Code: <div id=tick1> <div id="TICKER1" STYLE="overflow:hidden; width:1600px"> text here </div> <script type="text/javascript" src="webticker_1.js" language="javascript"></script> any help much appreciated. Thanks, H I'm performing a little maintenance on my news scroller. You can see the scroller on http://www.hogwarts-rpg.net (it's on the right side). Here's the JavaScript: Code: var pos = 300;
var scrollTimer;
function scroll()
{
if (!document.getElementById)
{
return;
}
var obj = document.getElementById("newsText");
pos -= 1;
if (pos < 0 - obj.offsetHeight)
{
pos = 300;
}
obj.style.top = pos + "px";
scrollTimer = window.setTimeout(scroll,60);
var myNewsText = document.getElementById("newsText");
myNewsText.onmouseover = function(){window.clearTimeout(scrollTimer);}
myNewsText.onmouseout = function(){scroll();}
}
window.onload = scroll;
Here's the CSS: Code: /******* NEWS TICKER *******/
#newsBody {
width: 200px;
height: 300px;
color: #000000;
font-weight: bold;
background-image: url(/images/misc/parchment-scroller-background2.jpg);
background-repeat: no-repeat;
}
/******* LINK COLORS FOR THE TICKER *******/
#newsBody a:link, #newsBody a:visited, #newsBody a:active { text-decoration: underline; color: #000000; }
#newsBody a:hover { text-decoration: underline; color: #0000FF; }
/******* WHERE THE ACTUAL TEXT APPEARS *******/
#newsWindow {
width: 100px;
height: 230px;
overflow: hidden;
position: absolute;
top: 200px;
left: 50px;
}
#newsText {
width: 100px;
position: relative;
top: 25px;
font-size: x-small;
}
Basically, I'm trying to make it where it A) resets quicker when it's done with a full scroll-through, and B) where it doesn't scroll up past its containing div (newsWindow in this scenario). I'm sure I'm missing something so simple, but I've been working on it all night without much headway, and I'm exhausted, so there's my excuse. I know that having pos set to reset at 300 might cause a delay in the text showing itself again, but that's to give the effect that it goes "all the way around," if you know what I mean. Even with it not resetting so high, the function still takes longer to reset than I would like it to. http://turtle-tv.com I already have the server time (top left) in a live format but this other bit is a bit much for me as I know little to nothing about JS and the code in question isnt mine. Anyway, the bit in the parenthesis which depending on the current server time will read Lights on in ??? or Lights off in ??? I would like to have turned in to a liver ticker while keeping all of it's current functionality. Like lets say it was 7:59:59pm EST time the message in the parenthesis would read (Lights off in 1 sec) then come 8:00:00pm the message would do a live rollover to read (Lights on in 11 Hrs, 30 Mins & 0 Secs) then count down from there and then come lets say 7:39:59am EST the message would read (Lights on in 1 Sec) and come 7:30:00am EST the message would roll over to the lights off message. If this is something you can do then great but if not then thankyou for at least reading my post. If you are able to do this and can improve on existing code for the liver server clock then please do that as well as there's some redundant code I don't even need for stuff liek the day etc since I'm just displaying as hh:mm am/pm clock in a 12hr format. Code: <head>
<title>Niko's Live 24/7 Video Broadcast</title>
<script type="text/javascript">
var weekdaystxt=["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"]
function showLocalTime(container, servermode, offsetMinutes, displayversion){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.displayversion=displayversion
var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-php")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
this.localtime=this.serverdate=new Date(servertimestring)
this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
this.updateTime()
this.updateContainer()
}
showLocalTime.prototype.updateTime=function(){
var thisobj=this
this.localtime.setSeconds(this.localtime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}
showLocalTime.prototype.updateContainer=function(){
var thisobj=this
if (this.displayversion=="long")
this.container.innerHTML=this.localtime.toLocaleString()
else{
var hour=this.localtime.getHours()
var minutes=this.localtime.getMinutes()
var seconds=this.localtime.getSeconds()
var ampm=(hour>=12)? "pm" : "am"
var dayofweek=weekdaystxt[this.localtime.getDay()]
<!--
// this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+" ("+dayofweek+")"
this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+""+ampm+""
// -->
}
setTimeout(function(){thisobj.updateContainer()}, 1000) //update container every second
}
function formatField(num, isHour){
if (typeof isHour!="undefined"){ //if this is the hour field
var hour=(num>12)? num-12 : num
return (hour==0)? 12 : hour
}
return (num<=9)? "0"+num : num//if this is minute or sec field
}
</script>
</head>
<body background="./smalls_file_mainBg_1919366_7636654_l.jpg">
<font size="2" color="FFFF00" style="background: #181818;">Time Now: <span id="timecontainer">Loading...</span></font>
<script type="text/javascript">
new showLocalTime("timecontainer", "server-php", 0, "short")
</script>
<?php
$lights_on = '7:30am';
$lights_off = '8pm';
$time = lights_on_off(time(), $lights_on, $lights_off);
?>
<center>
<font size="5" color="FFFF00" style="background: #181818;">
Lights out from <?php echo $lights_off; ?> to <?php echo $lights_on; ?> <?php
echo date('T');
?> (Lights <?php
echo $time['n_state'];
?> in <?php
$h = ($time['remaining']['m'] + 1 ==60) ? $time['remaining']['h'] + 1 : $time['remaining']['h'];
$m = ($time['remaining']['m'] + 1 ==60) ? 0 : $time['remaining']['m'];
$s = ($time['remaining']['m'] + 1 ==60) ? 0 : $time['remaining']['s'];
echo ($h>1) ? $h . ' Hrs, ' : (($h==1) ? $h . ' Hr, ' : ' ');
echo ($m>1) ? $m . ' Mins & ' : (($m==1) ? $m . ' Min & ' : ' ');
echo ($s>1) ? $s . ' Secs' : (($s==1) ? $s . ' Sec' : '0 Secs');
?>
) !</font></center>
<?php
function lights_on_off($time, $lights_on, $lights_off){
$time = (isset($time)) ? $time : time();
$d_lights_on = strtotime($lights_on);
$d_lights_off = strtotime($lights_off);
$secs_lights_on = (date("G",$d_lights_on)*60 + date("i",$d_lights_on))*60 + date("s",$d_lights_on);
$secs_lights_off = (date("G",$d_lights_off)*60 + date("i",$d_lights_off))*60 + date("s",$d_lights_off);
$secs = (date("G",$time)*60 + date("i",$time))*60 + date("s",$time);
$c_state = ($secs_lights_on < $secs && $secs < $secs_lights_off) ? 'on' : 'off';
$n_state = ($secs_lights_on < $secs && $secs < $secs_lights_off) ? 'off' : 'on';
$next_switch = ($secs_lights_on < $secs && $secs_lights_off > $secs) ? $secs_lights_off : ($secs_lights_on + 60*60*24);
$next_switch = ($next_switch > ($secs+60*60*24)) ? $next_switch - (60*60*24) : $next_switch;
$time_rem = $next_switch - $secs;
$h = floor($time_rem/(60*60));
$m = floor(($time_rem-($h*60*60))/60);
$s = $time_rem-($h*60*60)-($m*60);
return array('c_state' => $c_state,'n_state' => $n_state, 'remaining' => array('secs' => $next_switch, 'h' => $h, 'm' => $m, 's' => $s));
}
?>
<center>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="523" id="utv451302">
<param name="flashvars" value="autoplay=false&brand=embed&cid=1919366"/><param name="allowfullscreen" value="true"/>
<param name="allowscriptaccess" value="always"/><param name="movie" value="http://www.ustream.tv/flash/live/1/1919366"/>
<embed flashvars="autoplay=false&brand=embed&cid=1919366" width="625" height="545" allowfullscreen="true" allowscriptaccess="always"
id="utv451302" name="utv_n_740840" src="http://www.ustream.tv/flash/live/1/1919366" type="application/x-shockwave-flash" /></object>
<iframe scrolling="no" height="523" frameborder="0" width="576" src="./prochatrooms/index.php"></iframe>
</center>
</body>
I got a code from Javascriptkit.com found he http://www.javascriptkit.com/script/...mlticker.shtml I'm using PHP and arrays to display the HTML with a foreach loop. All that displays is the box that is supposed to have the content. Here's my PHP code: Code: $stats = array(
$txt[95] => $context['common_stats']['total_posts'],
$txt[64] => $context['common_stats']['total_topics'],
$txt[659] => $context['latest_post']['link'],
$txt[656] => $context['common_stats']['latest_member']
);
echo '<div id="myhtmlticker" class="tickerstyle">';
foreach($stats as $key => $value){
echo '<div class="messagediv"><b>', $key ,':</b> ', $value ,'</div>';
}
echo '</div>';
I've placed the javascipt code in my head area of my html. Please see URL: http://caspca.org/indexticker.htm The ticker below the navbar works fine in FF and Safari, does not work in IE8 (and mostly likely other IE version as well). In IE, the live page will not even load; will load locally but the ticker doesn't work (remains static). Here is the .js: Code: TICKER_CONTENT = document.getElementById("TICKER").innerHTML;
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 1;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;
ticker_start();
function ticker_start() {
var tickerSupported = false;
TICKER_WIDTH = document.getElementById("TICKER").style.width;
var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";
// Firefox
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
document.getElementById("TICKER").innerHTML = "<TABLE cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'> </SPAN>"+img+"</TD></TR></TABLE>";
tickerSupported = true;
}
// IE
if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'></SPAN>"+img+"</DIV>";
tickerSupported = true;
}
if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;
document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
document.getElementById("TICKER").style.display="block";
TICKER_tick();
}
}
function TICKER_tick() {
if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
window.setTimeout("TICKER_tick()", 30);
Any help to fix is greatly appreciated. Thank you. John I have now go an applet from http://castleamber.com/amberticker.html, I have contacted the publisher and asked whether ther is a way to add line/streaming text from a textarea into he applet at runtime, however they are not responding as yet. If possible could someone tell me how I would use a repaint() case statement in this applet in order to get the value of the textarea to reflect in the ticker. Any code I do use will have all compliments to the creators and those who have helped along the way. Thank you I need to develop a scrolling price ticker, which shows live price quotes and retrieves data through PHP file and that retrieves from back end server. That ticker should have an Embed function also like a Widget, so other blog, websites, they can put the live quotes ticker also. How to be able to create charts, with a selection of different time-frames, and currency pairs. And it should also has Embed feature like a widget. I need this to be Done Quickly.. So need your help please.. Thanks Hi all, am trying to create a page which will automatically scroll to the bottom, then go back to the top and start again. im very new to javascript and have done my best to peice together bits of scripts that do simular things the code below is what ive managed to come up with, it sort of works but am sure is full of mistakes Code: <SCRIPT type='text/javascript'>
var CurrentScroll=0;
var maxDisplacement=0;
function pageReset() {
CurrentScroll=0;
window.scrollTo(0,0);
}
function pageScroll() {
window.scrollTo(0,10000000);
if( typeof self.pageYOffset!='undefined' ){
maxDisplacement=self.pageYOffset;
}
if( document.compatMode && document.compatMode != 'BackCompat' ){
maxDisplacement=document.documentElement.scrollTop ;
}
if( document.body && typeof(document.body.scrollTop)!='undefined' ){
maxDisplacement=document.body.scrollTop;
window.scrollTo(0,0);
}
while(CurrentScroll <= maxDisplacement){
window.scrollBy(0,1); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
CurrentScroll = (CurrentScroll + 1);
}
if(CurrentScroll == maxDisplacement){
pageReset();
}
}
</SCRIPT>
if anyone can help it would be greatly appreciated thanks in advance Scoob I have the following script in my page Code: var tickspeed=4000
var enablesubject=0
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}
var firstDiv=0
var allDivs=0
function contractall(){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
function expandone(){
var firstDivObj=document.getElementById("dropmsg"+firstDiv)
contractall()
document.getElementById("dropcontentsubject").innerHTML=firstDivObj.getAttribute("subject")
firstDivObj.style.display="block"
firstDiv=(firstDiv<allDivs-1)? firstDiv+1 : 0
setTimeout("expandone()",tickspeed)
}
function startscroller(){
while (document.getElementById("dropmsg"+allDivs)!=null)
allDivs++
expandone()
if (!enablesubject)
document.getElementById("dropcontentsubject").style.display="none"
}
if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)
I also have the following in my html: Code: <div id="dropcontentsubject"></div> <div id="dropmsg0" class="dropcontent" subject=""></div> There are a total of 4 dropmsg# divs. I need to be able to input 4 navigation buttons below this code that will, when clicked, pause the ticker and go directly to the "dropmsg#" assigned to that button. I would deeply appreciate any assistance with this. Thank you. I'd google it but I'm not an expert at judging the age of code yet.
Hi all, i'm using this code: Code: var r_text = new Array ();
r_text[0] = "Random Text 0";
r_text[1] = "Random Text 1";
r_text[2] = "Random Text 2";
r_text[3] = "Random Text 3";
r_text[4] = "Random Text 4";
r_text[5] = "Random Text 5";
r_text[6] = "Random Text 6";
r_text[7] = "Random Text 7";
r_text[8] = "Random Text 8";
var i = Math.floor(9*Math.random());
{
document.write("<Marquee SCROLLAMOUNT=10><FONT-FAMILY: 'Calibri'><FONT-SIZE: 13pt)<B><FONT COLOR='#FFFF00'>" +
r_text[i] + "</FONT></B></FONT-SIZE></FONT-FAMILY></Marquee>");
}
This code works as far as me getting a right to left marquee, which, every time the page reloads, generates one of the random pieces of text. I'd like to add a piece of coding to this so that on mouseover, the marquee will pause, but I don't have a clue what to add, or where. My other problem: The text is yellow..size 10, yet whatever font family i specify, will ALWAYS appear in the font Georgia (in the browser im using, Firefox.) in both Opera and IE, it comes out Times New Roman! this is a real rooky problem, but i am a rooky and i'd just like to understand why, and how to ACTUALLY get Calibri. Any help would be greatly appreciated Hi Everyone, Has anyone noticed the twitter confirmation box (when you hit save in Settings, the page refreshes and a white confitmation box appears along the top of the screen and disappears again in a few seconds)? Does anyone know how to go about implementing this? My JS skills would not be the best. I wonder is there a jquery plugin that I could use or similar? Thanks in advance, Brian |
|||||||