I've never wrote Javascript code and I need help writing a very simple app

This is probably so simple but I have not found my answer through google. I have found so many bloated pieces of code that do way more than what I really need.

First of all, this CANNOT run in an iframe. I see iframes used a lot with javascript, so I hope this is not an issue.

I want to have about 20 different links on top of a page, and when they are clicked text/php code will be displayed below those links on the main page. Each link should load new code, replacing the old text. Each loaded piece may be very large, with multiple rss feeds involved (possibly 100's of items per feed), so the idea is to only load the terms the webuser wants when they click the link they are wanting. Does this make any sense?

I will try to explain with a simple diagram

(These will be the links at the top the page)
Link 1 | Link 2 | Link 3 | Link 4 | Link 5

load code in this area when Link 1 is clicked
load code in this area when Link 2 is clicked, etc., etc.

Code (markup):

When link 1 is clicked, 5 different rss feeds will populate the page. When link 2 is clicked, 5 new rss feeds are loaded. I have all the code for the rss scripts, it's the javascript loading that I am lost on.

Could anyone please advise me where to start? Thanks!

 

erm. in pseudo code...

1. create your text areas. if they are not to run in iframe, then you probably have seo in mind. hence - do things like:

define .myHiddenDeiv via css to display: none;

<div class="myHiddenDiv" id="hide1">content for 1</div>
<div class="myHiddenDiv" id="hide2">content for 2</div>

2. create the links to the items unified under some common parent.

for example:
<div id="links">
<a rel='nofollow' href="#hide1">Link 1</a> <a rel='nofollow' href="#hide2">Link 2</a> ...
</div>

3. create javascript that:

gets child nodes of "links" and applies an onclick anonymous function to them which:
- kills event to stop event bubbling
- reads the href target, strips the # to get the targetEl id
- changes all .myHiddenDiv to display: "none" (reset)
- changes the target element's display as defined by (for ex.) document.getElementById(targetEl).style.display = "block"

that's it pretty much. to be honest, it would be much easier to accomplish this using a framework like mootools (www.mootools.net) or jquery (www.jquery.com) or whatever else - but it's pretty easy in vanilla js also.

for instance, to work with the above html mark-up in mootools, you'd do:

$("links").getElements("a").addEvents({
    "click": function(e) {
        new Event(e).stop(); // kill click event.
        var targetEl = $(this.get("href").replace("#", "")); // get target el
        $$(".myHiddenDiv").setStyle("display", "none"); // reset all els.
        targetEl.setStyle("display", "block"); // make it visible.
    }
});

PHP:

 

Thanks for the tips, although my eyes are glazed over. I'll have to try researching all this (I have only programmed in html and php), but you gave me somewhere to start. I am using Drupal for my cms, and it has jquery installed for some modules, so I will look in that direction.

The reason I don't want iframes is because i'd like epn ads in these, and epn does not allow their ads to be displayed in any kind of frame.

 

that's ok, having iframe shins etc makes it more complicated than simple divs anyway. if you already have jquery installed, this ought to become very easy - i suggest you do the mark-up side of things first, i.e. output the links, the hidden layers with content and set the css as it should be - then leave the javascript for the end. the difference between what i posted and what jquery does is in the syntax

for example, addEvents({ "click") becomes element.click() instead etc - check .click() in the jquery manual. the setStyle is .css() or you can use .hide() or .toggle() instead.

ah, and u need $("#links") (notice the #) to grab the links, you may be able to do $("#links a").click(... ) - read up on their selectors

 

Thanks again. I won't have time to work on this for awhile, but i'm sure i'll be back with more questions after I start implementing this.

One last question - what I asked earlier, is this how it can really work? meaning that when the page is first loaded, the ONLY WAY these rss feeds and other text are loaded onto the page is if the links are clicked. I have a modules tab program in Drupal using jquery running now, and it loads ALL tabs and their data when the page is loaded. This is what I want to shy away from, because we could be talking about many MB's of data transferred if all these data feeds are loaded at the same time the page is displayed.

 

You could use AJAX to load the data as it is required. But I'm not sure if this will effect SEO negatively.

 

yeah then you need to load the contents of the tabs from ajax as said above. you just need to set some relational attribute within the href so it knows what to load
there may also be many plugins for tabs, including populating content from various sources.