cinek Posted September 22, 2010 Share Posted September 22, 2010 I got 3 sections on my page. Each section has 5 color bars. I got a js function that needs to change colors of the text of each section (this works). Now I need the color bar(s) to increase in height by 20px and decrease if another one is clicked. So if you change the color to green, the green bar goes up by 20px (and stays there) and then you decide you want the text color to be red, you click on the red color bar, the text for that section changes to red, and the green bar returns to its original size.this is the js code I'm trying:edit; - edited the js - now the 1st for loop seems to work, but only for 1 of the 3 boxes. The 2nd for loop does not work at all var colors = new Array();colors[0] = ""colors[1] = "#ed1c24";colors[2] = "#736257";colors[3] = "#620460";colors[4] = "#e87e01";colors[5] = "#00a650";function changeColor(numerSekcji, numerKoloru){ document.getElementById('section' + numerSekcji + 'Text').style.color = colors[numerKoloru]; for (i = numerKoloru; i == numerKoloru; i++ ) { document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.paddingTop = 20 + "px"; document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.marginTop = 0 + "px"; } for (i = numerKoloru; i !== numerKoloru; i++) { document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.padding = 0 + "px"; document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.marginTop = 20 + "px"; } } and this is the html for the whole page <body> <!-- Main wrapper for the whole content --> <div class="main"> <!-- Header --> <div id="header"> <h1><span>Lorem ipsum</span> dolor sit amet...</h1> </div> <!-- End Header --> <!-- Form wrapper --> <div class="form_wrapper"> <!-- Form id div --> <div id="form"> <label for="sections" id="wybierz">Wybierz sekcje</label> <select id="sections"> <option value="sekcjaA">Sekcja A</option> <option value="sekcjaB">Sekcja B</option> <option value="sekcjaC">Sekcja C</option> </select> <label for="tekst" id="wprowadz">Wprowadz tekst</label> <textarea cols="45" rows="5" name="tekstForm" id="tekst" onclick="this.value=''"> </textarea> <input type="submit" value="Wykonaj" id="wykonaj" onclick="copyText(); adjustT()" /> </div> <!-- End Form id div --> </div> <!-- End Form wrapper --> <!-- Content wrapper --> <div class="content"> <!-- Quote(s) wrapper --> <div class="quotes_wrapper"> <!-- Quotes --> <div id="quotes"> Textblock for quotes </div> <!-- End quotes --> </div> <!-- End quotes wrapper --> <!-- Wrapper for all section - to set the height --> <div class="sections_wrapper" id="clearfix"> <!-- Section A Wrapper --> <div class="section1_wrapper"> <h1>Sekcja A</h1> <!-- Section A --> <div id="section1"> <!-- section1Text --> <div id="section1Text"> </div> <!-- End section1Text --> <!-- Color Bars Wrapper--> <div class="color_wrapper"> <a id="color1" href="java script:section1Color1()"> </a> <a id="color2" href="java script:section1Color2()"> </a> <a id="color3" href="java script:section1Color3()"> </a> <a id="color4" href="java script:section1Color4()"> </a> <a id="color5" href="java script:section1Color5()"> </a> <!--Color bars --> </div> <!-- End of Color Bars Wrapper --> </div> <!-- End Section A --> </div> <!-- End Section A wrapper --> <!-- Section B wrapper --> <div class="section2_wrapper"> <h1>Sekcja B</h1> <!-- Section B --> <div id="section2"> <!-- Section2Text - for text layout --> <div id="section2Text"> </div> <!-- End section2Text --> <!-- Color Bars Wrapper--> <div class="color_wrapper"> <!--Color bars --> <a id="color1" href="java script:section2Color1()"> </a> <a id="color2" href="java script:section2Color2()"> </a> <a id="color3" href="java script:section2Color3()"> </a> <a id="color4" href="java script:section2Color4()"> </a> <a id="color5" href="java script:section2Color5()"> </a> </div> <!-- End of Color Bars Wrapper --> </div> <!-- End section B --> </div> <!-- End ection B wrapper --> <!-- Section C wrapper --> <div class="section3_wrapper"> <h1>Sekcja C</h1> <!-- Section C --> <div id="section3"> <!-- section3Text --> <div id="section3Text"> </div> <!-- End section4Text --> <!-- Color Bars Wrapper--> <div class="color_wrapper"> <!--Color bars --> <a id="color1" href="java script:section3Color1()"> </a> <a id="color2" href="java script:section3Color2()"> </a> <a id="color3" href="java script:section3Color3()"> </a> <a id="color4" href="java script:section3Color4()"> </a> <a id="color5" href="java script:section3Color5()"> </a> </div> <!-- End of Color Bars Wrapper --> </div> <!-- End Section C --> </div> <!-- End Section C wrapper --> </div> <!-- End of content wrapper --> <!-- End of Sections_wrapper --> </div> <!-- Footer wrapper --> <div class="footer_wrapper"> <!-- Footer --> <div id="footer"> </div> <!-- End Footer --> </div> <!-- End Footer wrapper --> </div> <!-- End Main wrapper --> </body></html> any ideas what I'm doing wrong?edit: in the array the 1st item is "" - I had to set that because the 1st color was never visible for some reason Link to comment Share on other sites More sharing options...
thescientist Posted September 22, 2010 Share Posted September 22, 2010 do you need a loop? By using document.getElementById, wouldn't all you have to do is set the other two to the original size and then just increment the one associated with the color?i.e. function change_color(ele){ var color = ele.id; switch(color){ case "red": //get the height of the red column, increase it by 20px //set the other two color bars to the starting height break; case "green": //get the height of the green column, increase it by 20px //set the other two color bars to the starting height break; //etc };};...<a id="red" onclick="changeColor(this)"> </a><a id="green" onclick="changeColor(this)"> </a> something like that? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.