Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1093 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Programming     Javascript :

New to Javascript, have a very simple question

Thread title: New to Javascript, have a very simple question
Closed Thread  
Page 1 of 2 1 2 >
    Thread tools Search this thread Display Modes  
02-17-2006, 05:54 AM
#1
bcd is offline bcd
bcd's Avatar
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
 
Posts: 96
iTrader: 0 / 0%
 

bcd is on a distinguished road

Send a message via AIM to bcd Send a message via MSN to bcd Send a message via Yahoo to bcd

  Old  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
AlexK is offline AlexK
AlexK's Avatar
Status: Request a custom title
Join date: Aug 2005
Location: Copenhagen
Expertise:
Software:
 
Posts: 1,691
iTrader: 0 / 0%
 

AlexK is on a distinguished road

Send a message via MSN to AlexK

  Old

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
bcd is offline bcd
bcd's Avatar
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
 
Posts: 96
iTrader: 0 / 0%
 

bcd is on a distinguished road

Send a message via AIM to bcd Send a message via MSN to bcd Send a message via Yahoo to bcd

  Old

Thanks a lot for the response Alex, but that's not an option here

02-17-2006, 06:17 PM
#4
Paris Holley is offline Paris Holley
Status: Member
Join date: Dec 2005
Location:
Expertise:
Software:
 
Posts: 347
iTrader: 0 / 0%
 

Paris Holley is on a distinguished road

  Old

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
Salathe is offline Salathe
Salathe's Avatar
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
 
Posts: 3,820
iTrader: 25 / 100%
 

Salathe will become famous soon enough

Send a message via MSN to Salathe

  Old

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
bcd is offline bcd
bcd's Avatar
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
 
Posts: 96
iTrader: 0 / 0%
 

bcd is on a distinguished road

Send a message via AIM to bcd Send a message via MSN to bcd Send a message via Yahoo to bcd

  Old

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
techo is offline techo
Status: Lurker
Join date: Jun 2005
Location:
Expertise:
Software:
 
Posts: 1,473
iTrader: 0 / 0%
 

techo is on a distinguished road

  Old

I think the moo.fx library could help you achieve this..

02-26-2006, 12:39 AM
#8
bcd is offline bcd
bcd's Avatar
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
 
Posts: 96
iTrader: 0 / 0%
 

bcd is on a distinguished road

Send a message via AIM to bcd Send a message via MSN to bcd Send a message via Yahoo to bcd

  Old

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
bcd is offline bcd
bcd's Avatar
Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:
 
Posts: 96
iTrader: 0 / 0%
 

bcd is on a distinguished road

Send a message via AIM to bcd Send a message via MSN to bcd Send a message via Yahoo to bcd

  Old

Last EDIT:

It works! Thanks for everyone's help!

02-16-2008, 09:38 AM
#10
Kevin_Creations is offline Kevin_Creations
Status: I'm new around here
Join date: Feb 2008
Location:
Expertise:
Software:
 
Posts: 7
iTrader: 0 / 0%
 

Kevin_Creations is on a distinguished road

  Old

What was the final code that you use to make that to work?

Closed Thread  
Page 1 of 2 1 2 >


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed