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>

Switch visible div based on user click

so I have a div with navigational links (set up using ul/li and a href within the li's).
Below that I have 4 other div's. I only want 1 div shown at a time, they will then switch based on the users selection of the navigational LI's
I've used a similar setup on a different page, and have tried to port it over to my current page but to no avail...
JSFIDDLE
Please see the above jsfiddle for the HTML/CSS/JS involved.
HTML:
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
Any help is welcomed, I am still learning (aren't we always), so with any fixes/tips, please detail why it works, or what i did wrong that's making this not work. (if that makes sense!)
Thanks again for your help!

This is one way of achieving it.
HTML - added "navlink" class to your anchor elements, and gave them a data-section attribute that refers to the tab they should show:
<div id="content">
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><a data-section="support" href="#support" rel="support"><span>Support</span></a></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
JavaScript - see inline comments:
$(document).ready(function(){
// start of at the home page
navigateTo("#home");
// for every navlink element
$('.tabs > li > a').each(function() {
//when it is clicked
$(this).click(function(e) {
e.preventDefault();
// navigate to the section ilinked to in the href
navigateTo($(this).attr('href'));
});
});
});
function navigateTo(sectionId) {
//hide all tabs
$('.tab_content').hide();
//then show the one we want
$(sectionId).show();
}

You don't need separate click handlers for each menu item. The #tabs li click handler will suffice. I removed the click handlers on each of the links since they are not necessary.
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active selected');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active selected");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn(0);
// At the end, we add return false so that the click on the link is not executed
return false;
});
ul {
list-style: none;
}
.man-banner {
background: url("../images/man-logo.png") no-repeat top;
border-radius: 8px 8px 0 0;
height: 93px;
max-width: 915px;
margin: 15px 15px 0 15px;
}
.banner-nav {
background: #F0F1F2;
border-bottom: 1px solid #D6D8DB;
height: 40px;
max-width: 915px;
margin: 0 15px 15px;
}
.banner-nav a {
font-family: MAN-light, Arial, sans-serif;
font-size: 16px;
margin-left: 20px;
text-decoration: none;
display: block;
float: left;
height: 40px;
position: relative;
color: #303C49;
line-height: 40px;
}
.banner-nav a:hover {
color: #303C49;
}
.banner-nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 5;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.banner-nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
ul.tabs li.selected a,
ul.tabs li.selected a:hover {
top: 0px;
font-weight: normal;
background: #FFF;
border-bottom: 1px solid #FFF;
color: #000;
}
/***************************/
/** Main Content Area **/
/***************************/
#content {
width: 950px;
margin: 5 10;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><a data-tab-id="#home"><span>Home</span></a>
</li>
<li><span>Find Your Vehicle</span>
</li>
<li><span>Downloads</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>

You can try to use css to show and hide the blocks when there is an onclick event.
Here some sample code:
CSS
.activetab {
display: block;
}
.tab {
display: none;
}
JAVASCRIPT / JQUERY
$(document).ready(function() {
$(".tabmenu").on("click", function() {
$(".activetab").removeClass("activetab");
$(this).addClass("activetab");
});
});
HTML
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active tabmenu"><span>Home</span></li>
<li class="tabmenu"><span>Find Your Vehicle</span></li>
<li class="tabmenu"><span>Downloads</span></li>
<li class="tabmenu"><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content tab">
1234156124
</div>
<div id="findvehicle" class="tab_content tab">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content tab">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content tab">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
If you want I can create a JSFiddle to see how it works
Hope this works for you!

You have a syntax error, you are closing your document ready callback more than once.
$("#findvehicle").click(function(){
$('a[rel="find_your_vehicle"]').trigger("click");
});
}); // Remove this
$("#downloads").click(function(){
$('a[rel="downloads"]').trigger("click");
});
}); // Remove this
When you remove these extra closes the tabs appear. You'll probably want to hide all but the default tab in that document ready call also.

JQuery animate won't work

I'm trying to get list items to scroll up and down when I click on a link. I just can't get it to work.
UPDATE: Added a JSFiddle
jQuery:
$(document).ready(function() {
//console.log($('.nav-up'));
$('.nav-controls').on('click', '.nav-up', function(e) {
e.preventDefault();
//alert('clicked');
var navHeight = $(e.currentTarget).closest('.horz-scroll').find('.block-nav').height();
var el = $(e.currentTarget).closest('.horz-scroll').find('.block-nav > ul');
if((el.height() - navHeight) < el.position().top) {
el.animate({ top: '+=19' }, 'fast');
console.log(el.css('top'));
}
});});
HTML:
<div class="horz-scroll">
<div class="block-nav-wrapper">
<div class="block-nav">
<ul>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
<li>
<div class="wrap-box-name"> <span><img src="../../../upload/1/img/arrow.png" /></span> Orinda Union School District</div>
</li>
</ul>
</div>
</div>
<div class="nav-controls">
<ul>
<li><a class="nav-up" href="#"><img src="../../../upload/1/img/prev.jpg" /></a></li>
<li><input class="nav_down" name="submit" src="../../../upload/1/img/next.jpg" type="image" /></li>
</ul>
</div>
</div>
CSS:
.nav-controls {
right: 10px;
top: 25px;
margin-left: 37%;
}
.nav-controls ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-controls ul li{
display: inline;
padding-right: 16px;
}
.block-nav-wrapper {
position: relative;
margin-bottom: 10px;
padding: 10px;
}
.block-nav {
position: relative;
height: 130px;
margin: 10px;
overflow: hidden;
}
.block-nav ul{
}
.block-nav ul li{
list-style:none;
line-height:35px;
}
console.log(el.height()); = 175
console.log(navHeight); = 130
console.log(el.position().top); = 0

A couple things before you get the answer.
You have to include jQuery in your fiddle if you're using it.
like Chris Rockwell said, use a placeholder site (I swapped everything to use http://placehold.it/)
Now, here's the fiddle: http://jsfiddle.net/QmxWc/1/. Main thing that was missing was position:relative on the <ul> you were trying to move. But you also had some logic problems with your javascript.
CSS:
.block-nav ul {
position: relative;
}
JS:
$('.nav-controls').on('click', '.nav-up', function (e) {
e.preventDefault();
//alert('clicked');
var navHeight = $(e.currentTarget).closest('.horz-scroll').find('.block-nav').height();
var el = $(e.currentTarget).closest('.horz-scroll').find('.block-nav > ul');
if ((el.height() - navHeight) > Math.abs(el.position().top)) {
el.animate({
top: '-=19'
}, 'fast');
console.log(el.css('top'));
}
});

Positioning absolute element by offset

I have a drop down menu on a page and want the menu to drop down from the main item to the left. It presently drops down to the right.
I have a jsfiddle for it here.
As you can see it presently drops down to the right and resizes the page to fit. I want the menu to drop to the left and keep all the dimensions in tact. Is there an easy way. I know the jQuery menu widget can do it, but I had other issues with that.
The button is somewhere in the middle of the page, so ideally I want the drop down to be to drop down relative to the parent, not just as the jsfiddle shows which is fixed against the right hand side. Hope this clarifies.
CODE:
IN DOC READY
$(document).ready(function () {
// Menus
$('ul.menu').hide();
$('ul#viewMenu li').hover(function () {
$(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
$(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});
});
CSS
ul#viewMenu { overflow: hidden; }
ul#viewMenu li { float:left; display: block; text-align: left; line-height: 40px; }
ul#viewMenu li a { line-height: 40px; }
ul#viewMenu ul.menu { position: absolute; }
ul#viewMenu ul.menu li { float: none; }
HTML
<div style="display: inline-block; float: right;">
<ul id="viewMenu" style="list-style: none; margin: 0; padding: 0;">
<li style="display: block; float: left;"> <a class="nav-button view-type-button" style="text-align: center;" href="#"
title="Change the things.">
<span>
<img src="~/Content/themes/base/images/empty.png" style="height: 48px; width: 49px;" alt="Things" />
</span>
</a>
<ul class="view-menu-item view-menu-bottom-right menu"
style="width: 170px !important">
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing1-calendar-button"></span>
<span>This 1</span>
</a>
</li>
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing2-calendar-button"></span>
<span>This 2</span>
</a>
</li>
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing3-calendar-button"></span>
<span>This 3</span>
</a>
</li>
</ul>
</li>
</ul>

Turns out all I needed to do was get hold of the current drawn position from the jQuery offset value. Then set the CSS position for the absolute element. Simples... when you know how!
var position = $('ul#viewMenu ul.menu').offset();
$('ul#viewMenu ul.menu').css({ top: (position.top) + 'px', left: (position.left - 160) + 'px' });
$('ul.menu').hide();
$('ul#viewMenu li').hover(function () {
$(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
$(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});

Simple. Just give this:
ul#viewMenu ul.menu {
position: absolute;
right: 0;
}
Fiddle: http://jsfiddle.net/praveenscience/T8hFW/1/

jQuery animate problem

I am using the animate function in jquery but it is working weird. What is wrong with it?
Here is some code:
here is my html page
<ul class="menu red">
<li class="current">Home</li>
<li>Bio</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div> <!-- End menu -->
</div> <!-- End header -->
<div id="content">
<div id="inner">
<div id="Home">
home</div>
<div id="Bio">bio</div>
<div id="Portfolio">port</div>
<div id="Pricing">pric</div>
<div id="Contact">con</div>
</div>
Here is my style sheet
#content {
overflow:hidden;
width: 900px;
}
div#inner {
width: 4515px;
}
div#inner div {
float:left;
width: 900px;
margin-right: 3px;
}
here is my script
function nexthome() {
$('#inner').animate({marginLeft: '0px'}, 1200);
}
function nextbio() {
$('#inner').animate({marginLeft: '-1806px'}, 1200);
}
function nextport() {
$('#inner').animate({marginLeft: '2709px'}, 1200);
}
function nextpric() {
$('#inner').animate({marginLeft: '3612px'}, 1200);
}
function nextcon() {
$('#inner').animate({marginLeft: '4515px'}, 1200);
}

Changing the marginLeft is probably not the best way to do this... it might work that way, but I think using left would be best.
I changed the css to make #inner have a relative position and changed the code to set up an object containing the left positions. Here is a demo.
HTML
<ul class="menu red">
<li class="current">Home</li>
<li>Bio</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div> <!-- End menu -->
</div> <!-- End header -->
<div id="content">
<div id="inner">
<div id="Home">home</div>
<div id="Bio">bio</div>
<div id="Portfolio">port</div>
<div id="Pricing">price</div>
<div id="Contact">contact</div>
</div>
</div>
Updated CSS:
#content {
overflow:hidden;
width: 900px;
}
div#inner {
position: relative;
top: 0;
left: 0;
width: 5500px;
}
div#inner div {
float:left;
width: 900px;
height: 200px;
border: #000 1px solid;
margin-right: 3px;
}
Updated script
// uses the exact name from the menu
var leftEdge = {
'Home' : 0,
'Bio' : 903,
'Portfolio' : 1806,
'Pricing' : 2712,
'Contact' : 3617
};
$('.menu a').click(function() {
var name = $(this).text(); // grabs the name from the menu
$('#inner').animate({
left: -leftEdge[name] + 'px'
}, 1200);
return false;
});
I actually have a plugin called visualNav that updates the menu (highlights the visible panel) when a block comes into view, you can check it out if you are interested. The second demo shows the menu working on both horizontally and vertically arrange blocks.