A Pen by Austin Wulf

Developer
Austin Wulf
Size
2,743 Kb
Views
38,456
  1. A Pen by Austin Wulf Previews
  2. A Pen by Austin Wulf HTML Codes
  3. A Pen by Austin Wulf CSS Codes
  4. A Pen by Austin Wulf JS Codes

How do I make an a pen by austin wulf?

What is a a pen by austin wulf? How do you make a a pen by austin wulf? This script and codes were developed by Austin Wulf on 11 July 2022, Monday.

A Pen by Austin Wulf Previews
IQ Test

A Pen by Austin Wulf - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Austin Wulf</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .test1, .test2, .test3 { list-style: none; padding: 1em; width: 400px;
}
.test1:nth-child(even), .test2:nth-child(even), .test3:nth-child(even) { background: gray;
}
.test3 { background: #000; color: red;
}
.shown { font-size: 2em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="filters"> <input type="checkbox" id="test1" /><label for="test1">test 1</label> <input type="checkbox" id="test2" /><label for="test2">test 2</label> <input type="checkbox" id="test3" /><label for="test3">test 3</label> <p id="output"></p>
</div>
<ul> <li class="test1">Test1</li> <li class="test2">test2</li> <li class="test1">test1</li> <li class="test2">test2</li> <li class="test1">test1</li> <li class="test2">test2</li> <li class="test3">test3</li> <li class="test3">test3</li> <li class="test3">test3</li> <li class="test3">test3</li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Austin Wulf - Script Codes CSS Codes

.test1, .test2, .test3 { list-style: none; padding: 1em; width: 400px;
}
.test1:nth-child(even), .test2:nth-child(even), .test3:nth-child(even) { background: gray;
}
.test3 { background: #000; color: red;
}
.shown { font-size: 2em;
}

A Pen by Austin Wulf - Script Codes JS Codes

// First, grab any checkbox that says it's a filter
var $checkbox = $('.filters input');
if ( $checkbox ) { $output = $('#output'); // If filters exist, watch them for state change $checkbox.change(function(){ // Check if this interaction was checking or unchecking var $checked = $(this).is(':checked'), $filters; // Grab all list items and the ID of // the changed checkbox var $items = $('li'); // Reset the visibility of all list items $items.slideDown(); // get filtered term $id = $(this).attr('id'); // filter items with this term $items.each(function(){ if ( $checked ) { if ( $(this).hasClass($id) ) $(this).slideDown().addClass('shown'); if ( ! $(this).hasClass($id) ) $(this).slideUp(); } else { if ( $(this).hasClass($id) ) $(this).slideUp().removeClass('shown'); if ( ! $(this).hasClass($id) && ! $(this).hasClass('shown') ) $(this).slideDown(); } }); if ( $('.filters input:checked').length < 1 ) { $items.slideDown(); } if ( $('.filters input:checked').length >= 1 ) { $('.shown').slideDown(); $('li:not(.shown)').slideUp(); } if ( $('.filters input:checked').length == $('.filters input').length ) { $('.filters input:checked').removeAttr('checked'); $items.slideDown().removeClass('shown'); } });
}
A Pen by Austin Wulf - Script Codes
A Pen by Austin Wulf - Script Codes
Home Page Home
Developer Austin Wulf
Username atwulf
Uploaded July 11, 2022
Rating 3
Size 2,743 Kb
Views 38,456
Do you need developer help for A Pen by Austin Wulf?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Austin Wulf (atwulf) Script Codes
Name
Styling Native Select Inputs
CSS3 SVG Animation
Hiding Sticky Navigation
Animation Play with cubic-bezier
Chord Name Translator
Sassy Breadcrumbs
Functional DOM Manipulation
Dynamic Contact Form
Simple Custom Select Box
Testing Flexbox Grid Stuff
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!