|
|
|
|
Thread title: New to Javascript, have a very simple question |
|
|
|
|
|
Thread tools
Search this thread
Display Modes
|
|
02-17-2006, 05:54 AM
|
#1
|
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
Posts: 96
|
New to Javascript, have a very simple question
And I pray the answer will be as simple
Here's the situation: I have five unordered lists, each with a class of "hidden", and each with syntax like this (id increments accordingly for each list):
Code:
<ul id="list1" class="hidden">
<li><a href="#" name="1"> Choice 1 </a></li>
<li><a href="#" name="2"> Choice 2 </a></li>
<li><a href="#" name="3"> Choice 3 </a></li>
</ul>
I also have a couple links (on the same page), which, when pressed, need to (1) change the corresponding list's class to "visible" and (2) go to the appropriate anchor tag. The links will have code based on this:
Code:
<a href="#1"> Choice 1 </a>
My problem is that I have no idea how to code this with Javascript. Any help would be greatly appreciated
|
|
02-17-2006, 09:48 AM
|
#2
|
Status: Request a custom title
Join date: Aug 2005
Location: Copenhagen
Expertise:
Software:
Posts: 1,691
|
I have no idea about javascript, and I am sure there are better ways to do this.
But what about creating a seperate page for each, and let the choice link go there?
Good luck
|
|
02-17-2006, 05:59 PM
|
#3
|
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
Posts: 96
|
Thanks a lot for the response Alex, but that's not an option here
|
|
02-17-2006, 06:17 PM
|
#4
|
Status: Member
Join date: Dec 2005
Location:
Expertise:
Software:
Posts: 347
|
heres a simple thing for u too look at
function showul(id){
getElementById(id).style.visibility='visible';
}
that will make it visible
<a href="#1" onclick="showul('list1')"> Choice 1 </a>
|
|
02-17-2006, 06:26 PM
|
#5
|
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
Posts: 3,820
|
Just an example, not tested at all (I just wrote it straight into here) but should give some clues.
Code:
function showAndGo(show, go) {
var elem = document.getElementById("list" + show);
// If listn actually exist, play with it.
if (elem) {
elem.className = "visible";
}
// Now, go to that anchor!
window.location.hash = go;
}
// Example use:
// This would so list with is "list1" and go to anchor "#1"
showAndGo('1', '1');
|
|
02-25-2006, 07:29 PM
|
#6
|
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
Posts: 96
|
Thanks so much for your responses, Paris and Salathe, and I really apologize for my delayed response.
Your solutions helped, but I'm afraid that my situation is a bit more complicated than that . I need the javascript links to check if any other ul's are visible, and if so, make them invisible and themselves visible in turn.
I'd really appreciate any help with this, I can even offer a text link to your site from my portfolio .
|
|
02-25-2006, 08:39 PM
|
#7
|
Status: Lurker
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 1,473
|
I think the moo.fx library could help you achieve this..
|
|
02-26-2006, 12:39 AM
|
#8
|
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
Posts: 96
|
Originally Posted by techo
I think the moo.fx library could help you achieve this..
|
Wow, that's some really neat code . Unfortunately, it only works in their examples . Here's what I have (with the library files in the directory as well):
Code:
<div id="content_text">
<div id="column1">
<!-- begin left column -->
<h3 class="hidden"> Reveal In Text: </h3>
<ul>
<li><a href="#" class="cla_show"> Show Class Questions </a></li>
<li><a href="#" class="com_show"> Show Commentaries </a></li>
<li><a href="#" class="dic_show"> Show Dictionary Words </a></li>
<li><a href="#" class="stu_show"> Show Student Projects </a></li>
<li><a href="#" class="the_show"> Show Themes </a></li>
</ul>
<div id="choices_scroll">
<ul class="cla">
<li> <a href="#"> Class Questions Choice 1 </a> </li>
<li> <a href="#"> Class Questions Choice 2 </a> </li>
<li> <a href="#"> Class Questions Choice 3 </a> </li>
</ul>
<ul class="com">
<li> <a href="#"> Commentaries Choice 1 </a> </li>
<li> <a href="#"> Commentaries Choice 2 </a> </li>
<li> <a href="#"> Commentaries Choice 3 </a> </li>
</ul>
<ul class="dic">
<li> <a href="#"> Dictionary Words Choice 1 </a> </li>
<li> <a href="#"> Dictionary Words Choice 2 </a> </li>
<li> <a href="#"> Dictionary Words Choice 3 </a> </li>
</ul>
<ul class="stu">
<li> <a href="#"> Student Projects Choice 1 </a> </li>
<li> <a href="#"> Student Projects Choice 2 </a> </li>
<li> <a href="#"> Student Projects Choice 3 </a> </li>
</ul>
<ul class="the">
<li> <a href="#"> Themes Choice 1 </a> </li>
<li> <a href="#"> Themes Choice 2 </a> </li>
<li> <a href="#"> Themes Choice 3 </a> </li>
</ul>
<script type="text/javascript">
//we define two arrays, containing our toggles and divs.
var myDivs = document.getElementsByClassName('cla');
var myLinks = document.getElementsByClassName('cla_show');
//then we create the effect.
var myAccordion = new fx.Accordion(myLinks, myDivs, {opacity: true});
</script>
</div>
<div id="print"> <a href="javascript:window.print()"> Print Commentary </a> </div>
<!-- end left column -->
</div>
...which doesn't work . I've been playing around with my code for an hour with no luck...any suggestions?
|
|
02-26-2006, 05:29 AM
|
#9
|
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
Posts: 96
|
Last EDIT:
It works! Thanks for everyone's help!
|
|
02-16-2008, 09:38 AM
|
#10
|
Status: I'm new around here
Join date: Feb 2008
Location:
Expertise:
Software:
Posts: 7
|
What was the final code that you use to make that to work?
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|