Solved

How to display a news item on web page

Posted on 2010-09-11
9
461 Views
Last Modified: 2012-05-10
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?
0
Comment
Question by:ToString1
9 Comments
 
LVL 4

Accepted Solution

by:
ronan1979 earned 84 total points
ID: 33652568
<script>
//jQuery
 $("temporary").innerHTML="hello world!";
 </script>

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

0
 
LVL 2

Assisted Solution

by:kostantinos1995
kostantinos1995 earned 84 total points
ID: 33653068
0
 

Author Comment

by:ToString1
ID: 33653765
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 3

Assisted Solution

by:ashley2009
ashley2009 earned 332 total points
ID: 33653950
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
 
LVL 3

Assisted Solution

by:ashley2009
ashley2009 earned 332 total points
ID: 33653998
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
 
LVL 3

Assisted Solution

by:ashley2009
ashley2009 earned 332 total points
ID: 33654031
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
 

Author Comment

by:ToString1
ID: 33654560
hi guys

Really all I want is a scrolling DIV I guess
0
 
LVL 3

Assisted Solution

by:ashley2009
ashley2009 earned 332 total points
ID: 33654601
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
 
LVL 3

Expert Comment

by:ashley2009
ID: 33658306
Thank you for the A grade.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question