JavaScript - Making A Ticker With Javascript

(Please note, although I've included jQuery code here, this is a general JavaScript question.)

At http://jquery14.com/day-05 (code at http://pastie.org/783420) I saw this code:

Code:

// all <a href="#anchor"> smoothscroll to those elements

$("a[href^=#][href!=#]").live('click',function(e){

    $('html,body').animate({'scrollTop': $($(this).attr('href')).offset().top+'px'}); 

    e.preventDefault();

});

I'm using this idea of smoothscrolling to destination anchors in a page I'm developing, but is it a bad idea from an accessibility point of view?

I don't have a screen reader (couldn't get Fire Vox to work), but I am assuming that when you follow a link to a destination anchor in the same document, a screen reader begins reading from the destination anchor.

But this code cancels the default action of the link being followed. The page scrolls, but I assume this means nothing to a screen reader. If my assumptions are correct, the links concerned are broken for screen reader users.

(I suppose none of this matters if screen readers turn off JavaScript, but do they?)

A related question: From what I can tell, when you follow a link to an anchor somewhere on the same page, the page is entirely reloaded. Does this happen in every browser?

Thanks for any help

Hi there,

I am looking to make a javascript hover menu. Like the main hover menus at websites like...

http://www.godaddy.com

and

http://www.mediatemple.com

How can i do this? Are there any tutorials? And is javascript the best language to do this in, or ajax or web2.0 ?

I followed the tutorial below and got my image fade to work:
http://clagnut.com/sandbox/imagefades/

Now I want to have text become visible once the fade is done. I can't get it to work.

style portion:

.enhanced {
visibility:hidden;
}

javascript functions:

<script language="javascript">
document.write("<style type='text/css'> ##thephoto {visibility:hidden;} </style>");
window.onload = function() {initImage()};
function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999pacity;

// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 150);
}
if (opacity = 100) {
textId = 'enhanced';
text = document.getElementById(textId);
text.style.visibility="visible";
}
}
}
</script>

I have added this to the last function:

if (opacity = 100) {
textId = 'enhanced';
text = document.getElementById(textId);
text.style.visibility="visible";
}

But the text appears instantly.

Hello! I'm rather new to the Javascript/jQuery world and I've been attempting to code a small game..

I've been attempting to get six images to evaluate either "Correct" or "Wrong" depending on which image they're dragged onto. apple, guava and pear(.png) should all evaluate correct when dropped onto sprite1, while pineapple, plum and purple should all evaluate correct when dropped onto sprite2. That said they should also evaluate wrong, when dropped onto the incorrect sprite.

The problem I'm having is that they'll all either evaluate correct or wrong depending on whichever fruit is dropped onto a sprite first. It won't recognise when a fruit is dropped onto the incorrect sprite and I'm not sure what to add to make that happen?

Diagram of problem: http://i.imgur.com/u9oH5Mo.png

Code:

<div id="answerBoxes">
<div id="target1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/sprite1.png"/>
</div>
<div id="target2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/sprite2.png"/>
</div>
</div> <!-- end of sprite's -->
<div id="whatsWhatContent">
<div id="answers">
<div id="answer1Box" ondrop="drop(event)" ondragover="allowDrop(event)">
   <img id="answer1" src="img/apple.png"  draggable="true"    
ondragstart="drag(event)"/></div>

<div id="answer2Box" ondrop="drop(event)" ondragover="allowDrop(event)">
   <img id="answer2" src="img/guava.png"  draggable="true" 
ondragstart="drag(event)"></div>

<div id="answer3Box" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="answer3" src="img/pear.png"  draggable="true" 
ondragstart="drag(event)"></div>

  <div id="answer4Box" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="answer4" src="img/pineapple.png"  draggable="true" 
ondragstart="drag(event)">

  <div id="answer5Box" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="answer5" src="img/plum.png"  draggable="true" 
ondragstart="drag(event)">

  <div id="answer6Box" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="answer6" src="img/purple.png"  draggable="true" 
ondragstart="drag(event)">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>

function allowDrop(ev){
ev.preventDefault();
}

function drag(ev){
ev.dataTransfer.setData("content", ev.target.id);
}

function drop(ev){
ev.preventDefault();
var image = ev.dataTransfer.getData("content");
ev.target.appendChild(document.getElementById(image));

if($('#target1').find('#answer1').length == 1)
{
alert("CORRECT!");
} 
else if ($('#target2').find('#answer2').length == 1)
{
alert("Wrong.");
}
else {
alert("Wrong!");
}
}

so i am trying to make a music player where you select a song from a drop down list and then click submit. it then brings up the audio controls with the HTML5 "<audio>" tags and then you can click play and it should work. i am having trouble actually doing this though. the html is

Code:

<html>
<head>
<title>Music Player</title>
<script language="javascript"  type="text/javascript" src="popup.js">
</script>
</head>
<body bgcolor="000000">
<font color="lime" size="6">
<div align="center">
<u>The Mighty Peacock Music Player</u>
</font>
<br>
<br>
<font color="red" size="5">

<select id="convert_to" name="convert_to">
<option value="danza" id="danza">Danza Kuduro by Dan Omar</option>
<option value="iron" id="iron">Iron by Woodkid</option>
<option value="boot" id="boot">Das Boot by Vat19</option>
</select>
<br>
<input type="submit" value="submit" onClick="dispResults(convert_to)">
<p>The song selector is not functioning yet. Sorry for the inconvinence.</p>
<br>
<br>
<div class="music_box" id="music_box">
<audio src="/music/Danza Kuduro.mp3" controls="controls">
</audio>
</div>
</div>
</body>
</html>

and the javascript is

Code:

function dispResults(convert_to) {

    if (id == "danza") {
        document.getElementById("music_box").innerHTML = "<p>" + <audio src="/music/Danza Kuduro.mp3"      controls="controls"></audio> + "</p>";
    }
    
    if (id == "iron") {
        document.getElementById("music_box").innerHTML = "<p>" + <audio src="/music/woodkid.mp3" controls="controls"></audio> + "</p>";
    }

}

any help would be greatly appreciated. Thanks

Alright, I am going to post the sections that matter, and then post the full JS at the bottom.

Alright, so youtube allows you to pull videos using javascript. here is the what I am using

Code:

function insertVideos(div,typ,q,results,overlay){
  inlineVideo = overlay;
  youtubediv[q.toLowerCase()] = div;

  var script = document.createElement('script');
  if(typ == "favs")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit');

  if(typ == "user")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit');


  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

alright, and here is the HTML code.

Code:

<div id="youtubeDivFavs" align="center">
</div>
<script>
insertVideos('youtubeDivFavs','favs','lancxeon','5',0);
</script>

<div id="youtubeDivUser" align="center">
</div>
<script>
insertVideos('youtubeDivUser','user','lancxeon','5',0);
</script>

Now as you can see there are two here. the second one "user" pulls from the url

http://gdata.youtube.com/feeds/users/lancxeon/uploads
It works fine on my website.

the second one pulls from

http://gdata.youtube.com/feeds/users/lancxeon/favorites

It does not work. It makes no sense as you can see both of the urls work fine.

I have already tried only using the favorites one and getting rid of the user one.. to see if it was interfering. And it still would not work.

It truly makes no sense to me why it does not work, if one works why will the other not work?

Here is the full JS file


Code:

<!--
var cleanReturn = 1; //do you want a full youtube return, or just an image list
var inlineVideo = 1; //do you want to redirect to youtube, or play inlinevideo

var timer;
var i =0;
var youtubediv = new Array();

function clearList(ul){
	var list = document.getElementById(ul);
	while (list.firstChild) 
	 {
	    list.removeChild(list.firstChild);
	 }		
}

function hideOverlay(){

	var overlay = document.getElementById('youtubeoverlay');
	overlay.style.display = 'none';
	overlay.innerHTML = "";
}

function videoOverlay(id){
	var objBody = document.getElementsByTagName("body").item(0);
	if(objBody){
    var video = document.createElement('div');
	video.setAttribute('id', 'youtubeoverlay');
	video.innerHTML = '<div id="youtubecontent"><a href="javascript:hideOverlay()" id="close">Close</a><br /><object width="510" height="420"><param name="movie" value="http://www.youtube.com/v/'+id+'"></param><param name="autoplay" value="1"><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="510" height="420"></embed></object></div>';
	objBody.insertBefore(video, objBody.firstChild);
	}else{
		alert('no body element. please add');
	}

}

function mousOverImage(name,id,nr){

	if(name)
		imname = name;
	//make border orange
	imname.style.border = 	'4px solid orange';

	imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg";
	nr++;
	if(nr > 3)
		nr = 1;
	timer =  setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000);

}


function mouseOutImage(name){

	if(name)
		imname = name;
	//make border back to greyish
	imname.style.border = 	'4px solid #333333';
	if(timer)
		clearTimeout(timer)

}

function getVideoId(url){

    var match = url.lastIndexOf('=');
    if (match) {
      id = url.substring(match+1);
      return id;
    }
}

function getId(string){

    var match = string.lastIndexOf("'s Videos");
    if (match != -1) {
      id = string.substring(0,match);
      return id.toLowerCase();
    }

    var match = string.lastIndexOf("query");
    if (match != -1) {
      id = string.substring(match+7);
      return id.toLowerCase();
    }

}
function listVideos(json,divid) {
  divid.innerHTML = '';
  var ul = document.createElement('span');
  ul.setAttribute('id', 'youtubelist');
  if(json.feed.entry){
	  for (var i = 0; i < json.feed.entry.length; i++) {
	    var entry = json.feed.entry[i];
	
	    for (var k = 0; k < entry.link.length; k++) {
	      if (entry.link[k].rel == 'alternate') {
	        url = entry.link[k].href;
	        break;
	      }
	    }
   	

   	var thumb = entry['media$group']['media$thumbnail'][1].url;


    var li = document.createElement('span');

    li.setAttribute('id', 'youtubebox');
    if(cleanReturn == 1){

		if(inlineVideo == 1){
        	li.innerHTML = '<a href="javascript:videoOverlay(\''+getVideoId(url)+'\');"><img src="'+thumb+'" id="youtubethumb" alt="'+entry.title.$t+'"  onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>';

		}else{

        	li.innerHTML = '<tr><a href="'+url+'" target="_new"><img src="'+thumb+'" border="0" id="youtubethumb" alt="'+entry.title.$t+'" title="'+entry.title.$t+'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>';
		}
    }else{
        li.innerHTML = entry.content.$t;
    }

    ul.appendChild(li);
	}
  }else{
  	divid.innerHTML = 'No Results Found';

  }

  document.getElementById(divid).appendChild(ul);
}

function youtubeInit(root) {
  //this hacks the layer for mutiple json queries
  id = getId(root.feed.title.$t);
  listVideos(root, youtubediv[id]);

}


function insertVideos(div,typ,q,results,overlay){
  inlineVideo = overlay;
  youtubediv[q.toLowerCase()] = div;

  var script = document.createElement('script');
  if(typ == "favs")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit');

  if(typ == "user")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit');


  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

//-->

hey, i am trying to add events to my website...i have all the events stored in my google calender and i am trying to show only four events at the time for example:

10/01/2011 - John's Birthday
12/01/2011 - Party

i found this example on google however i am having problems...the problem i am having is that it works fine on my computer however when i look at it on another computer nothing appears http://gdata-javascript-client.googl...le_sample.html

thanks

I'm a newbie...please! html lists making javascript array

I need help with a HTML UL I have ul inside ul but all I want to get when I select a certain list is the children of that list but remove the ul inside that list so they dont show at all http://pastebin.com/m98deaff any help would be great , current selecting code is http://pastebin.com/m6f4b886f


Code:

<div class="demo" id="demo_1">

		<ul>

			<li id="1" class="open"><a id="1" href="#"><ins>&nbsp;</ins>Root node 1</a>

				<ul>

					<li id="2"><a id="2"  href="#"><ins>&nbsp;</ins>Child node 1</a></li>

					<li id="3"><a id="3" href="#"><ins>&nbsp;</ins>Child node 2</a></li>

					<li id="4"><a id="4" href="#"><ins>&nbsp;</ins>Some other child node with longer text</a></li>

					<li id="6"><a id="6" href="#"><ins>&nbsp;</ins>Root node 222</a>

//SHOUL NOT BE IN MY ARRAY
						<ul>

							<li id="7"><a id="7"  href="#"><ins>&nbsp;</ins>Child node 222a</a></li>

							<li id="8"><a id="8" href="#"><ins>&nbsp;</ins>Child node 222b</a></li>

							<li id="9"><a id="9" href="#"><ins>&nbsp;</ins>Some other child node with longer text 222</a></li>
					</ul>
//END OF UL ELEMENT N OT NEEDED THERE COULD BE more than 1

</li>
				</ul>

			</li>

			<li id="5"><a id="5" href="#"><ins>&nbsp;</ins>Root node 2</a></li>

		</ul>

I have some code to pick a wire size and conduit size from 2 separate drop down list. Then inside the js it is evaluated to decide how many wires. My problem is I can't figure out how to make the drop down options go into the JS. I just put in an error alert to test if they were for now.

Here is my code:

Code:

function fillcap(){
		var wire = document.getElementById("wireSize");
		var conduit = document.getElementById("conduitSize");
		if (wire.option.length >= 10 && conduit.option.length == .5) {
			windows.alert("Wire Size exceeds conduit max fill!")
		}

And the html

Code:

		<h2>Fill Capacity</h2><br>
        <b>Wire Size</b><br>
		<select id ="wireSize">
		<option value="1">#14</option> 
		<option value="2">#12</option> 
		<option value="3">#10</option>
		<option value="4">#8</option> 
		<option value="5">#6</option> 
		<option value="6">#4</option>
		<option value="7">#3</option> 
		<option value="8">#2</option> 
		<option value="9">#1</option>
		<option value="10">1/0</option> 
		<option value="20">2/0</option> 
		<option value="30">3/0</option>
		<option value="40">4/0</option>
		<option value="250">250</option>
		<option value="300">300</option> 
		<option value="350">350</option> 
		<option value="400">400</option>
		<option value="500">500</option> 
		<option value="600">600</option> 
		<option value="700">700</option>
		<option value="750">750</option> 
		</select>  <br>
		<b>Conduit Size</b><br>
		<select id="conduitSize">
		<option value=".5">1/2</option> 
		<option value=".75">3/4</option> 
		<option value="1">1</option>
		<option value="1.25">1-1/4</option> 
		<option value="1.5">1-1/2</option> 
		<option value="2">2</option>
		<option value="2.5">2-1/2</option> 
		<option value="3">3</option> 
		<option value="3.5">3-1/2</option>
		<option value="4">4</option> 
		<option value="5">5</option> 
		<option value="6">6</option>
		</select><br>
		<input value="Wires allowed" onclick="fillcap()" type="button"> 
		<input type="text" name="myresultbox" id="resultbox10"> Wires<br>

Thank you for any advice.

Hi! I'm trying to make a multiple choice quiz using javascript. I downloaded codes from http://www.javascriptkit.com/script/cut180.shtml
But when I used it nothing comes up on the results (number of correct answer, number of wrong answer and percentage) as well as the solution box is empty.
I tried it on Google Chrome and it says "Your browser does not accept cookies. Please adjust your settings."
So I tried it in Safari because that's what we use in school and it doesn't work. The results and solution box is empty.
I am guessing that problem is with cookies?
Please help me.
Here are my codes:

- Quiz

//Enter total number of questions:
var totalquestions=10

//Enter the solutions corresponding to each question:
var correctchoices=new Array()
correctchoices[1]='a' //question 1 solution
correctchoices[2]='d' //question 2 solution, and so on.
correctchoices[3]='b'
correctchoices[4]='b'
correctchoices[5]='c'
correctchoices[6]='b'
correctchoices[7]='a'
correctchoices[8]='c'
correctchoices[9]='d'
correctchoices[10]='b'

/////Don't edit beyond here//////////////////////////

function gradeit(){
var incorrect=null
for (q=1;q<=totalquestions;q++){
var thequestion=eval("document.myquiz.question"+q)
for (c=0;c<thequestion.length;c++){
if (thequestion[c].checked==true)
actualchoices[q]=thequestion[c].value
}

if (actualchoices[q]!=correctchoices[q]){ //process an incorrect choice
if (incorrect==null)
incorrect=q
else
incorrect+="/"+q
}
}

if (incorrect==null)
incorrect="a/b"
document.cookie='q='+incorrect
if (document.cookie=='')
alert("Your browser does not accept cookies. Please adjust your browser settings.")
else
window.location="results.htm"
}


function showsolution(){
var win2=window.open("","win2","width=200,height=350, scrollbars")
win2.focus()
win2.document.open()
win2.document.write('<title>Solution</title>')
win2.document.write('<body bgcolor="#FFFFFF">')
win2.document.write('<center><h3>Solution to Quiz</h3></center>')
win2.document.write('<center><font face="Arial">')
for (i=1;i<=totalquestions;i++){
for (temp=0;temp<incorrect.length;temp++){
if (i==incorrect[temp])
wrong=1
}
if (wrong==1){
win2.document.write("Question "+i+"="+correctchoices[i].fontcolor("red")+"<br>")
wrong=0
}
else
win2.document.write("Question "+i+"="+correctchoices[i]+"<br>")
}
win2.document.write('</center></font>')
win2.document.close()
}

______________________________________________________________
For Results

<html>

<head>
<title>Instant Quiz Results</title>
</head>

<body bgcolor="#FFFFFF">

<p align="center"><strong><font face="Arial">

<script src="quizconfig.js">
</script>Quiz Results Summary</font></strong></p>
<div align="center"><center>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form method="POST" name="result"><table border="0" width="100%" cellpadding="0" height="116">
<tr>
<td height="25" bgcolor="#D3FFA8"><strong><font face="Arial">Number Of Correct Questions:</font></strong></td>
<td height="25"><p><input type="text" name="p" size="24"></td>
</tr>
<tr>
<td height="17" bgcolor="#D3FFA8"><strong><font face="Arial">Wrong Questions:</font></strong></td>
<td height="17"><p><textarea name="T2" rows="3" cols="24" wrap="virtual"></textarea></td>
</tr>
<tr>
<td height="25" bgcolor="#D3FFA8"><strong><font face="Arial">Grade Percentage:</font></strong></td>
<td height="25"><input type="text" name="q" size="8"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</center></div>

<form method="POST"><div
align="center"><center><p>

<script>
var wrong=0
for (e=0;e<=2;e++)
document.result[e].value=""

var results=document.cookie.split(";")
for (n=0;n<=results.length-1;n++){
if (results[n].charAt(1)=='q')
parse=n

}

var incorrect=results[parse].split("=")
incorrect=incorrect[1].split("/")
if (incorrect[incorrect.length-1]=='b')
incorrect=""
document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions
document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"%"
for (temp=0;temp<incorrect.length;temp++)
document.result[1].value+=incorrect[temp]+", "


</script>

<input type="button" value="Retake Quiz" name="B1"
onClick="history.go(-1)"> <input type="button" value="Show Solution" name="B2"
onClick="showsolution()"></p>
</center></div>
</form>
</body>
</html>


Please help me. I've been trying to find out what is wrong with my codes for a week.

Thanks in advance!

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 :-)

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?

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

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.