Tab headings load info into web page

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

shoutit

Thread Starter
Joined
Sep 19, 2008
Messages
11
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.:confused:
PS i want the information to be viewable by search engines.

Thanks for taking the time to read all this.:)
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
I can think of two solutions to this, off the top of my head:
  1. Use an iframe to hold the page that is displayed when a link is clicked
  2. 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

Thread Starter
Joined
Sep 19, 2008
Messages
11
the content will be rss feeds that will be shown when the hyperlinked text is clicked.
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
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

Thread Starter
Joined
Sep 19, 2008
Messages
11
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(y):)

:D
 

shoutit

Thread Starter
Joined
Sep 19, 2008
Messages
11
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.:confused:
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
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

Thread Starter
Joined
Sep 19, 2008
Messages
11
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
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
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

Thread Starter
Joined
Sep 19, 2008
Messages
11
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

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
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

Thread Starter
Joined
Sep 19, 2008
Messages
11
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

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
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...
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

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

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top