javascript - How to fix position of div tags? -
i creating interactive periodic table project.
this looks , good, change resolution, right side elements scatter on page , becomes mess. 
here snippet:-
function lanthanoids() { var elements1 = document.getelementsbyclassname('lanthanoids'); var i, marginleft = -70; (i = 0; < elements1.length; i++) { marginleft += parseint(window.getcomputedstyle(elements1[i]).marginleft, 10) + 70; elements1[i].style.marginleft = marginleft + 'px'; } } function actinoids() { var elements2 = document.getelementsbyclassname('actinoids'); var i, marginleft = -70; (i = 0; < elements2.length; i++) { marginleft += parseint(window.getcomputedstyle(elements2[i]).marginleft, 10) + 70; elements2[i].style.marginleft = marginleft + 'px'; } } function typeshover() { $('.info').hover( function() { getid = this.id; originalcolor = document.getelementbyid(getid).style.backgroundcolor; originalall = document.queryselector('div').style.backgroundcolor; switch (getid) { case "alkali_metals": $(".info:not(#lithium, #sodium, #potassium, #rubidium, #cesium, #francium, .types, .typescont)").css("background-color", "d3d3d3"); break; case "alkaline_earth_metals": $(".info:not(#beryllium, #magnesium, #calcium, #strontium, #barium, #radium, .types, .typescont)").css("background-color", "d3d3d3"); break; case "transition_metals": $(".info:not(#scandium, #titanium, #vanadium, #chromium, #manganese, #iron, #cobalt, #nickel, #copper, #zinc, #yttrium, #zirconium, \ #niobium, #molybdenum, #technitium, #ruthenium, #rhodium, #palladium, #silver, #cadmium, #hafnium, #tantalum, #tungsten, \ #rhenium, #osmium, #iridium, #platinum, #gold, #mercury, #rutherfordium, #dubnium, #seaborgium, #bohrium, #hassium, #meitnerium, \ #darmstadtium, #roentgenium, #copernicium, .types, .typescont)").css("background-color", "d3d3d3"); break; case "post_transition_metals": $(".info:not(#aluminium, #gallium, #indium, #tin, #thalium, #lead, #bismuth, #ununtrium, #flerovium, \ #ununpentium, #livemorium, .types, .typescont)").css("background-color", "d3d3d3"); break; case "lanths": $(".info:not(#lanthanum, #cerium, #praseodymium, #neodymium, #promethium, #samarium, #europium, #gadolinium, #terbium, #dysprosium, \ #holmium, #erbium, #thulium, #ytterbium, #lutetium, #lanths_space, .types, .typescont)").css("background-color", "d3d3d3"); break; case "acts": $(".info:not(#actinium, #thorium, #protactinium, #uranium, #neptunium, #plutonium, #americium, #curium, #berkilium, #californium, \ #einsteinium, #fermium, #mendelivium, #nobelium, #lawrencium, #acts_space, .types, .typescont)").css("background-color", "d3d3d3"); break; case "other_non_metals": $(".info:not(#hydrogen, #carbon, #nitrogen, #oxygen, #phosphorus, #sulphur, #selenium, .types, .typescont)").css("background-color", "d3d3d3"); break; case "halogens": $(".info:not(#flourine, #chlorine, #bromine, #iodine, #astatine, #ununseptium, .types, .typescont)").css("background-color", "d3d3d3"); break; case "noble_gases": $(".info:not(#helium, #neon, #argon, #krypton, #xenon, #radon, #ununoctium, .types, .typescont)").css("background-color", "d3d3d3"); break; case "metalloids": $(".info:not(#boron, #silicon, #germanium, #arsenic, #antimony, #tellurium, #polonium, .types, .typescont)").css("background-color", "d3d3d3"); break; default: $(".info").css("background-color", originalall); } }, function() { document.getelementbyid(getid).style.backgroundcolor = originalcolor; // document.queryselector('div').style.backgroundcolor = originalall; $(".info").css("background-color", originalall); }); } function slider(val) { var slider = document.getelementbyid("temperature"); var val = slider.value; originalall = document.queryselector('div').style.backgroundcolor; document.getelementbyid('amount').innerhtml = val + "k"; // switch(val) // { // case "28": // $('#hydrogen, #helium, #neon').css("background-color", "red"); // break; // case "56": // $('#oxygen, #flourine').css("background-color", "blue"); // break; // case "84": // $('#nitrogen').css("background-color", "red"); // $('#argon').css("background-color", "blue"); // break; // } if (val >= 28) { $('#hydrogen, #helium, #neon').css("background-color", "red"); } if (val >= 56) { $('#oxygen, #flourine').css("background-color", "blue"); } if (val >= 84) { $('#nitrogen').css("background-color", "red"); $('#argon').css("background-color", "blue"); } if (val >= 112) { $('#hydrogen, #helium, #neon, #oxygen, #flourine, #nitrogen, #argon').css("background-color", "red"); } if (val >= 140) { $('#krypton').css("background-color", "red"); } } window.addeventlistener('load', lanthanoids, false); window.addeventlistener('load', actinoids, false); window.addeventlistener('load', typeshover, false); window.addeventlistener('load', slider, false);* { text-align: center; } { color: black; text-decoration: none; } a:hover { color: blue; } img { visibility: hidden; display: inline; position: absolute; margin-left: 70px auto; margin-right: 70px auto; } body { background-color: #eafeef; } p { font-size: 5px; margin-top: -40px; letter-spacing: -1px; } h2 { line-height: 60px; } .para { font-size: 10px; letter-spacing: 0px; line-height: 20px; text-align: center; } em { font-weight: bold; font-size: 7px; padding-right: 5px; } div { display: inline; box-shadow: none; height: 70px; width: 70px; float: left; line-height: 60px; font-family: trebuchet ms; font-size: 30px; letter-spacing: -2px; } div:hover div:not(.typescont):hover { cursor: pointer; -moz-box-shadow: inset 0 0 6px #000000; -webkit-box-shadow: inset 0 0 6px #000000; box-shadow: inset 0 0 6px #000000; } .types { visibility: visible; position: absolute; height: 35px; width: 80px; line-height: 15px; left: 260px; top: 50px; letter-spacing: -1px; font-size: 10px; } #metals, #non_metals, #metalloids { height: 80px; border-radius: 10px; font-size: 15px; line-height: 0px; letter-spacing: 0px; } #metals { width: 325px; padding: 15px; margin-top: 15px; margin-left: 235px; background-color: #9faeb8; } #non_metals { width: 170px; padding: 15px; margin-top: -110px; margin-left: 600px; background-color: #9faeb8; } #metalloids { height: 30px; width: 109px; line-height: 30px; top: 23px; left: 847px; background-color: #8ee39c; transform: rotate(90deg); transform-origin: left top 0; } #alkali_metals { border-top-left-radius: 5px; border-bottom-left-radius: 5px; line-height: 30px; background-color: #ffcc33; } #alkaline_earth_metals { left: 340px; background-color: #ffff64; } #transition_metals { left: 420px; background-color: #ddbbbb; } #post_transition_metals { border-top-right-radius: 5px; border-bottom-right-radius: 5px; left: 500px; background-color: #abe3d5; } #other_non_metals { border-top-left-radius: 5px; border-bottom-left-radius: 5px; left: 627px; background-color: #4dff4d; } #halogens { border-top-right-radius: 5px; border-bottom-right-radius: 5px; line-height: 30px; left: 707px; background-color: #4bf1d5; } #noble_gases { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; height: 25px; line-height: 25px; top: 85px; left: 665px; background-color: #89d3ff; } #lanths { border-bottom-left-radius: 5px; line-height: 25px; top: 85px; left: 340px; height: 25px; background-color: #ffc3a6; } #lanths_space { margin-left: 210px; margin-top: 247px; font-size: 20px; top: 800px; background-color: #ffc3a6; } #acts { border-bottom-right-radius: 5px; line-height: 25px; top: 85px; left: 420px; height: 25px; background-color: #f0c6e2; } #acts_space { margin-left: 210px; font-size: 20px; background-color: #f0c6e2; } .row4, .row5, .row6, .row7, .row8, .row9, .row10, .row11, .row12 > div:nth-child(1), .row3 > div:nth-child(1) { margin-top: 232px; } .row3 > div, .row4 > div, .row5 > div, .row6 > div, .row7 > div, .row8 > div, .row9 > div, .row10 > div, .row11 > div, .row12 > div, .row13 > div, .row14 > div, .row15 > div, .row16 > div { background-color: #ddbbbb; } .row1 > div { background-color: #ffcc33; } .row1 > #lithium, .row2 > div:nth-child(1), .row13 > div:nth-child(1), .row18 > div:nth-child(2), .row14, .row15, .row16, .row17 { margin-top: 92px; } .row2 > div { background-color: #ffff64; } .row17 > div { background-color: #49f1d5; } .row18 > div { background-color: #8bd3ff; } #hydrogen { position: absolute; background-color: #42ff42; left: 78px; top: 30px; } #helium { position: absolute; background-color: #8bd3ff; top: 30px; right: 11px; /*right: 28px;*/ } #carbon, #nitrogen, #oxygen, #phosphorus, #sulphur, #selenium { background-color: #4fff4f; } #boron, #silicon, #germanium, #arsenic, #antimony, #tellurium, #polonium { background-color: #8ee39c; } #aluminium, #gallium, #indium, #tin, #thalium, #lead, #bismuth, #ununtrium, #flerovium, #ununpentium, #livemorium { background-color: #abe3d5; } .lanthanoids, .actinoids { position: absolute; } .lanthanoids { background-color: #ffc3a6; top: 530px; left: 220px; } .actinoids { background-color: #f0c6e2; top: 600px; left: 220px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="typescont"> <div class="types info" id="alkali_metals"><a href="#openmodal">alkali metals</a></div> <div class="types info" id="alkaline_earth_metals"><a href="#openmodal">alkaline earth metals</a></div> <div class="types info" id="transition_metals"><a href="#openmodal">transition metals</a></div> <div class="types info" id="post_transition_metals"><a href="#openmodal">post transition metals</a></div> <div class="types info" id="metalloids"><a href="#openmodal">metalloids</a></div> <div class="types info" id="other_non_metals"><a href="#openmodal">other non-metals</a></div> <div class="types info" id="halogens"><a href="#openmodal">halogens</a></div> <div class="types info" id="noble_gases"><a href="#openmodal">noble gases</a></div> <div class="types info" id="lanths"><a href="#openmodal">lanthanoids</a></div> <div class="types info" id="acts"><a href="#openmodal">actinoids</a></div> <div class="info" id="metals"><a href="#openmodal">metals</a></div> <div class="info" id="non_metals"><a href="#openmodal">non-metals</a></div> <div class="info" id="lanths_space"><a href="#openmodal">57-71</a></div> <div class="info" id="acts_space"><a href="#openmodal">89-103</a></div> </div> <div class="row1"> <div class="info" id="hydrogen"><a href="#openmodal"><em>1</em>h<p>hydrogen</p></a></div> <div class="info" id="lithium"><a href="#openmodal"><em>3</em>li<p>lithium</p></a></div> <div class="info" id="sodium"><a href="#openmodal"><em>11</em>na<p>sodium</p></a></div> <div class="info" id="potassium"><a href="#openmodal"><em>19</em>k<p>potassium</p></a></div> <div class="info" id="rubidium"><a href="#openmodal"><em>37</em>rb<p>rubidium</p></a></div> <div class="info" id="cesium"><a href="#openmodal"><em>55</em>cs<p>cesium</p></a></div> <div class="info" id="francium"><a href="#openmodal"><em>87</em>fr<p>francium</p></a></div> </div> <div class="row2"> <div class="info" id="beryllium"><a href="#openmodal"><em>4</em>be<p>beryllium</p></a></div> <div class="info" id="magnesium"><a href="#openmodal"><em>12</em>mg<p>magnesium</p></a></div> <div class="info" id="calcium"><a href="#openmodal"><em>20</em>ca<p>calcium</p></a></div> <div class="info" id="strontium"><a href="#openmodal"><em>38</em>sr<p>strontium</p></a></div> <div class="info" id="barium"><a href="#openmodal"><em>56</em>ba<p>barium</p></a></div> <div class="info" id="radium"><a href="#openmodal"><em>88</em>ra<p>radium</p></a></div> </div> <div class="row3"> <div class="info" id="scandium"><a href="#openmodal"><em>21</em>sc<p>scandium</p></a></div> <div class="info" id="yttrium"><a href="#openmodal"><em>39</em>y<p>yttrium</p></a></div> </div> <div class="row4"> <div class="info" id="titanium"><a href="#openmodal"><em>22</em>ti<p>titanium</p></a></div> <div class="info" id="zirconium"><a href="#openmodal"><em>40</em>zr<p>zirconium</p></a></div> <div class="info" id="hafnium"><a href="#openmodal"><em>72</em>hf<p>hafnium</p></a></div> <div class="info" id="rutherfordium"><a href="#openmodal"><em>104</em>rf<p>rutherfordium</p></a></div> </div> <div class="row5"> <div class="info" id="vanadium"><a href="#openmodal"><em>23</em>v<p>vanadium</p></a></div> <div class="info" id="niobium"><a href="#openmodal"><em>41</em>nb<p>niobium</p></a></div> <div class="info" id="tantalum"><a href="#openmodal"><em>73</em>ta<p>tantalum</p></a></div> <div class="info" id="dubnium"><a href="#openmodal"><em>105</em>db<p>dubnium</p></a></div> </div> <div class="row6"> <div class="info" id="chromium"><a href="#openmodal"><em>24</em>cr<p>chromium</p></a></div> <div class="info" id="molybdenum"><a href="#openmodal"><em>42</em>mo<p>molybdenum</p></a></div> <div class="info" id="tungsten"><a href="#openmodal"><em>74</em>w<p>tungsten</p></a></div> <div class="info" id="seaborgium"><a href="#openmodal"><em>106</em>sg<p>seaborgium</p></a></div> </div> <div class="row7"> <div class="info" id="manganese"><a href="#openmodal"><em>25</em>mn<p>manganese</p></a></div> <div class="info" id="technitium"><a href="#openmodal"><em>43</em>tc<p>technitium</p></a></div> <div class="info" id="rhenium"><a href="#openmodal"><em>75</em>re<p>rhenium</p></a></div> <div class="info" id="bohrium"><a href="#openmodal"><em>107</em>bh<p>bohrium</p></a></div> </div> <div class="row8"> <div class="info" id="iron"><a href="#openmodal"><em>26</em>fe<p>iron</p></a></div> <div class="info" id="ruthenium"><a href="#openmodal"><em>44</em>r<p>ruthenium</p></a></div> <div class="info" id="osmium"><a href="#openmodal"><em>76</em>os<p>osmium</p></a></div> <div class="info" id="hassium"><a href="#openmodal"><em>108</em>hs<p>hassium</p></a></div> </div> <div class="row9"> <div class="info" id="cobalt"><a href="#openmodal"><em>27</em>co<p>cobalt</p></a></div> <div class="info" id="rhodium"><a href="#openmodal"><em>45</em>rh<p>rhodium</p></a></div> <div class="info" id="iridium"><a href="#openmodal"><em>77</em>ir<p>iridium</p></a></div> <div class="info" id="meitnerium"><a href="#openmodal"><em>109</em>mt<p>meitnerium</p></a></div> </div> <div class="row10"> <div class="info" id="nickel"><a href="#openmodal"><em>28</em>ni<p>nickel</p></a></div> <div class="info" id="palladium"><a href="#openmodal"><em>46</em>pd<p>palladium</p></a></div> <div class="info" id="platinum"><a href="#openmodal"><em>78</em>pt<p>platinum</p></a></div> <div class="info" id="darmstadtium"><a href="#openmodal"><em>110</em>ds<p>darmstadtium</p></a></div> </div> <div class="row11"> <div class="info" id="copper"><a href="#openmodal"><em>29</em>cu<p>copper</p></a></div> <div class="info" id="silver"><a href="#openmodal"><em>47</em>ag<p>silver</p></a></div> <div class="info" id="gold"><a href="#openmodal"><em>79</em>au<p>gold</p></a></div> <div class="info" id="roentgenium"><a href="#openmodal"><em>111</em>rg<p>roentgenium</p></a></div> </div> <div class="row12"> <div class="info" id="zinc"><a href="#openmodal"><em>30</em>zn<p>zinc</p></a></div> <div class="info" id="cadmium"><a href="#openmodal"><em>48</em>cd<p>cadmium</p></a></div> <div class="info" id="mercury"><a href="#openmodal"><em>80</em>hg<p>mercury</p></a></div> <div class="info" id="copernicium"><a href="#openmodal"><em>112</em>cn<p>copernicium</p></a></div> </div> <div class="row13"> <div class="info" id="boron"><a href="#openmodal"><em>5</em>b<p>boron</p></a></div> <div class="info" id="aluminium"><a href="#openmodal"><em>13</em>al<p>aluminium</p></a></div> <div class="info" id="gallium"><a href="#openmodal"><em>31</em>ga<p>gallium</p></a></div> <div class="info" id="indium"><a href="#openmodal"><em>49</em>in<p>indium</p></a></div> <div class="info" id="thalium"><a href="#openmodal"><em>81</em>ti<p>thalium</p></a></div> <div class="info" id="ununtrium"><a href="#openmodal"><em>113</em>uut<p>ununtrium</p></a></div> </div> <div class="row14"> <div class="info" id="carbon"><a href="#openmodal"><em>6</em>c<p>carbon</p></a></div> <div class="info" id="silicon"><a href="#openmodal"><em>14</em>si<p>silicon</p></a></div> <div class="info" id="germanium"><a href="#openmodal"><em>32</em>ge<p>germanium</p></a></div> <div class="info" id="tin"><a href="#openmodal"><em>50</em>sn<p>tin</p></a></div> <div class="info" id="lead"><a href="#openmodal"><em>82</em>pb<p>lead</p></a></div> <div class="info" id="flerovium"><a href="#openmodal"><em>114</em>fl<p>flerovium</p></a></div> </div> <div class="row15"> <div class="info" id="nitrogen"><a href="#openmodal"><em>7</em>n<p>nitrogen</p></a></div> <div class="info" id="phosphorus"><a href="#openmodal"><em>15</em>p<p>phosphorus</p></a></div> <div class="info" id="arsenic"><a href="#openmodal"><em>33</em>as<p>arsenic</p></a></div> <div class="info" id="antimony"><a href="#openmodal"><em>51</em>sb<p>antimony</p></a></div> <div class="info" id="bismuth"><a href="#openmodal"><em>83</em>bi<p>bismuth</p></a></div> <div class="info" id="ununpentium"><a href="#openmodal"><em>115</em>uup<p>ununpentium</p></a></div> </div> <div class="row16"> <div class="info" id="oxygen"><a href="#openmodal"><em>8</em>o<p>oxygen</p></a></div> <div class="info" id="sulphur"><a href="#openmodal"><em>16</em>s<p>sulphur</p></a></div> <div class="info" id="selenium"><a href="#openmodal"><em>34</em>se<p>selenium</p></a></div> <div class="info" id="tellurium"><a href="#openmodal"><em>52</em>te<p>tellurium</p></a></div> <div class="info" id="polonium"><a href="#openmodal"><em>84</em>po<p>polonium</p></a></div> <div class="info" id="livemorium"><a href="#openmodal"><em>116</em>lv<p>livemorium</p></a></div> </div> <div class="row17"> <div class="info" id="flourine"><a href="#openmodal"><em>9</em>f<p>flourine</p></a></div> <div class="info" id="chlorine"><a href="#openmodal"><em>17</em>cl<p>chlorine</p></a></div> <div class="info" id="bromine"><a href="#openmodal"><em>35</em>br<p>bromine</p></a></div> <div class="info" id="iodine"><a href="#openmodal"><em>53</em>i<p>iodine</p></a></div> <div class="info" id="astatine"><a href="#openmodal"><em>85</em>at<p>astantine</p></a></div> <div class="info" id="ununseptium"><a href="#openmodal"><em>117</em>uux<p>ununseptium</p></a></div> </div> <div class="row18"> <div class="info" id="helium"><a href="#openmodal"><em>2</em>he<p>helium</p></a></div> <div class="info" id="neon"><a href="#openmodal"><em>10</em>ne<p>neon</p></a></div> <div class="info" id="argon"><a href="#openmodal"><em>18</em>ar<p>argon</p></a></div> <div class="info" id="krypton"><a href="#openmodal"><em>36</em>kr<p>krypton</p></a></div> <div class="info" id="xenon"><a href="#openmodal"><em>54</em>xe<p>xenon</p></a></div> <div class="info" id="radon"><a href="#openmodal"><em>86</em>rn<p>radon</p></a></div> <div class="info" id="ununoctium"><a href="#openmodal"><em>118</em>uuo<p>ununoctium</p></a></div> </div> <div id="lanths" style="height: 0px"> <div class="lanthanoids info" id="lanthanum"><a href="#openmodal"><em>57</em>la<p>lanthanum</p></a></div> <div class="lanthanoids info" id="cerium"><a href="#openmodal"><em>58</em>ce<p>cerium</p></a></div> <div class="lanthanoids info" id="praseodymium"><a href="#openmodal"><em>59</em>pr<p>praseodymium</p></a></div> <div class="lanthanoids info" id="neodymium"><a href="#openmodal"><em>60</em>nd<p>neodymium</p></a></div> <div class="lanthanoids info" id="promethium"><a href="#openmodal"><em>61</em>pm<p>promethium</p></a></div> <div class="lanthanoids info" id="samarium"><a href="#openmodal"><em>62</em>sm<p>samarium</p></a></div> <div class="lanthanoids info" id="europium"><a href="#openmodal"><em>63</em>eu<p>europium</p></a></div> <div class="lanthanoids info" id="gadolinium"><a href="#openmodal"><em>64</em>gd<p>gadolinium</p></a></div> <div class="lanthanoids info" id="terbium"><a href="#openmodal"><em>65</em>tb<p>terbium</p></a></div> <div class="lanthanoids info" id="dysprosium"><a href="#openmodal"><em>66</em>dy<p>dysprosium</p></a></div> <div class="lanthanoids info" id="holmium"><a href="#openmodal"><em>67</em>ho<p>holmium</p></a></div> <div class="lanthanoids info" id="erbium"><a href="#openmodal"><em>68</em>er<p>erbium</p></a></div> <div class="lanthanoids info" id="thulium"><a href="#openmodal"><em>69</em>tm<p>thulium</p></a></div> <div class="lanthanoids info" id="ytterbium"><a href="#openmodal"><em>70</em>yb<p>ytterbium</p></a></div> <div class="lanthanoids info" id="lutetium"><a href="#openmodal"><em>71</em>lu<p>lutetium</p></a></div> </div> <div id="acts" style="height:0px"> <div class="actinoids info" id="actinium"><a href="#openmodal"><em>89</em>ac<p>actinium</p></a></div> <div class="actinoids info" id="thorium"><a href="#openmodal"><em>90</em>th<p>thorium</p></a></div> <div class="actinoids info" id="protactinium"><a href="#openmodal"><em>91</em>pa<p>protactinium</p></a></div> <div class="actinoids info" id="uranium"><a href="#openmodal"><em>92</em>u<p>uranium</p></a></div> <div class="actinoids info" id="neptunium"><a href="#openmodal"><em>93</em>np<p>neptunium</p></a></div> <div class="actinoids info" id="plutonium"><a href="#openmodal"><em>94</em>pu<p>plutonium</p></a></div> <div class="actinoids info" id="americium"><a href="#openmodal"><em>95</em>am<p>americium</p></a></div> <div class="actinoids info" id="curium"><a href="#openmodal"><em>96</em>cm<p>curium</p></a></div> <div class="actinoids info" id="berkilium"><a href="#openmodal"><em>97</em>bk<p>berkilium</p></a></div> <div class="actinoids info" id="californium"><a href="#openmodal"><em>98</em>cf<p>californium</p></a></div> <div class="actinoids info" id="einsteinium"><a href="#openmodal"><em>99</em>es<p>einsteinium</p></a></div> <div class="actinoids info" id="fermium"><a href="#openmodal"><em>100</em>fm<p>fernium</p></a></div> <div class="actinoids info" id="mendelivium"><a href="#openmodal"><em>101</em>md<p>mendlivium</p></a></div> <div class="actinoids info" id="nobelium"><a href="#openmodal"><em>102</em>no<p>nobelium</p></a></div> <div class="actinoids info" id="lawrencium"><a href="#openmodal"><em>103</em>lr<p>lawrencium</p></a></div> </div> </body> </html>i have tried resetting values, fiddled positioning of elements reason doesn't work. unable find reason of now? how can make changes divs fixed @ positions. tip or appreciated.
you give % width div , elements or can try using bootstrap columns, it's way make responsive design!
Comments
Post a Comment