In this article I will describe how to create a simple “To Do” app in AngularJS and write about some of the basic concepts of AngularJS. The app I will be describing looks like this: Step 1: AngularJS CDN To create an AngularJS app, the first thing you will need is a CDN in … Continue reading AngularJS: How to write a simple To Do app
HTML
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
HTML & CSS: How to change text color based on background color
Let’s say we have a progress bar with some text in it and the background is a light color. We want the font to be dark enough to contrast with the light background. Then as the progress bar or meter fills up with a darker color, we want the font color to adjust (lighter font … Continue reading HTML & CSS: How to change text color based on background color
HTML & CSS: How to set up a Bootstrap 3 modal
In this article I will show how to set up a modal using Bootstrap 3. This example looks like this at 800px width: To set up a Bootstrap 3 modal, we will need these three resources: bootstrap.min.css bootstrap.min.js jquery.min.js These can be called via CDN at the top of our HTML file. For example: <link … Continue reading HTML & CSS: How to set up a Bootstrap 3 modal
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
HTML & CSS: How to expand text on hover
In this article, I will show how to display short text on a web page that can expand to longer text on hover. The trick is to use two spans inside of a div. The first span contains the shorter text and the second span contains the longer text. For example: <div class=”expanded-text”> <p class=”text”> … Continue reading HTML & CSS: How to expand text on hover
HTML & CSS: How to stack Font Awesome icons
In order to stack Font Awesome ions, someone wrote a custom CSS solution that features a class called “icons-stack”, which looks like: .icon-stack { position: relative; display: inline-block; width: 150px; height: 150px; line-height: 80px; vertical-align: middle; } .icon-stack-1x, .icon-stack-2x, .icon-stack-3x { position: absolute; left: 0; width: 100%; text-align: center; } .icon-stack-1x { line-height: inherit; } … Continue reading HTML & CSS: How to stack Font Awesome icons
HTML & CSS: How to create a progress bar with stacked divs
In web design, there are lots of cases where you will need to stack <div> elements on top of each other in order to achieve certain effects or layouts. One example of this is a progress bar, where you have a background color, a foreground color (to mark the progress), and maybe a label. The … Continue reading HTML & CSS: How to create a progress bar with stacked divs