'javascript - schedule with tabs
I created I javascript schedule thermostat for a enteire week and work. But now I have some problems with tabs, because when I move a period, moving on slider, I have graphics problem.
I add the code on jsfiddle, because so it's more simple to understand and see the code working.
Here have a code HTML:
<div class="container-fluid">
<div class="col-lg-6 col-md-8">
<ul class="nav nav-pills">
<li>
<a data-toggle="pill" href="#tabs-1">Zone 1</a>
</li>
<li>
<a data-toggle="pill" href="#tabs-2">Zone 2</a>
</li>
<li>
<a data-toggle="pill" href="#tabs-3">Zone 3</a>
</li>
<li>
<a data-toggle="pill" href="#tabs-4">Zone 4</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tabs-1">
<div class="slider-label">Mon</div>
<div class="slider" day="mon" zone="1"></div>
<div class="slider-label">Tue</div>
<div class="slider" day="tue" zone="1"></div>
<div class="slider-label">Wed</div>
<div class="slider" day="wed" zone="1"></div>
<div class="slider-label">Thu</div>
<div class="slider" day="thu" zone="1"></div>
<div class="slider-label">Fri</div>
<div class="slider" day="fri" zone="1"></div>
<div class="slider-label">Sat</div>
<div class="slider" day="sat" zone="1"></div>
<div class="slider-label">Sun</div>
<div class="slider" day="sun" zone="1"></div>
</div>
<div class="tab-pane fade in" id="tabs-2">
<div class="slider-label">Mon</div>
<div class="slider" day="mon" zone="2"></div>
<div class="slider-label">Tue</div>
<div class="slider" day="tue" zone="2"></div>
<div class="slider-label">Wed</div>
<div class="slider" day="wed" zone="2"></div>
<div class="slider-label">Thu</div>
<div class="slider" day="thu" zone="2"></div>
<div class="slider-label">Fri</div>
<div class="slider" day="fri" zone="2"></div>
<div class="slider-label">Sat</div>
<div class="slider" day="sat" zone="2"></div>
<div class="slider-label">Sun</div>
<div class="slider" day="sun" zone="2"></div>
</div>
<div class="tab-pane fade in" id="tabs-3">
<div class="slider-label">Mon</div>
<div class="slider" day="mon" zone="3"></div>
<div class="slider-label">Tue</div>
<div class="slider" day="tue" zone="3"></div>
<div class="slider-label">Wed</div>
<div class="slider" day="wed" zone="3"></div>
<div class="slider-label">Thu</div>
<div class="slider" day="thu" zone="3"></div>
<div class="slider-label">Fri</div>
<div class="slider" day="fri" zone="3"></div>
<div class="slider-label">Sat</div>
<div class="slider" day="sat" zone="3"></div>
<div class="slider-label">Sun</div>
<div class="slider" day="sun" zone="3"></div>
</div>
<div class="tab-pane fade in" id="tabs-4">
<div class="slider-label">Mon</div>
<div class="slider" day="mon" zone="4"></div>
<div class="slider-label">Tue</div>
<div class="slider" day="tue" zone="4"></div>
<div class="slider-label">Wed</div>
<div class="slider" day="wed" zone="4"></div>
<div class="slider-label">Thu</div>
<div class="slider" day="thu" zone="4"></div>
<div class="slider-label">Fri</div>
<div class="slider" day="fri" zone="4"></div>
<div class="slider-label">Sat</div>
<div class="slider" day="sat" zone="4"></div>
<div class="slider-label">Sun</div>
<div class="slider" day="sun" zone="4"></div>
</div>
</div>
</div>
Code complete with also javascript is present on jsfiddle.
Thank you
https://jsfiddle.net/k25nbbrp/
screenshot 👇
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|