Problem: You need to create an image component that displays an overlay and a block of vertically centered text.
See the Pen CSS – image overlay with vertically centered text by Cindy Lee (@cindylee) on CodePen.
jQuery – Show / Hide nested navigation list
CSS – Mobile Menu Hamburger Icon Animates Into X
Looking for a slick CSS only mobile hamburger icon that animates? Well, here it is!
See the Pen Mobile Menu, animated hamburger to X icon by Cindy Lee (@cindylee) on CodePen.
How to install Bourbon and Neat to work with your Grunt or Gulp project
Requirements: nodeJS and Grunt or Gulp
Step 1 – Install NPM Packages
In the same directory as your gruntfile.js or gulpfile.js, open a command window and run the following commands to get all the packages you will need.
npm install node-neat npm install node-bourbon
Step 2 – Move over all necessary files to your desired directory
Aftering running the npm install lines above, I moved all of the Bourbon and Neat SASS files to a more desired folder location.
Original locations:
/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets
and
/node_modules/node-neat/node_modules/bourbon-neat/app/assets/stylesheets
My desired locations:
/styles/scss/vendor/bourbon/assets/stylesheets
and
/styles/scss/vendor/bourbon/assets/stylesheets
Step 3 – Import Bourbon
Inside your main sass file (mine is styles.scss), import the following files:
@import "vendor/bourbon/assets/stylesheets/bourbon.scss"; @import "vendor/neat/assets/stylesheets/bourbon.scss";
You can verify that your installation is correct by going into a SASS file and trying something like:
div {
@include linear-gradient(red, black);
}
This should give your div a linear-gradient background color of red and black.
jQuery – Add a class name to navigation menu, depending on the active page
Problem: When you navigate to a page on your website, you’d like for the appropriate main navigation menu item to show as active.
HTML: The HTML you’ll want to use can be a simple unordered list, with UL LI A elements.
CSS: If you’re going for a horizontal navigation menu, you’ll need to float or display: inline the LI elements. You’ll want to style the active/selected state, as well as the hover state, at the very least. Consider styling the font, colors, etc. to your liking.
jQuery: The code will cycle through each link in your menu, and then compare the href attribute to the location/path of the page you’re on. If the href and the path of the page are matched, then the code will add a class name to the element.
Demo: This demo will not show the ‘is-selected’ class on any of the nav links. This is because we cannot navigate to any of the linked pages in the nav since this is just a demo via CodePen.io
See the Pen Nav menu – active class name by Cindy Lee (@cindylee) on CodePen.
jQuery – Accordion
Here is a simple jQuery accordion that uses a text link as the trigger.
HTML: Here is the html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="js-accordion-container"> <div class="js-accordion-section"> <div class="module-box"> <h3>Heading 1</h3><span class="js-accordion-click">View Content</span> </div> <div class="js-accordion-target"> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> </div> <div class="js-accordion-section"> <div class="module-box"> <h3>Heading 2</h3><span class="js-accordion-click">View Content</span> </div> <div class="js-accordion-target"> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> </div> </div> |
CSS: This is some generic CSS styling for the accordion.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.module-box { border: 1px solid grey; overflow: hidden; padding: 15px; font-family: Arial, sans-serif; font-size: 16px; background: -webkit-linear-gradient(#FFFFFF, #EBEBEB); background: linear, false, #FFFFFF, #EBEBEB; background: #ffffff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb)); background: -webkit-linear-gradient(top, #ffffff 0%, #ebebeb 100%); background: linear, to bottom, #ffffff 0%, #ebebeb 100%; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); } h3 { float: left; margin: 0; } span { float: right; cursor: pointer; line-height: 22px; text-decoration: underline; margin-left: 15px; color: #4987A0; } p { line-height: 2em; margin-top: 0; font-family: Arial, sans-serif; } .js-accordion-section { overflow: hidden; margin: 15px; padding: 15px; } .js-accordion-target { display: none; clear: both; padding: 15px; border: 1px solid grey; border-top: none; } |
jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function() { $('.js-accordion-container').on('click', '.js-accordion-click', function(){ var clickedItem = $(this), targetItem = clickedItem.parent().next('.js-accordion-target'), parentContainer = clickedItem.parents('.js-accordion-container'); if(targetItem.is(':visible')) { // hide clicked target targetItem.slideUp(); } else { // hide all targets parentContainer.find('.js-accordion-target').slideUp(); // show clicked target targetItem.slideDown(); } }); }); |
Demo: Here is a demo of accordion in CodePen.io
See the Pen jQuery – Accordion by Cindy Lee (@cindylee) on CodePen.
jQuery – Clear input field on click and focus
HTML:
|
1 2 3 4 |
<div> <input type="text" value="Type Stuff Here" /> <button id="submit">Submit</button> </div> |
jQuery:
|
1 2 3 |
$('input').on('click focusin', function() { this.value = ''; }); |
See the Pen Clear an input value on click focus by Cindy Lee (@cindylee) on CodePen.
CSS – Centering a div without setting the width
The Problem: You want to center a div without setting a width on it because you have text being pulled in dynamically. The length of the text may be out of your control. For example, this could be for a CMS (Content Management System) and the user is entering in an unknown amount of text in the field. So you want to have it expand AND stay centered.
HTML:
|
1 2 3 4 5 6 7 |
<div class="container"> <div class="outer-center"> <div class="inner-center"> stuff here that you want to center </div> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 |
.outer-center { float: right; right: 50%; position: relative; } .inner-center { float: right; right: -50%; position: relative; } |
Explanation:
So what’s happening is that you’re containing the content you want to center in two divs, an outer div and an inner div. You float both divs so that their widths automatically shrink or expand to fit your content. Then, you relatively position the outer div with it’s right edge in the center of the container. Finally, then, you relatively position the inner div in the opposite direction by half of its own width. So, when you inspect the element, you’ll see that they are, basically, overlapping each other. That will center the content in the container it’s in. (tightcss.com)
Javascript – Dynamically adding an “active” class to the nav
In your navigation menu, you would like to dynamically add an “active” class to each menu item when you’re on the corresponding pages so you can style those menu items.
HTML:
|
1 2 3 4 5 6 7 |
<nav class="primary-nav"> <ul> <li><a href="home.html">Home + News</a></li> <li><a href="location.html">Location Profiles</a></li> <li><a href="maps.html">Maps + Charts</a></li> </ul> </nav> |
Javascript:
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function () { var url = window.location.pathname; //sets the variable "url" to the pathname of the current window var activePage = url.substring(url.lastIndexOf('/') + 1); //sets the variable "activePage" as the substring after the last "/" in the "url" variable $('.primary-nav li a').each(function () { //looks in each link item within the primary-nav list var linkPage = this.href.substring(this.href.lastIndexOf('/') + 1); //sets the variable "linkPage" as the substring of the url path in each <a> if (activePage == linkPage) { //compares the path of the current window to the path of the linked page in the nav item $(this).parent().addClass('active'); //if the above is true, add the "active" class to the parent of the <a> which is the <li> in the nav list } }); }) |
Javascript – Toggle Visibility
Javascript code:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript">// <![CDATA[ function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } // ]]></script> |
HTML:
|
1 |
<a onclick="toggle_visibility('answer');" href="#">This is the a question.</a> |
Example:
Please click here.