Solved

How to display a news item on web page

Posted on 2010-09-11
9
443 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

947 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now