We Keep Coding

Pass image id to JQuery by clicking on the image

I'm animating images using JQuery. I'm using a button to activate the animation.
Here is my code:
$(document).ready(function(){
$("#b1").click(function(){ // b1 is the id of button
$(#img).animate({left: '+=20px'}); // img is the id of image
});
});
I have five images so when I click on another image, I need to put its id into the $(#img) instead of #img. So the second image will be animated.
How do I do this?

It sounds like you need to:
$(document).ready(function(){
// declare a variable to store the selected image
var selected = null;
// listen to clicks on all your images
// note: might want to filter this down to your target images
$("img").click(function(){
// save the selected image
selected = this
});
$("#b1").click(function(){
// animate the selected image
$(selected).animate({left: '+=20px'});
});
});
I hope that helps!

You can give the image a 'selected' class on click, then animate the selected:
$(document).ready(function() {
$(".image").click(function() {
// unselect others
$(".image").removeClass("selected");
// reselect this one
$(this).addClass("selected");
});
$("#b1").click(function() {
// animate selected
$(".image.selected").animate({left:'+=20px'});
});
});
html
<img class='image' src="image1"/>
<img class='image' src="image1"/>
<button id='b1'>click</button>
this will also allow you to style the selected image, eg:
.selected { border: 1px solid pink }

Add class (like img_to_animate) to images like
<img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png' style="width:50px;height:50px;" class="img_to_animate" />
<img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png' style="width:50px;height:50px;" class="img_to_animate" />
JavaScript
$(".img_to_animate").click(function(){
$(this).animate({left: '+=20px'});
})

This version will move the animated image back to its original position when the button is pushed, if a different image is selected:
$('img').on('click', function() {
$('img').removeClass("active");
$(this).addClass("active");
});
$('input[type="submit"]').on('click', function() {
if ( $(this).attr('data-current-image') !== $('img.active').attr('data-image-id') ) {
$('img[data-image-id=' + $(this).attr('data-current-image') + ']').animate({left: '10'});
}
$(this).attr('data-current-image',$('img.active').attr('data-image-id'));
$('img[data-image-id=' + $(this).attr('data-current-image') + ']').animate({left: '+20'});
});
img { display: block; position: relative; margin-top: 10px; left: 10px; height: 50px; width: 75px; }
img.active { border-right: 3px solid #f90; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type=submit data-current-image=0 value=" Animate! ">
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=1 class="active" />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=2 />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=3 />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=4 />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=5 />

Change image after click on image in javascript(Not using dropdown)

Right now i am changing the image by dropdown selection. But i want to change image by click on choice of image Like.
If the user click on green t-shirt image then set green image in <div>, If user click on yellow t-shirt then set yellow t-shirt in <div>.
But right now i am using dropdown for this procedure.
var bgArray = [
'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg'
]
$('#imageroom').on('change', function() {
value = $(this).val() - 1;
$('#backgroundIMage').css({
'background-image': 'url(' + bgArray[value] + ')'
});
});
#backgroundIMage {
width: 400px;
height: 300px;
outline: 1px dotted gray;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label>Change image</label>
<select size="1" id="imageroom">
<option value="1">Image 1</option>
<option value="2">IMage 2</option>
</select>
<!-- for demo only -->
<hr>
<div id="backgroundIMage"></div>

You can handle the click event on an image. In the example below, I loop through the bgArray and dynamically display all the images in that array.
When one of the images is clicked, I show that image in the backgroundIMage element. Notice that I am using event delegation to make sure the image click works for any images that are dynamically added to the picker.
var bgArray = [
'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg'
];
$("#picker").on("click", "img", function() {
//use event delegation to handle click event of any img tags in #picker
$('#backgroundIMage').css({
'background-image': 'url(' + this.src + ')'
});
//toggle selected
$("#picker img").removeClass("selected");
$(this).addClass("selected");
});
$(function() {
//initialize the picker on document load
bgArray.forEach(function(src) {
var img = new Image(50, 50);
img.src = src;
$("#picker").append(img);
});
//default the first one to be selected
$("#picker img").first().trigger("click");
});
#backgroundIMage {
width: 400px;
height: 300px;
outline: 1px dotted gray;
margin: 0 auto;
}
#picker img {
padding: 5px;
}
.selected {
background-color: dodgerblue;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Change image
<div id="picker"></div>
<hr>
<div id="backgroundIMage"></div>

Although it is king of hard to know exactly what you are trying to do, you should try to work with the click event of the image.
For a specific image :
$('#myImageId').click(function(){
$(this).css//etc..
});
For all images :
$('img').click(function(){
$(this).css//etc..
});

Pop image out of div

How would I pop an image out of its div and set its width to 100% (so that it takes up most of the screen)? Note: I don't want to use any plugins.
I have this so far:
<div class="container">
<img src="thumbnail_image.png" />
</div>
JQuery:
$(document).on("click", ".container img", function(event) {
/* Get the image name. */
var src = $(this).attr('src').split('/');
var file = src[src.length - 1];
/* Load the big image into the container to replace the thumbnail. */
$(this).attr('src', 'big_images/' + file);
});
How would I do this?

You can use the css position fixed. So defining a class like this:
.fullscreen_image {
position: fixed;
top: 0;
left: 0
width: 100%;
}
you can then add and remove this class for your image.
$(this).addClass( 'fullscreen_image' );

You need to do something like this:
<div id="container">
<img src="http://i.stack.imgur.com/QWQds.jpg?s=128&g=1" class="thumbnail"/>
</div>
and jquery code:
$('#container img').live('click',function(){
$(this).addClass('zoom');
});
Check the DEMO HERE

jquery - Undefined src when using attr() of image

Just learning jQuery. What I want is to grab the src of the image and display it in a fixed division, kind of like a pop up, with the title of the image. But I'm stuck at getting the src of the image.
When I tried using the .attr(), its giving me undefined.
HTML:
<div id="album">
<div class="pic">
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<span class="clear_left"></span>
</div>
css:
.screen {
border: 1px solid green;
margin: 10px auto;
float: left;
cursor:pointer
}
.image {
width: 300px;
}
.title {
font-size: 30px;
}
.description {
font-size: 25px;
}
.pic {
width: 600px;
position:fixed;
}
js:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display();
});
});
function display() {
var source = $("img",this).attr("src");
alert("The souce of the image is " + source);
}

The problem is, the display() method does not have the context of the element being clicked. Hence it is showing undefined
So, try this:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display($(this));
});
});
function display($this) {
var source = $("img", $this).attr("src");
alert("The souce of the image is " + source);
}
Working demo

Dont wrap your function call with another anonymous function:
Demo: http://jsfiddle.net/9KgSQ/
$(".screen").click(display);
This will now pass along this to your function.

this in the display function is referring to your anonymous function, not the element. You don't need to wrap it. $('.screen').click(display) will make sure that this references the .screen element.
I would also change display to do this instead:
function display() {
var source = $(this).find('img').attr('src');
alert("The source of the image is " + source);
}
This wraps jQuery around the .screen element that was clicked on and finds the img element inside of it. I think it's a little more clear, but this is just a preference thing.

It's because the value of this in display is not the same as the value of this in the click function for .screen. You can do a test for that by calling console.log(this); within the display function to see what the value of this is.
If you want to pass the value of this on to display you can use the call function like so:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display.call(this);
});
});
function display() {
var source = $("img", this).attr("src");
alert("The souce of the image is " + source);
}
Or you could completely get rid of the anonymous function and pass in display directly:
$(".screen").click(display);

It's because your src IS undefined.
function display() {
var source = $("img",this).attr("src", "images/okay.jpg");
alert("The souce of the image is " + source);
}

Is there a way to expand a div based on the size of the content (which can vary)?

I have created an employee spotlight webpart on our SharePoint site that randomly selects an employee with each page load. In the spotlight section is bio on the employee that is pulled from their 'about me' section of the User Information List. I am attempting to make it so the bio is expandable so that a few lines of the bio are intially visible and then the user can click a 'more' link to expand the text out to read the rest. What I have works but I have it jumping down to a fixed height where I would prefer it only expand down to amount of text with in the <div>
The div section:
<div id=\"expandable\" >" + Employees[randId].aboutMe +
"</div>more...
The style:
#expandable { height:55px; overflow:hidden; }
A simple script to expand:
function Tog() {
var expandable = document.getElementById('expandable');
if (expandable.style.height == '400px') {
expandable.style.height = '55px';
}
else {
expandable.style.height = '400px';
}
}
Is there a better way to expand out the content and while still having some of the text show when collapsed?

Instead of setting the height to a fixed value, just set it to auto, and the div will expand to fit the content:
function Tog() {
var expandable = document.getElementById('expandable');
if (expandable.style.height) {
expandable.style.height = '';
} else {
expandable.style.height = 'auto';
}
}
(Demo at jsfiddle.net).
UPDATE: Also consider replacing your inline JS (href="javascript:Tog()") with a proper event listener, as suggested by Bergi.

Do not set a height so the whole content can show up, instead remove a class with a max-height/ overflow set.
HTML
<div id="content" class="collapsed">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
CSS
div#content{ border: 1px solid black; cursor: pointer;}
div.collapsed{
max-height: 40px;
overflow:hidden;
}
JavaScript
var cont = document.getElementById("content");
cont.onclick = function() {
var newClass = (cont.className==="collapsed") ? "" : "collapsed";
cont.className = newClass;
};
The JavaScript is a basic example, better to use a add/remove class library so you can have more than one class.
Example
JSFiddle

Here's a working example of what I said in my comment. By default, the div takes up whatever space is required by its content. You restrict it to your dimensions by adding the short class to the element. The toggle function simply adds and removes this class.
HTML
<div id="expandable" class="short">Content here</div>
more...
CSS
.short {
height: 200px;
overflow: hidden;
}
JS
function toggle() {
var elem = document.getElementById("expandable");
if(hasClass(elem, "short"))
removeClass(elem, "short");
else
elem.className = elem.className + " short";
}
//These functions from http://stackoverflow.com/a/2155755/219118
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}