Develop Reference

Jquery if element has same class?

Im having a page with lot of lightbox (more than one hundred)
Each time I have to add in lightbox-content and trigger-lightbox a class
like 1 2 3 4
and in the jquery i need to duplicate it to trigger the good lightbox. like
$('a#trigger-lightbox.1').click(function() {
$('.lightbox-background').fadeIn('slow');
$('#lightbox-content.1').fadeIn('slow');
});
$('a#trigger-lightbox.2').click(function() {
$('.lightbox-background').fadeIn('slow');
$('#lightbox-content.2').fadeIn('slow');
});
$('a#trigger-lightbox.3').click(function() {
$('.lightbox-background').fadeIn('slow');
$('#lightbox-content.3').fadeIn('slow');
});
$('a#trigger-lightbox.4').click(function() {
$('.lightbox-background').fadeIn('slow');
$('#lightbox-content.4').fadeIn('slow');
});
I'd like instead to have a javascript to add the class 1 2 3 etc, automatically + the jquery to trigger the lightbox-content if it has the same class
or at leat to have something like 'if trigger-lightbox- has same class of lightbox-content.
this way the code will be much shorter.
How is this possible to achieve ?
So far I tried the following:
var same = $(this).attr("class");
$('a#trigger-lightbox'+'.'+same).click(function() {
$('.lightbox-background').fadeIn('slow');
$('#lightbox-content'+'.'+same).fadeIn('slow');
});
But no success . . .
I have this codepen if that help ?
https://codepen.io/anon/pen/VQQzdJ
Really appreciate all your help !!

Working Codepen.
First of all the id should be unique in the same document, so please replace the duplicate ones by common classes, then you could use data-* attributes as the following example shows :
$('a.trigger-lightbox').click(function() {
var index = $(this).data('index');
$('.lightbox-background').fadeIn('slow');
$('.lightbox-content.'+index).fadeIn('slow');
});
$('.lightbox-background').click(function() {
$(this).fadeOut('slow');
$('.lightbox-content').fadeOut('slow');
});
$('a.trigger-lightbox').click(function() {
var index = $(this).data('index');
$('.lightbox-background').fadeIn('slow');
$('.lightbox-content.' + index).fadeIn('slow');
});
$('.lightbox-background').click(function() {
$(this).fadeOut('slow');
$('.lightbox-content').fadeOut('slow');
});
.lightbox-content {
background: white;
padding: 50px;
margin: 0 auto;
z-index: 999999;
display: none;
position: fixed;
left: 50%;
margin-left: -50px;
}
ul li {
list-style: none
}
.lightbox-background {
display: none;
background: rgba(0, 0, 0, 0.8);
width: 100%;
position: fixed;
height: 100%;
z-index: 1;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lightbox-content 1">TEST 1</div>
<div class="lightbox-content 2">TEST 2</div>
<div class="lightbox-content 3">TEST 3</div>
<div class="lightbox-content 4">TEST 4</div>
<ul class="accordion-content">
<li>
<a class="trigger-lightbox" href="#" data-index='1'><p>TRIGGER 1</p></a>
</li>
<li>
<a class="trigger-lightbox" href="#" data-index='2'><p>TRIGGER 2</p></a>
</li>
<li>
<a class="trigger-lightbox" href="#" data-index='3'><p>TRIGGER 3</p></a>
</li>
<li>
<a class="trigger-lightbox" href="#" data-index='4'><p>TRIGGER 4</p></a>
</li>
</ul>
<div class="lightbox-background"></div>

Firstly you're repeating the same id attribute across multiple elements which is invalid HTML. id must be unique. Use common classes to group elements instead.
To solve this issue, and make your code more DRY, you can use a data attribute on the trigger element which relates it to the target. This way you can have an infinite amount of HTML content without ever needing to amend the JS. Something like this:
$('.trigger').click(function() {
$('.lightbox-background').add($(this).data('target')).fadeIn('slow');
});
$('.lightbox-background').click(function() {
$(this).fadeOut('slow');
$('.lightbox').fadeOut('slow');
});
.lightbox {
background: white;
padding: 50px;
margin: 0 auto;
z-index: 999999;
display: none;
position: fixed;
}
ul li {
list-style: none
}
.lightbox-background {
display: none;
background: rgba(0, 0, 0, 0.8);
width: 100%;
position: fixed;
height: 100%;
z-index: 1;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lightbox" id="lightbox1">TEST 1</div>
<div class="lightbox" id="lightbox2">TEST 2</div>
<div class="lightbox" id="lightbox3">TEST 3</div>
<div class="lightbox" id="lightbox4">TEST 4</div>
<ul class="accordion-content">
<li>
<a href="#" class="trigger" data-target="#lightbox1">
<p>TRIGGER 1</p>
</a>
</li>
<li>
<a href="#" class="trigger" data-target="#lightbox2">
<p>TRIGGER 2</p>
</a>
</li>
<li>
<a href="#" class="trigger" data-target="#lightbox3">
<p>TRIGGER 3</p>
</a>
</li>
<li>
<a href="#" class="trigger" data-target="#lightbox4">
<p>TRIGGER 4</p>
</a>
</li>
</ul>
<div class="lightbox-background"></div>
Note that I amended the positioning of the lightbox in your CSS as it didn't work well in the snippet.

You can use data attributes. Each box and its corresponding trigger have the same identifier. Simply grab the id of the trigger when you click on it, and use it to fade in the right box.
$('.trigger-lightbox').on('click', function() {
const id = $(this).data('id');
$(`.box[data-id="${id}"]`).fadeIn('slow');
});
.box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="trigger-lightbox" data-id="1">Trigger one</a>
<a class="trigger-lightbox" data-id="2">Trigger one</a>
<div class="box" data-id="1">Box one</div>
<div class="box" data-id="2">Box two</div>

How can I reverse this simple jQuery fadeIn effect?

So, this script creates an easing swift effect when you click on the button (id="enter") and what I want is that when you click it once again it will reverse the effect and go back to the beginning. Also, another solution can be with 2 buttons so one can do the first part and the other can reverse the action.
Here is the code:
jQuery('#enter').click(function() {
$('#slide2').fadeIn(1000, 'linear', function(){
$('#slide3').fadeIn(1000, 'linear');
});
});
There are three images: slide1, slide2 and slide3. I actually found this code here: http://jsfiddle.net/e6hUr/1/ and this is how it should look but I only need reverse now.

Here you have more than one slide so fadeToggle can not give you exact reverse
Fine below code that can give you exact reverse of fadeIn effect
var forward = true;
$('#enter').click(function() {
if(forward == true){
$('#slide2').fadeIn(1000, 'linear', function(){
$('#slide3').fadeIn(1000, 'linear');
});
forward = false;
}else{
$('#slide3').fadeOut(1000, 'linear', function(){
$('#slide2').fadeOut(1000, 'linear');
});
forward = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
<li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
</li>
<li id="slide2" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
</li>
<li id="slide3" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
</li>
</ul>
<button id="enter" type="button">Click Me!</button>

There is two way you can do that with fadIn,fadeOut and fadeToogle for reverse effect change slide order in jquery see below code. For identify fade effect we are manage data-fade attribute in button.
$('#enter').click(function() {
var fade_type = $(this).data('fade');
if (fade_type == "in") {
$('#slide2').fadeToggle(1000, 'linear', function() {
$('#slide3').fadeToggle(1000, 'linear');
});
$(this).data('fade', 'out');
} else {
$('#slide3').fadeToggle(1000, 'linear', function() {
$('#slide2').fadeToggle(1000, 'linear');
});
$(this).data('fade', 'in');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
<li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
</li>
<li id="slide2" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
</li>
<li id="slide3" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
</li>
</ul>
<button id="enter" type="button" data-fade="in">Click Me!</button>

You should handle it using CSS transition and in jQuery, you just toggle a class:
-jsFiddle-
$('#enter').click(function() {
$('#slide2, #slide3').toggleClass('fadeIn');
});
#enter {
position: relative;
z-index: 9;
}
#slide2, #slide3 {
opacity: 0;
transition: opacity 1s linear;
}
#slide2.fadeIn, #slide3.fadeIn {
opacity: 1;
}
#slide2:not(.fadeIn), #slide3.fadeIn
{
transition-delay: 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
<li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
</li>
<li id="slide2" style="width: 100%; float: left; margin-right: -100%;">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
</li>
<li id="slide3" style="width: 100%; float: left; margin-right: -100%;">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
</li>
</ul>
<button id="enter" type="button">Click Me!</button>

Use this:
$('#enter').click(function() {
$('#slide2').fadeToggle(1000, 'linear', function(){
$('#slide3').fadeToggle(1000, 'linear');
});
});
Just Toggle your fade effect.

How do I make a content slider that shows the next slide when the user scrolls vertically or clicks one of the bottom nav tabs?

This is my first post on Stack Overflow so sorry if I'm not clear in what I'm saying. But basically I'm working on a little school project and it's basically an All About Me site to refresh on what we've learned over the summer. I have tabs on the bottom of the screen for navigation and I have content in the center of the screen. Upon clicking a new tab or scrolling down, I want the corresponding div to slide into where the old content was. I don't have a huge knowledge of JavaScript so I have no idea how to go about doing this. I've been looking at image sliders but those aren't really what I'm looking for. I'm looking for something like this: http://coolcarousels.frebsite.nl/c/8/
This is how it looks right now:
http://i.imgur.com/BqZ78S3.jpg
This is basically all of my HTML so far:
<main class="content-container">
<section class="slider animated fadeInDown">
<div class="intro-content">
<h1>Hi, my name is Brian Hurtado.</h1>
<h3>I enjoy making beautiful and innovative websites.</h3>
</div>
<div class="summer-content">
<h1>This is my text about summer.</h1>
<h3>This is some more text about my summer.</h3>
</div>
<div class="design-content">
<h1>This is some text about web design.</h1>
<h3>This is some more text about web design.</h3>
</div>
<div class="schedule-content">
<h1>This is some text about my schedule.</h1>
<h3>Probably going to put a table in here.</h3>
</div>
<div class="site-content">
<h1>This is some text about what I want to do with the school site.</h1>
<h3>This is some more text about what I want to do with the school site.</h3>
</div>
<div class="goals-content">
<h1>These are my goals that I hope to achieve in the future.</h1>
<h3>I have to think of some goals.</h3>
</div>
</section>
</main>
<nav class="main-nav">
<ul>
<li class="active">
<a href="#">
<span>
<img src="img/home.png">
</span>
<b>Intro</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/summer.png">
</span>
<b>Summer</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/design.png">
</span>
<b>Web Design</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/schedule.png">
</span>
<b>Schedule</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/site.png">
</span>
<b>School Site</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/goals.png">
</span>
<b>Goals</b>
</a>
</li>
</ul>
</nav>
And this is my CSS:
body {
font-family: Lato, sans-serif;
}
.content-container {
width: 100%;
height: 80vh;
text-align: center;
color: black;
font-size: 42px;
}
.slider {
width: 1200px;
height: 300px;
overflow: hidden;
margin: 0 auto;
position: relative;
top:250px;
}
.intro-content h3 {
margin-top: -30px;
}
.main-nav {
position: absolute;
bottom:0;
width: 100%;
background-color: #101518;
}
.main-nav ul {
width: 1200px;
margin: 0 auto;
text-align: center;
}
.main-nav ul li a {
color:white;
text-decoration: none;
}
.main-nav ul li {
display: inline-block;
padding: 15px 35px;
font-size: 20px;
color: white;
-o-transition:.3s ;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.main-nav ul li:not(.active) {
opacity: 0.5;
}
.main-nav ul li:hover {
opacity: 1;
}
.main-nav span {
width: 40px;
height: 40px;
display: block;
margin:0 auto 5px;
}
html {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/landscape.jpg") no-repeat center center;
background-size: cover;
}
What exactly do I need to do from here? I was thinking maybe doing an onclick function that switches the active class so that the non-active class is display:none, but I want it to have a sliding effect. I would really appreciate any help. If you need me to clarify anything please let me know.

You can use a variety of plugins as mentioned by Fabio above, or you might use this code as your starting point - FIDDLE.
Your link to coolcarousels showed it going horizontally, so that's how the fiddle works.
JS
$("#selector a").on("click",function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
},
1200);
});
Attribution is noted in the JS section of the fiddle.

I used a very simple script from this website;
http://jquery.malsup.com/cycle2/
Simply download and include Cycle2 plugin on your page (Make sure you also have the latest version of Jquery) and then declare your slideshow markup. There are loads of demo's on the site which are extremely easy to follow.
Goodluck with your project!

Another jQuery Quicksand jumpy transition

When I hit filter the li get a left overlapping position before to get in transition to filter. I tested the previous questions and answers but isn't solved the problem. The ul doesn't use an absolute position, the li class have left float.
here is the html
<div class="filters">
<ul id="filters" class="clearfix">
<li><a title="all" href="#" class="active"> all </a></li>
<li><a title="web" href="#"> web </a></li>
<li><a title="app" href="#"> app </a></li>
<li><a title="logo" href="#"> logo </a></li>
<li><a title="card" href="#"> card </a></li>
<li><a title="icon" href="#"> icon </a></li>
</ul>
</div>
<div id="portfolio">
<ul id="portfolio_list">
<li class="portfolio" data-id="id-1" data-type="logo">
<div class="portfolio-wrapper">
<img src="images/portfolios/logo/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Bird Document</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</li>
<li class="portfolio" data-id="id-2" data-type="app">
<div class="portfolio-wrapper">
<img src="images/portfolios/app/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Visual Infography</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</li>
</ul></div>
And this is the jQuery call
$(document).ready(function () {
var $filter = $('#filters a');
var $portfolio = $('#portfolio_list');
var $data = $portfolio.clone();
$filter.click(function(e) {
if ($($(this)).attr("title") == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[data-type=' + $($(this)).attr("title") + ']');
}
$portfolio.quicksand($filteredData, {
adjustHeight: 'dynamic',
duration: 800,
easing: 'easeInOutQuad'
});
$('#filters a').removeClass('active');
$(this).addClass('active');
});
});
forgot to post the css
#portfolio_list li { overflow:hidden; float: left; }
#portfolio_list .portfolio { width:19%; margin:2% 1% 0% 1%; border: 1px solid #c8c8a9; background: #fff; padding: 20px; }
#portfolio_list .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; }
#portfolio_list .portfolio img { max-width:100%; position: relative; }
#portfolio_list .portfolio .label { position: absolute; width: 100%; height:50px; bottom:-50px; }
#portfolio_list .portfolio .label-bg { background: #fff; width: 100%; height:100%; position: absolute; top:0; left:0; }
#portfolio_list .portfolio .label-text { color:#000; position: relative; z-index:500; padding:12px 8px 0; }
#portfolio_list .portfolio .text-category { display:block; }
Any help is appreciated. Thanks.

The problem was cause by same ID used to style the ul and li and in same time to call it with jQuery. Is needed to use an ID without css styles to not create glitches in quicksand.

Displaying none in <li> <span> list multiple times

I couldn't think of a better way to word the title, but to the point.
I have my code set up like so:
<li>
<a class="news" href="http://MYLINK">
<span>News</span>
</a>
<ul>
<li class="blog">
<a href="http://MYLINK/">
<span>Blog</span>
</a>
</li>
<li class="news">
<a href="http://MYLINK">
<span>News</span>
</a>
</li>
</ul>
</li>
And each MYLINK has a background-image attached to it.
My CSS:
a.news { display: block; width: 105px height: 28px;
background-image: url(Icons/news.png); }
a.news span { display: none; }
And it will maintain the link and not show the text.
But when I do the same for the li classes blog and news it will not display the text,
but it will also not keep the link. Any help?
Should I be using js/jQuery to make this work properly?

You should specify width and height for links too:
li { width: 105px height: 28px; background-image: url(Icons/news.png); }
li a {display: block; width: 105px height: 28px;}
li a span { display: none; }