I have written a simple code for drag and drop. lets have a look at the code
<!DOCTYPE html>
<html>
<head>
<title>System Drag and Drop Example</title>
<script type="text/javascript">
{
function dragUser(user,oEvent)
{
oEvent.dataTransfer.setData('User',user.id)
}
function dropUser(target,oEvent)
{
var user= oEvent.dataTransfer.getData('User');
alert(user);
alert(target);
target.appendChild(document.getElementById('user'));
oEvent.returnValue=false;
}
}
</script>
</head>
<body>
<p>Try daragging this text to the red box</p>
<p>
<div style="border: 1px solid black; width: 150px; height: 150px">
<img id="img" src="mine,image,life,quote,words,message-5eb746364548d71d07c86e52e63b7b56_h.jpg" width="100px" height="100px" ondragstart="dragUser(this,event)">
</div>
<div id="div2" style="background-color: red; width: 100px; height: 100px; clear: both" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false">
</div>
</p>
</body>
</html>
The problem is that when i try to drag the image from the above div to the lower div with id="div2" than my image is not being dropped instead of it it opens in in a tab as an image.
please let me know the reason behind this.
Related
I am trying to create a search box and button for this map,
can anyone help me how to connect the search box to the map?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form class="example" action="/" style="margin:auto;max-width:300px">
<input type="text" placeholder="Search.." name="search2">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
<div class="mapouter">
<div class="gmap_canvas">
<iframe
width="600" height="500" id="gmap_canvas"
src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
</iframe>
embedgooglemap.net</div>
<style>
.mapouter {
text-align: right;
height: 500px;
width: 600px;
}
.gmap_canvas {
overflow: hidden;
background: none !important;
height: 500px;
width: 600px;
}
</style>
</div>
</body>
</html>
This can easily be done with Vanilla JavaScript.
On your html, bind the onkeyup event
<input type="text" onkeyup="search()" id="search-input" placeholder="Search.." name="search2">
And on your JavaScript file
function search() {
const input = document.getElementById('search-input');
console.log(input)
}
Based on this http://qnimate.com/creating-a-wysiwyg-html-editor/ example created short code
<!doctype html>
<html>
<head>
<title>WYSIWYG Editor</title>
</head>
<body>
<button onclick="displayhtml()">Display HTML</button>
<div class="editor" style="width: 50px; height: 100px; background-color: white; border: 1px solid grey;" contenteditable="true" spellcheck="true">
</div>
<div class="htmloutput">
</div>
<script>
function displayhtml() {
document.getElementsByClassName("htmloutput")[0].textContent = document.getElementsByClassName("editor")[0].innerHTML;
}
</script>
</body>
</html>
On local computer created index file inside wamp/www and pasted the code.
Inside class="editor" typed Enter text Enter. Then clicked on button onclick="displayhtml()"
And i see
<div><br></div><div>text</div><div><br></div>
instead of expected <br>text<br>
Tried here http://jsfiddle.net/24fyrhga/6/
All ok.
Why on local computer i see these divs and how to remove them?
I am trying to create a web editor. Basically I have a page consisting of a toolbar (draggable divs with background images representing HTML elements) and a drop zone a (large div). Users can create html elements on the page by by dragging a div from toolbar into the drop zone.
If a div from the toolbar is dropped into the drop zone, the markup for the element represented by the background image of that div is created, and a unique ID will be created for it as well. Then they are sent to a web service to be written to the page.
Right now I am facing a big hurdle; I can't make any modifications to the newly created elements. For instance the elements can be given colors when they are dropped but those colors can't be changed afterward. Also I've found that their IDs are the same as the divs from toolbar not the unique IDs that were created for them. Please Help me change the elements colors and add an ID to each of them.
Use jquery-form-builder-plugin Its a nice example to create control and drag drop ..
also you can create modification after draggin a control..
Sample link
You Can Try this as you want
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A Simple Draggable Element</title>
<style>
#drag { width: 300px; height: 300px; background: red; }
</style>
<script type="text/javascript" src="./A Simple Draggable Element_files/jquery.min.js.download"></script>
<script type="text/javascript" src="./A Simple Draggable Element_files/jquery-ui.min.js.download"></script>
<script type="text/javascript">
$( init );
function init() {
$('#drag').draggable();
}
</script>
</head>
<body style="cursor: auto;">
<div class="wideBox">
<h1>Drag-and-Drop with jQuery</h1>
<h2>A Simple Draggable Div</h2>
</div>
<div id="content" style="height: 400px;">
<div id="drag" class="ui-draggable" style="position: relative; left: 124px; top: 23px;"> </div>
</div>
</body></html>
Or also try this one for Drag and Drop
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#div2 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the Tools:</p>
<div id="div1" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<li id="drag1" draggable="true" ondragstart="drag(event)" ><input type="text" id="drag1" width="336" height="69"></li><br/>
<li id="drag2" draggable="true" ondragstart="drag(event)"><input type="text" id="drag2" width="336" height="69"></li>
<div id="div2" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
Probably super-basic question, but, why do the text on the first div of the table goes down when raphael creates its paper?
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/raphael-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
raph = new Raphael('canvas_container', 600, 600);
});
</script>
<title>Simple JS Page</title>
</head>
<body>
<br>
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div id="text_container" style="height:600px;width:300px;border: 8px solid #f7f7f7;display:table-cell;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;vertical-align:text-top;">
why am I in the bottom???
</div>
<div id="separator" style="height:600px;width:10px;display:table-cell">
</div>
<div id="canvas_container" style="height:600px;width:600px;border: 8px solid #f7f7f7;display: table-cell;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
</div>
</div>
</div>
</body>
</html>
All of the table-imitation css is getting in the way. It looks like you are trying to create two vertical divs, one 300px wide the other 600px wide, with a 10px separator. The same thing can be accomplished using floating, and it plays a little nicer with Raphael.
#text_container, #separator, #canvas_container{
float: left;
}
Fiddle: http://jsfiddle.net/q0aka3s6/
I want to set "div" alignment to center using javascript. The reason using javascript is not working of "margin:auto" in IE.
I have coded :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>
All Time Set Window
</title>
<script language="JavaScript" type="text/javascript">
$(document).ready(
var winSize = $(window).width();
var margin = winSize % 10;
function setMargin(){
$('#main').css({'margin-left':margin,'margin-right':margin});
}
)
</script>
</head>
<body>
<div id="main" align="center" style="width:1000px; height:100%; text-align:center; border: #000 solid 1px; margin:auto;">
<div id="inner1" style="width:100%; height:20%; background-color:#F8E0E0; float:top; border: #000 solid 1px;">
<div id="inner11" align="center">This is Header</div>
</div>
<div id="inner2" style="width:100%; height:60%; background-color:#F5F6CE; border: #000 solid 1px;">
<div id="inner21" align="center" style="width:70%; background-color:#E3F6CE; float:left;">This is Left Frame</div>
<div id="inner22" align="center" style="width:30%; background-color:#E0E0F8; float:right;">This is Right Frame</div>
</div>
<div id="inner3" style="width:100%; height:20%; float:bottom; background-color:#F8E0E0; border: #000 solid 1px;">
<div id="inner23" align="center">This is Footer</div>
</div>
</div>
</body>
</html>
But, still javascript code is not working properly. What can be the solution ?
Use this code
$(document).read( function($){ ... } )
instead of your code:
$(document).ready( ... )
Or even shorter:
$(function(){ ... })