Tag archive for: jQuery

How to make a portion of your sidebar sticky as you scroll till the footer of your web page with jQuery and some CSS styles

You want a portion of your sidebar to stick as you scroll down your web page.

When you reach the footer of your web page, you want that portion to stop just above the footer of your web page.

In this case, you can use jQuery to help you achieve this behaviour.

Given that, this post shows how to make a portion of your sidebar sticky as you scroll till the footer of your web page with jQuery and some CSS styles.

How to capture the coordinates of your mouse as it moves along a path with jQuery

When you want to move an object on your web page, you can do so by setting the top and left property of that object to several screen coordinates along a path of travel. Although you can create those coordinates by hand, it is more efficient to capture those coordinates using your mouse.

Previously, I had discussed:

In this post, we extend those ideas to build a simple mechanism that captures the coordinates of your mouse as it moves alone a path.

How to send a HTTP GET request to an API endpoint and add the response as HTML elements to the DOM with jQuery

jQuery is a JavaScript library that simplify client-side scripting of HTML.

In case you want to augment your webpage with data from an API endpoint, you may want to look at jQuery.

With this purpose in mind, this post discusses how to send a HTTP GET request to an API endpoint and add the response as HTML elements to the DOM with jQuery.

Books that helped me understood how to add some JavaScript to my website

The books that teach me the concepts and skills that I need to build my website is enough for me to have a personal space on the Internet. However, I had to add interactivity to my website and web applications at work in order to make them more interesting. This post lists some of the books which I had read to get Javascript into my toolbox.

How I used jQuery to push a dynamically generated file to the web browser based on the user’s input

There are times when we want to push a dynamically generated file to our users based on their inputs. That file could be an excel file that holds payment transaction reports for a time period or a tabulation of guest names who had accepted invitations to our corporate house warming.

In such cases, the user should be presented with a dialog box which lets him decide whether to save it somewhere in her local filesystem or open the file for viewing with an appropriate application in his computer.

For example, in my tool for generating boilerplate coding from a list of country names, I am presented with some input fields where I can submit some instructions to format the output of the boilerplate coding. And upon clicking on the “Generate” button, I am shown a dialog box that looks like the following:

Image of firefox dialog box after submitting request to generate some files.

Let’s cook up a simple scenario to demonstrate this idea with jQuery.

Suppose we are creating a simple game for the user to draw a random number. For this, we have a text field for the user to write his name. There will be a number dial that changes at random. When the user clicks on the “Get lucky number” button, the browser will present a text file for the user to download.

The text file will contain the user’s name and the number taken from the number dial at the instance when he clicks on the button.

How to use jQuery to detect user checking and unchecking a checkbox

I wanted to show / hide some input fields when a user checks / unchecks a checkbox on a web page.

To investigate how I can use jQuery to detect user checking and unchecking a checkbox, I cooked up a scenario.

There is a page with a HTML checkbox and a message. When the checkbox is checked, the message shows; if not, the message hides.

Pretty straightforward scenario to get me into working out a proof of concept to fulfill my objective.

How to use jQuery to access the DOM structure of parent HTML webpage from within the child HTML window

Sometimes, instead of showing a dialog box within a web page, it is more strategic to spawn a new HTML window as a dialog box to capture user input. This technique is especially useful when there are Java applets embedded in the web page, as Java applets tends to appear in front of every visual element on a HTML web page. There is no easy solution to place a visual element, for instance a HTML div, on top of Java applets.

Spawning another web page in another window is straightforward, but how do I send data collected from a child HTML window back to the parent HTML webpage? With this question in mind, I set out to find an answer.

How to use jQuery to intercept form submissions and validate form input

There came a time where I had to create a HTML form to accept inputs from users in order to generate a report. Before submitting the form to the back end server, there are some validations that I can perform on the data at the client side to reduce the number of HTTP responses that my server had to generate for unwanted inputs. The cost savings is especially significant when the form submission contains large file as part of the HTTP request.

I chose to use jQuery for intercepting the form submissions and do some data validation before I allow the browser to create a HTTP request to the server. This post documents a proof of concept, as a stepping stone, to realize my objective.