javascript - Number of Items in Basket popup -

javascript - Number of Items in Basket popup -

i hope can help

basically looking way of creating popup notification of how many items in users shopping basket.

when user adds item basket reddish circle number of items appears next basket icon , when number of items in basket equal 0 reddish circle disappears.

this javascript coding trying write:

if(document.queryselector('#no_items').innertext === '0'){ document.queryselector(".circle").style.display = 'none'; } else { document.queryselector(".circle").style.display= 'inline'; }

http://jsfiddle.net/h2bwa/

basically when basic empty popup disappears appears when items added.

is possible without jquery?

ok, here's reworking of jsfiddle want - haven't reworked extensively, plenty provide working illustration (i leave using latest / best practice / modular code exercise op!):

<style> .circle { width:20px; height:20px; border-radius:50px; font-size:12px; color:#fff; font-weight:bold; line-height:20px; text-align:center; background:#be1417; position: absolute; top: 30px; left: 17px; -moz-transition: 1s; /* firefox 4 */ -webkit-transition: 1s; /* safari , chrome */ -o-transition: 1s; /* opera */ -ms-transition: 1s; /* ie10+ */ transition: 1s; /* w3c */ } </style> <script> function checkvalue() { if (document.getelementbyid("no_items").innerhtml === '0') { document.queryselector(".circle").style.moztransform = "scale(0)"; document.queryselector(".circle").style.webkittransform = "scale(0)"; document.queryselector(".circle").style.otransform = "scale(0)"; document.queryselector(".circle").style.mstransform = "scale(0)"; } else { document.queryselector(".circle").style.moztransform = "scale(1)"; document.queryselector(".circle").style.webkittransform = "scale(1)"; document.queryselector(".circle").style.otransform = "scale(1)"; document.queryselector(".circle").style.mstransform = "scale(1)"; } } function incrementvalue() { var value = parseint(document.getelementbyid('no_items').innerhtml, 10); value = isnan(value) ? 0 : value; value++; document.getelementbyid('no_items').innerhtml = value; checkvalue(); } function decrementvalue() { var value = parseint(document.getelementbyid('no_items').innerhtml, 10); value = isnan(value) ? 0 : value; (value >= 1) && value--; document.getelementbyid('no_items').innerhtml = value; checkvalue(); } </script> <div id="circle" class="circle"> <div id="no_items" style="color:white">1</div> </div> <input type="button" onclick="incrementvalue()" value="buy item" /> <input type="button" onclick="decrementvalue()" value="remove item" /> however, not cross-browser compatible.

it works fine in latest firefox, opera, chrome , ie, mileage vary older versions.

a couple of errors in original script:

queryselector selects on css classname not element id - utilize getelementbyid ids innertext ie-specific, innerhtml safe utilize here instead - see 'innertext' works in ie, not in firefox

and few points in general:

from jsfiddle looks want animate showing/hiding reddish circle. i've stuck scale method, aware can depend on browser css properties supported css transitions.

i don't know why has done without jquery, removes lot of cross-browser issues trying sort of thing, , makes easy apply visibility/style changes , animate them. however, if need write scratch, it's going improve , more flexible if create css classes visible/hidden states , apply them using technique detailed in change element's css class javascript - way don't maintain having alter js code every time want alter styling.

good luck!

javascript if-statement shopping-cart