JavaScript - [moved]scrolling Text For News Section

Hello,

I'm Chris, welcome everyone. I'm in a need of help. I'm writing application that displays messages from users. This messages are kept in external XML file and every time user post a new message this XML document is appended.

What I want to do is to display all messages at the bottom of screen. Messages have to slide horizontally in one line. To do that I used this code:

Code:

horizontalScroll.js:
var scrllTmr;
window.onload = function(){
	document.getElementById('scroll').style.overflow = 'hidden';
	document.getElementById('scrollme').style.float = 'left';
	document.getElementById('scrollme').style.position = 'relative';

	cw = parseInt(document.getElementById('scroll').offsetWidth/2);
	w = parseInt(document.getElementById('scrollme').offsetWidth/2);
	
	lft = cw + w;
	document.getElementById('scrollme').style.left = lft + "px";
	scrollStep(cw,w,lft);
}
function scrollStep(cw,w,lft){
	if(lft == w * -1)
		lft = cw + w;
	document.getElementById('scrollme').style.left = lft + "px";
	
	if(scrllTmr)
		clearTimeout(scrllTmr);
	scrllTmr = setTimeout('scrollStep(cw,w,' + (lft - 1) + ')',10);
}

index.html:
<div id="scroll"><div id="scrollme">
<h1 style="white-space: nowrap;">Lets scroll this right here 1 | Lets scroll this right here 2 | Lets scroll this right here 3 | Lets scroll this right here 4 | Lets scroll this right here 5 | Lets scroll this right here 6 | Lets scroll this right here 7 | Lets scroll this right here 8 | Lets scroll this right here 9 | Lets scroll this right here 10 | Lets scroll this right here 11 | Lets scroll this right here  12 | Lets scroll this right here 13 | Lets scroll this right here 14 | Lets scroll this right here 15 | Lets scroll this right here 16 | Lets scroll this right here 17 | Lets scroll this right here 18 | Lets scroll this right here 19 | Lets scroll this right here 20
</h1></div></div>

The problem with that code is that at 1/3 length of text it starts from beginning and this is wrong. The text have to scroll to the very end and then start to scroll from beginning again.

Another thing, that I'm unable to deal with is refreshing/reloading the content from XML file. What I need to do is to check if XML was changed/appended and if it was then I have to add this added message to text that scrolls horizontally and view it at the end of horizontal text. I'm pretty sure I have to use Ajax here. Also, if text from XML file will be added to horizontal text page cannot refresh and start scrolling from beginning, but instead of that if have to append horizontal text and continue to scroll showing appended message at the end.

Any advices, please?


Thanks,
Chris

I'm trying to find a script that will scroll text past fixed position sandbag divs.

I want the text to flow around an image as it scrolls.

It's easy to do the wrap around the image part. I can't seem to find anything that will continue wrapping the content of your site around the fixed background as you scroll though.

Did that make sense?

Hi,

Is there away to alternate DIV rows in a specific section. When I try to alternate the DIVs it alternates everything that is a DIV on the page. I want to just alternate a DIV table.

Is this possible?

Thanks alot
Joe

hi everyone! i downloaded a Facebook Page template recently. the template works great, but i wanted to add one thing.

here is the demo of the code:
http://www.facebooktemplates2u.com/d...best_business/

here is where you can download the template:
http://www.schoolofrok.com/facebook/html.zip/

anyhow, the part i want to change is the link that directs it to the content. for example, when you scroll over About Us, the little pop up from the bottom comes out. when you click it, it takes you to the About Us content. what i wanted to do, is make it so that when you click the whole jpg, it can take you to the content also. i noticed that the small link that pops up is too tiny and people get confused on where to click. any suggestions? TIA!

I'm having trouble programming a radio button to enable a group of checkbox options. I want the group to be disabled unless the radio is selected.

Can I use:
Code:

document.getElementById("").disabled=true/false

for a <div> section?

Here's what I have so far.
function:
Code:

function disableSection() {
	if (document.forms.radio.checked)
		document.getElementById("optionalinfo").disabled = false;
	else
		document.getELementById("optionalinfo").disabled = true;
		}

HTML:
Code:

<input type="radio" name="additionalinfo" value="yes"/>Yes! Please sign me up for the following items:<br/>
					<div><blockquote><input id="optionalinfo" type="checkbox" name="additional" value="newsletter"/> I wish to receive <font color="ff69b4"><i>AMT</i></font>'s monthly E-Zine, <b>"Glorious Morning Muffins"</b>.</br>
					<input id="optionalinfo" type="checkbox" name="additional" value="Updates"/> I wish to receive <font color="ff69b4"><i>AMT</i></font> updates.</br>
					<input id="optionalinfo" type="checkbox" name="additional" value="future"/> Keep me posted about future offerings at <font color="ff69b4"><i>AMT</i></font>.<br/>
					<input id="optionalinfo" type="checkbox" name="additional" value="userRegister"/>I need to register to log in</blockquote></div>

In addition to this, I would like the section to fade when disabled. Thanks for any help... again!

Hi. I'm trying to make a news slider for a website in js. This is what I currently have:

Code:

          <script type="text/javascript">
            var refresh = setInterval("refresh()", 5000);
            function refresh()
            {
            $('#top_news').load('top_ten.php').fadeIn("slow");
            }
            </script>

The id #top_news is an empty div, in which the news are shown, and the file top_ten.php gets top 10 news from the database, and outputs a random one. The script is working fine, but what I want is, for news to slide in and when a new article slides in, the old one slides out. It would be even better, if there is an excistant script, for news or divs (a small image and text).
ALSO, when I refresh/load the site, it takes the time from setInterval, to load the news.

Thanks

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%'>&nbsp;</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

Today, all major cell phone makers (exept apple) announced that they will support a common app standard based on html, css, and javascript.

Article: http://news.yahoo.com/s/afp/20100215...owapplications

This means that we can use our web skills to make applications for mobile phones. Previously, we would have to invest learning time into a closed-path system like the iPhone's Objective-C, or a minor player's API like webOS.

Called BONDI, it's basically a webpage with some extra generic DOM handles for using system features like fetching contact lists, GPS, sending SMSs, playing a sound, etc.

While I am not blown away by the demo widgets linked below, i realize they are little more than "hello world", as much actually as figuratively. I expect support and development to entrench around this simple standard, so more and more hardware features will gradually start working on more and more devices. It's the same notion as the JS/HTML software i wrote years ago for firefox that now works in IE8...

Check it out: http://bondi.omtp.org/usebondi/Lists...Y/Gallery.aspx

I encourage all to participate in developing for open source platforms like BONDI. While there's more money right now in iPhone, the future belongs to us. Don't support proprietary techs! Besides, i cannot imagine that Apple/some fan boy will not eventually add BONDI support to iPhones; they already have a browser!

Hello, i wanna make animated news bar like the one in the top of site alibaba.com, so how can i do that, anybody have any kind of tutorial for any thing like this please ?

thanks

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.

Hi I'm really new to this and don't really know if I'm in the right place as for posting. I'm trying to figure out if there is a way to have like a news column on each html page that can be updated by making changes to one file. Kinda like a embedded window that gives a sample of some of the text on the highlights page and then has a click to read more. I was thinking a javascript app would be best but I new at this and don't really understand everything. If someone has an idea or can help it'd be appreciated

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

Hi !

I would like to have a box in which to loop several html files (every 5 seconds or more) .. or to change the file by pointing buttons at the bottom at the box ... (without making click, just mouseover)

I don't know if this is only based on JavaScript ..

I don't know if the terms (box .. loop .. html .. buttons) describe exactly what I want to have ... I Googled it for hours ..

To be more specific, you could see the well known radio site http://www.wabcradio.com/ and on the left there is Today's Top Stories .. That's what I'm looking for ...

I would like to find some site with demos and codes (if possible).

Thanks !

PS. I hope I didn't some kind of publicity by putting that link (I'll wipe it out if it's the case .. I've read the rules, and I posted the link because it's not my site and that isn't in any case an advertisement. And I think it is the best way to show what I am asking ... Thanks again ! )