This blog uses responsible cookies for functionality and user preferences.
Google Analytics is used for collecting general public information to understand how my blog is used.
Learn moreThe Official Blog of Patcoola
Im just a dude watching over my parents,
and trying to make cartoons and video games from home.
and trying to make cartoons and video games from home.
JS_Smart: Select Case Study
Important!
Dear visitors,
This blog and the Tigarus.com network will be changing our website software in May (2024). There will be some down time and there will be a change to the webpage addresses.
We will also be removing the Anime blogs. The Rocksmith Songs website will be unavailable of a few weeks or months while I move the database to the new software.
At the moment we are running on Wordpress, the new software is an in-house project which is 57 times faster. It will also provide more freedom for development.
Thank you for understanding.
The Smart Java Script library provides useful features to reduce the need for programming your website. In this case study I’ll demonstrate a common issue with the select element for page selection. Many webpages use the select element to provide a list of pages for the article. Selecting and going to the page address is not easy, especially for content creators using a content management system.
Using the select element we have two options to create a link behavior. Option one, we code the behavior into the website’s theme. Option two, we code the behavior into the element has an inline event. Either way this requires a level of coding. Smart allows designs and content creators to us this functionality with no coding at all by adding an attribute to the select element.
Before:
<select onchange=”location = this.options[this.selectedIndex].value;”>
<option value=”../page/1/” selected=”selected”>Page 1: Introduction</option>
<option value=”../page/2/”>Page 2: Configuration</option>
<option value=”../page/3/”>Page 3: Performance</option>
<option value=”../page/4/”>Page 4: Benchmarks</option>
<option value=”../page/5/”>Page 5: Conclusion</option></select>
After:
<select js_select=”href”>
<option value=”../page/1/” selected=”selected”>Page 1: Introduction</option>
<option value=”../page/2/”>Page 2: Configuration</option>
<option value=”../page/3/”>Page 3: Performance</option>
<option value=”../page/4/”>Page 4: Benchmarks</option>
<option value=”../page/5/”>Page 5: Conclusion</option></select>
js_select=”href”
This attribute not only turns your select element into a link, but also automatically selects the page option when loaded by checking the options to the browser’s URL. If your URL is “page 2”, then when the page is loaded, the “page 2” option is selected.
Post Meta
Share Post
Comments: Write Comment
Be the first to write a comment.
Leave a Comment
Terms of Use, Cookies, Privacy, and more, see Terms and Privacy
Third-party copyrights and trademarks featured on this site are owned by their respected holders.
Website written and designed by Patcoola 2019, some rights reserved.