We Keep Coding

jQuery clone an image with a class of active and set it as background image of a div

I am using twitter bootstrap's default carousel for a simple slider. What I want to achieve is that whichever item is active, the img inside that item should also be cloned and set as the background image of the div with the class of 'testimonials-bg'.
I have tried the following code but it does not seem to be working:
$("#testimonial-carousel .item.active").each(function() {
var $myBg = $(".testimonial-bg", this),
$myImg = $(".testimonial-img img", this);
$myBg.css({backgroundImage: "url('"+ $myImg[0].src +"')"});
});
I have made a Fiddle for this:
https://jsfiddle.net/4t17wxxw/

Subscribe to slid.bs.carousel event and change the background image to the active one:
var $myBg = $(".testimonial-bg");
$('#testimonial-carousel').on('slid.bs.carousel', function () {
var $img = $('img','.carousel-inner>.item.active');
$myBg.css({backgroundImage: "url('"+ $img[0].src +"')"});
console.log($img[0].src);
});
Working fiddle

Your code is run only once when the script starts but you want to run it everytime the slide changes. Therefore, you can subscribe to the 'slid.bs.carousel' event which fires everytime the carousel displays a new slide.
You can read more about the event here: http://getbootstrap.com/javascript/#carousel-events.
// Testimonial Background from active slide
$('#testimonial-carousel').on('slid.bs.carousel', function () {
$("#testimonial-carousel .item.active").each(function() {
var $myBg = $(".testimonial-bg", this),
$myImg = $(".testimonial-img img", this);
$myBg.css({backgroundImage: "url('"+ $myImg[0].src +"')"});
});
});

There is no class called "testimonial-bg", here is the code which should call on each slide rotate or when you need to assign background image.
$("#testimonial-carousel .item.active").each(function() {
$(this).css("background", "url('"+$(this).find(".testimonial-img img").attr('src')+"')" );
});
Fiddle demo link
Cheers

How to reduce this jquery toggle code for an image map

I am trying to figure out how to reduce this code down! it basically hides an image then show a div depending on what image map area is clicked!
I have a code pen of a working demo here: http://codepen.io/naniio/pen/wBExYq
$(document).ready(function() {
$(".auckland").click(function() {
$(".map").toggle();
$("#aukl.hide").toggle();
});
$(".gisborne").click(function() {
$(".map").toggle();
$("#gisb.hide").toggle();
});
$(".wellington").click(function() {
$(".map").toggle();
$("#well.hide").toggle();
});
$(".nelson").click(function() {
$(".map").toggle();
$("#nel.hide").toggle();
});
$(".christchurch").click(function() {
$(".map").toggle();
$("#chch.hide").toggle();
});
$(".queenstown").click(function() {
$(".map").toggle();
$("#queen.hide").toggle();
});
$(".otago").click(function() {
$(".map").toggle();
$("#ota.hide").toggle();
});
});
I have tried using find and other jquery methods but I must be looking in the wrong places
Any help would be great I'm new to jQuery but not new to stack overflow I can imagine this is an easy question/fix for some and this may be rated harshly or ignored! but for those who continually help this community regardless, thanks! :)

I have something working in this pen. http://codepen.io/anon/pen/ByOEam
Just add an extra attribute in the area tags
$(document).ready(function() {
$(".clickable").click(function() {
var toHide = $(this).attr('data-hide');
$(".map").toggle();
$("#"+toHide).toggle();
});
$(".hide").click(function() {
$(".map").toggle();
$(this).toggle();
});
});

A little refactoring to <area> tags like this
<area shape="circle" coords="220,97,15" alt="Auckland" title="Auckland" href="#" data-ref="aukl.hide">
would cleanup your html from unnecessary classes and would give you cleaner javascript code:
$(document).ready(function() {
$("map area").click(function() {
$(".map").toggle();
$("#" + this.data("ref")).toggle();
});
});

Add class to the all the div that will be clicked, say "lands", and use following code,
$(".lands").click(function() {
var $this = $(this);
$(".map").toggle();
$this.toggle();
});

Try this reduced jquery code
$(document).ready(function() {
$('.box').on('click',function(){
$(".map").toggle();
$(this).toggle();
});
});

Every time you need to add the same behavior to many different objects probably a good pattern is to use a function and dynamic creation.
For example in your specific case I'd expect to have
An image with the map (without dots)
A list of locations (possibly retrieved from a DB)
Code that for each of the locations creates the dot image correctly positioned on the map
Something like:
function addLocation(x, y, name, data) {
var dot = document.createElement("img");
dot.className = "dot";
dot.onload = function() {
// x,y coordinates are relative to map size to account
// for responsive designs
dot.left = (x*mapContainer.offsetWidth - dot.offsetWidth/2) + "px";
dot.top = (y*mapContainer.offsetHeight - dot.offsetHeight/2) + "px";
mapContainer.appendChild(dot);
};
dot.src = "dot.png";
dot.onclick = function() {
showMap(name, data);
};
}
This way adding/changing a location only requires updating the database (or the static data array if using a database is not worth at the moment).
Adding by hand location names and chart names (that are random small variations one of the other like gisborne->gisb but christchurch->chch) is a step toward making the page a maintenance nightmare.

jquery selection attributes

Let's say I have a sample table like this :
http://jsfiddle.net/65BkH/
Now what i want is, if there is this <button id="invite">Invite</button>. I want this button to select the "invite url" of the selected contact. If you see the jsfiddle, if you click the checkbox, it will crop all the others contacts. How could i do that?
I've tried to target the contact, but i can only get the top contact.
$('#linkedin_match tbody .match .m a').attr('href');
what i want is to target the currently selected.
FURTHER PROBLEM :
This button I'm talking about is not the table per say.
$('#btn_save').click(function(e) {
var hrefVar = $('#linkedin_match tbody .match .m').find('a').attr('href');
alert(hrefVar);
});
Now if i used that, it still searches for the first link, even though i've selected the others. So, any changes?.

You can use this:
$('#invite').on('click',function(){
var url = $this.closest('tr').find('a').prop('href');
});
To get all the checked href related with the checked inputs in a array use this:
$('#invite').on('click', function () {
var all_url = [];
$('input:checked').each(function () {
var url = $(this).closest('tr').find(' td.m a').prop('href');
all_url.push(url);
});
});
Demo here

$('.m').click(function(e){
var hrefVar = $(this).find('a').attr('href');
alert(hrefVar);
});
fiddle

Find all links which _only_ contain an image

to add a click-to-zoom feature to images, I used the following code to toggle a class:
$(document).ready(function() {
var imageLinks = $('a[href$=".png"], a[href$=".jpg"], a[href$=".gif"], a[href$=".bmp"]');
if (imageLinks.children('img').length) {
imageLinks.children('img').each(function() {
$(this).attr('title', '(click to enlarge image)');
});
imageLinks.click(function(e) {
e.preventDefault();
$(this).children('img').toggleClass('expanded');
});
}
});
Now my problem is, I could have text links, like <a href='file.png'>text</a> as well on that page, and they are broken by this code.
Is there a way to select only image links (<a href='file.png'><img src='file.png'></img></a>) instead of all links to image files?
Thanks in advance!

You could use has statement:
var imageLinks = $('a').filter(':has(img)');
Or the same:
var imageLinks = $('a:has(img)');

I believe this will work:
var $images = $('a > img');
$images.attr('title', '(click to enlarge image)');
$images.parent().click(function(e) {
e.preventDefault();
$(this).children('img').toggleClass('expanded');
});
Example jsFiddle: http://jsfiddle.net/UHkh7/
You can change the selector to 'a img' if the img is not always a direct descendent of the a tag, however you will then need to change $images.parent() to $images.parents('a')[0]

JQuery image wrap and toggle

I have this code blow, it is use to switch an image to a second image on mouse click and also wrap a link around it at the same time. Upon clicking the image the second time it will take you to the link and also toggle back to the previous image.
What I'm trying to work out is how to also when it toggles back to the previous image is to also get rid of the wrapped link.
Also would it be possible to use the toggle on mouse click on another object. for example clicking a div on the page and it will toggle the image back to the original.
jQuery(function() {
var largeLink = "<a href='index.html' target='_blank' ></a>";
var largeLink2 = "<a href='#'></a>";
$(".buyimage").live('click', function() {
if ($(this).attr("class") == "buyimage") {
this.src = this.src.replace("_5.99", "_buynow");
} else {
this.src = this.src.replace("_buynow", "_5.99");
}
$(".buyimage").wrap(largeLink);
$(this).toggleClass("on")
});
});

You can use the jquery unwrap:
http://api.jquery.com/unwrap/
// for example
<script>
$("button").toggle(function(){
$("p").wrap("<div></div>");
}, function(){
$("p").unwrap();
});
</script>