Why append elements not a draggable? - javascript

I make all elements with an "image" class draggable.
Then I append more "image" elements to the page.
Why aren't the appended elements draggable?
$(function() {
$('.image').draggable(); //Draggable image (Jquery UI)
$('.button').click(function() { //append more image
$('body').append('<img class="image" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<img class="image" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">
<button class="button">Append image</button>
View on JSFiddle

You need to call .draggable(); on the newly created image on every button click.
$(function(){
$('.image').draggable(); //Draggable image (Jquery UI)
$('.button').click(function(){ //append more image
var img = $('<img class="image" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">');
img.draggable();
$('body').append(img);
});
}) //End of script
fiddle: https://jsfiddle.net/0jxghvaa/2/

You're instantiating the draggable() plugin on the .image elements at load. Any elements added to the DOM after that will need the plugin instantiating on them once they are created. Try this:
$('.image').draggable();
$('.button').click(function() {
var $img = $('<img class="image" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">').appendTo('body');
$img.draggable();
});

Newly added elements will not be automatically drag-able (only those elements existing initially).
Inside your function, try re-declaring that the element will be drag-able, AFTER it is created:
$('.button').click(function(){
$('body').append('<img class="image" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">');
$('.image').draggable();
});

Related

jquery on event for a dynamically generated child of a dynamically generated child

I have a div that gets added to dynamically and I would like to have a mouseenter event for images that have been dynamically added in another tag. The div that is getting added to looks like this before hand:
<div class="chat_box">
</div>
and looks like this after content has been added:
<div class="chat_box">
<p class="chat">text here <img class="emote" src="emote.png"> more text</p>
</div>
I would like to have a mouseenter event for the image with the class of emote, but I cannot get it to work.
I have tried the following:
$('.chat_box').on('mouseenter', '.chat', function(){
alert();
});
and it works, but if I try to use the child selector
$('.chat_box').on('mouseenter', '.chat > .emote', function(){
alert();
});
and
$('.chat_box').on('mouseenter', '.chat > img', function(){
alert();
});
it doesn't work.
This was previously provided by .live(), but that function has been merged into .on() ... it creates an event watcher.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="chat_box"></div>
<button>Add</button>
<script>
$('button').click(function(){
$('<div class="chat"><img width=10 height=10 class="emote"></div>').appendTo('.chat_box');
});
$('.chat_box').on('mouseenter', 'img.emote', function(){ alert('test'); });
</script>
Just target the parent object and have it watch for the expected child.

How to make change the height of all images inside a div?

How to make change the height of all images inside a div?
I have
$('.images img').each(function() {
$('img').attr('height', element.parent().attr('imgheight'));
});
<div imgheight="300px" class="images">
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " />
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " />
</div>
It does not seem to do anything - see https://jsfiddle.net/yu51a5/527gn64n/4/. How to make it work?
I cannot use "height=100%" because normally these images come with captions, so the image should be shorter that the div.
You haven't defined element. Access the node from inside the each function.
$('.images img').each(function(i, node) {
$('img').attr('height', $(node).parent().attr('imgheight'));
});
Working fiddle.
I suggest you to use HTML5 data- attribute with your custom attribute imgheight
<div data-imgheight="300px" class="images">
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " />
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " />
</div>
And JS can be as easy as this:
$('.images > img').css('height', $('.images').data('imgheight'));
Check fiddle
But, if you have multiple .images div, you would do like this
$('.images img').each(function() {
$(this).css('height', $(this).closest('.images').data('imgheight'));
});
or better
$('.images').each(function() {
$(this).find('img').css('height', $(this).data('imgheight'));
});
Change element to $(this) and you're good.
https://jsfiddle.net/wh85afq7/
Change the 2 references within the each function to the images to $(this)...
$('.images img').each(function() {
$(this).css('height', $(this).parent().attr('imgheight'));
});
You can use data-height attribute and get value by element.data("height")
here is the working example below
$( document ).ready(function() {
$('.images img').each(function() {
$(this).attr('height',$('.images').data("height"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-height="300px" class="images">
<img src="http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg" />
<img src="http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg" />
</div>

Add add/remove class click picture in queue jQuery

I have those pictures
<img src=img1.jpg class=pic />
<img src=img2.jpg class=pic />
<img src=img3.jpg class=pic />
<img src=img4.jpg class=pic />
<img src=img5.jpg class=pic />
<img src=img6.jpg class=pic />
.ShowBorderRed{border:3px solid red;}
I want to add the class .ShowBorderRed once I click one of them and remove this class once I click another picture and add the class to this new image. JQuery
Use the following:
$(document).ready(function(){
var $img = $('.pic');
$img.click(function(event){
$img.removeClass('ShowBorderRed');
$(this).addClass('ShowBorderRed');
});
});
See the comments inline in the code:
// bind click event on all the images having pic class
$('img.pic').on('click', function() {
$(this).addClass('ShowBorderRed') // Add class to the clicked image
.siblings().removeClass('ShowBorderRed'); // Remove class from other sibling images
});
DEMO
OR
If the images are not siblings:
var $images = $('img.pic');
$images.on('click', function() {
$images.removeClass('ShowBorderRed'); // Remove class from all other images
$(this).addClass('ShowBorderRed'); // Add class to the clicked image
});
DEMO
Use the following code:
$(document).ready(function(){
var $img = $('.pic');
$img.click(function(event){
$img.removeClass('ShowBorderRed');
$(this).addClass('ShowBorderRed');
});
});
refer the below mentioned link.
http://jsfiddle.net/2QyY3/199/

How can I add a link to an image that changes on hover via jQuery?

I have an image below a nav and the image changes depending on which nav item is hovered over. Here is the code:
$(document).ready(function() {
$('.nav-item').mouseenter(function() {
var img = $(this).attr('data-headerimg');
$('img#header-img').attr('src', img);
}).mouseleave(function() {
var img = $(this).attr('data-headerimg');
$('img#header-img').attr('src', img);
});
});
I'd like the image to be a link to it's corresponding page, but I'm not sure how to do that via jQuery. Any help would be greatly appreciated.
First, enclose the image in an anchor in your HTML: <a><img ....></a>. Put the link next to data-headerimg, in data-headerlink attribute.
Second, update the anchor's href to the same value you're setting the image's src:
var img = $(this).attr('data-headerimg');
var href = $(this).attr('data-headerlink');
$('img#header-img').attr('src', img).parent().attr('href', href);
Sorround it with a href tag in html like
<a id="headerimglink" href=""><img src="" /></a>
set the href attribute along with the src attribute, or you can hardcode it as well if that is not changing.
Why to send an image request and wait a server response with image data? (Some users find it very annoying)
In order to preload your images You can simply create the needed tags and just swap display (with fade?) on item hover.
Let's say:
<ul id="list">
<li>Football</li>
<li>Barbara</li>
</ul>
<div id="images">
<img src="foo.jpg" alt="Foo">
<img src="bar.jpg" alt="Bar">
</div>
#images a {
display:none;
position:absolute;
/* etc */
}
var $imgLink = $('#images a');
$('#list li').hover(function( e ) {
$imgLink.stop().fadeTo(300, 0);
if(e.type=="mouseenter") {
$imgLink.eq( $(this).index() ).fadeTo(300, 1);
}
});

Wrapping multiple images inside a <div> in jQuery

I need to find all the images inside a div, and wrap a div around them. Here's the code I come up with, but that's not working! Why?
jQuery(function() {
my_selection = [];
$('.post').each(function(i) {
if ($(this).find('img').length > 1) {
my_selection.push(['.post:eq(' + i + ')']);
}
});
$(my_selection.join(',')).wrapAll('<div class="wrapper"></div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
How about something like:
$('.post img').wrapAll('<div class="wrapper" />');
.post img will get a collection of IMG tags within your .post container, and wrapAll applies the DIV around each of them.
The manual page for the wrapAll function actually has quite a close example to what you want.
Hard to say because I can't see your markup but something like:
$('.post img').wrapAll('<div class="wrapper" />');
this works!
$('.post').each(function(){
var container = $(this);
$('img', container).wrapAll('<div class="slideshow" />');
});
Try this
$('.post img').each(function() {
$(this).wrap($('<div/>', { 'class': 'wrapper'}));
});
Here is a link to the similar question I asked :
Create new div arround anchor link when clicked
$('img').each(function (){
$(this).wrap('<div class="new" />');
});
Wrap a div around each img inside a .post:
$('.post img').wrap('<div class="wrapper" />');
Wrap a div around each post that has a img:
$('.post:has(img)').wrap('<div class="wrapper" />');
Move all divs that have an img inside a wrapper div:
$('<div class="wrapper" />').append($('.post:has(img)'));

Categories