Solved

How to display a news item on web page

Posted on 2010-09-11
9
486 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

 
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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

726 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