adding proper functionality to code.Please read comments in code andfirst test it in your browser to

Discussion in 'Javascript' started by Mclaren Fan, Nov 8, 2011.

  1. Mclaren Fan

    Mclaren Fan Guest

    <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.
     
    Mclaren Fan, Nov 8, 2011
    #1
    1. Advertising

  2. Mclaren Fan

    Tom de Neef Guest

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

    "Mclaren Fan" <> schreef in bericht
    news:...
    > <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
     
    Tom de Neef, Nov 8, 2011
    #2
    1. Advertising

  3. Re: adding proper functionality to code.Please read comments in codeand first test it in your browser to see the effect.

    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.
     
    Richard Cornford, Nov 8, 2011
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. learningjava
    Replies:
    8
    Views:
    495
    John C. Bollinger
    Dec 12, 2003
  2. www.jrdesignstudio.com
    Replies:
    7
    Views:
    1,338
    philiptdotcom
    Oct 18, 2007
  3. Replies:
    9
    Views:
    1,418
    Puppet_Sock
    Jan 4, 2008
  4. Replies:
    15
    Views:
    1,569
    Richard Heathfield
    Mar 14, 2008
  5. pmp
    Replies:
    1
    Views:
    7,045
    .rhavin grobert
    Oct 24, 2008
Loading...

Share This Page