[RESOLVED] setting variable from clicking a link

[holdencaulfield]

Hi everyone. This is my first post to this forum, so thank you all for taking the time to read my question. I've spent quite a bit of time researching this, but I haven't had any luck. I'm mostly a PHP guy, but Javascript is definitely on my "list" to study... but I'm in a bit of a pinch with this problem.

I am using Scriptaculous effects to blindup and blind down divs on the side of a page. It works perfectly fine when I only have two divs to switch between.
It currently works like this:

<a href="#" onClick="Effect.BlindUp('help');Effect.BlindDown('discussionread', {delay: .5}); return false;"><img src="images/discussion.png" border="0" /></a>
<a href="#" onClick="Effect.BlindUp('discussionread',{duration:1});Effect.BlindDown('help', {delay: 1});return false;"><img src="images/help.png" border="0" /></a>


I soon realized this will be more difficult for the javascript novice to have more than two links and two divs. As you can see in the above code, I have hard code what to BlindUp in my link. (Obviously if there are only two divs to choose from and the user clicks a link, then we must blind up the other div to reveal the desired div.)

In some tests, I've found that it is possible to use a variable name instead of a div name for the blind up.

To test this, I set the variable "currentdiv" like this:

<script language="JavaScript" type="text/javascript">
var currentdiv = "discussionread";
</script>


Then, I altered my links and added "currentdiv" as the blind up for my second link.


<a href="#" onClick="Effect.BlindUp('help');Effect.BlindDown('discussionread', {delay: .5}); return false;"><img src="images/discussion.png" border="0" /></a>
<a href="#" onClick="Effect.BlindUp(currentdiv,{duration:1});Effect.BlindDown('help', {delay: 1}); return false;"><img src="images/help.png" border="0" /></a>


It works - but in this case, it's not that much different than hard coding "discussionread" instead of my variable "currentdiv."

If I can find a way to set the variable "currentdiv" to whatever link is clicked, then theoretically I should be able to have all the links I want - because if the BlindUp is "currentdiv" then whatever is currently displayed will blind up and the desired link will blind down.

I appreciate you taking the time to look at my problem. Unfortunately I've not been able to find much help elsewhere on the web. I'm not sure if this question is too "noobish" or if my logic is so screwed up that people don't know where to begin.

At any rate, if you can provide some insight and push me in the right direction, I would be very grateful.

Thanks!

[yellabuff]

I'm not sure about this, but I think it's expecting an object. When you specify the id directly it's passed in as an object. When the id name is in a variable it's not passed in as an object. Try...


<a href="#" onClick="Effect.BlindUp(document.getElementById(currentdiv),{duration:1});Effect.BlindDown('help', {delay: 1}); return false;"><img src="images/help.png" border="0" /></a>

[holdencaulfield]

Thanks yellabuff-

In my tests, it does work without using the document.getElementById.

I guess my real problem is defining the "currentdiv" variable from an onClick.

[yellabuff]

Oh ok. It didn't work for me (using IE).

Beyond that I'm not clear of the problem. If you are using different links to show different divs, I'm not clear as to why you need to specify a variable. If you are using the same link to show different divs then I can see the need for a variable.

[holdencaulfield]

Thanks for your help, yellabuff.

As it is now (with only two links and two divs) The first div (discussionread) is visible. But, when you click on the "help" link, it performs an effect that "blinds up" (or "rolls up") discussion read and then blinds down the "help" div. It's basically a transition from one div to the other. So, before I can "blind down" I need to "blind up" whatever is there now.
In the case above, when I have only two divs and two links, I know that if I click "help" that I'll need to blind up "discussion". Then, if I click discussion again, I know that I blind up "help" and blind down "discussion."
However, if there are more than two links and divs, I can't know what div is visible. So, I need my "blind up" to be a "current div" variable - and I need that variable set when you click the link.

So - for example, assume I have three links with corresponding divs-

Link 1
Link 2
Link 3

Link 1 will be the default div that loads when the page loads. If I click Link 2, then I will blind up Link 1 and blind down link 2 and also set link 2 as the current div variable. That way, when I click another link (either 1 or 3) I can automatically blind up link 2 because it is set as the current div variable. Otherwise, if I click link 2, how does it know which one (link 1 link 2 or link 3) to blind up?

[justinbarneskin]

Hi, It looks like you are working with IEs transitions.
You'll need to identify an array of DIVs and use "onfilterchange"

[holdencaulfield]

hi justinbarneskin-

In fact, I'm using Script.aculo.us

Here is a page that shows all the scriptaculous effects:
http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo


I'm using Effect.BlindUp and Effect.BlindDown.

[holdencaulfield]

<script language="JavaScript" type="text/javascript">
var currentdiv = "discussionread";
</script>
<script type="text/javascript">
function visibleDiv(name){
currentdiv=name;
}
</script>


and


<a href="#" onClick="Effect.BlindUp(currentdiv);Effect.BlindDown('discussionread', {delay: 1}); visibleDiv('discussionread'); return false;"><img src="images/discussion.png" border="0" /></a>
<a href="#" onClick="Effect.BlindUp(currentdiv,{duration:1});Effect.BlindDown('help', {delay: 1}); visibleDiv('help'); return false;"><img src="images/help.png" border="0" /></a>
<a href="#" onClick="Effect.BlindUp(currentdiv,{duration:1});Effect.BlindDown('siderecipes', {delay: 1}); visibleDiv('siderecipes'); return false;">recipes</a>


I made it out to be harder than it was.

[justinbarneskin]

Ok I see. So what you want us to do is learn all about the .js files at Script.aculo.us and then write a menu code for you?
This is the kind of project that gets everyone learning at their own pace. I kina think you are on your own :)

[holdencaulfield]

no. In all honesty, what I needed to know was how to set a variable with an onClick. Note that it is resolved now. I got it.
I've learned that its probably best to keep tings brief in a forum... as people don't really seem to read long posts, apparently.