Tessisamess

S	M	T	W	T	F	S
	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

Information

Hey guys! This month we've got something a little different for our HTML page; this one's for the iconmakers on the site, but this could easily be edited into a cast list or character roster! This directory page code allows you to combine multiple tags to narrow your search, something I forever wish we could do natively on IJ haha. Enjoy! ♥

Please note: I don't usually do this, but this page is not compatible with Insanejournal as it uses jQuery. You will HAVE to have webhosting somewhere offsite, such as Tumblr or a dedicated host, to put this code into. Because these types of pages can't be used on paid IJ accounts I won't be making/posting many of these unless there is a demand for them, so please make sure to comment if you'd like more codes with programming in them or I won't make them a focus.

Icons used in the demo are from the lovely

figmented!

UPDATE 9.23.19 A small update to fix this issue. Sorry about that, guys!

The Coding

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Icon Directory</title>
	<link rel="shortcut icon" href="https://i.imgur.com/miNVGSD.png" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Khula:300,800" rel="stylesheet">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>

<style>

/*--- ICON DIRECTORY - TESSISAMESS - 2019 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--dark: #111;
	--lightest: #fff;
	--accent: #8DB4D0;
	--borders: rgba(0,0,0,0.15);

--page-bg: #ddd;
	--bg-img: url(https://i.imgur.com/AS1qwm3.png)top left repeat fixed;

--side-width: 170px;

--main-font: Open Sans,helvetica,sans-serif;
	--headings: Khula;
}

/* GENERAL */

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

*{box-sizing:border-box;}
body{margin:3vw;background:var(--page-bg) var(--bg-img);
font-family:var(--main-font);color:var(--dark);font-size:12px;}

img{max-width:100%;}
h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;text-align:center;font-weight:normal;text-transform:uppercase;}

a{text-decoration:none;color:var(--dark);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{color:var(--accent);}

/* HEADER */

header{margin-bottom:3vw;letter-spacing:3px;display:flex;align-items:center;justify-content:space-between;}

header #inner{display:flex;align-items:center;}
header h1{font-size:22px;color:var(--accent);font-weight:bold;margin:0 5px 0 0;}
header h2{font-size:22px;opacity:0.6;}

header nav{font-weight:bold;text-transform:uppercase;font-size:10px;}
header nav a{margin:0 0 0 10px;}

/* CONTENT */

main{display:flex;flex-wrap:wrap;align-items:flex-start;}

/* FILTERS */

aside{width:var(--side-width);}
aside strong{font-family:var(--headings);letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-size:14px;}
aside form{padding:0 0 8px 0;}
aside input{display:none;}

aside span{cursor:pointer;display:block;background:var(--lightest);color:var(--dark);padding:5px;margin:6px 0;border:1px solid var(--borders);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
aside span:hover{background:var(--page-bg);}
aside input:checked + span{background:var(--accent);color:var(--lightest);}

#credit{display:block;font-size:8px;letter-spacing:3px;text-align:center;}

/* ICON SETS */

article{width:calc(100% - var(--side-width));padding:0 0 0 2vw;display:flex;flex-wrap:wrap;align-items:flex-start;text-align:center;}

.set{box-sizing:content-box;display:flex;flex-wrap:wrap;padding:20px;width:360px;border:1px solid var(--borders);margin:0 2vw 4vw 2vw;background:var(--lightest);}
.set:hover{filter:grayscale(70%);}
.set img{width:100px;height:100px;margin:10px;background:var(--page-bg);}
.set h3, .set h4{width:100%;line-height:1;}
.set h3{padding:5px 0;font-size:27px;color:var(--accent);}
.set h4{font-size:13px;font-weight:bold;letter-spacing:7px;padding:0 0 0 5px;}

</style>
</head>

<body>

<header>
		<div id="inner">
			<a href="http://JOURNALNAME.insanejournal.com/"><h1>JOURNALNAME</h1></a>
			<h2>Icon Directory</h2>
		</div>
		<nav>
			<a href="">Rules</a>
			<a href="">Requests</a>
			<a href="">Affiliates</a>
		</nav>
	</header>

<main>

<aside>

<!---

Each LABEL INPUT is a tag to link to the classes you give your icon sets. You can choose more than one tag to narrow your search. Each sidebar tag should be set up as follows:

type="checkbox"		the same for all of them
name="yourtitle"	the same for all in ONE group of tags (such as gender)
value="yourvalue"	UNIQUE to each tag

--->

<strong>Gender</strong>
			<form>
				<label><input type="checkbox" name="gender" value="female"><span>Female</span></label>
				<label><input type="checkbox" name="gender" value="male"><span>Male</span></label>
				<label><input type="checkbox" name="gender" value="trans"><span>Transgender</span></label>
				<label><input type="checkbox" name="gender" value="nonbinary"><span>Nonbinary</span></label>
			</form>

<strong>Ethnicity</strong>
			<form>
				<label><input type="checkbox" name="ethnicity" value="white"><span>White</span></label>
				<label><input type="checkbox" name="ethnicity" value="black"><span>Black</span></label>
				<label><input type="checkbox" name="ethnicity" value="hispanic"><span>Hispanic</span></label>
				<label><input type="checkbox" name="ethnicity" value="asian"><span>Asian</span></label>
			</form>

<a href="http://tessisamess.insanejournal.com/" id="credit">CODING BY TESSISAMESS</a>

</aside>

<!---

Your icon set's DATA-CATEGORY will be anything from the VALUES above in your tags list. Example: data-category="female 20s black"

--->

<h3>PB Name Here</h3>
				<h4>In Media Here</h4>
			</a>

</article>

</main>

var selectedOptions = {};

$checkboxes.filter(':checked').each(function() {
  
  	if (typeof selectedOptions[ this.name ] == 'undefined') {
    	selectedOptions[ this.name ] = [];
    }
    
    selectedOptions[ this.name ].push( this.value );
  
  });
  
  var $filtered = $sets;
  
  $.each(selectedOptions, function(type, selectedOption) {
  
  	$filtered = $filtered.filter(function() {
    
    	var matched = false,
        	currentFilters = $(this).data('category').split(' ');
      
      $.each(currentFilters, function(_, currentFilter) {
      	if ($.inArray(currentFilter, selectedOption) != -1) {
        	matched = true;
          return false;
        }
      });
      
      if (matched) {
      	return true;
      }
      
    });
  
  });
  
  $sets.hide().filter($filtered).show();

});
});
</script>

</body>
</html>

Less Icons?

No problem! If you'd rather have three or six icons instead of nine, just delete the image tags you don't need!

Something other than icons?

Also not a problem! If you're using this for screencaps or a character list and you'd rather have just one image, just delete the image tags you don't need and change the following:

.set img{width:100px;height:100px;margin:10px;background:var(--page-bg);}

To this:

.set img{width:100%;height:100px;margin:10px;background:var(--page-bg);}

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Tags: html page

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

Icon Directory [Multi-tag Search]

Information

The Coding

Less Icons?

Something other than icons?

Terms of Use