Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #8132 > unrolled thread

adding proper functionality to code.Please read comments in code and first test it in your browser to see the effect.

Back to article view | Back to comp.lang.javascript

Contents

  adding proper functionality to code.Please read comments in code and first test it in your browser to see the effect. Mclaren Fan <himanshu1495@gmail.com> - 2011-11-08 06:31 -0800
    Re: adding proper functionality to code.Please read comments in code and first test it in your browser to see the effect. "Tom de Neef" <tdeneef@qolor.nl> - 2011-11-08 17:26 +0100
    Re: adding proper functionality to code.Please read comments in code and first test it in your browser to see the effect. Richard Cornford <Richard@litotes.demon.co.uk> - 2011-11-08 09:50 -0800

#8132 — adding proper functionality to code.Please read comments in code and first test it in your browser to see the effect.

<style>
.tiles {
background-color:blue;
color:yellow;
width:200px;
padding:5px;
font-weight:bold;
}
#list1,#list2,#list3,#list4 {
display:none;
background-color:lightgreen;
margin-top:0px;
width:170px;
margin-bottom:10px;
}
</style>
<!--End of stylesheet-->
<script>
/* function will check if list1,list2,list3,list4, are displayed and
then hide them and if alreday hidden will

display them.my aim is to create a drop down menu. */
function checker(a) {
var propdisp=document.getElementById('list'+a).style.display;
if (propdisp=='block') {
document.getElementById('list'+a).style.display='none';
document.images.arrow1.src='downarrow.png';
/*the above line is where the problem is i dont want to change arrow1
everytime i want to change arrow2,3,4

according to the argument "a" passed to this function but i dont know
how to refer to the argument a after

arrow.will it be something like this---document.images.arrow
+a.src='downarrow.png'*/
}
else {
document.getElementById('list'+a).style.display='block';
document.images.arrow1.src='uparrow.png';
/*Same problem on the above line also*/
}
}
</script>
<div class="tiles" onClick="checker(1)">Home<img id="arrow1"
src="downarrow.png"

style="width:10px;height:10px;display:inline;"></div>
<ul id="list1">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<div class="tiles" onClick="checker(2)">Tutorials<img id="arrow2"
src="downarrow.png"

style="width:10px;height:10px;display:inline;" ></div>
<ul id="list2">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<div class="tiles" onClick="checker(3)">Games<img id="arrow3"
src="downarrow.png"

style="width:10px;height:10px;display:inline;" ></div>
<ul id="list3">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<div class="tiles" onClick="checker(4)">Contact<img id="arrow4"
src="downarrow.png"

style="width:10px;height:10px;display:inline;" ></div>
<ul id="list4">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
Source file for downarrow.png-----http://www.clker.com/cliparts/7/d/
2/1/119498562897811849tasto_3_architetto_franc_01.svg.med.png
Sorce file for uparrow.png------http://www.clker.com/cliparts/d/5/b/b/
11949856281555500779tasto_4_architetto_franc_01.svg.hi.png
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
please be kind enough to me to download these 2 files and save them
with the names downarrow.png and uparrow.png.
If anyone is not able to understand my problem please reply to
whatever u understood.

[toc] | [next] | [standalone]

#8134

"Mclaren Fan" <himanshu1495@gmail.com> schreef in bericht 
news:d15f562f-af0e-4237-aac8-4e0729cab3ac@f3g2000pri.googlegroups.com...
> <style>
> .tiles {
> background-color:blue;
> color:yellow;
> width:200px;
> padding:5px;
> font-weight:bold;
> }
> #list1,#list2,#list3,#list4 {
> display:none;
> background-color:lightgreen;
> margin-top:0px;
> width:170px;
> margin-bottom:10px;
> }
> </style>
> <!--End of stylesheet-->
> <script>
> /* function will check if list1,list2,list3,list4, are displayed and
> then hide them and if alreday hidden will
>
> display them.my aim is to create a drop down menu. */
> function checker(a) {
> var propdisp=document.getElementById('list'+a).style.display;
> if (propdisp=='block') {
> document.getElementById('list'+a).style.display='none';
> document.images.arrow1.src='downarrow.png';
> /*the above line is where the problem is i dont want to change arrow1
> everytime i want to change arrow2,3,4
>
> according to the argument "a" passed to this function but i dont know
> how to refer to the argument a after
>
> arrow.will it be something like this---document.images.arrow
> +a.src='downarrow.png'*/

You know how to assign listX to propdisp. Can't you do the same with arrowX 
?
currentArrow = document.images.getElementById('arrow'+a);

Tom

[toc] | [prev] | [next] | [standalone]

#8136

On Nov 8, 2:31 pm, Mclaren Fan wrote:
<snip>
> <script>
> /* function will check if list1,list2,list3,list4, are displayed
> and then hide them and if alreday hidden will
>
> display them.my aim is to create a drop down menu. */
> function checker(a) {
> var propdisp=document.getElementById('list'+a).style.display;
> if (propdisp=='block') {
> document.getElementById('list'+a).style.display='none';
> document.images.arrow1.src='downarrow.png';
> /*the above line is where the problem is i dont want to change
> arrow1 everytime i want to change arrow2,3,4
> according to the argument "a" passed to this function but i dont
> know how to refer to the argument a after
<snip>

document.images['arrow'+a].src = 'downarrow.png';

<URL: http://jibbering.com/FAQ/faq_notes/square_brackets.html >

Richard.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web