Solved

How to display a news item on web page

Posted on 2010-09-11
9
454 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

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

831 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