Develop Reference

Get link title on click

I have a link with image. And I want to get Link Title on a click.
<div class="summary">
<form class="variations_form " method="post" enctype="multipart/form-data"">
<div class="ql-visual-attributes">
<div class="va-pickers">
<a class="va-picker-image" data-attribute="pa_material-and-color" title="Link Title">
<img class="va-image" src="img.jpg">
</a>
</div>
</div>
</form>
</div>
Also I want to use link "data-attribute". So I try
$(document).ready(function(){
$(".summary .variations_form .ql-visual-attributes .va-pickers a[data-attribute='pa_Attribute']").click(function(){
var link_title=$(this).attr("title");
});
});
But it doesn't work
Thanks

your jquery selector looks way too complicated, but it's nog a big deal.
Your link has data-attribute with value "pa_material-and-color", but in selector you made a mistake "a[data-attribute='pa_Attribute']"
so just change selector to $(".summary .variations_form .ql-visual-attributes .va-pickers a[data-attribute='pa_material-and-color']")

I think your are selecting wrong data-attribute. You can do it like following using link class.
$(".va-picker-image").click(function(){
var link_title=$(this).attr("title");
});

How to change image src using jQuery

<div class="branding">
<h1 class="logo">
<a href="http://www.whatever.com/" class="logo">
<img src="http://www.whatever.com/test.png"></a>
</h1>
</div>
I am trying to access the image src with the following to no avail:
$("a.logo img").html("<img src='http://www.whatever.com/newimage.png'>");
The reason I am doing this is because the image is on a third party that I can't access the codebase to make the change so I am trying to rip out their with my code.

src is attribute. You should use .attr() to get/set attribute values using jquery:
$("a.logo img").attr("src","http://www.whatever.com/newimage.png");

.html() changes the html CONTENT of a node, e.g.
orig: <p>foo</p>
$('p').html('bar');
neW: <p>bar</p>
An <img> has NO content. Try
$('p.logo img').attr('src', 'new url here');

Did you try
img.attr('src','http://mynewsource.com');

I figured out the answer:
$('a.logo img').attr("src", "http://www.whatever.com/newimage.png" );
Thanks!

Detect which class was clicked jQuery

I'm looking to find out which element was clicked when there are multiple elements on the same page with the same class.
The class which is clicked I then want to show but keep all the other classes hidden.
<div class="btn">
<div class="btn-content">
<p>1,2,3,4,5</p>
</div>
</div>
<div class="btn">
<div class="btn-content">
<p>1,2,3,4,5</p>
</div>
</div>
jQuery -
$(".btn").click(function(){
$(".btn-content").show();
});

use this to find the element in current context:
$(".btn").click(function(){
$(this).find(".btn-content").show();// or $(".btn-content",this).show()
});
Working Demo

Try this:
$(".btn").click(function(){
$(this).find(".btn-content").show();
});
DEMO

You can find the element with class .btn-content to show only has clicked.
Use find jQuery function for that
$(".btn").click(function(){
$(this).find(".btn-content").show();
});

Making ahref from a div

I have a div as follows:
<div class="slide_items">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
What i want to do is, instead of having URL in each item in slide_items div. I want user to click on <div class="slide_items">. I want the slide_items to be clickable as the div itself, rather than putting a href in every inner div.
How can i do this?

The proper way would be to use a single link (but change the inner elements to span for validness)
<a href="/url" class="slide_items">
<span class="slide_item"><img src="image"/></span>
<span class="slide_title">title</span>
</a>
And make sure that they are treated as block elements from the css
a.slide_items, a.slide_items span{
display:block;
}
If you have to go the div way, then use
<div class="slide_items" data-href="/url">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
and add a script (since you use jquery)
$(function(){
$('.slide_items').click(function(){
var href = $(this).data('href');
window.location = href;
});
});

You can add onclick="window.open('google.com')" event to simulate a link to your div.
In the case where you want the entire div to appear to a be a link, you will want to change your cursor. Add style="cursor: hand; cursor: pointer;" to your div as well.

You can add an onclick property to the div:
<div class="slide_items" onclick="location.href='/url';" >
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>

you can use some simple javascript to get this done
use the onclick() event
so your HTML code looks something like
<div class="slide_items">
<div class="slide_item" onclick="function1()"><img src="image"/></div>
<div class="slide_title" onclick="function2()">title</div>
</div>
your javascript code will look like
function function1(){
// insert your code here
}
function function2()
{
// insert your code here
}
the code can be done in many ways depending on what you want , if you just want to redirect to another div , use the display attributes alternating between none and block , more reference here documentation .
if you want to redirect to another site you can use
window.open("your url")

<div class="slide_items">
<div class="slide_item"><img src="image" alt="my image" /></div>
<divclass="slide_title">title</div>
</div>
js:
$(function() {
$('.slide_items').click(function() {
window.location = 'http://www.google.com';
});
});
css:
.slide_items:hover {
cursor: pointer;
}
http://jsfiddle.net/68Smw/6/
The redirect isn't working in jsfiddle, but it should work for you.

if you want it to likley say: Click here to enter site:
<div>
Click here to enter my site!
</div>

Replace URL parameter values in links using JavaScript/jQuery?

My CMS's lightbox-style photo gallery outputs code like below. I've provided code for two thumbnails.
The parameter values for "m" and "s" will always be "150" and "true." I'd like to change that to m=250 and s=false.
I'm new to JavaScript and jQuery. If you have a suggestion, please help me out with where to put the code on the page. Thank you.
<div class="thumbTight MainContent">
<div class="thumbContents">
<a href="/PhotoGallery/banana.jpg" rel="lightbox[2065379]" title="Banana">
<img src="/ResizeImage.aspx?img=/PhotoGallery/banana.jpg&m=150&s=true" alt="Banana" />
</a>
<div class="description" style="display: none;"></div>
</div>
</div>
<div class="thumbTight">
<div class="thumbContents">
<a href="/PhotoGallery/cantaloupe.jpg" rel="lightbox[2065379]" title="Cantaloupe">
<img src="/ResizeImage.aspx?img=/PhotoGallery/cantaloupe.jpg&m=150&s=true" alt="Cantaloupe" />
</a>
<div class="description" style="display: none;"></div>
</div>
</div>

In your document ready handler, use each to iterate over the thumbnails (images inside divs with the thumbContents class) and assign the src attribute to the original src attribute with the required substitutions.
$(function() {
$('.thumbContents img').each( function() {
var $img = $(this);
$img.attr('src', $img.attr('src').replace(/m=150/,'m=250').replace(/s=true/,'s=false') );
});
});

You can run this jQuery after the page has loaded. The images will start loading with the different URL, your code will run and change the image URLs and then the new one will load and display. There is nothing you can do client-side to prevent the initial display unless you actually use CSS such that they images are initially hidden and only made visible AFTER you've set the desired URL.
$(".thumbTight img").each(function() {
this.src = this.src.replace(/m=150/, "m=250").replace(/s=true/, "s=false");
});
You can see a demo here: http://jsfiddle.net/jfriend00/UdnFE/.