Keyword Cloud

Build Your Own Counter Widgets Using JavaScript and HTML – SitePointSkip to main contentSitePoint BlogCommunityJobsLibraryLoginJoin PremiumBuild HTMLBy Christian Heilmann JavaScriptAugust Share Free Book Write powerful clean maintainable RRP Get the book free Building forms can be repetitive work Often particular form elements appear consistently across a wide range of These lend themselves creation as components that re-used in different applications One such recurring requirement is numeric field Many include at least one accept values occur within certain are rounded whole numbers i e no decimals allowed Rich-client have widget text followed by up down arrows allow users increase or decrease s value VB NET calls this NumericUpDown To provide functionality plain we could use drop-down list contained all possible options This solution has several drawbacks though If you need user choose from become very long Users may scroll through spend lot time reach they want You huge amount markup generate A better option enter into simple validate their entries on back-end We validation cannot rely availability systems However avoid frustrating page reloads turn counter The demonstration enhanced script creates links when Javascript available For access code presented article download archive here How It Works achieve desired do embed file createcounter js our document lt type javascript src gt also add special ID each input size name passengers ctr id attribute kept ensure backward compatibility syntax follows any minimum maximum br foo Allows integer between for bar baz Instead class bespoke with proper namespace however enables us replicate same back end example PHP Some developers might frown upon mixing business logic but it saves needing rules automatically checks entry number an specified element loaded increases link clicked decreases once entered left either not below sets above Customise Widget counterlink applied generated therefore customized via CSS customize displayed set variables var linkclass ‘counterlink’ addtext ‘ subtext ‘-‘ addbefore true variable defines location decreasing applies before false after next increasing Drawbacks Solution far take while remaining mouse-independent Real widgets cursor keys accelerate scrolling speed longer keeps arrow button depressed There allows browser environments doubtful made modern browsers Chris Senior Program Manager Microsoft literally wrote handbook developer evangelism He spends speaking conferences blogging helping people understand make others technology follow him Twitter read his blog New books out now practical advice start your career programming Read Master complex transitions transformations animations nowPopular Books Principles Beautiful Web Design th Edition Learn Day Well SQL using MySQL WellStuff doPremiumNewslettersForumsDealsRemote JobsAboutOur storyTerms usePrivacy policyCorporate membershipsBecome affiliateContactContact usFAQPublish usWrite usAdvertiseConnect SitePoint Pty Ltd site protected reCAPTCHA Google Privacy Policy Terms Service apply