We Keep Coding

Why append elements not a draggable?

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

How to use JQuery .find() properly when using multiple divs

I have an HTML page where users can create a newsitem. Each news item is displayed in a new div, with multiple divs inside to divide content into multiple columns, to hide some content etc. The following code is a stripped down version of 1 newsitem:
<div class="news-item clearfix" id="c-b504b780-06a8-49bc-ba04-84d1fbba1a94">
<h2>This is a title</h2>
<div class="news-image div-right">
<a class="img-gallery" href="Images/Dynamic/700x700/NewsItem/44951/example.png" rel="lightbox-This is a title"><img class="img-responsive clear" src="Images/Dynamic/200x200c/NewsItem/44951/example.png" /></a><br />
</div>
<div class="preview one-image">
<p>Text here</p>
</div>
<div class="full div-hide">
<p>Text here</p> <img src="Images/Dynamic/full/NewsItem/44951/example.png" class="img-responsive" />
</div>
As you can see, each newsitem has a generated code attached to it which is used to identify unique newsitems, the code is also used in my javascript:
<script type="text/javascript">
(function () {
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
})();
</script>
This script is supposed to put an anchor tag around the image found in my full div-hide class, however this is not working properly. I assume my jquery selector is not selecting the right div, but I do not know what it should be. Do you have an idea how I can wrap my anchor tags around images inside the class="full" div?

You have two issue in document ready function:
1) You have not added jquery selector($) in front of ready function.
2) You dont need to call the document ready function.
$(function () {
/*^^missing selector here*/
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
/*^^ () not required here*/
and to make it work for all the divs:
$('.news-item .full img').each(function(){
$(this).wrap("<a href='" + $(this).attr('src') + "'></a>");
});
Working Demo

Try this:
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full img').each(function() {
$(this).wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});

$('div.full').find('img').each(function() {
// your code here ..
});

On mouseover fade embedded img or target specific classes

Is it possible with js / jQuery to fade just the embedded image instead of the div in order to reveal the divs background image? I have multiple instances of the classes below and only want to affect change to the one's that are selected.
e.g:
.image {
width: 200px;
background-image: url(elements/pattern.png);
}
<div class="box">
<div class="image"><img src="pics/001.jpg"/></div>
<div class="project">Title</div>
</div>
$('.image').mouseover(function() { $(this img).stop().animate({opacity:.7}, 200); });
$('.image').mouseout(function() { $(this img).stop().animate({opacity:1}, 600); });
Also, is it possible to address specific classes within a div ?
e.g:
$('.image').mouseover(function() { $(**this .project**).css({color:'#FFF'}); });
$('.image').mouseout(function() { $(**this .project**).css({color:'#999'}); });
Thanks
....
SOLVED
Managed to get it to work by using find() as suggested and wrapping the image in an extra class. Now the image fades and .image's background pixel pattern blends through:
<div class="box">
<div class="image"><div class="p"><img src="pics/001.jpg"/></div></div>
<div class="project">Title</div>
</div>
$('.box').mouseover(function() {
$(this).find('.p').stop().animate({opacity:.3}, 200);
$(this).find('.project').css({color:'#FFF'});
});
$('.box').mouseout(function() {
$(this).find('.p').stop().animate({opacity:1}, 600);
$(this).find('.project').css({color:'#FFF'});
});
cheers!

Use jQuery's built in fade
$('.image').hover(function() { // on mouseover
$(this).stop().fadeTo(200, 0.7);
}, function(){ // on mouseout
$(this).stop().fadeTo(600, 1);
});
jQuery fadeTo()
Also to address specific items in a div you can use .find()
$('.box').mouseover(function(){
$(this).find('.image').animate({...}); // will animate .image when you hover .box
});

You can use next():
$('.image').mouseover(function() { $(this).next('.project').css({color:'#FFF'}); });

Try to look into the context attribute of the jQuery selector.
Basically:
$('.image').mouseover(function() { $('img',this).stop().animate({opacity:.7}, 200); });
This would select the img element inside the element where the mouseover is triggered.

jQuery - If DIV class equals X, hide all other DIVs with a different class

I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.

So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});

try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});

Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});

to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.

$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});

You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.

Javascript creating <div> on the fly

I have a a link that looks similar to this
Blog
As you can the link has an ID of 'blog' what I want to do is to create an div on the fly with the ID from the link that was clicked so if the 'blog' is clicked, then the markup would be
<div id="blog">
<!--some content here-->
</div>
Like wise if for instance the news link is clicked then I would like,
<div id="news">
<!--some content here-->
</div>
to be created in the markup if this possible? and how Im pretty new to jQuery.

Try this:
$("a").click(function(){
$("#wrapper").append("<div id=" + this.id + "></div>");
});
Not tested, should work ;)
where: #wrapper is parent element, work on all a as you see.

You will need to give the div a different ID. Perhaps you could give it a class instead:
$("#blog").click(function() {
$(this).after("<div class='blog'>...</div>");
return false;
});
That's just one of many ways to create a div. You probably also want to avoid duplicates however in which case, use something like this:
$("#blog").click(function() {
var content = $("#blog_content");
if (content.length == 0) {
content = $("<div></div>").attr("id", "blog_content");
$(this).after(content);
}
content.html("...");
return false;
});
As for how to handle multiple such links I would do something like this:
Blog
News
Weather
<div id="content"></div>
with:
$("a.content").click(function() {
$("#content").load('/content/' + this.id, function() {
$(this).fadeIn();
});
return false;
});
The point is this one event handler handles all the links. It's done cleanly with classes for the selector and IDs to identify them and it avoids too much DOOM manipulation. If you want each of these things in a separate <div> I would statically create each of them rather than creating them dynamically. Hide them if you don't need to see them.

Try This :
<a id="blog">Blog</a>
<a id="news">news</a>
<a id="test1">test1</a>
<a id="test2">test2</a>
$('a').click(function()
{
$('<div/>',{
id : this.id,
text : "you have clicked on : " + this.id
}).appendTo("#" + this.id);
});

First of all you should not make 2 elements with same ID. At your example a and div will both have id="blog". Not XHTML compliant, plus might mess up you JS code if u refernce them.
Here comes non-jquery solution (add this within script tags):
function addDiv (linkElement) {
var div = document.createElement('div');
div.id = linkElement.id;
div.innerHTML = '<!--some content here-->';
document.body.appendChild(div); // adds element to body
}
Then add to HTML element an "event handler":
Blog

This question describes how to create a div. However, you shouldn't have two elements with same IDs. Is there any reason why you can't give it an id like content_blog, or content_news?

Unfortunately if you click on a link the page you go to has no idea what the idea of the link you clicked was. The only information it knows is what's contained in the URL. A better way to do this would be to use the querystring:
Blog
Then using the jQuery querystring plugin you could create the div like:
$("wrapper").add("div").attr("id", $.query.get("id"));

You shouldn't have elements in your page with the same ID. Use a prefix if you like, or perhaps a class.
However, the answer is as follows. I am imagining that your clickable links are within a div with the ID "menu", and your on-the-fly divs are to be created within a div with the ID "content".
$('div#menu a').click(function(){
$('div#content').append('<div id="content_'+this.id+'"><!-- some content here --></div>');
});
Any problems, ask in the comments!

Also the following statement is available to create a div dynamically.
$("<div>Hello</div>").appendTo('.appendTo');
Working fiddle: https://jsfiddle.net/andreitodorut/xbym0bsu/

you can try this code
$('body').on('click', '#btn', function() {
$($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})
#old > div{
width: 100px;
background: gray;
color: white;
height: 20px;
font: 12px;
padding-left: 4px;
line-height: 20px;
margin: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
<!-- Button trigger modal -->
<button type="button" id="btn">Create Div</button>
<div id="old">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>