How to create your own customized calculator via JavaScript

This is a simple example of implementing a calculator with JavaScript and HTML. This calculator will only have the division, multiplication, addition, and subtraction operators but you can easily tack on more functions if needed.

Demo

Continue reading How to create your own customized calculator via JavaScript

How to dynamically add content to a div and store the content to a cookie via JavaScript


This is an example of adding dynamic content via JavaScript by allowing the user type in the actual content.

Demo
Content to be added:


Your content will be added dynamically below:

Continue reading How to dynamically add content to a div and store the content to a cookie via JavaScript

How to dynamically remove/delete elements via JavaScript


This post is in response to one of the comments on have received regarding the removal of elements via JavaScript. I have taken the original function posted and edited it a little bit for the demo.

Demo
I am the parent div.

I am a child div within the parent div.

 


Continue reading How to dynamically remove/delete elements via JavaScript

How to find and replace text dynamically via JavaScript


This is a neat little script that demonstrates two things:

1) Find – If only the Find box is filled in, then the findMyText() JavaScript function will just perform a find for the div that is given. If there is a match, the text will be highlighted and marked in bold.

2) Find and Replace – If both the Find and Replace boxes are filled in, then the findMyText() JavaScript function will do just that.

Demo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Find
Replacment


Continue reading How to find and replace text dynamically via JavaScript

Simulate a button click via JavaScript

There is a rare need for this type of functionality but I have found myself in a couple of situations where I needed it. Here is a quick demo of a button click that is simulated from another event handler. In this case, the button click is invoked by checking a checkbox.

Demo

Check the box to simulate a button click


Continue reading Simulate a button click via JavaScript

JavaScript to select all or none of the checkboxes in a form


Here is a quick demo of the select all or none JavaScript function that automatically toggles all of your checkboxes in a given form.

Demo
My favorite programming/scripting language is:

Select All | None

JavaScript

Perl

PHP

C++

Continue reading JavaScript to select all or none of the checkboxes in a form

Dynamically edit font styling of HTML content via JavaScript

The Document Object Model (DOM) allows for dynamic styling because it makes all HTML elements and attributes readily accessible using JavaScript. Here is a simple demo of how powerful this technology can be:

Demo
Hello world!







Continue reading Dynamically edit font styling of HTML content via JavaScript

How to dynamically add form elements via JavaScript



Not all forms are meant to be static. Sometimes, you want to allow the users to add certain parts of the form as they need them. Here is a nice example of dynamically adding inputs to your form as users need them. In addition, an input limit has been implemented in the script and it is set to 3.

Demo
Entry 1


Continue reading How to dynamically add form elements via JavaScript

How to hide, show, or toggle your div

Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.

Demo
click image to expand/collapse==>

This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript. This content will toggle.

We will cover how to implement this example later on in the tutorial but first let’s start with a simple example.

Demo

show < == click here

Continue reading How to hide, show, or toggle your div

Dynamic Country State Javascript Menu Example


I have found myself in a couple of situations where I needed a simple dynamic javascript menu where the user would make a selection from one select list and depending on what the user selected from the first select list a second list would offer further options. Here is a perfect example:

Demo

Country:

State/Province:

Country value:

 

State/Province value:
 

Continue reading Dynamic Country State Javascript Menu Example