Read More links

Hi Guys,

does anyone know of a way to code web page so that a "read more" link, as used in blogs and Twitter for example, can automatically open in a separate column, without the user having to click on it.

So, a good example would be Twitter. If I produce a webpage with a live Twitter feed in one column, each of the tweets are truncated with a read more link at the end. So for instance, I would like to have the top tweet automatically open in the second column with the full tweet displayed, exactly as if I had clicked on the read more link - apart from the fact that it's displayed in a separate column of course.
SpareheadoneAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You will have to be more descriptive to exactly what you want.  There are a lot of possibilities.   Are you actually using a twitter feed or do you have a database and need paging?  Or do you have a lot of info in a container and you only want to show part of it until some link is clicked.  Please post a link to your page to help us understand.
0
SpareheadoneAuthor Commented:
Ok, for this particular project, I am talking about Twitter.

I have hastily created an example page at www.eventav.biz/twitter/alltweets.html

There is a table with 3 columns - in the leftmost is an image, in the middle is a twitter feed and in the right column is a grey box which represents where I would like to automatically display the top tweet on the page.

Sometimes the link at the end of a tweet is "Show Media" and others it's "expand" or "read more" - whatever that link is I would like it displayed in the right column without having to click on it.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If they don't click on it, how do you want the data to get into the column?  Are you thinking hover instead? or something else?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

SpareheadoneAuthor Commented:
No. Basically, I don't want to rely on any user interaction at all if that is possible.

Say for example there are 5 tweets on the page. The top tweet would be designated as number 1 or whatever, and the code in the column would look for the tweet assigned to the number one value tweet and then display the full tweet.

The idea is to have a stand alone, passive display (which would refresh periodically) which always displays a list of tweets but shows the full details of the number one tweet automatically in the column or box directly to right of the list.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Ok, that makes sense.    

You want to see the list of tweets in the main column, and in the right column you want to see the full ("read more") html display and rotate every x seconds. Does that sound right?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Do you want this in javascript? or jquery?
0
SpareheadoneAuthor Commented:
Hi yes that's correct - as for the programming language, probably Javascript as a preference but to be honest I would need an idiots walk through with whatever is used.
0
SpareheadoneAuthor Commented:
OK - So, considering there "are a lot of possibilities" there seems to be an extreme lack of actual suggestions. Do I have to assume that this is not actually possible to do after all then?

Any feedback would be welcome guys.
0
smeghammerCommented:
Hi spareheadone,

try this - it is just a rough take on your description. I mocked it up in pure javascript:
<html>
<head>
<title>Feed test</title>
</head>
<body>
<!-- feed containers -->
<div style="float:left;border:1px solid red;width:400px;" id="leftpanel">left</div>
<div style="float:left;border:1px solid red;width:400px;" id="rightpanel">right</div>
<script>
//simulate a feed (JSON). Assume the first element is the most recent.
//'feed' would be the result of a call (AJAX maybe) to a Twitter feed:
var feed = [{title:"article1",summary:"Summary of article 1",content:"content fdor article 1 content fdor article 1..."},{title:"article2",summary:"Summary of article 2",content:"content fdor article 2 content fdor article 2..."},{title:"article3",summary:"Summary of article 3",content:"content fdor article 3 content fdor article 3..."},{title:"article4",summary:"Summary of article 4",content:"content fdor article 4 content fdor article 4..."},{title:"article5",summary:"Summary of article 5",content:"content fdor article 5 content fdor article 5..."}]
var summaries = "";
var main = "";

//toggle main display manually
function  viewmore(feedId)
{
  var id = feedId.split("_")[1];
  document.getElementById("rightpanel").innerHTML = "<h1>"+feed[id].title+"</h1><i>"+feed[id].summary+"</i><div>"+feed[id].content+"</div>";;
}

//load the initial view. Could do with body onload, jquery etc.
try
{
  main = "<h1>"+feed[0].title+"</h1><i>"+feed[0].summary+"</i><div>"+feed[0].content+"</div>";
  for(var a=0;a<feed.length;a++)
  {
    summaries += "<div><b><a href='#' onclick='viewmore(\"view_"+a+"\");'>"+feed[a].title+"</a></b><i>"+feed[a].summary+"</i></div>"
  }
  document.getElementById("rightpanel").innerHTML = main;
  document.getElementById("leftpanel").innerHTML = summaries;
}
catch(e)
{
  alert(e.message);
}
</script>
</body>
</html>

Open in new window


I don't know what a Twitter feed looks like, but I assume you can get/convert a JSON structure and rehydrate a JS object.

All I do then is iterate over the feed array and automatically drop the first one into my RH column. The LH column has the titles and summaries, along with a link that triggers the manual population of the RH column. Of course, the real data will contain a bunch more fields.

Cheers
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SpareheadoneAuthor Commented:
Hi Smeghammer (great name)

not really sure if this works as I'm on another project at the moment and don't have the time to check it properly but as you're the only one whose took the time to come up with a solution I thought you deserved the points.

Thanks for the help.

At some stage I will get back to this and I may need further assistance and if I do I will post again.

Cheers.
0
smeghammerCommented:
You are welcome. Thanks for the points. Boys from the Dwarf stick together :-)

Cheers
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.