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

Add class on specific element without affecting other elements

I'm trying to figure out how I can add class on a specific element without affecting the other elements. Here is the page I have been working on
http://www.digitalspin.ph/test/federalland/careers/
If I trigger the "Send Resume" button. The contact form will slide in from the left. The problem is that it also affects the other elements.
Here is the code I have been working on.
<li id="post-<?php the_ID(); ?>" <?php post_class('six columns job-post'); ?> >
<div class="content">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<form>
<input type="button" class="contact-btn" value="Send your resume">
</form>
<div class="contact-form hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo neque augue, in pellentesque ipsum accumsan eget. Integer efficitur turpis vitae convallis elementum.
</p>
<?php echo do_shortcode('[contact-form-7 id="188" title="Careers Contact Form"]'); ?>
</div>
</div>
</li>
$(document).ready(function(){
$("input.contact-btn").click(function(){
$(".contact-form").addClass("animated slideInLeft").removeClass("hide")
});
});

You can traverse to closest li element using .closest() selector in clicked handler from clicked elements context this. then use .find() selector to target the element with class contact-form:
$("input.contact-btn").click(function(){
$(this).closest('li').find(".contact-form").addClass("animated slideInLeft").removeClass("hide")
});

Thats because you have more than one element that has .contact-form class. I prefer to bind the click event under the form and button container, so will no issues when you re-arrange the elements. Example:
jQuery('.category-job-posts').each(function() {
var $this = this;
jQuery('.contact-btn', $this).click(function(){
jQuery('.contact-form', $this).addClass('animated slideInLeft').removeClass('hide');
});
});

You need to find the closet parent with tagname 'li' to whom the button clicked belongs.
Then once the parent is selected get the element inside it with the 'contact-form' class.
Then just add the required class and remove the 'hide' class.
$("input.contact-btn").click(function(){
$(this).closest('li').find(".contact-form").addClass("animated slideInLeft").removeClass("hide")
});

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");
});

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/

Show/Hide Multiple Divs

I am trying to trigger a show/hide of one div at a time.
What is happening is that all the divs (.shareLink) are opening at the same time.
Below is my jQuery:
$(document).ready(function(){
$(".shareLink").hide();
$("a.trigger").click(function(){
$(".shareLink").toggle("400");
return false;
});
});
Below is my HTML:
<dl class="links">
<dd>content</dd>
<dt class="description">content</dt>
<ul class="tools">
<li><a class="trigger" href="#">Share Link</a></li>
</ul>
</dl>
<div class="shareLink">
<?php print check_plain($node->title) ?>
</div>
Any help with the above problem would be much appreciated.
Cheers.

Based on your HTML, you need to do this:
$(function() {
$("div.shareLink").hide();
$("a.trigger").click(function(){
$(this).parents('dl.links').next('div.shareLink').toggle(400);
return false;
});
});
This walks up to the parent DL and then moves over to the next shareLink div and toggles it.

$(".shareLink").toggle("400");
Refers to any div on the page with a class of ".shareLink".
You will need to find a way to distinguish the specific div you want to show.

You might want to try:
$(document).ready(function(){
$(".shareLink").hide();
$("a.trigger").click(function(e){
e.preventDefault();
$(this).next().toggle("400");
});
});
The answer is it depends on the structure of your document. Here is a sample of something that will work with the above function.
<a class="trigger">click here</a>
<div class="shareLink">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>