Tab headings load info into web page

shoutit · Sep 19, 2008

I am in the process of building a website, my programming language is limited, most of the time I use front page to click/drag and place the elements and some times adjust it slightly to get what I want.

The problem I have is that I want to create a web page that has a section incorporated into it that has various elements surrounding a table with two rows.
The top row will contain hyperlinked text for different sections. The next row will show the information depending on which hperlinked text has been clicked on.
An example is the following

US News UK News US Business UK Business

When one of the above links is clicked this area will show the information related to that section, so if us news was clicked below it will show the us news info, if the uk business was then clicked the section will show uk business information.

I have tried creating a general template and have each section as a web page so that when a tab text hyperlinked is clicked the whole page would reload as a new page for that topic. But i want just a small section of the page to load the relvant information.

Can anyone help.

PS i want the information to be viewable by search engines.

Thanks for taking the time to read all this.

tomdkat · Sep 19, 2008

I can think of two solutions to this, off the top of my head:

Use an iframe to hold the page that is displayed when a link is clicked
Use CSS to show and hide DIVs that contain the information that is to be displayed when a link is clicked

I'm thinking the CSS method would be more search engine friendly but it would slightly complicated to implement. It's not really complicated HTML or anything just wrapping your head around it would be the main challenge. (I mention this based on your comment above about having limited programming skills).

I'll work up a prototype of a CSS solution you can try out to see how it would work.

Is the content that is displayed when a link is clicked coming from an external site or is it content you will provide yourself?

EDIT: Here is an example of a CSS approach:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Hidden DIVs</title>
  <style type="text/css">
.news {
display: none;
}
  </style>
  <script type="text/javascript">
function hideSections() {
document.getElementById('news-us').style.display='none';
document.getElementById('news-uk').style.display='none';
document.getElementById('news-africa').style.display='none';
}
function showNews(section) {
hideSections();
newsItem = document.getElementById('news-'+section);
if (newsItem) {
newsItem.style.display='block';
}
}
  </script>
</head>
<body>
<table style="text-align: left; width: 100%;" border="2" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="text-align: center;"><a onclick="showNews('us');" href="#">US News</a></td>
      <td style="text-align: center;"><a onclick="showNews('uk');" href="#">UK News</a></td>
      <td style="text-align: center;"><a onclick="showNews('africa');" href="#">Africa News</a></td>
    </tr>
    <tr>
      <td colspan="3">
      <div class="news" id="news-us">
      <p>This is the news from the US:</p>
      <p>The economy is in SERIOUS trouble! &nbsp;Yikes!!!!!</p>
      </div>
      <div class="news" id="news-uk">
      <p>This is the news from the UK:</p>
      <p>Jaguar Motorcars unveils a stunning new Jag today.</p>
      </div>
      <div class="news" id="news-africa">
      <p>This is the news from Africa:</p>
      <p>The Pharoahs have returned to build a new, state of the
art pyramid.</p>
      </div>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Peace...

shoutit · Sep 19, 2008

the content will be rss feeds that will be shown when the hyperlinked text is clicked.

tomdkat · Sep 19, 2008

Ok, then going with iframes is your best bet. In the row that will have the content displayed, put an iframe in it:

<tr>
<td>
<iframe name="rssfeed" src="rss feed URL"></iframe>
</td>
</tr>

Then, you can use the target attribute to send the feed to the iframe, like this:

<a href="(URL of RSS feed)" target="rssfeed">

I haven't tried that personally but I think this should get you headed in the right direction.

Peace...

shoutit · Sep 19, 2008

thanks for the help I will look at what you have soon me and try out the code.
Thanks for taking the time to respond to the problem I have.

Thanks alot

Craig

shoutit · Sep 21, 2008

what would i need to do in order to show text/html code in the row under the hyperlinks as a preset when the page is loaded eachtime.

tomdkat · Sep 22, 2008

Do you mean you want text to appear above or below the iframe?

If so, it would look something like:

<tr>
<td>
<p>Here is text above the iframe</p>
<iframe name="rssfeed" src="rss feed URL"></iframe>
<p>Here is text below the iframe</p>
</td>
</tr>

Of course, you would fine tune the above accordingly.

Peace...

shoutit · Sep 23, 2008

i didnt really explain it clearly.
what would i have to do to say have the US news to be shown eachtime the web page is loaded in the frame below the links as a default, if i wanted another part say uk business then i would have to click and the frame would then change from the default us news to the uk business section

MRdNk · Sep 23, 2008

I would actual go for a AJAX solution, see the w3Schools - http://www.w3schools.com/ajax/default.asp

And check out MooTools.net for a good Javascript framework.

tomdkat · Sep 23, 2008

shoutit said:
i didnt really explain it clearly.
what would i have to do to say have the US news to be shown eachtime the web page is loaded in the frame below the links as a default, if i wanted another part say uk business then i would have to click and the frame would then change from the default us news to the uk business section

Ah, gotcha. Simply set the "src" parameter of the iframe to be the US News page and that will be the default page each time the page is loaded. Then, as they click links, the "src" parameter of the iframe will be changed to the appropriate new page to load. The HTML I posted above does what you want except iframes aren't being used.

In the above HTML, this row would have to be changed to contain the iframe:

Code:

 <tr>
      <td colspan="3">
      <div class="news" id="news-us">
      <p>This is the news from the US:</p>
      <p>The economy is in SERIOUS trouble! &nbsp;Yikes!!!!!</p>
      </div>
      <div class="news" id="news-uk">
      <p>This is the news from the UK:</p>
      <p>Jaguar Motorcars unveils a stunning new Jag today.</p>
      </div>
      <div class="news" id="news-africa">
      <p>This is the news from Africa:</p>
      <p>The Pharoahs have returned to build a new, state of the
art pyramid.</p>
      </div>
      </td>
    </tr>

The DIVs in the table cell would go away and an iframe would take their place:

Code:

 <tr>
[b]      <td colspan="3">
        <iframe src="(US News page URL)" name="rssfeed" id="rssfeed"></iframe>
      </td>[/b]
    </tr>

Then, the JavaScript I use to show/hide DIVs would instead get a handle to the iframe and change the "src" attribute to have the correct location if simply using the "target" attribute of the anchor tag didn't do the trick (as I described in post #4 above).

I think Ajax isn't needed for this kind of thing.

Peace...

shoutit · Sep 24, 2008

once again thanks for responding and so quick as well.
I noticed that you mentioned about using iframes, i had heard from a number of differnet sources that some websites have problems being indexed with search engines.

because of iframes in their code.

Is there another way to get round not using iframes?

tomdkat · Sep 24, 2008

Use of iframes can impact how the content in the iframe is indexed and not the rest of the content on the page that contains the iframe. In your case, the RSS feeds would or could be impacted when bots or spiders crawl your site. Are you the source of the RSS feeds or are you pulling those feeds from elsewhere?

EDIT: Here is a JavaScript script worth checking out.

Peace...

shoutit · Sep 24, 2008

the feeds will be a mix of content of my own and some other feeds will be from other external sources, for these external sources i will be using carp evolution to sort out the rss feeds.

tomdkat · Sep 24, 2008

Ok. Check out the link to the script I posted above and see if that helps. It appears you can use a DIV to hold the RSS feed and that won't require an iframe.

Peace...

Tab headings load info into web page

shoutit

tomdkat

Retired Trusted Advisor

shoutit

tomdkat

Retired Trusted Advisor

shoutit

shoutit

tomdkat

Retired Trusted Advisor

shoutit

MRdNk

tomdkat

Retired Trusted Advisor

shoutit

tomdkat

Retired Trusted Advisor

shoutit

tomdkat

Retired Trusted Advisor

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Welcome to Tech Support Guy!

Latest posts

Members online