Close

Miscellaneous jQuery Snippets

Add Active Navigation Class to Menu Item Based on URL Using jQuery

In this jQuery tutorial, you’ll learn how to add an active class to a menu item based on the page URL using jQuery… so you can highlight that menu item. You’ll learn:

  • how use the jQuery addClass() method
  • how to get the current page’s URL path in JavaScript
  • how to split a URL in an array of parts
  • how to use the JavaScript pop() method
  • how to target an element based the value of a specified attributed using jQuery

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>About</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Contact</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Keep Calm and jQuery On!</h1>
</body>
</html>

jQuery(document).ready(function($){
// Get current path and find target link
var path = window.location.pathname.split("/").pop();

// Account for home page with empty path
if ( path == '' ) {
path = 'index.php';
}

var target = $('nav a[href="'+path+'"]');
// Add active class to target link
target.addClass('active');
});

html, body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
font-size: 100%;
}

nav {
background: #000;
color: #fff;
}

nav a {
color: #fff;
text-decoration: none;
}

nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}

nav ul li {
display: inline-block;
margin-right: -5px;
}

nav ul li a {
display: block;
padding: 10px 15px;

}

nav ul li a:hover,
nav ul li a.active {
background: #555;
}

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

September 20, 2015

Set DIV Height to 100% of Its Parent Using jQuery

In this jQuery tutorial, you’ll learn how to set the height of a DIV to 100% of its parent. You’ll learn:

  • how to set variables and target selectors
  • how to get and set div height using height()
  • how to target multiple selectors at once

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>jQuery DIV 100% Height of Container</title>
<style>
.container {
overflow: hidden;
border: 1px solid red;
}

.left, .right {
border: 1px solid #000;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
// Get the height of our container
var container_height = $('.container').height();

// Set target DIVs height to container height
$(".left, .right").height(container_height);
});
</script>
</head>
<body>
<div class="container">
<div class="left">
<p>One paragraph of text. This is the shorter div.</p>
</div>
<div class="right">
<p>Multiple</p>
<p>Paragraphs</p>
<p>Of</p>
<p>Text</p>
<p>This is the longer div.</p>
</div>
</div>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

September 11, 2015

jQuery Tutorial: How to Build a jQuery Accordion

In this jQuery tutorial, you’ll learn how to build a jQuery accordion. You’ll learn:

  • how to slideUp() and slideDown() different elements
  • how to use relative selectors to target elements in jQuery
  • how to use the click event to trigger functionality on click

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Accordion</title>
<style>
html, body {
font-size: 100%;
}

.accordion {
margin: 50px;
}

.accordion dt,
.accordion dd {
padding: 10px;
border: 1px solid #000;
}

.accordion dt a,
.accordion dd a {
display: block;
color: #000;
font-weight: bold;
}

.accordion dt {
background-color: #ccc;
}

.accordion dd {
margin: 0;
border-top-width: 0;
border-bottom-width: 0;
font-size: 1rem;
}

.accordion dd:last-of-type {
border-bottom-width: 1px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){

// Hide all panels to start
var panels = $('.accordion > dd').hide();

// Show first panel on load (optional). Remove if you want
panels.first().show();

// On click of panel title
$('.accordion > dt > a').click(function() {
var $this = $(this);

// Slide up all other panels
panels.slideUp();

//Slide down target panel
$this.parent().next().slideDown();

return false;
});
});
</script>
</head>
<body>
<dl class="accordion">
<dt><a href="">Panel 1</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nisl quam, convallis ac lacus vel, mollis bibendum ante.</dd>

<dt><a href="">Panel 2</a></dt>
<dd>Suspendisse potenti. In ullamcorper posuere nibh, in pretium metus porttitor vitae. Aenean felis libero, condimentum sagittis.</dd>

<dt><a href="">Panel 3</a></dt>
<dd>Laoreet quis, auctor in orci. Ut gravida nibh vitae lorem egestas, vel commodo mi gravida. Curabitur elementum dolor id lacus.</dd>
</dl>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

September 6, 2015