We Keep Coding

How to turn a png into a button that when clicked makes a draggable png

I'm making a house designing game of sorts and i'm wondering how i could make it so that there is a png of a flower pot in a set position.
When clicked a draggable png of the flower pot appears and the player can do it indefinitely.
this is my code so far:
HTML
<div id="buttons">
<span class="button" id="up">up</span>
<span class="button" id="down">down</span>
<div><span>Z-index: </span><span id="index"></span></div>
</div>
<div id="images">
<img src="http://i67.tinypic.com/wum2y8.jpg" id="background">
<img class="draggable" src="http://i64.tinypic.com/jac9sj.jpg">
<img class="draggable" src="http://i64.tinypic.com/se6gia.jpg">
<img class="draggable" src="http://i65.tinypic.com/205p9v6.jpg">
<!--more img.draggable elements -->
</div>
JS
$(function() {
$(".draggable").draggable();
});
var selectedLayer;
$(".draggable").click(function() {
selectedLayer = this;
$("#index").html(parseInt($(selectedLayer).css("z-index")))
})
$("#up").click(function() {
x = parseInt($(selectedLayer).css("z-index")) + 1;
$(selectedLayer).css('z-index', x);
$("#index").html(x)
}) //ends function
$("#down").click(function() {
x = parseInt($(selectedLayer).css("z-index")) - 1;
$(selectedLayer).css('z-index', x);
$("#index").html(x)
})
full example:
https://jsfiddle.net/okcjt5vf/312/
Thank you for any help.

You may use a helper on the draggable function to clone the object, but you will also need to do some modifications:
HTML
move the dragables to a new div with id menu outside of #images
add the class miniature to the draggables (so they can be shown all at once)
<div id="buttons">
<span class="button" id="up">up</span>
<span class="button" id="down">down</span>
<div><span>Z-index: </span><span id="index"></span></div>
</div>
<div id="menu">
<img class="draggable miniature" src="http://i64.tinypic.com/jac9sj.jpg">
<img class="draggable miniature" src="http://i64.tinypic.com/se6gia.jpg">
<img class="draggable miniature" src="http://i65.tinypic.com/205p9v6.jpg">
<!--more img.draggable.miniature elements -->
</div>
<div id="images">
<img src="http://i67.tinypic.com/wum2y8.jpg" id="background">
</div>
CSS
add the class miniature
remove position:relative from #images
this is no needed because draggable will take care of the positioning, if left may cause a snapping-like bug when releasing the item after its added
delete the .draggable class
again, this is no needed because draggable will take care of the positioning
#images {
overflow: auto;
margin-top: 10px;
height: 778px;
}
.miniature {
height: 20px;
}
js
add a helper to the draggable widget, this whelper will clone the object and remove the miniature class to make it full size again
$(".draggable").draggable({
helper: function(event) {
return $(this).clone().removeClass("miniature")
}
});
add the droppable widget to the #images div, this will make the div accept the draggable items
add the drop listener to the droppable widget, on this listener you should clone the item and add it to the container. also you should add a mousedown listener to the new element to set the selected layer
$("#images").droppable({
accept: ".draggable",
drop: function(event, ui) {
var new_item = $(ui.helper).clone();
new_item.removeClass('draggable');
new_item.mousedown(setLayer);
new_item.draggable();
$(this).append(new_item);
}
});
setLayer = function() {
selectedLayer = this;
$("#index").html(parseInt($(selectedLayer).css("z-index")))
}
With this changes this would be the result:
full code on jsFiddle: https://jsfiddle.net/npc1sfmu/5/

How to show the element that append with jquery

I am making a chat app like google hangout or snapchat with html, css and javascript. When I want to append a chat, I use
$(id_name).after(message)
I can append the message but what I want to know is that the message did not show on the screen without scrolling manually. How can I show the message that I append automatically? Please help me.
Following is the my code.
<div class="bubble" style="clear:both" id="talk_chat_from">
<div id="talk_chat_detail"></div>
</div>
I append the message into the "talk_chat_detail".

Change your $target.animate to $target.animate({ scrollTop: $target.prop("scrollHeight") }, 1000);})
here is the working fiddle :
https://jsfiddle.net/Le1by7z0/

You can just use append and animate in jquery. Here is the sample code ..
<html>
<head>
<link rel="stylesheet" href="style.css">
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#test {
width: 200px;
height: 400px;
overflow: scroll;
}
#test div {
width: 200px;
}
</style>
</head>
<body>
<div class="bubble" style="clear:both" id="talk_chat_from">
<div id="talk_chat_detail"></div>
</div>
<input type="text" id="message" placeholder="write message" />
<input type="button" id="sendMessage" value="Send" />
<script>
$(document).ready(function() {
$("#sendMessage").on('click', function() {
var mes = $("#message").val();
$("#talk_chat_detail").append(mes + "<br/>")
$("#talk_chat_detail").animate({
scrollTop: $target.prop("scrollHeight")
}, 30);
});
});
</script>
</body>
</html>

$(document).ready(function() {
$('#send').click(function() {
var message = $("#message").val();//Here comes dynamic data binding
var appendMessage = '#messageArea';//Message to append in div section
$(appendMessage).append('<div style=height:10px;background:white;float:right>' + message + '</div> <br><hr>'); //user message dynamic div
var $target = $(appendMessage); // user dynamic div appended
$target.animate({ scrollTop: $target.prop("scrollHeight") }, 1000);
})
});
#messageArea {
width:320px;
height:400px;
overflow:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type="text" id="message" placeholder="User Message" />
<button type="button" id="send">append text message</button>
<div id="messageArea">
<div style="height:1000px;background-color:wheat"></div>
</div>
</body>
Hope this helps

Use scrollTop to scroll to the bottom of the page after you append the message
var $target = $('#talk_chat_detail');
$target.animate({scrollTop: $target.prop("scrollHeight") }, 300);

You can use scrollTop, you just need to add following code right after the append call of your message and it will automatically scroll to the message,
$('html, body').animate({
scrollTop: $("div").offset().top
}, time);
div => Dom Element where you want to move scroll.
time => milliseconds, define the speed of the scroll.

Javascript onclick events

I want to blur my images by clicking on it. I am using javascript on click event for this purpose. But it is not working exactly as I want. My code is given below:
<script>
$(document).ready(function(){
$(".ww").click(function(){
$(this).css("opacity","0.2");
});
});
</script>
<div class="bg">
<div class="img ww1"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
<div class="bg">
<div class="img ww2"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
I want that when I click first image then its opacity would set. And that when I click second image so the opacity of first image would finish and second image would set.

As the others already tried to explain, you have to use a selector which actually selects both elements, since you want to bind the event handler to both of them. $('.ww') does not select any element in the code you posted.
Toggling the opacity can be easier done when using a class:
.selected {
opacity: 0.2;
}
Add the class to the clicked element and removed it from the element currently having the class:
$(".img").click(function(){
$('.img.selected').add(this).toggleClass('selected');
});
Have a look at this DEMO. This should give you enough information to apply it to your situation.

Because a selector .ww does not match ww1 and ww2.
You can see that with
console.log($(".ww").length);
Use the common class img or add the class ww.

<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#my').toggle(
function(event) {
$(event.target).css('opacity',0.4);
},
function(event) {
$(event.target).css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<body>
<div id="my">asdf</div>
</body>
</html>

multiple show hide toggle with div sliding out

I am new to coding and need help with jQuery. I have 2 <div>s (one with an image, the other with a menu list, both 50% width) and I need to be able to click one of the menu options to make a new div (50% width) appear from the right while reducing the other 2 divs width to 25% each. Then clicking on the same menu option to hide the new div and revert back to the original widths. But if I click on another menu option while the new div is visible, I need it to change the content to that specific menu option content.
How can I swap the left-hand <div> out with jQuery?
Here's the HTML I'm working with:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- SCRIPT FILES -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<!-- CSS STYLESHEETS -->
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!--header-->
<div id="container">
<div class="box-container">
<div class="box1">
<img src="images/Untitled-1.png" alt="logo">
</div>
<div class="box2">
<div id="nav">
<ul>
<li><a>hello!</a></li>
<li><a>ADVERTISING</a></li>
<li><a>DESIGN</a></li>
<li><a>ABOUT</a></li>
<li><a>BLOG</a></li>
<li><a>SHOP</a></li>
</ul>
</div><!--nav-->
</div><!--box2-->
<div class="box3">
<div id="ADVERTISING" class="content">ADVERTISING</div>
<div id="DESIGN" class="content">DESIGN</div>
<div id="ABOUT" class="content">ABOUT</div>
<div id="BLOG" class="content">BLOG</div>
<div id="SHOP" class="content">SHOP</div>
</div>
</div><!--box-container-->
</div><!--container-->
<div id="footer">
</div><!--footer-->
</div><!-- wrapper-->
</body>
</html>​
Here's a working jsFiddle with the styles: http://jsfiddle.net/YcphY/6/

For starters, here's a method that ties the below examples of how to do this into the animation you're after:
$(function() {
$("#nav").delegate("li","click", function() {
var newDiv = $(".box3 .content").eq($(this).index()-1);
newDiv.siblings().hide().end(); // hide the others
if(newDiv.is(":visible")) {
// if shown, fade it out, when the fade finishes, slide everything back
newDiv.fadeOut(function() {
$(".box3").hide();
$(".box1, .box2").animate({ width: "50%" });
});
} else {
// if not shown, then slide over space, then fade in
$(".box1, .box2").animate({ width: "25%" }, function() {
$(".box3").show();
newDiv.fadeIn("fast");
});
}
});
});​
Given your current CSS you can do this:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + $(this).text()).show().siblings().hide();
});
});​
Here's a working example, though you can see the CSS will need a bit of work to get it going 100%. I suggest a few changes though: give your links and containers matching IDs, like this:
<li><a id="ad">ADVERTISING</a></li>
<div id="ad-container" class="content">ADVERTISING</div>
Then the JS can be:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + this.id + "-container").show().siblings().hide();
});
});
Here's a working example of that...it allows you to change the text at will and not worry about the JS breaking later. Another alternative yet is to go off the index of the link in the list using .index() of the <li>, if the number of links was consistent with the <div>s in all cases, even if there's an offset because of the "hello!" link.
Here's an example of an index approach with your current HTML:
$(function() {
$("#nav").delegate("li","click", function() {
$(".box3").show();
$(".box3 .content").hide().eq($(this).index()-1).show();
});
});​

I think jQuery's animate function might be of use to you.
What you'd need to do is either have a hidden div positioned out of the window added to your HTML (or maybe add it dynamically using jquery on document.ready event, if you prefer) and the use the above mentioned animate function to slide it in and out and bind it to the menu item's click function.
Sample Code
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-1000px"}, "slow");
hidden.removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow");
hidden.addClass('visible');
}
});
});​
Explanation
In the above code we are binding code to the click event of an element with a id "slide". Once the element is clicked the code gets initiated. We check if the .hidden has a css class called "visible". If not we animate the hidden div to slide in. and if it has a visible class then slide it out.
Working Fiddle
Here is a working JSFiddle for you
Some pointers
In the hidden div's CSS remember to specify a z-index greater than that of the current left panel.
In the hidden div's CSS remember to set position to absolute and left to around -1200px (or greater than window.width() to make it work on all screen sizes.)

Problems with manipulating divs within simplemodal dialog popup - Further Edit

Ok, I'm having a major headache with simplemodal - I know I'm almost there, but can't get this to quite work right. I have a simplemodal dialog that has several dynamically created divs inside it, such as
<html>
<head>
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id='container'>
<h1>Test Page</h1>
<div id='content'>
<div id='confirm-dialog'>
Page Content Goes Here
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Header Text</span></div>
<div class='message'>
<div id='optionDiv0'><input type='radio' id='options' name='options' value='0' />Option0</div>
<div id='optionDiv1'><input type='radio' id='options' name='options' value='1' />Option1</div>
<div id='optionDiv2'><input type='radio' id='options' name='options' value='2' />Option2</div>
</div>
<div class='buttons'>
<div class='yes'>OK</div>
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script>
<script type="text/javascript">
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("", function () {
for(var k = 0; k <= 3; k++) {
if(options[k].checked) {
var ele = document.getElementById("optionDiv" + k);
ele.style.display = "none;";
//alert("Stop Here");
}
}
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
containerCss: {
height: 300,
width: 450,
backgroundColor: '#fff',
border: '3px solid #ccc'
},
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
</script>
</body>
</html>
In the click code, I'm trying to make it so when the user clicks on one of the radio buttons, then clicks 'OK', that item is no longer visible in the popup. If I follow that code with an alert("Stop here");(shown in the code above, commented out), then I can see the div disappear from the popup. But once I clear the alert box, (or if I comment it out so it never runs), the next time I activate the dialog, the div that I hid is re-appearing. How can I keep it hidden, so that it remains hidden the next time the dialog is activated, or is that possible? Thanks in advance.
FINAL EDIT: Found the solution for the dialog box reverting to its original state every time it opens. I pasted this in just above the jquery code, and it works like a charm:
<script> $.modal.defaults.persist = true; </script>
Found on this site in another thread, as part of a different question. Thanks for all who helped.

Your code still doesn't look complete to me, but as for your confirm function callback
confirm("", function(){
$('#confirm input[type=radio]').each(function(){
if($(this).is(':checked'))
$(this).parent().empty();
});
});
Like that?