Jump to content

Benth

Member
  • Posts

    3
  • Joined

  • Last visited

Benth's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. Amazing! Thank you so much for your help, that works great now. 😀 👍
  2. Hi, I'm having issues with the JS of the below custom quantity selector component not working on one of my site pages. The code works fine on Code Pen but as soon as I put into the relevant page using the Code module, the buttons don't have any affect on the QTY number. Looks like the JS is not speaking to the component. Any help would be great! I put all of the code below in the code module on the specific page I want it to appear on (not the index file). I've put the CSS in <style> tags and JS in <script> tags but no joy. Code below: <form> <fieldset> <input type="button" value="-" class="decrease" /> <input type="text" id="three-max" value="0" disabled /> <input type="button" value="+" class="increase" /> </fieldset> </form> * { margin: 0; padding: 0; text-align: center; } body { background-color: #F4F3F3; font: normal 14px/100% Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; color: #444; } form { background-color: #fff; width: 300px; padding: 10px; margin: 20px auto; -webkit-box-shadow: 0 0 5px rgba(170, 169, 169, .3); box-shadow: 0 0 5px rgba(170, 169, 169, .3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } legend { padding-bottom: 14px; text-align: left; } fieldset { margin-bottom: 14px; padding-bottom: 14px; } fieldset, input[type="button"] { border: 0; } input[type="button"] { background-color: #ED5A48; color: #fff; cursor: pointer; width: 24px; height: 24px; } input[type="text"] { border: 1px solid #F4F3F3; height: 22px; width: 50px; } $(function () { set_($('#three-max'), 2); //return 3 maximum digites function set_(_this, max) { var block = _this.parent(); block.find(".increase").click(function () { var currentVal = parseInt(_this.val()); if (currentVal != NaN && (currentVal + 1) <= max) { _this.val(currentVal + 1); } }); block.find(".decrease").click(function () { var currentVal = parseInt(_this.val()); if (currentVal != NaN && currentVal != 0) { _this.val(currentVal - 1); } }); } });
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.