Recently I was working in a Piano template sandbox environment where I could edit HTML and CSS code to build a Piano template. This sandbox uses AngularJS, HTML, and CSS, but I wanted to see if it provided JavaScript and jQuery functionality so that I could enhance the template I was working on with some … Continue reading jQuery: How to detect if JavaScript and jQuery are working in a sandbox environment
jQuery
JavaScript: How to call a Python script and get the results via jQuery
Let’s say you have a situation where you need to read JSON data from an API and you don’t have plug-in credentials to access the API directly, but you can see the JSON data that is output from the API on a page. In this case, you can still get the data if you “scrape” … Continue reading JavaScript: How to call a Python script and get the results via jQuery
jQuery: How to launch a file upload dialog from a text field
I have a text field with placeholder text that says “No file chosen”. I wanted to add functionality to this so that if the text field is clicked it launches a file upload dialog. Then when a file is chosen, I want the name of the chosen file to appear in the text field. This … Continue reading jQuery: How to launch a file upload dialog from a text field
jQuery: How to create a textarea character countdown for Twitter
Twitter has a 280 character limit for tweets. If you need to build an input form that will remotely post tweets to Twitter, you will need to make sure that the messages are not too long. In this article I will show how to build a textarea that has a text counter attached to it … Continue reading jQuery: How to create a textarea character countdown for Twitter
jQuery: How to toggle switches programmatically
Let’s say you have some HTML/CSS switches in place of a traditional checkbox. jQuery makes it easy to toggle switches on or off. For example: function toggle(){ $(‘.slider’).click(); } Which can be called in a button like so: <button type=”button” class=”btn btn-primary” onClick=”toggle();”>Toggle</button> For example: Note: This same jQuery can be triggered without clicking … Continue reading jQuery: How to toggle switches programmatically
jQuery: How to create an animated alert box
Let’s say you’ve made a login form and you want to display a placard whenever the login information is incorrect to alert the user. For example, when the user types an incorrect email address or password, they see the placard above the form, with a white background and red text: This is easy enough to … Continue reading jQuery: How to create an animated alert box
jQuery: How to scroll to a div
When you first land on a page, it is possible to have the page scroll down to some remote div further down the page, using a little bit of jQuery. For example, if the remote div is called “remoteDiv”, this jQuery will automatically scroll down to the div when the page loads: $(“.remoteDiv”).ready(function() { $(‘html,body’).animate({ … Continue reading jQuery: How to scroll to a div
jQuery: How to make room between divs when clicking a div to show hidden content
I created some div bars with HTML & CSS that look like this: and I wanted functionality such that when I click any of the gray div bars, the rest of the divs make room for a hidden blue div to appear below the bar. For example: Then, clicking the bar again will make the … Continue reading jQuery: How to make room between divs when clicking a div to show hidden content
jQuery: How to use jQuery to reset select menus and text fields
jQuery is a powerful tool in that it allows us to select any DOM element and perform some action on it. In this example, I will show how to use jQuery to select IDs from select menus and a text field and reset them when clicking a div. Example 1 – Resetting selected This … Continue reading jQuery: How to use jQuery to reset select menus and text fields
jQuery: How to use jQuery in a project and confirm it is working
The fastest way to make jQuery available for a project is to use a CDN in the HEAD portion of the HTML. For example, here is a CDN for jQuery 3.3.1: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> With this in place, you can confirm that jQuery is available and working by adding this block of JavaScript code to the … Continue reading jQuery: How to use jQuery in a project and confirm it is working