Develop Reference

How we can set proper position of dropping html element with jquery?

I am using jquery-UI for making drag and drop web UI , but I am facing some problems during implementation of this . I am sharing my code which is a prototype and simple example of my implementation .
In my example there have three div elements : drag me , drop here and make me draggable .
Now I explain what is that . Actually I want drag element and drop it in container but when I dropping it in container that is not placing where I want in first time that is first problem .That is coming when I set container position relative because I want top 0 left 0 .
Second problem with make me draggable div . Suppose I dropped multiple drag me div elements inside container and then save this (In this example have not save option) then goes to edit so these saved elements are not draggable right now but there have same class if you see in code . But I don't know how I make these draggable .
So I have two issues with jquery-UI please if anyone have any solution and have expertise on jquery-UI please help me .
See my code html :
.drag {
text-align: center;
margin-top:5px;
width: 100px;
height:100px;
color:white;
background-color: red;
margin-bottom: 5px;
border: 1px solid black;
}
.container {
text-align: center;
width: 400px;
margin-top:5px;
margin-left: 5%;
height: 400px;
color:white;
background-color: green;
border:1px solid black;
}
.dropped {
text-align: center;
width: 100px;
height:100px;
color:white;
background-color: red;
border: 1px solid black;
}
body {
display: flex;
}
<div class="drag">Drag me</div>
<div style="position:relative" class="container">drop here !!
<div class="dropped ui-draggable" style="position: absolute; left: 299px; top: 299px; z-index: 1000;">Make me draggable</div>
</div>
Jquery UI :
$(document).ready(function() {
$('.drag').draggable({
helper: "clone",
appendTo:"body",
revert: "invalid"
});
$('.container').droppable({
accept: ".drag",
drop: function(e, u) {
var a = u.helper.clone();
a.css("z-index", 1000);
a.appendTo(".container");
console.log("INFO: Accepted: ", a.attr("class"));
a.attr('class', 'dropped').draggable({
containment: ".container"
});
}
});
});

How to make block draggable within a certain block only?

I have a small problem. I pasted my code here.
My problem is this: I want to make my window div (<div id="window"> Drag me </div>) draggable only within warp div.
HTML code:
<div id="warp">
<div id="window">
Drag me
</div>
</div>
CSS code:
body {
margin: 0;
background-color: #e67e22;
}
#window {
width: 150px;
height: 200px;
//background-color: #1abc9c;
border: 2px solid #16a085;
padding: 20px;
}
#warp {
margin: 10px;
width: 700px;
height: 600px;
border: 2px solid #e74c3c;
}
JS code:
$(document).ready(function() {
$("#window").draggable();
});
I mean when I drag it with mouse then it shouldn't go out of warp div.

you can use
$( "#window" ).draggable({
containment: 'parent'
});

$("#window").draggable ({
containment : "#warp"
});

Inspect Element diplaying child divs

I've never heard of this before and I'm really confused.
The deal is that I have the following code,
Javascript
$(document).ready(function () {
showSideBar('sbselection_1');
$('.talkbubble').click(function () {
var sidebarSelector = $(this).find('.tbselector').val();
showSideBar(sidebarSelector);
});
$('.clickables').on('click','.talkbubble',function () {
$(this).siblings('.talkbubble').removeClass('clicked');
$(this).addClass('clicked');
});
});
function showSideBar(selector) {
$('.sidebarContent').hide();
$('.sidebarContent.' + selector).show();
}
CSS
.sidebar{
position: absolute;
background-color: rgb(153,153,153);
width: 250px;
height: 300px;
}
.sidebarcontent{
display:none;
overflow:hidden;
}
.clickables {
position: absolute;
left: 270px;
}
.talkbubble {
background: white;
color: rgb(0,0,0);
font-family: Rockwell, Garamond, "MS Serif", "New York", serif;
font-size: 12px;
height: 40px;
margin-top: 1%;
margin-bottom: 20px;
position: relative;
width: 130px;
z-index: 5;
}
.talkbubble:before {
border-top: 10px solid transparent;
border-right: 10px solid white;
border-bottom: 10px solid transparent;
content:"";
height: 0;
position: absolute;
right: 100%;
top: 10px;
width: 0;
}
.clicked {
background:rgb(153,153,153);
}
.clicked:before {
border-right-color:rgb(153,153,153);
}
.talkbubble:hover{
background-color: rgb(112,112,112);
color: rgb(255,255,255);
}
.talkbubble:hover:before {
border-right-color: rgb(112,112,112);
}
.thumbnail {
height: 33px;
width: 30px;
float: left;
position: absolute;
margin: 4px;
z-index: 2;
left: 2px;
top: 0px;
}
.words {
height: 24px;
width: 150px;
position: absolute;
float: right;
left: 40px;
top: 10px;
}
#orangetriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(255,138,0);
}
#dkpurpletriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(120,3,105)
}
#powderbluetriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(99,89,288);
}
HTML
Event 1
<div class="talkbubble">
<input type="hidden" class="tbselector" value="sbselection_2" />
<div class="thumbnail">
<img src="images/thumbnail1.png" height="33" width="30" align="middle" />
</div>
<div class="words">Event 2</div>
</div>
<div class="talkbubble">
<input type="hidden" class="tbselector" value="sbselection_3" />
<div class="thumbnail">
<img src="images/thumbnail1.png" height="33" width="30" align="middle" />
</div>
<div class="words">Event 3</div>
</div>
</div>
And you can see it on this fiddle https://jsfiddle.net/petiteco24601/rhjw8uzm/9/
Which is great and beautiful and does exactly what I want it to do.
Next I put it on a html page that I put together, you can see it here:
http://www.emich.edu/dining/draft/index.html
Again, this button display is working wonderfully and doing exactly what I want it to do.
Then I had to go through a specific server and use their system- which I'm a tad unfamiliar with and really forces you to separate everything, not just by folders but essentially you have two libraries working together to pull together the appropriate css, javascript, and html. As such, you can see that I do have a lot (against my better judgement) of inline styles and inclusion of javascript at the header rather than in a separate sheet. Nonetheless
http://webstage.emich.edu/dining-new/index.php
If you hit "inspect source" you see what I'm seeing when I'm working on it. The click-able display looks almost identical to the one on jsfiddle- but you hit Inspect Element and you see that all the <div class="sidebarContent"> is embedded inside each other. As such, it won't display the appropriate pictures to fill the <div class="sidebar"> area.
Any ideas??? Please and thank you!

Looks like the problem is you have used the self closing syntax for the inner divs of .sidebarContent elements like <div id="eetriangle" /> instead of using <div id="eetriangle"></div>.
Demo: Problem, Solution
What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?

If you have noticed clearly in both the .clickables you have the below code
https://jsfiddle.net/petiteco24601/rhjw8uzm/9/
http://webstage.emich.edu/dining-new/index.php
.clickables {
position: absolute;
left: 270px;
}
in case of your which you dont have just add the below and it works identical :)
.clickables {
margin-left: auto;
position: absolute;
left: 333px;
}

So I went through and did some research on the server we're using. It turns out that I was correct in thinking that there was something wrong with how the library was parsing the information. Specifically, when the library puts everything together, it doesn't know what to do with an empty box and therefore immediately starts embedding other boxes inside of it- effectively destroying the code. Easy fix: just add an html comment inside of each empty box, and the program believe the is populated so it leaves it alone.
Thank you everyone for your help and suggestions!

Remove dot marks from textarea

How to remove right bottom-corner dots from textarea ?
There is a solution with following css resize:none but I don't want to remove resizing...
So is it possible to do ...

try these two ways:
.none::-webkit-resizer {
display: none;
}
.pic::-webkit-resizer {
background: url(http://www.zhangxinxu.com//study/image/selection.gif);
outline: 1px dotted #000;
}
<textarea class="none"></textarea>
<textarea class="pic"></textarea>

You can't remove resize handle without resize:none; property. But you can position a div on those dotted lines(resize handles). See Demo here
textarea {
position: relative;
margin: 20px 0 0 20px;
z-index: 1;
}
.wrap {
position: relative;
display: inline-block;
}
.handle-hide {
height:12px;
width:12px;
position: absolute;background:#fff;
bottom: 2px;
right: 2px;
pointer-events: none;
z-index: 2;
}
<div class="wrap">
<div class="handle-hide"></div>
<textarea placeholder="drag the cyan triangle..."></textarea>
</div>

Using jQuery this is possible, I found a jQuery UI here
With this source code you're able customize the textarea
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Textarea</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-resizable-se {
bottom: 17px;
}
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
handles: "se"
});
});
</script>
</head>
<body>
<textarea id="resizable" rows="5" cols="20"></textarea>
</body>
</html>
Simply override the CSS by adding
<style>
.ui-icon, .ui-widget-content .ui-icon {
background-image: none;
}
</style>
after:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

Hello There HERE is a working example of my answer:
First is to point this is based on CSS3 resize, which is not fully supported in all browsers.
HTML
<div class="resize_this">
<textarea class="no_dots"></textarea>
</div>
ENDS HTML
CSS3
.no_dots{
resize: none;
width: 100%;
height: 100%;
border:none;
}
.resize_this{
resize:both;
overflow: hidden;
border:2px solid black;
border-radius: 5px;
/*HERE PLACE DEFAULT SIZE FOR THE TEXTAREA*/
width: 50%;
height: 250px;
}
ENDS CSS3
HOPE THIS HELPS T04435

Have you considered a masking solution?
Here's a basic example (tested only on Chrome):
textarea {
border: 1px solid #000;
box-shadow: inset .3em 0 #000,
inset -.3em 0 #000,
inset 0 .3em #000,
inset 0 -.3em #000;
padding: 10px;
}
DEMO: http://jsfiddle.net/onzqnk5v/
UPDATE (based on comments):
This answer is just a concept for consideration. The example code is meant to illustrate the concept, not serve as a final solution.

Finally, I did. You can wrap the textarea with an element(for example span) and etc. See my demo. I did not use any javascript or jquery, For tricky part I use pointer-events which is supported by most browser.

try this but its funny, involves draggin and div ,
HTML Code
<div id="d2" class="ui-widget-content" contenteditable>
I look like textarea :)
</div>
css Code
#d2{
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 300px;
height: 200px;
}
jquery Code
$(function() {
$( "#d2" ).draggable({revert: function(obj){
if (obj === true) {
// success
return false;
}
else {
// reverting
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$("#d2").css("width", $("#d2").width()+xPos);
$("#d2").css("height", $("#d2").height()+yPos );
return true;
}
}});
});
above code can do what you want but in different taste just drag to increase textarea(here div) to resize.
jsfiddle link

jquery, hover over parent, slideToggle child, not work quite well

So when user hover over div(#cart-quick-view) child(.cart_details_box) needs to slideDown, and to slideUp when mouse gets out of parent(#cart-quick-view). Problem with this code is that sometimes I get 2-3 extra bouncing when mouse is in area of child(.cart_details_box).
Fiddle: http://jsfiddle.net/Y9QLC/
HTML:
<div id="cart-quick-view">
<ul class="nav navbar-nav navbar-right">
<li>...</li>
</ul>
<div class="cart_details_box"></div>
</div>
CSS:
#cart-quick-view {
float: right;
position: relative;
border: 1px solid black;
}
.cart_details_box {
display: none;
position: absolute;
height: 200px;
width: 205px;
background-color: #F8F8F8;
border-radius: 5px;
border:1px solid #E7E7E7;
padding: 0px 3px 3px 3px;
top: 55px;
right: 0;
}
JS:
$(function() {
$('#cart-quick-view').hover(function() {
$('.cart_details_box').slideToggle('slow');
});
});

It is because of the queuing of animations when the mouse enter and leave the parent element quickly. You can use .stop(true, true) to clear the existing animations to fix it
$(function () {
$('#cart-quick-view').hover(function () {
$('.cart_details_box').stop(true, true).slideToggle('slow');
});
});
Demo: Fiddle

The stop() method is an option, but there is also a jQuery plugin available called hoverFlow that can fix the problem with a better looking transition.