Hi all

 

I am designing a site for a local football team, and I have a layout etc done, completley in css and xhtml

 

Anyway there is one feature that i am looking for, i think it uses javascript and i need someone to help me find a resrouce for it or somehting.

 

On the site www.gretnafootballclub.co.uk near the bottom of the page they have a "next match/last match" tab, does anyone know how i could create something similar

 

thank you

I don't know very much about JS but here is the script:

 

<script language="JavaScript" type="text/javascript">

function showRegion(globalregion) {
 if (globalregion == "group_a") {
document.getElementById("group_a").style.display="block";
document.getElementById("group_b").style.display="none";
  }
 if (globalregion == "group_b") {
document.getElementById("group_a").style.display="none";
document.getElementById("group_b").style.display="block";
  }
}

</script>

 

Then you apply this JS action to the link ("Next Match", etc):

 

<a class="switch_text" style="CURSOR: pointer" onclick="showRegion('group_b');">Last match</a>

 

Someone who does JS will surely come along with a better answer but that oughta get you started!

ty expact... one question, where do i stick my text etc.. i have no idea about JS lol

You mean the "Next Match" text? Stick it between the anchor tag in the HTML. No JS editing necessary (thank goodness!).

 

This is what they have on the site you mentioned:

 

<div class="nexthead">Next match</div>

<div class="lasthead"><a class="switch_text" style="CURSOR: pointer" onclick="showRegion('group_b');">Last match</a></div>

 

To breakdown what that is, on the first line you've got the div opening, then the text that viewers see ("Next Match") then a closed div.

 

On the second line you open another div, then you start specifying the attributes for the anchor (link) so that when you click on it the tabs will switch. The onclick calls in the JS command. then the anchor text is "Last Match", close the anchor (link), close the div.

 

It's exactly like a normal hyperlink but with a few extra bits in the < a > section.

 

This is what you'd normally use for a link:

 

<a href="group_b">Last Match</a>

 

Does that help, seeing the breakdown and comparison?

 

If you can show us the site you're working on then we can guide you further.

 

ETA: I should point out that, as far as the JS is concerned, I'm just guessing. Hopefully someone will come along and set us both straight because I'm sure there are flaws in my copy/paste solution.

Just realised you probably mean the match info. *Smacks head*

 

Place the content for the active tab in a div id="group_a" and the onclick tab in a div id="group_b". You can use straightforward HTML after that for the scores, etc. and close each div when you're done.

 

The (simplified) example given is:

<div id="group_a">

 <div class="nexthead">Next match</div>
  <div class="lasthead""><a class="switch_text" style="CURSOR: pointer" onclick="showRegion('group_b');">Last match</a></div>

<img src="images/badges/aberdeen60.jpg">
<img src="images/badges/gretna60.jpg">

Aberdeen v Gretna<br />
Saturday 15th March, KO 3.00pm

<ul class="matchheadlines">
		<li><a href="tickets/news/">Ticket Information </a></li>
		<li><a href="tickets/away/aberdeen/">Travel Details </a></li>
		<li><a href="first/form.shtml">Form Guide</a></li>

  </ul>
</div>

<div id="group_b">

 <div class="nexthead" style="background-color:#666666;"><a class="switch_text" style="CURSOR: pointer" onclick="showRegion('group_a');">Next match</a></div>

  <div class="lasthead">Last match</div>

<img src="images/badges/gretna60.jpg">
<img src="images/badges/dundeeu60.jpg">

Gretna 0-3 Dundee United<br /> 
 Thursday 6th March

 <ul class="matchheadlines">
		<li><a href="news/2008/03/06/gretna-0-3-dundee-united/">Match Report</a></li>
		<li><a href="media/photos/060308/">Action Shots </a></li>
		<li><a href="#">Match Reaction</a></li>
  </ul>
</div>

<script type="text/javascript">
document.getElementById('group_b').style.display="none";
</script>