I am trying to get an element inside an anchor tag and set a CSS class called active on it to style the particular element, but I am getting an error that the element is undefined. I can't figure out what the issue is.
I tried using different selectors like featuresLinks.document.querySelectorAll("h3"), but I still get the undefined error. I am not sure what javascript method or selector I need to use to get the h3 element inside the specific link I click on.
let featuresLinks = document.querySelectorAll(".features-link");
featuresLinks.forEach(featuresLink => {
featuresLink.addEventListener("click", function(e){
e.preventDefault();
active();
})
})
function active(){
let featuresLinkHeading = featuresLinks.firstChild;
if(!featuresLinkHeading.classList.contains("features-active")) {
featuresLinkHeading.classList.add("features-active")
}
};
:root {
--primary-blue: hsl(231, 69%, 60%);
--primary-red: hsl(0, 94%, 66%);
--neutral-blue-100: hsl(229, 8%, 60%);
--neutral-blue-900: hsl(229, 31%, 21%);
--neutral-100: hsl(0, 0%, 100%);
--neutral-900: hsl(0, 0%, 0%);
}
.features a {
text-decoration: none;
color: var(--neutral-blue-100);
font-size: 19.5px;
font-weight: 400;
}
body {
font-family: 'Rubik', sans-serif;
font-size: 18px;
margin: 0%;
text-align: center;
}
.features-border::after {
content: "";
display: block;
margin: 0 auto;
width: 52%;
padding-top: .85em;
border-bottom: 4px solid var(--neutral-100);
}
.features-border.features-active::after {
content: "";
display: block;
margin: 0 auto;
width: 52%;
padding-top: .85em;
border-bottom: 4px solid var(--primary-red);
}
a .features-active {
color: var(--neutral-blue-900);
}
<body>
<section>
<div class="content features">
<h2>Features</h2>
<p>Our aim is to make it quick and easy for you to access your favourite websites.
Your bookmarks sync between your devices so you can access them on the go.</p>
<hr>
<a class="features-link" href="">
<h3 class="features-border features-active">Simple Bookmarking</h3>
</a>
<hr>
<a class="features-link" href="">
<h3 class="features-border">Speedy Searching</h3>
</a>
<hr>
<a class="features-link" href="">
<h3 class="features-border">Easy Sharing</h3>
</a>
<hr>
</div>
</section>
</body>
I suggest you delegate from the container
window.addEventListener('DOMContentLoaded', () => { // when page has loaded
const container = document.querySelector('.features');
const featureLinks = container.querySelectorAll('a.features-link');
container.addEventListener("click", function(e) {
const tgt = e.target.closest("a");
if (!tgt || !tgt.matches("a")) return; // we did not click a link or a child of a link
e.preventDefault();
const tgtHeader = tgt.querySelector('h3');
featureLinks.forEach(link => {
const header = link.querySelector('h3');
header.classList.toggle('features-active', header === tgtHeader); // toggle off unless clicked
});
});
});
:root {
--primary-blue: hsl(231, 69%, 60%);
--primary-red: hsl(0, 94%, 66%);
--neutral-blue-100: hsl(229, 8%, 60%);
--neutral-blue-900: hsl(229, 31%, 21%);
--neutral-100: hsl(0, 0%, 100%);
--neutral-900: hsl(0, 0%, 0%);
}
.features a {
text-decoration: none;
color: var(--neutral-blue-100);
font-size: 19.5px;
font-weight: 400;
}
body {
font-family: 'Rubik', sans-serif;
font-size: 18px;
margin: 0%;
text-align: center;
}
.features-border::after {
content: "";
display: block;
margin: 0 auto;
width: 52%;
padding-top: .85em;
border-bottom: 4px solid var(--neutral-100);
}
.features-border.features-active::after {
content: "";
display: block;
margin: 0 auto;
width: 52%;
padding-top: .85em;
border-bottom: 4px solid var(--primary-red);
}
a .features-active {
color: var(--neutral-blue-900);
}
<section>
<div class="content features">
<h2>Features</h2>
<p>Our aim is to make it quick and easy for you to access your favourite websites. Your bookmarks sync between your devices so you can access them on the go.</p>
<hr>
<a class="features-link" href="">
<h3 class="features-border features-active">Simple Bookmarking</h3>
</a>
<hr>
<a class="features-link" href="">
<h3 class="features-border">Speedy Searching</h3>
</a>
<hr>
<a class="features-link" href="">
<h3 class="features-border">Easy Sharing</h3>
</a>
<hr>
</div>
</section>
Related
I'm creating a table of links, I want the table to be a bit fancier by changing the table heading's background color whenever I move the cursor to one of the list's links. However, I don't know how to change the attribute of the container element by affecting its smaller element. This is my code:
<html lang="vi">
<head>
<style>
.toc-container {
max-width: 600px;
font-family: "Roboto", sans-serif;
background: #deff9d;
border-radius: 8px;
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-heading {
text-transform: uppercase;
font-weight: normal;
margin: 0 16px;
padding-top: 16px;
}
.table-of-contents {
list-style: none;
padding: 0;
}
.table-of-contents li.author li.blog {
background: #222;
transition: 400ms;
list-style: none;
}
.table-of-contents li.author{
background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
background: #2e2e2e;
}
.table-of-contents li.author li:hover.blog {
background: #000;
}
.table-of-contents li a {
text-decoration: none;
color: #fff;
margin-left: 24px;
padding: 16px 0;
display: block;
}
</style>
</head>
<body>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-of-contents">
<li class="author">
Author's name
<ul>
<li class="blog">
Nháp 1
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I think it's easier to do this with javascript, you can use Element Event mouseenter and mouseleave to achieve style change, maybe this can help you. code below
<script>
const headerDiv = document.querySelector('.index-heading');
const blogDiv = document.querySelector('.blog');
blogDiv.addEventListener('mouseenter', function(e) {
headerDiv.style.background = 'purple'
})
blogDiv.addEventListener('mouseleave', function(e) {
headerDiv.style.background = '#deff9d'
})
</script>
basically your HTML code is not in a order manner so that we could not apply all the changes you need . thats why i attached the code snippet which is easily explained and you can change your design yourself as your choice . and in style , unfortunately a tag is not doing as expected but i am sure that it will work in your browser .
if any needs to be changed in my code then comment below .
let header2=document.getElementById("header2");
let link=document.getElementById("link")
let changeLink=()=>{
header2.style.backgroundColor="green"
link.style.backgroundColor="yellow"
}
let changeHeader=()=>{
link.style.background="green"
header2.style.backgroundColor="yellow"
}
a{
text-decoration: none;
}
#header1{
height:85px;
}
#link{
margin-left: 50px;
background-color:black;
margin-top:-141px;
}
#header2{
height:180px;
}
<div id="header1" style="background-color:red">header1</div>
<a href="https://www.blogger.com/profile/00965819760488730111">
<div style="background-color:green" id="change">
<div id="header2" onmouseover="changeLink()">Đặng Minh Hoàng</div>
</div>
</a>
<ul id="link" onmouseover="changeHeader()">
<div class="col my-1">Nháp1</div>
<div class="col my-1">Nháp2</div>
<div class="col my-1">Nháp3</div>
<div class="col my-1">Nháp4</div>
<div class="col my-1">Nháp5</div>
</ul>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
As I have issue with URL Structure within the tabs. if I have selected the tab-2 and the url is changed to https://example.com/#tab-2 and for tab-3 https://example.com/#tab-3 and so on.
The issue is if I have entered in this https://example.com/#tab-4 or any other, in search bar, it always shows me https://example.com/#tab-1 as current.
But, I would like to do https://example.com/#tab-4 the current shows me tab-4 selected. How would I implement in my current code?
$('.projects_select').click(function(){
var tab_id = $(this).attr('data-tab');
$('.projects_select').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
// window.location.href = window.location.href+"#tab_id";
});
.tab-content {
display: block; /* undo display:none */
height: 0; /* height:0 is also invisible */
overflow: hidden; }
.tab-content.current {
height: auto; /* let the content decide it */ }
.projects_select {
font-weight: 400;
letter-spacing: 1px;
text-align: center;
color: #333;
padding: 17px 0;
width: 16.66%;
float: left;
cursor: pointer;
border-style: solid;
border-width: 1px 1px 1px 0px;
font-style: normal;
font-weight: 700; }
.projects_select.current {
font-weight: 500;
position: relative;
color: #fff;
background: #313641; }
.projects_select.current:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #333;
border-width: 20px;
margin-left: -20px;
}
.tab_Menu{
padding: 35px 10.7% 75px;
background: #efefef; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper tab_Menu">
<a class="projects_select tab-link current" data-tab="tab-1" href="#tab-1"> Tab-1 </a>
<a class="projects_select tab-link" data-tab="tab-2" href="#tab-2"> Tab-2 </a>
<a class="projects_select tab-link" data-tab="tab-3" href="#tab-3"> Tab-3 </a>
<a class="projects_select tab-link" data-tab="tab-4" href="#tab-4"> Tab-4 </a>
<a class="projects_select tab-link" data-tab="tab-5" href="#tab-5"> Tab-5 </a>
</div>
<div class="tab-content current" id="tab-1"> Tab-1 </div>
<div class="tab-content" id="tab-2"> Tab-2 </div>
<div class="tab-content" id="tab-3"> Tab-3 </div>
<div class="tab-content" id="tab-4"> Tab-4 </div>
<div class="tab-content" id="tab-5"> Tab-5 </div>
You can get the hash with window.location.hash. So in your script you can do something like this:
$(document).ready(function(){
if($('.tab-link[href=' + window.location.hash + ']')){
$('.tab-link[href=' + window.location.hash + ']').addClass('current');
}
else {
$('.tab-link[href=#tab1]').addClass('current');
}
});
Not tested this code tho. You don't need to set current class in HTML anymore. You can remove it there.
i have no idea why this is happening.
I replicated a accordion with html, css and jquery, i followed this guide and i adapted it to my website
"http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/"
My jquery is the same, my html and css is a bit different because i customized it, but its basicly the same.
HTML:
<div class="plan-container" style="flex: 0 0 25%;">
<div class="plan-header-mec">
<h2 style="color: #fff; font-weight: lighter; margin: 0; padding-top: 0.625em;">Blabla</h2>
</div>
<div class="plan-details">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-1" class="accordion-section-content">
<p>Information.</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-2" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-3" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-4">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-4" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-5">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-5" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
</div>
<!--end .accordion-->
<p>Conclusion</p>
</div>
</div>
CSS:
#media handheld (min-width: 480px) {
.plan-container {
display: inline-block;
}
}
#media (min-width: 992px) {
.plan-container {
display: table-cell;
}
}
#media (min-width: 1200px) {
.plan-container {
display: table-cell;
}
}
.plan-container {
width: 50%;
overflow: hidden;
border-radius: 5px;
background-color: #fff;
position: relative;
top: 0;
-webkit-transition: all 1s;
transition: all 1s;
}
.plan-container .plan-header-mec {
padding: 50px 0;
border-radius: 5px 5px 0 0;
background-image: url(../img/mv-ber-vantagens-mecanico.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
}
.plan-container .plan-header p {
margin: 0;
color: #447F71;
}
.plan-container .plan-details {
margin: 0 auto;
padding: 60px;
background: url("http://raventools.com/wp-content/themes/raven-wp-theme-2014/images/plan-bottom-border.png") top center no-repeat;
}
.plan-container .plan-details ul {
padding-left: 0;
list-style: none;
}
.plan-container .plan-details ul li span {
font-weight: lighter;
/*color: #777777;*/
}
.plan-container .plan-details p {
background-color: #f4f4f4;
margin: 2em 0;
padding: 1.25em;
font-size: 0.75em;
line-height: 1.8;
color: #777777;
}
/* Test accordion */
.accordion,
.accordion * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.accordion {
overflow: hidden;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 3px;
background: #f7f7f7;
background-image: url(../img/fibra-carbono.jpg);
}
/*----- Section Titles -----*/
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
border-bottom: 2px solid #333333;
/*Carbon Fiber Background*/
/*Carbon Fiber Background*/
transition: all linear 0.15s;
/* Type */
font-size: 20px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 0px #1a1a1a;
color: #fff;
}
/*.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
}*/
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding: 15px;
display: none;
}
/* Test accordion */
/* Check Mark Color*/
.fa ul {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.fa-check {
display: block;
}
.fa-check::before {
color: #66ff33;
}
/* Check Mark Color*/
And finally my jQuery
/*Accordion*/
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if ($(e.target).is('.active')) {
close_accordion_section();
} else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
Ok now, my problem is. What i want is:
When i click Title 1, Information 1 dropdown. (works)
If i click Title 2. while information 1 is showing, information 1 closes and opens information 2 (works)
Now my problem is, if Information 2 is open and i want to close it, when i click on the Title, on the letters of the tittle the dropdown closes and opens again... If i click outside the letters it works properly.
In the jquery
if($(e.target).is('.active')) {
I changed the e.target to .accordion-section-title and what happends is, it opens and closes when i click anywhere, letters or outside the letters, but if a information box is openned and i click on another one, the other one doesn't open, but the opened one closes.
I have no idea what else to do, if you can help, i would apreciate it
Probably your e.target sometimes is the wrong element, infact it depends on where you actually click on.
For instance, if you click on a child element (like the <li> element in your case) the condition $(e.target).is('.active') will fail
Try with this code instead:
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var target = $(e.target).closest(".accordion-section-title");
var currentAttrValue = $(target).attr('href');
if($(target).is('.active')) {
Not exactly an answer (not yet 50 reputation so I can't comment, sorry), but is there any (good ?) reason to not using JQueryUI accordion ?
If you don't want to use all the jQueryUI (and I can understand) you can "isolate" just the accordion pluggin on the custom download section.
I may be simplest than what you're trying to write imho.
I have a div which currently has a static background image, and I need to create a slideshow of background images and text for this div. I would like to fade the background images and the caption text in and out. Does anyone know of a good way to do this using jQuery? My knowledge of JavaScript and jQuery is very limited. I tried to use some ready-made plugins as the Backstretch, Responsiveslides but I could not understand them enough and edit them for my use.
Here is my current code: http://jsfiddle.net/1zdyh3wo/
HTML
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
<div class="nav-wrapper">
<div class="nav-arrows prev"></div>
<div class="nav-dots">
<div class="current"></div>
<div class=""></div>
<div class=""></div>
</div>
<div class="nav-arrows next"></div>
</div>
</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* -- COMMON -- */
body {
font: 400 14px 'Montserrat', Helvetica, sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
}
.separator {
width: 24px;
height: 4px;
}
.separator.white {
background-color: white;
}
.separator.black {
background-color: black;
}
/* -- MENU -- */
/* -- CANVAS -- */
.content {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
right: 0;
bottom: 100px;
left: 0;
width: 33.333333333%;
margin: 0 auto;
}
.sectionTitle {
font: 700 32px/24px 'Montserrat', Helvetica, sans-serif;
line-height: 24px;
margin-bottom: 24px;
letter-spacing: 4px;
}
.sectionDescription {
font: 400 14px/18px 'Montserrat', Helvetica, sans-serif;
margin-top: 24px;
}
/* -- SLIDER -- */
.bg-slider {
background: url(../img/slides/image1.jpg) no-repeat center center fixed;
background-color: red; /* demo purpose only */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* -- SLIDER - NAVEGATION -- */
.nav-wrapper {
display: inline-block;
min-width: 250px;
margin-top: 24px;
padding: 4px;
}
/* -- SLIDER - NAVEGATION ARROWS -- */
.nav-arrows {
float: left;
width: 20px;
height: 20px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border: 4px solid white;
}
.nav-arrows.prev {
border-top: none;
border-right: none;
}
.nav-arrows.next {
border-bottom: none;
border-left: none;
}
/* -- SLIDER - NAVEGATION DOTS -- */
.nav-dots {
margin: 0px 8px;
float: left;
}
.nav-dots div{
float: left;
width: 12px;
height: 12px;
margin: 4px 18px;
cursor: pointer;
border-radius: 50%;
background: rgba(255,255,255,.5);
}
.nav-dots .current:after {
float: left;
width: 12px;
height: 12px;
content: '';
border-radius: 50%;
background: white;
}
Here a visual aid, how I would like the result to be:
Desktop version:
Mobile version:
To keep things really simple:
Make a "wrapper" div for the entire slider
Make an individual "wrapper" div for each individual slide
Put the slider navigation outside of of the individual slides (I put it outside of the slider altogether, but that's your choice based on your desired positioning).
Make a function that will do all the transitions
Here's an example HTML structure, based on yours
<div id="slider">
<div class="content bg-slider active">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 2</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the second image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 3</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the third image. Wanna know more? Click here.</h2>
</div>
</div>
</div>
Here's the functional JavaScript, with comments.
$(document).ready(function(){
// Hide all slides, re-show first:
$(".bg-slider").hide()
$(".bg-slider:first-child").show();
// Prev button click
$(".nav-arrows.prev").click(function(){
slidePrev();
})
// Next button click
$(".nav-arrows.next").click(function(){
slideNext();
})
// "Dots" click
$(".nav-dots div").click(function(){
slideTo($(this).index());
})
});
// "Previous" function must conclude if we are at the FIRST slide
function slidePrev() {
if ($("#slider .active").index() == 0) {
slideTo($("#slider .bg-slider").length - 1);
}
else {
slideTo($("#slider .active").index() - 1);
}
}
// "Next" function must conclude if we are at the LAST slide
function slideNext() {
if ($("#slider .active").index() == $("#slider .bg-slider").length - 1) {
slideTo(0);
}
else {
slideTo($("#slider .active").index() + 1);
}
}
// Slide To will be called for every slide change. This makes it easy to change the animation, or do what you want during the transition.
function slideTo(slide) {
$("#slider .active").fadeOut().removeClass("active");
$("#slider .bg-slider").eq(slide).fadeIn().addClass("active");
$(".nav-dots .current").removeClass("current");
$(".nav-dots div").eq(slide).addClass("current");
}
Finally, here's the updated Fiddle to demonstrate: http://jsfiddle.net/1zdyh3wo/1/
I am using a layout on the blog website Tumblr. I'd like to remove the "Childhood Influences" category from the Show All feature. I've only managed to remove it from the front page, but I would like the Childhood Influences to only show up when you click on its tab. Here's the code:
<!--
CURRENTLY WATCHING #2
pistachi-o (nutty-themes # tumblr)
Theme Documentation:
http://nutty-themes.tumblr.com/themedoc
Please Do Not:
http://nutty-themes.tumblr.com/terms
-->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Reset ----------------------------- */
body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
/* Scrollbar ----------------------------- */
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #DDD;}
/* General ----------------------------- */
body {
background: #f3f3f3;
font-size: 10px;
color: #000000;
font-family: 'Roboto Condensed', Arial, sans-serif;
line-height: 100%;
}
a:link, a:active, a:visited {
color: #130912;
text-decoration: none;
}
a:hover {
color: #f38335;
text-decoration: none;
}
b {
color: #f7941d;
text-decoration: none;
}
/* Isotope (DO NOT EDIT) ----------------------------- */
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}
.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}
.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}
/* Navigation ----------------------------- */
#shows {
position: relative;
width: 100%;
height: 10px;
margin: 0px auto 10px;
background: blue;
padding: 15px 0px;
background: #fafafa;
text-align: center;
}
/* Contents ----------------------------- */
#container {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#containers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainer {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
.stylewrap {
background: #edd456;
width: 200px;
height: 165px;
margin: 5px;
text-align: center;
text-transform: uppercase;
}
.hiatus {
background: #a0c1ba;
}
.complete {
background: #45c0ab;
}
.childhood {
background: #e3e3e3;
}
.next {
background: #c6c6c6;
}
.stylewrap img {
margin: 0;
width: 200px;
border-bottom: 2px solid #F3F3F3;
}
h2 {
margin: 10px 0px 3px;
line-height: 100%;
}
#filters {
text-transform: uppercase;
}
#filters li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
#dash {
text-transform: uppercase;
margin: 25px;
}
#dash li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
.stylewrap:hover .grey {
filter: none;
-webkit-filter: grayscale(0%);
}
</style>
</head>
<body>
<div id="shows">
<ul id="filters" class="show-set clearfix" data-option-key="filter">
<li style="background: #f5f5f5;">Show All</li>
<li style="background: #f5f5f5;">Currently Watching</li>
<li style="background: #f5f5f5;">On Hiatus</li>
<li style="background: #f5f5f5;">Completed</li>
<li style="background: #f5f5f5;">Next Up</li>
<li style="background: #f5f5f5;">Childhood Influences</a></li>
</ul>
<ul id="dash">
<li>Back Home</li>
<li>Dashboard</li>
<li>Theme Credits</li>
</ul>
</div>
<div id="container">
<!-- To add completed show copy and paste the following -->
<div class="stylewrap next">
<img class="grey" src="http://imgur.com/Bktk9mC.jpg">
<h2 class="name">6teen</h2>
Up Next
</div>
<!-- End of Complete Show -->
<div class="stylewrap current">
<img class="grey" src="http://imgur.com/IO7NGnK.jpg" />
<h2 class="name">18 to Life</h2>
Season 2 Episode 11
</div>
<div class="stylewrap childhood">
<img class="grey" src="http://imgur.com/NTMO0xq.jpg">
<h2 class="name">7th Heaven</h2>
(1996-2007)
</div>
<!-- To add completed show copy and paste the following -->
<div class="stylewrap complete">
<img class="grey" src="http://imgur.com/vPkxn7c.jpg">
<h2 class="name">About a Girl</h2>
(2007-2008)
</div>
<!-- End of Complete Show -->
<!-- To add hiatus show copy and paste the following -->
<div class="stylewrap hiatus">
<img class="grey" src="http://imgur.com/owiMXh5.jpg">
<h2 class="name">Awkward.</h2>
Returning September 23, 2014
</div>
<!-- End of Hiatus Show -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.stylewrap',
filter: '.current, .hiatus, .next, .complete',
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
var $optionSets = $('#shows .show-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.show-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
filter: '.current, .hiatus, .next, .complete';
}
return false;
});
});
</script>
</body>
</html>
I believe the problem is in the jQuery, but I just can't figure it out. I've spent 2 days on this, but I'm not too advanced so I've just been searching everywhere I can for an answer.
edit: Sorry for being unclear. The problem is solved!
Well...not sure if this is the best way, but you could simply alter the data-option-value attribute for the Show All option to omit childhood from the selector. You HTML might then become:
<li style="background: #f5f5f5;">Show All</li>
Here's a JSFiddle to show you the code in action. Now clicking "Show All" will not reveal the item tagged with childhood. Hope this helps! Let me know if you have any questions.
Your question isn't very clear but I believe you're asking how to remove a certain element from your unordered list.
This line:
<li style="background: #f5f5f5;">Childhood Influences</a></li>
represents a list element with a text value of "Childhood Influences". Remove the line, and this list item will no longer show up.
Edit: I misread your question, give me a second and I will edit this answer again to address your entire question correctly