I haven’t written the script yet!
There must be something at /home3/jes269/public_html/compare/specs.php
Yes. It’s two lines of code that I won’t be using anymore.
Thanks, everyone for your help.
There’s a small bug in Firefox: When you click on an item, the page scrolls to the top. Can anyone please help fix this? Thanks.
http://wearabletechforums.com/pages/compare-wearables3/
I’m not sure how to achieve this using CSS.
The code I originally posted for adding a selected class (that used e.preventDefault()) will work if you fancy changing back to that.
I’m a bit confused. I got rid of all the Javascript. Why would the page jump at all? Is it because the checkboxes are off the top-left of the screen?
Oh right, yeah, I was thinking that they were marked up as links (which isn’t the case).
Could you post a link to your current version?
Sure. Here’s the current version: http://wearabletechforums.com/pages/compare/
The code:
[code]
Compare Popular Wearables
Select up to 10 wearables. Then, for a side-by-side comparison.<div class="sectionMain">
<div class="subHeading categoryStrip"><i class="fa fa-bar-chart"></i><h3>Compare Smartwatches</h3></div>
<ul class="wearables" id="smartwatches">
<li>
<input type="checkbox" name="vs[]" value="watch" id="watch">
<label for="watch">
<img src="http://wearabletechforums.com/images/compare-watch.jpg" alt="Apple Watch">
<strong>Apple Watch</strong><span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="peak" id="peak">
<label for="peak">
<img src="http://wearabletechforums.com/images/compare-peak.jpg" alt="Basis Peak">
<strong>Basis Peak</strong><span class="price">$199</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="surge" id="surge">
<label for="surge">
<img src="http://wearabletechforums.com/images/compare-surge.jpg" alt="Fitbit Surge">
<strong>Fitbit Surge</strong><span class="price">$249.95</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="moto360" id="moto360">
<label for="moto360">
<img src="http://wearabletechforums.com/images/compare-moto360.jpg" alt="Motorola Moto 360">
<strong>Motorola Moto 360</strong><span class="price">$249.99</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="pebble" id="pebble">
<label for="pebble">
<img src="http://wearabletechforums.com/images/compare-pebble.jpg" alt="Pebble">
<strong>Pebble</strong><span class="price">$99</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="steel" id="steel">
<label for="steel">
<img src="http://wearabletechforums.com/images/compare-steel.jpg" alt="Pebble Steel">
<strong>Pebble Steel</strong><span class="price">$199</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="gearS" id="gearS">
<label for="gearS">
<img src="http://wearabletechforums.com/images/compare-gearS.jpg" alt="Samusng Gear S">
<strong>Samsung Gear S</strong><span class="price">$399.99 + service</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="gear2" id="gear2">
<label for="gear2">
<img src="http://wearabletechforums.com/images/compare-gear2.jpg" alt="Samusng Gear 2">
<strong>Samsung Gear 2</strong><span class="price">$299.99+</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="gear2Neo" id="gear2Neo">
<label for="gear2Neo">
<img src="http://wearabletechforums.com/images/compare-gear2Neo.jpg" alt="Samsung Gear 2 Neo">
<strong>Samsung Gear 2 Neo</strong><span class="price">$199.99</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="gearLive" id="gearLive">
<label for="gearLive">
<img src="http://wearabletechforums.com/images/compare-gearLive.jpg" alt="Samsung Gear Live">
<strong>Samsung Gear Live</strong><span class="price">$199.99</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="activite" id="activite">
<label for="activite">
<img src="http://wearabletechforums.com/images/compare-activite.jpg" alt="Withings Activité">
<strong>Withings Activité</strong><span class="price">$450</span>
</label>
</li>
</ul>
<div class="subHeading categoryStrip"><i class="fa fa-bar-chart"></i><h3>Compare Fitness Bands</h3></div>
<ul class="wearables" id="fitnessBands">
<li>
<input type="checkbox" name="vs[]" value="charge" id="charge">
<label for="charge">
<img src="http://wearabletechforums.com/images/compare-charge.jpg" alt="Fitbit Charge">
<strong>Fitbit Charge</strong><span class="price">$129.95</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="chargeHR" id="chargeHR">
<label for="chargeHR">
<img src="http://wearabletechforums.com/images/compare-chargeHR.jpg" alt="Fitbit Charge HR">
<strong>Fitbit Charge HR</strong><span class="price">$149.95</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="flex" id="flex">
<label for="flex">
<img src="http://wearabletechforums.com/images/compare-flex.jpg" alt="Fitbit Flex">
<strong>Fitbit Flex</strong><span class="price">$99.95</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="vivofit" id="vivofit">
<label for="vivofit">
<img src="http://wearabletechforums.com/images/compare-vivofit.jpg" alt="Garmin Vívofit">
<strong>Garmin Vívofit</strong><span class="price">$129.99</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="vivosmart" id="vivosmart">
<label for="vivosmart">
<img src="http://wearabletechforums.com/images/compare-vivosmart.jpg" alt="Garmin Vívosmart">
<strong>Garmin Vívosmart</strong><span class="price">$169.99</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="up24" id="up24">
<label for="up24">
<img src="http://wearabletechforums.com/images/compare-up24.jpg" alt="Jawbone UP24">
<strong>Jawbone UP24</strong><span class="price">$129.99</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="up3" id="up3">
<label for="up3">
<img src="http://wearabletechforums.com/images/compare-up3.jpg" alt="Jawbone UP3">
<strong>Jawbone UP3</strong><span class="price">$179.99</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="band" id="band">
<label for="band">
<img src="http://wearabletechforums.com/images/compare-band.jpg" alt="Microsoft Band">
<strong>Microsoft Band</strong><span class="price">$199.99</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="flash" id="flash">
<label for="flash">
<img src="http://wearabletechforums.com/images/compare-flash.jpg" alt="Misfit Flash">
<strong>Misfit Flash</strong><span class="price">$49.99+</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="shine" id="shine">
<label for="shine">
<img src="http://wearabletechforums.com/images/compare-shine.jpg" alt="Misfit Shine">
<strong>Misfit Shine</strong><span class="price">$99.99+</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="gearFit" id="gearFit">
<label for="gearFit">
<img src="http://wearabletechforums.com/images/compare-gearFit.jpg" alt="Samsung Gear Fit">
<strong>Samsung Gear Fit</strong><span class="price">$149.99</span>
</label>
</li>
</ul>
<div class="subHeading categoryStrip"><i class="fa fa-bar-chart"></i><h3>Compare Other Activity Trackers</h3></div>
<ul class="wearables" id="fitnessBands">
<li>
<input type="checkbox" name="vs[]" value="one" id="one">
<label for="one">
<img src="http://wearabletechforums.com/images/compare-one.jpg" alt="Fitbit One">
<strong>Fitbit One</strong><span class="price">$99.95</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="zip" id="zip">
<label for="zip">
<img src="http://wearabletechforums.com/images/compare-zip.jpg" alt="Fitbit Zip">
<strong>Fitbit Zip</strong><span class="price">$59.95</span>
</label>
</li>
<li>
<input type="checkbox" name="vs[]" value="upMove" id="upMove">
<label for="upMove">
<img src="http://wearabletechforums.com/images/compare-upMove.jpg" alt="Jawbone UP Move">
<strong>Jawbone UP Move</strong><span class="price">$49.99</span>
</label>
</li>
</ul>
</div>
/* Banner */
.node78 .bigBanner span {
display: block;
font-size: 12pt;
}
#clickToCompare {
padding: 1px 6px;
font-family: Roboto, ‘Helvetica Neue’, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
cursor: pointer; cursor: hand;
text-transform: uppercase;
background-color: @xbHeadingColor;
color: #FFF;
border: none;
margin: 0 5px;
-webkit-appearance: none;
}
/* Categories */
.node78 .categoryStrip {
margin: 0 12px 10px 0;
}
.node78 .subHeading h3 {
font-weight: bold;
display: inline-block;
margin-left: 8px;
}
/* List /
.wearables {
margin: 0;
padding: 0;
list-style: none;
}
.wearables:after {
content: “”;
display: inline-block;
height: 1px;
width: 100%;
}
.wearables li {
display: inline-block;
margin: 0 10px 10px 0;
word-spacing: 0;
vertical-align: top;
}
@media screen and ( min-width: 1051px) { / Max columns */
ul#smartwatches li { width: calc( 100% / 6 - 13px); }
ul#fitnessBands li { width: calc( 100% / 6 - 13px); }
ul#otherTrackers li { width: calc( 100% / 6 - 13px); }
}
@media screen and (max-width: 1050px) {
.wearables li { width: calc(100% / 5 - 13px); }
}
@media screen and (max-width: 875px) {
.wearables li { width: calc(100% / 4 - 13px); }
}
@media screen and (max-width: 700px) {
.wearables li { width: calc(100% / 3 - 13px); }
}
@media screen and (max-width: 525px) {
.wearables li { width: calc(100% / 2 - 13px); }
}
/* Inputs */
.wearables input[type=checkbox] {
position: absolute;
left :-999em;
top: -999em;
}
/* Labels */
.wearables label {
display: block;
background-color: #FFF;
border: 2px solid @xbPrimaryBorder;
border-radius: 4px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer; cursor: hand;
position: relative;
padding: 0;
color: #000;
}
.wearables input[type=checkbox]:checked + label {
border-color: @alertBackground;
background-color: @alertBackground;
color: #FFF;
}
.wearables input[type=checkbox]:checked + label:after {
display: block;
}
.wearables label:after {
content: “\f14a”;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: @alertBackground;
font-size: 20px;
position: absolute;
top: 0;
right: 4px;
display: none;
}
.wearables label:hover {
border-color: @alertBackground;
}
.wearables label:active {
border-color: #1A72B2;
background-color: #1A72B2;
color: #FFF;
}
.wearables input[type=checkbox]:disabled + label:hover {
border-color: #CC0000;
}
.wearables input[type=checkbox]:disabled + label:active {
border-color: #CC0000;
background-color: #CC0000;
}
/* Image */
.wearables li img {
max-width: 100%;
height: auto;
}
/* Popular */
.popComparisons {
margin-top: 15px;
}
.popComparisons a {
display: inline-block;
padding: 3px 6px;
background-color: #8634AF;
text-decoration: none;
margin: 2px 0 2px 0;
border: 1px solid #8634AF;
border-radius: 2px;
color: #FFF;
font-family: ‘Roboto’, ‘Helvetica Neue’, ‘Arial’, sans-serif;
font-size: 110%;
}
.popComparisons a:hover {
background-color: #9651B8;
text-decoration: none;
}[/code]
Fixed it by moving the checkbox back from its -999em vertical position.
Yes that should cure it 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.