How to display a news item on web page

I want to display a block of text that's a news item on a static web page.   It will be a temporary measure and only want to use it occasionally for an attention getter on the home page.   I need something elegant; maybe a sliding piece of text?
ToString1Asked:
Who is Participating?
 
ronan1979Commented:
<script>
//jQuery
 $("temporary").innerHTML="hello world!";
 </script>

<div id="temporary"></div>

0
 
kostantinos1995Commented:
0
 
ToString1Author Commented:
thanks folks

I did not mention that I want the news item to either appear for a minute then slide away or something like that
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ashley2009Commented:
I think that you want a news feed or rss feed for your static web page. You can find find lots of them in jquery or in YUI.

I also agree with post# ID: 33652568

<script>
//jQuery
 $("temporary").innerHTML="hello world!";
 </script>

<div id="temporary"></div>

Here you can change the innerhtml value every one hour or evry 24 hour. You may put some value like:
Company's slogan for today or for this hour: message

Have all your slogans in a text file in an array. As each hour or day will be passed, fetch the next slogan; therefore, in a static web page, you can have a dynamic div block which can get information the way you prefer. Does it help, or I did not understand your need.

0
 
ashley2009Commented:
I am just adding if you want a news item in a div block by Yahoo:

http://blog.davglass.com/files/yui/get2/

By JQUERY:

http://jquery.malsup.com/gfeed/

A full example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>News By Yahoo Pipe and Json</title>
<script type="text/javascript" src="readJsonNews.js"></script>
<style type="text/css">
body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
      color:#444444;      
}

#page-wrap {
      background: white;
      min-width: 500px;
      max-width: 1260px;
      margin: 10px auto;
      }
      #page-wrap #inside {
            margin: 10px 10px 0px 10px;
            padding-top: 10px;
            padding-bottom: 10px;
      }

#json {    
      padding-left: 230px;
      padding-top: 20px;
      width:700px;
    height:480px;
    overflow:auto;
    font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:10px;color:#444444;
}
#json a:link{
      font-size:12px;
 text-decoration:none;
 font-weight:bold;
  color: #284E98;
 

      
}
#json a:hover{
      font-size:12px;
 text-decoration:underline;
  font-weight:bold;
  color: #284E98;
      
}

      
#header {
      padding-left: 230px;
      width:50%;
}
#header a:link{
 font-size:x-large;

}

</style>
</head>
   <body onload="getFeed()">
<div id="page-wrap">
<div id="inside">
<div id="header">News By Json Feed and Yahoo Pipe
<hr />

</div>
<div id="json">Loading...</div>
</div>
</div>
</body>
</html>

Does it answer your question?


0
 
ashley2009Commented:
And the javascript for above file is:

function getFeed(){
          var newScript = document.createElement('script');
            newScript.type = 'text/javascript';
        newScript.src = 'http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=VE3fZVjT3BG0lA1gjtzu1g&newsfeed=world&_render=json&_callback=myfunction';
             document.getElementsByTagName("head")[0].appendChild(newScript);
}
function myfunction(feed){
      var data = feed.value.items;
      str = '';
        for ( i=0; i<feed.value.items.length; i++) {  
          str += '<a href="' + data[i].link + '" target="_blank">' + data[i].title + '</a>';
          str +=   '<br>'+data[i].description+'<br>';
      }
        document.getElementById('json').innerHTML=str;
}      

0
 
ToString1Author Commented:
hi guys

Really all I want is a scrolling DIV I guess
0
 
ashley2009Commented:
Hi, to have scrolling div, do this:

set height for the div by css, and then specify overflow: auto or scroll, the way you want. The example code I have provided, has scrolling div.

Read more about css overflow property at:
http://www.w3schools.com/Css/pr_pos_overflow.asp

css:
#json {    
      padding-left: 230px;
      padding-top: 20px;
      width:700px;
    height:480px;
    overflow:auto;
    font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:10px;color:#444444;
}


XHTML:
<div id="json">Loading...</div>


You can also try this:
<div id="json" style=" height:480px;overflow:auto;">Loading...</div>

Please change the height's value and overflow property per your need.

0
 
ashley2009Commented:
Thank you for the A grade.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.