Show/Hide [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

View Full Version : Show/Hide

welshsteve

04-10-2007, 06:30 AM

Hi everyone. I'm very new to PHP.

I have a website that has a page on with multiple divs, with their default "display" set to "none" via a CSS class called "hide".

I then have a form select box with multiple choices, each choice has a relevant DIV associated with it.

Whichever option is chosen, I have some javascript that sets the "class" for the associated DIV to nothing so that the hide class is not applied to that particular DIV

Now this works very well for most people, but a few users are struggling saying nothing happens when they chose an option. I have given them all instructions for enabling active scripting etc in their browser, but one user still says he cannot get it to work.

Therefore, I thought there might be a way of doing this using php instead.

Does anyone know if this can be done without Javascipt? If not, I may have to change the layout of the information I've provided on the site.

Vege

04-10-2007, 01:09 PM

Java and flash without reload, with PHP+page reload sure.

Can't you just detect if the methods you need in javascript are supported and if not, then show the full list without hiding?

<h1>

04-10-2007, 01:33 PM

welshsteve, instead of setting the class of associated DIV to nothing, set the class to a css class with display:block.
I'm pretty sure if you simply remove the classname it is not going to update the associated style, you need to specify the new style attribute.
Give it a try, i'm sure it'll work.

welshsteve

04-11-2007, 04:24 AM

Thanks guys.

I tried <h1>'s suggestion, but it's not worked :( The issue is with IE, it works fine in Firefox. I'm not that how on Javascript so not quite sure what the problem is. HEre's my code. The page can be found at http://www.geocities.com/leamington_district_snooker/s_res_a.html. I've used the same method for quite a few pages, but this is the one I've made the change on.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<title>Leamington and District Billiards and Snooker Association</title>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<link rel="stylesheet" type="text/css" href="mainstyles.css" />

<style type="text/css">

</style>
<script type="text/javascript">

</script>

</head>

<body id="p2">

<div id="header">
<ul class="navigation">
<li class="farright" id="f"><a href="rules.html" accesskey="6">Rules</a></li>
<li id="e"><a href="clubs.html" accesskey="5">Clubs</a></li>
<li id="d"><a href="officers.html" accesskey="4">Officers</a></li>
<li id="c"><a href="billiards.html" accesskey="3">Billiards</a></li>
<li id="b">Snooker</li>
<li id="a"><a href="index.html" accesskey="1">Home</a></li>
</ul>
</div>
<div id="bottomrow">
<div class="nav">
<br />
<h1>Snooker</h1>
<ul class="leftnav">
<li><a href="snooker.html">Latest News</a></li>
<li><a href="s_fixtures.html">Fixtures</a></li>
<li id="sres">Results</li>
<li><a href="s_tables.html">Tables</a></li>
<li><a href="s_cup.html">Cup</a></li>
<li><a href="s_individual.html">Individual</a></li>
<li><a href="s_history.html">History</a></li>
</ul>
</div>
<div class="content">
<br />
<h1>Results - A Division</h1>
<p>
Here are the results for the A Division. Click on a week to show the results for that particular week. Results for the Premier and B Divisions can be accessed via the menu on the right.
</p>
<p>
All match dates are Thursday night. Wednesday and two night matches stated otherwise.
</p>
<div>
<select>
<option id="rad1"> Week 1 - 28 September</option>
<option id="rad2"> Week 2 - 5 October</option>
<option id="rad3"> Week 3 - 12 October</option>
<option id="rad4"> Week 4 - 19 October</option>
<option id="rad5"> Week 5 - 26 October</option>
<option id="rad6"> Week 6 - 2 November</option>
<option id="rad7"> Week 7 - 9 November</option>
<option id="rad8"> Week 8 - 16 November</option>
<option id="rad9"> Week 9 - 23 November</option>
<option id="rad10"> Week 10 - 30 November</option>
<option id="rad11"> Week 11 - 14 December</option>
<option id="rad12"> Week 12 - 21 December</option>
<option id="rad13"> Week 13 - 4 January</option>
<option id="rad14"> Week 14 - 18 January</option>
<option id="rad15"> Week 15 - 25 January</option>
<option id="rad16"> Week 16 - 1 February</option>
<option id="rad17"> Week 17 - 15 February</option>
<option id="rad18"> Week 18 - 22 February</option>
<option id="rad19"> Week 19 - 1 March</option>
<option id="rad20"> Week 20 - 15 March</option>
<option id="rad21"> Week 21 - 22 March</option>
<option id="rad22"> Week 22 - 29 March</option>
</select>
</div>
<br />
<table id="week1" class="hide">
<tr><th colspan="5">WEEK 1 - 28 September</th></tr>
<tr>
<td class="fix">Lillington 4th <span class="red">*</span></td>
<td class="fixv"> </td><td class="fixv">-</td><td class="fixv"> </td>
<td class="fix">Kenilworth S&S F/C</td>
</tr>
<tr>
<td class="fix">Priors 1st</td>
<td class="fixv">7</td><td class="fixv">-</td><td class="fixv">0</td>
<td class="fix">WCC Staff</td>
</tr>
<tr>
<td class="fix">Lillington 1st</td>
<td class="fixv"> </td><td class="fixv">-</td><td class="fixv"> </td>
<td class="fix">Leamington Liberals</td>
</tr>
<tr>
<td class="fix">Harbury 2nd</td>
<td class="fixv"> </td><td class="fixv">-</td><td class="fixv"> </td>
<td class="fix">Kineton S&S</td>
</tr>
<tr>
<td class="fix">Nelson 4th <span class="red">*</span></td>
<td class="fixv"> </td><td class="fixv">-</td><td class="fixv"> </td>
<td class="fix">Lillington 2nd</td>
</tr>
<tr>
<td class="fix" colspan="5">30+ Breaks: <br />BYE: Home Guard 1st<br />
<span class="red">*</span> Wednesday match  <span class="red">**</span> Wed/Thur match
</td>
</tr>
</table>

<table id="week2" class="hide">
<tr><th colspan="5">WEEK 2 - 5th October</th></tr>
<tr>
<td class="fix">Kenilworth S&S F/C <span class="red">*</span></td>
<td class="fixv"> </td><td class="fixv">-</td><td class="fixv"> </td>
<td class="fix">Harbury 2nd</td>
</tr>
<tr>
<td class="fix">WCC Staff <span class="red">**</span></td>
<td class="fixv"> </td><td class="fixv">-</td><td class="fixv"> </td>
<td class="fix">Nelson 4th</td>
</tr>
<tr>
<td class="fix">Leamington Liberals</td>
<td class="fixv"> </td><td class="fixv">-</td><td class="fixv"> </td>
<td class="fix">Priors 1st</td>
</tr>
<tr>
<td class="fix">Home Guard 1st <span class="red">**</span></td>
<td class="fixv"> </td><td class="fixv">-</td><td class="fixv"> </td>
<td class="fix">Lillington 1st</td>
</tr>
<tr>
<td class="fix">Lillington 2nd</td>
<td class="fixv"> </td><td class="fixv">-</td><td class="fixv"> </td>
<td class="fix">Lillington 4th</td>
</tr>
<tr>
<td class="fix" colspan="5">30+ Breaks: <br />BYE: Kineton S&S<br />
<span class="red">*</span> Wednesday match  <span class="red">**</span> Wed/Thur match
</td>
</tr>
</table>

..etc..

<div class="right">
<br />
<h1>Results</h1>
<p>
<ul class="leftnav">
<li><a href="s_res_prem.html">Premier Division</a></li>
<li id="sresa">A Division</li>
<li><a href="s_res_b.html">B Division</a></li>
</ul>
<h1>Related Links</h1>
<p>
<ul class="leftnav">
<li><a href="downloads/s_fixtures.xls">Download Fixture List</a></li>
</ul>
</p>
</div>
</div>


<div id="footer">
<a href="http://www.sinjcomputers.com/" target="_blank"><img src="images/sponsors.gif" style="float:center;width:774px;height:70px;border:0;" alt="sponsors" /></a>
</div>


</body>
</html>

welshsteve

04-11-2007, 06:32 AM

Sorry for the double post, but I've found the below Javascript which works in IE as well as firefox, opera and netscape

<script type="text/javascript">
//ids of elements to show and hide
var ids=new Array('week1','week2','week3','week4','week5','week6','week7','week8','week9','week10','week11','wee k12','week13','week14','week15','week16','week17','week18','week19','week20','week21','week22');

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}

function hidediv(id) {
//function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
</script>

But I have to use anchor links for each id e.g. week1, week2 etc. How can I use a SELECT for this instead? It's much tidier as a SELECT than having 22 links bunched together.

Vege

04-11-2007, 07:39 AM

In firefox, check your javascript console. There is around 15 javascript errors in your page.

welshsteve

04-11-2007, 11:08 AM

I'm only getting warnings, not errors :confused:

It's not my script, I found it on another website.

The below is a temporary place for the site while I test the new method.

http://swweb.frih.net/LDBSA/s_fix_prem.html

Is there a way of getting the links to be a SELECT box instead?

<h1>

04-11-2007, 11:12 AM

sommin on the lines of

<select name="yourselect" onChange="switchid(window.document.yourform.yourselect.options[selectedIndex].value);">

(your select options values should match the id's of the divs you want to display)

welshsteve

04-11-2007, 12:22 PM

Thanks <h1>, you're a star :D

Vege

04-11-2007, 04:25 PM

I'm only getting warnings, not errors :confused:

Iw must have tested it with bad timing.
No errors anymore, but there were.

welshsteve

04-12-2007, 08:30 AM

Iw must have tested it with bad timing.
No errors anymore, but there were.

It's all sorted now.

Cheers everyone