Develop Reference

I have 3 divs each with it's own topic, and now I would like for each div to open its modal

So far I manage to open one modal by clicking on any of the divs. How can I have one modal for one div element, that is I would like when I click on services to open services modal, and when I click on about to open about modal...and so on..I also have to close every modal when one is opend...I dont know how to connect each div with it's own modal. This is the code I have...
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-4 sector">
<h3>Services</h3>
<i class="fa fa-gear"></i>
<div class="over">
<span class="tooltiptext">Show more...</span>
</div>
</div>
<div class="col-md-4 sector">
<h3>About me</h3>
<i class="fa fa-address-card-o"></i>
<div class="over">
<span class="tooltiptext">Show more...</span>
</div>
</div>
<div class="col-md-4 sector">
<h3>Contact</h3>
<i class="fa fa-phone"></i>
<div class="over">
<span class="tooltiptext">Show more...</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-container" id="myMod">
<div class="modal-content">
<span class="close">&times</span>
<h1>Heading</h1>
<p>Some text goes in here...</p>
</div>
</div>
<div class="showcase">
<div class="container">
<h1>Got Ideas?</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed sem rhoncus urna iaculis faucibus. Pellentesque ultrices nibh ac imperdiet tincidunt. Donec hendrerit velit eros</p>
Read More
</div>
</div>
<script type="text/javascript">
// Get the button that opens the modal
var myOver = document.getElementsByClassName('over');
// Get modal to pass it to function
var modal = document.getElementById('myMod');
// get closing button
var span = document.getElementsByClassName('close')[0];
// Function to open the modal
for(var i = 0; i<myOver.length; i++){
myOver[i].addEventListener('click', function(){
modal.style.display = 'block';
});
}
// When the user clicks on <span> (x), close the modal
span.onclick = function(){
modal.style.display='none';
}
</script>

You could use a similar naming scheme and find the right text simply by by appending a suffix to the object that was clicked on's id, for instance have each span element have an id corresponding to the modal they go with. For instance contact then have the click event listener be
function(e) { //e is the event object event
document.getElementById(e.target.id + "-modal").style.display = 'block'
}
now id the contact modal as 'contact-modal' and it should find it easily
As for closing each element, just iterate through all elements with the class modal-contain and set their display to none before opening the
new one

Jquery Open Accordion based on URL anchor hash

I have a FAQ accordion.
Each question has a class name of q with id of q1 or q2 or q3.
Each answer has a class name of a.
When the url has a anchor tag /faq#q2, I want the q2 to be triggered. I have the below code but its the not working.
I think the line that caused it not working is: if (hash) $(.q[id$="+hash+"]).trigger('click'); but i can't figure out whats wrong.
$(document).ready(function($) {
$(".a").hide().first().show();
$(".q:first").addClass("active");
$('#accordion').find('.q').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".a").not($(this).next()).slideUp('fast');
//Find anchor hash and open
var hash = $.trim( window.location.hash );
if (hash) $(.q[id$="+hash+"]).trigger('click');
});
});
.q {cursor: pointer;}
.a {display: none;}
.q.active + .accordion-content {
display: block;
}
<div id="accordion">
<h4 class="q" id="q1">Accordion 1</h4>
<div class="a">
<p>Cras malesuada ultrices augue Open Accordion 2 molestie risus.</p>
</div>
<h4 class="q" id="q2">Accordion 2</h4>
<div class="a">
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
<h4 class="q" id="q3">Accordion 3</h4>
<div class="a">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>

First of all - you've lost single or double quotes with your jQuery selector. And if I understand correctly - you want something like this?
if (hash) {
var element = $(hash);
if (element.length) {
element.trigger('click');
}
}
Update (http://jsfiddle.net/6hzby0aa/):
// Hide all panels
$(".a").hide();
// Show first panel by default
$(".q:eq(0)").next(".a").show();
// Get hash from query string. You can put there "#q1", "#q2" or something else for test
var hash = window.location.hash;
if (hash) {
// Get panel header element
var requestedPanel = $(hash);
if (requestedPanel.length) {
// Hide all panels
$(".a").hide();
// Show requested panel
requestedPanel.next(".a").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
<h4 class="q" id="q1">Accordion 1</h4>
<div class="a">
<p>Cras malesuada ultrices augue Open Accordion 2 molestie risus.</p>
</div>
<h4 class="q" id="q2">Accordion 2</h4>
<div class="a">
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
<h4 class="q" id="q3">Accordion 3</h4>
<div class="a">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>

This is my final Code. Thanks to #Andrew Orlov
<script type="text/javascript">
$(document).ready(function($) {
// Hide all panels
$(".a").hide();
// Show first panel by default
$(".q:eq(0)").next(".a").show();
$(".q:first").addClass("active");
// Get hash from query string
var hash = window.location.hash;
if (hash) {
// Get panel header element
var requestedPanel = $(hash);
if (requestedPanel.length) {
// Hide all panels
$(".a").hide();
$('.q').removeClass("active"); // remove active
// Show requested panel
requestedPanel.next(".a").show();
requestedPanel.addClass("active"); //add active
}
};
$('body').find('.q').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('600');
$('.q').removeClass("active"); // remove active
$(this).addClass("active"); // add active
//Hide the other panels
$(".a").not($(this).next()).slideUp('fast');
});
});
</script>

Auto-generated list-group-items not responding to active class

I have one div with bootstrap's class list-group and its populated with the basic example Bootstrap provides, and I have another one which I want to populate with list-group-items obtained from ajax get request. The populate is being right, but when trying to switch between the active element it doesn't switch the active element.
The first div (example of boostrap) switch the active element correctly, but the second div (my own) doesn't.
Here is the HTML:
<button id="boton1">TEST</button>
<div class="list-group col-md-3">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
<div class="panel panel-default col-md-3">
<div class="panel-heading">Geolocation
<span class="pull-right"><span class="fa fa-globe"></span></span>
</div>
<div class="panel-body" style="height: 400px;">
<div class="list-group" id="ticker">
</div>
</div>
</div>
And here is the Javascript:
$(document).ready(function(){
var counter=0;
var alert;
$("#boton1").click(function() {
for(var i=0; i<5; i++){
counter++;
if (counter===1){
alert = "<a class='list-group-item active' ";
}else{
alert = "<a class='list-group-item' ";
}
alert+="href='#'>";
// Titulo de la alerta
alert+="<h4 class='list-group-item-heading'>";
alert+="Alerta #"+counter;
alert+="</h4>";
// Texto de la alerta
alert+="<p class='list-group-item-text'>";
alert+="HOLIIISSS";
alert+="</p>";
alert+="</a>";
$("#ticker").append(alert);
}
});
$('.list-group-item').on('click',function(e){
var previous = $(this).closest(".list-group").children(".active");
previous.removeClass('active');
$(e.target).addClass('active');
});
});
Here is the fiddle:
http://jsfiddle.net/txfjjzsm/

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). You need to attach an event handler for all elements which match the current selector, now and in the future.
$('.list-group').on('click', '.list-group-item', function (event) {
event.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
});
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.
See live example here: http://jsfiddle.net/cdog/en1ucfj6/.

Another one:
$(".list-group").click(function (e) {
$(".list-group .active").removeClass("active");
$(e.target).addClass("active");
});

Correctly creating multiple instances of lightbox for website

I am seeking to use a jQuery / JS lightbox I found across a 1 page website, I'd like to use it 7 times to hold 7 unique sets of content but I am failing to implement it correctly for the other 6 instances.
$(document).ready(function() {
var lightBox = $('#lightbox'),
lightBoxContent = $('#lb-content');
var positionLightbox = function() {
var veiwWidth = $(window).width(),
lbContentMargin = (veiwWidth / 2) - 400,
lbContent = $('#lb-content');
lbContent.css({
'left' : lbContentMargin,
'top' : $(window).scrollTop() - 150 + 'px'
});
};
$('#search-submit').click(function() {
lightBox.fadeIn(function() {
lightBoxContent.show();
});
positionLightbox();
});
$('#lb-close').click(function() {
lightBox.hide();
lightBoxContent.hide();
});
});
Mark-Up:
<!-- light box -->
<div id="lightbox"></div>
<div id="lb-content">
<span id="lb-close">x</span>
<h1>More content here.</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec commodo justo. Suspendisse vel facilisis enim. Nulla lorem ante, auctor et malesuada ac, porttitor in lectus. Fusce congue pharetra tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam dapibus nec neque ut accumsan.</p>
</div>
<!-- // light box -->
Duplicating the code in 6 new instances didn't work either.
$(document).ready(function() {
var lightBox = $('#lightbox2'),
lightBoxContent = $('#lb-content2');
var positionLightbox = function() {
var veiwWidth = $(window).width(),
lbContentMargin = (veiwWidth / 2) - 400 + 'px',
lbContent = $('#lb-content2');
lbContent.css({
'left' : lbContentMargin,
'top' : $(window).scrollTop() - 350 + 'px'
});
};
$('#search-submit2').click(function() {
lightBox.fadeIn(function() {
lightBoxContent.show();
});
positionLightbox();
});
$('#lb-close2').click(function() {
lightBox.hide();
lightBoxContent.hide();
});
});

Not 100% sure where the other content is or supposed to be but, assuming your lightbox code is correct and your html too (for what you need it to do) then you dont need to repeat the jquery code 7xs. Keep the same code and ............. lets assume that you have this html as your content
<div id="lightbox"> content here to be lightboxed </div>
<div id="lightbox2"> content here to be lightboxed </div>
<div id="lightbox3"> content here to be lightboxed </div>
<div id="lightbox4"> content here to be lightboxed </div>
<div id="lightbox5"> content here to be lightboxed </div>
<div id="lightbox6"> content here to be lightboxed </div>
<div id="lightbox7"> content here to be lightboxed </div>
then in your jQuery, you put all these id selectors in your code as follows.
$(document).ready(function() {
var lightBox = $('#lightbox, #lightbox2,#lightbox3,#lightbox4,#lightbox5,#lightbox6,#lightbox7'),
lightBoxContent = $('/* same here for the 7 lb-content 1 through 7 */ ');
etc
Essentially, group all your selectors to reuse the same code.

How do I change this jquery fade in then out to a cross fade?

Ok I have to two images on a page that I want to cross fade between on mouse over and on mouse out i want it to reverse so the image looks as if it reverting back to its original state.
Right now I it have working by fading out the first image then fading the replacement back in as below how do I make this cross fade as above?
$("#img-swap1 img").mouseover(function() {
$("#img-swap1 img").fadeOut(350, function() {
$(this).attr("src", "images/dentalwise-hover.jpg","images/dentalwise.jpg");
$(this).fadeIn(350);
});
}).mouseout(function(){
$("#img-swap1 img").fadeOut(350, function() {
$(this).attr("src", "images/dentalwise.jpg","images/dentalwise.jpg");
$(this).fadeIn(350);
});
});
the html:
<div id="main-content">
<div class="featured">
<div class="featured-heading">
<h3>Recent Works</h3>
<p class="sub-heading">Check out my latest work</p>
</div>
<p class="featured-para">
Elementum sed pid nunc, placerat quis parturient,
sit nascetur? Mid placerat vel, cum scelerisque diam.
placerat quis parturient dolorElementum sed pid
placerat quis parturient.
</p>
</div>
<div id="latest-w" class="pleft">
<div class="latest-img">
<a id="img-swap1" class="img-swap" href="#">
<img src="images/dentalwise.jpg" width="191" height="129" />
</a>
</div>
</div>
<div id="latest-w" class="pleft">
<div class="latest-img">
<a id="img-swap2" class="img-swap" href="#">
<img class="img-swap" src="images/wyevallay.jpg" width="191" height="129" />
</a>
</div>
</div>
<div id="latest-w" class="pleft">
<div class="latest-img">
<a id="img-swap3" class="img-swap" href="#">
<img src="images/easycms.jpg" width="191" height="129" />
</a>
</div>
</div>
</div>

Well you should have two separate images. Place one behind the other. Then you can fade the one on top out and it will have the effect of "cross-fading". If you're only changing the src of the image, there is no way to have it cross-fade.

If your images all follow the same pattern, i.e. name.jpg -> name-hover.jpg, you can automate the whole process:
$(function() {
// Create your hover images:
$('.img-swap img').each(function() {
// Construct your hover img src:
var src = $(this).attr('src').replace(/\.jpg/, '-hover.jpg');
// Clone the img, give it the new src,
// place the clone after the original,
// and position it underneath
var offset = -$(this).outerWidth();
$(this).clone()
.attr('src', src)
.css({position: 'relative', left: offset+'px', zIndex: -1})
.insertAfter($(this));
});
// Create mouseover to "cross-fade":
$('.img-swap').on('mouseover', 'img', function() {
// Keep it barely visible, so it doesn't re-flow the DOM
$(this).stop().fadeTo(350, .01);
}).on('mouseleave', 'img', function() {
$(this).stop().fadeTo(350, 1);
});
});
Here is a jFiddle example: http://jsfiddle.net/jtbowden/xqUQ6/3/