I want to replace my images with inline SVG and have my code work. I have a simple drag and drop widget with a drag table and a drop table (it's really a drag and copy, which is how I want it). I have two images that have local .svg files with draggable set to true. I would like to make it so that the .svg code is inline so I can manipulate the svg's. Every time I've tried to replace <img> with <svg> the code breaks.
Here is my code https://jsfiddle.net/jado66/rt5smfvz/9/:
<!DOCTYPE html>
<html>
<head>
<title>Drag Drop SVG</title>
</head>
<style>
* {user-select: none; }
.cell {width:50px;height:50px;
}
img {width:50px;height:50px;cursor: move;}
table td #dropTable td:hover{background: #dedede;}
#dropTable {
border-spacing: 5px;
border: 1px solid #dedede;
}
.droppable:hover{
transform: scale(1.05);
transition-duration: 0.3s;
}
#dropTable tbody { height:300px; overflow-y:auto; }
</style>
<body>
<!-- Drag Table -->
<!-- <svg width="50" height="50"> //***!!!!***!!! I want to replace both <img> with inline <svg> and have my code work ***!!!!***!!!
<rect x="0" y="0" width="50" height="50" style="fill:white;stroke:black;stroke-width:6" />
</svg> -->
<table style="border-spacing: 5px;">
<tr>
<td id="svg1">
<div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<img class = "droppable newGate" src="droppable newGate" src="https://picsum.photos/500/500?random=1"
ondragstart="dragStart(event)" id="1" draggable="true"/> </div>
</td>
<td id="svg2">
<div class = "cell " ondrop="drop(event)" ondragover="allowDrop(event)">
<img class = "droppable newGate" src="https://picsum.photos/500/500?random=2"
ondragstart="dragStart(event)" id="2" draggable="true" /> </div>
</td>
</tr>
</table>
<hr>
<!-- Drop Table -->
<table>
<tr>
<td>
<table id="dropTable" >
<tr >
<td> <div class = "cell"></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
</tr>
<tr>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
</tr>
</table>
</td>
</tr>
</table>
<script>
const cells = document.querySelectorAll(".cell:empty"); //We only want to add event listeners to empty cells
for (const cell of cells){
cell.addEventListener('dragover',allowDrop);
cell.addEventListener('drop',drop);
}
function dragStart(evt)
{
evt.dataTransfer.setData("Text",evt.target.id);
}
function drop(evt)
{
var data = evt.dataTransfer.getData("Text");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = Date.now(); /* We cannot use the same ID */
evt.target.appendChild(nodeCopy);
}
function allowDrop(ob)
{
ob.preventDefault();
}
</script>
</body>
</html>
Related
This question already has answers here:
How can I apply a jQuery function to all elements with the same ID?
(4 answers)
Event binding on dynamically created elements?
(23 answers)
Closed 1 year ago.
Sup! My code dynamically creates tables by clicking div, but it appends row only to first one. All tables are stored in div, containing the table itself and div with the row adding button, which is contained in the main div.
HTML
<div id="main-container">
<div id="container">
<table id="table" class="my-table">
<tr>
<th>X</th>
<th>Y</th>
</tr>
<tr>
<td class="xcell" contenteditable="true"></td>
<td class="ycell" contenteditable="true"></td>
</tr>
<tr>
<td class="xcell" contenteditable="true"></td>
<td class="ycell" contenteditable="true"></td>
</tr>
<tr>
<td class="xcell" contenteditable="true"></td>
<td class="ycell" contenteditable="true"></td>
</tr>
<tr>
<td class="xcell" contenteditable="true"></td>
<td class="ycell" contenteditable="true"></td>
</tr>
</table>
<div id="addRowChild" class="add"><b>+</b></div>
</div>
</div>
</div>
In my JS code, I've been trying to get tables from each container div with siblings() method, but it doesn't work and I have no idea why it happens.
JS
function createNewTable() {
let newTable = document.createElement("table")
let mainContainer = document.getElementById("main-container") //refers to the div, containing all tables
let containerDiv = document.createElement("div") //creates div, which contains table and row adding div
let addRowButton = document.createElement("div") //creates row adding button
mainContainer.append(containerDiv)
containerDiv.id = "container"
containerDiv.append(newTable)
newTable.className = "my-table"
newTable.id = "table"
$("#addRowChild").click(function() {
let table = $("#addRowChild").siblings(".my-table")
table.append(`<tr><td class = "xcell" contenteditable = "true"></td><td class = "ycell" contenteditable = "true"></td></tr>`);
});
The script was not working because it nested the click event handler method and the createNewTable() method. Application screenshot and test code are available below:
function createNewTable()
{
let newTable = document.createElement("table")
let mainContainer = document.getElementById("main-container") //refers to the div, containing all tables
let containerDiv = document.createElement("div") //creates div, which contains table and row adding div
let addRowButton = document.createElement("div") //creates row adding button
mainContainer.append(containerDiv);
containerDiv.id = "container";
containerDiv.append(newTable);
newTable.className = "my-table";
newTable.id = "table";
}
$("#addRowChild").click(function() {
var markup = `
<tr>
<td class = "xcell" contenteditable="true">####</td>
<td class = "ycell" contenteditable="true">####</td>
</tr>
`;
let table = $("table tbody");
table.append(markup);
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.block {
display: block;
width: 100%;
border: none;
background-color: #04AA6D;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Document</title>
</head>
<body>
<div id="main-container">
<div id="container">
<table id="table" class="my-table">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td class="xcell" contenteditable="true">1</td>
<td class="ycell" contenteditable="true">2</td>
</tr>
</tbody>
</table>
<button style="margin-top: 25px;" class="block" id="addRowChild" class="add"><b>+</b></button>
</div>
</div>
</body>
</html>
i'm using html2canvas js lib for convert webpage into jpg/png. when i'm used simple div or table in my target id and clicked on button to save webpage as an image. it worked. but whenever i'm use svg in my target id then it not work. it gives blank image in output.
code is :
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
<script type="text/javascript">
function capture() {
$('#target').html2canvas({
onrendered: function (canvas) {
//Set hidden field's value to image data (base-64 string)
$('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
document.getElementById("myForm").submit();
}
});
}
</script>
<style type="text/css">
#target {
border: 1px solid #CCC;
padding: 5px;
margin: 5px;
}
h2, h3 {
color: #003d5d;
}
p {
color:#AA00BB;
}
#more {
font-family: Verdana;
color: purple;
background-color: #d8da3d;
}
</style>
<h2>Simple Implementation of html2canvas With JavaScript and PHP</h2>
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
<table>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td>
<input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" />
</td>
<td align="right">
<a href="http://www.kubilayerdogan.net?p=304" style="font-family: Tahoma; font-size: 10pt; font-weight: bold;">
Documentation (Back to Site)</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="padding: 10px;">
<b>Div:</b>
</td>
<td>
<div id="target">
<div class="slides2" id="widget">
<img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870" style="width: 38%;">
<div class="custom" style="position: relative; top: -282px; left: 100px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460" id="svg">
<defs>
<clipPath id="my-path">
<text id="texty" style="font-weight:bold;" x="60" y="300" font-size="350">sdasa</text>
</clipPath>
</defs>
<image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image>
</svg>
</div>
</div>
</div>
</td>
</tr>
</table>
and i want output like as below image .. please help me to sort out of this problem.. thankyou in advance
image
I used this.. DOMtoImage Worked perfectly for me.
Just add the js link to html and run this script;
var node = document.getElementById('element_id');
domtoimage.toPng(node).then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
$("element_destiny").html('<img src="' + img.src + '" id="image_id" />');
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
I have a problem with jQuery toggle between 4 divs. I have no idea why it doesn't work. It just showed me the first div and didn't do anything. When I used it on another webpage, it worked.
Code is below:
HTML:
<table style="width: 75%; border: 0; text-align: center; margin: 0 auto;" align="center" padding="10"><tr>
<td width="50%" align="center"><a class="ukaz" target="1"></a></td>
<td width="50%" align="center"><a class="ukaz" target="2"></a></td></tr>
<tr>
<td width="50%" align="center"><a class="ukaz" target="3"></a></td>
<td width="50%" align="center"><a class="ukaz" target="4"></a></td>
</tr>
</table>
<div id="div1" class="cil" style="display:block;">
text
</div>
<div id="div2" class="cil">
text
</div>
<div id="div3" class="cil">
text
</div>
<div id="div4" class="cil">
text
</div>
CSS:
.cil {
display: none;
}
JS:
jQuery(function () {
jQuery('.ukaz').click(function () {
var index = $(this).index(),
newTarget = jQuery('.cil').eq(index).slideDown();
jQuery('.cil').not(newTarget).slideUp();
});
});
Your current expression finds the index of the clicked element but it doesn't know the context to which element it needs to find index to. You need to find the index of the click element via using all elements matching class .ukaz
$('.ukaz').click(function () {
var index = $('.ukaz').index($(this));
$('.cil').slideUp();
$('.cil').eq(index).slideDown();
});
Example : https://jsfiddle.net/DinoMyte/qgo90beb/1/
I posted a similar question a few hours ago, but I've made a couple breakthroughs(in my mind) and i feel as if I can explain better now.
First off, it's important to say that all of my images, the ones that I'm trying to edit the classes of, are in cells. Like, the cells that are within rows that are within a HTML table.
I have a class named .disableMenu, and it's supposed to simply hide the pictures. Here's that class -
.disableMenu {
visibility: hidden;
}
It's simple and it works like a charm.
So basically, I want a button that when it is pressed, it removes that class from the element(in this case, it's a single cell in a table).
Here's an example of a cell that I'm trying to get this to work on -
<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr >
<td id="one" >
<img src="1.png" class="merge0">
<script>
src="js/bootstrap.js"
</script>
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.style.class = disableMenu;
}
</script>
</td>
Now, here's the JS button that I'm trying to get to trigger this change of class -
<button onclick="changeColor('disableMenu');">GO</button>
I'm really sorry for half-double posting this and my general lack of knowledge, but I'm trying to learn(and having fun doing so).
Here's the full code, if anyone wants to have a look -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Complete the puzzle!</title>
<style>
.disableMenu {
visibility: hidden;
}
.merge {
position:absolute;
left: 496px;
top: 5px;
}
.merge0 {
position:absolute;
left:300px;
top:4px;
}
.merge1 {
position:absolute;
top: 218px;
left: 530px;
}
.merge2 {
position:absolute;
top: 218px;
left: 688px;
}
.row1 {
position:absolute;
left: 301px;
top: 208px;
}
.row2 {
position:absolute;
top: 476px;
left: 301px;
margin:0;
}
.row3 {
position:absolute;
top: 495px;
left: 716px;
margin:0;
}
.row4 {
position:absolute;
top: 691px;
left: 300px;
margin:0;
}
</style>
<body style="
">
<div>
<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr >
<td id="one" >
<img src="1.png" class="merge0">
<script>
src="js/bootstrap.js"
</script>
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.style.class = disableMenu;
}
</script>
</td>
<td>
<img id="2" src="6.png" class="merge">
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="4.png" class="row1">
</td>
<td id="gone">
<img src="2.png" class="merge1">
</td>
<td>
<img src="7.png" class="merge2">
</td>
</tr>
<tr>
<td>
<img src="8.png" class="row2">
</td>
<td>
<img src="5.png" class="row3">
</td>
<td>
<img src="3.png" class="row4">
</td>
</tr>
</table>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
Thanks for looking, any help would be greatly appreciated.
elem.style.class = disableMenu;
This is a big problem. There is not style attribute called "class". You want:
elem.className = "disableMenu";
and
elem.className = "";
to disable it.
You're also calling the wrong function:
<button onclick="changeColor('disableMenu');">GO</button>
should be
<button onclick="changeClass('disableMenu');">GO</button>
Hope this helps!
===================
Per your comment below I'm fixing your code:
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.className = "disableMenu";
//I put this line in there so you could UNDO your changes.
//Calling this immediately after the previous line will just undo what you did.
//Remove it an you should be good (the line below)
elem.className = "";
}
</script>
I don't have enough rep to comment, but building on dudewad's answer -
Try this code to add the class:
<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr >
<td id="one" >
<p class="merge0">Hi</p>
</td>
</tr>
</table>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
var elem = document.getElementById("one");
elem.className = "disableMenu";
}
</script>
I am trying to write a piece of code that enables column re-sizing functionality to my data table.But its not working properly.. I explored on internet for couple of days but I could find nothing except some plug-ins. But I don't want to use any plug-in, since my data table is very complicated and if I use them the other functionalities of the table may be destroyed.Thus I tried to write my own. Can you please check and refine my code or suggest any other code that fulfills my spec....
Note: User can re-size the column towards right upto table width but towrds left, its upto td's left position only..
Eidt: Maxwell has given a great alternative..It works fine but in one case.If I try to resize towards left side, its not allowing since td width is fixed to it's content width...But I want to re-size it to left side upto it's its offset().left value by putting td's style to overflow:hidden or some other way....
Here is my piece of code....
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
table{
border-collapse:collapse;
}
table td{
border:1px solid red;
}
.vUiDtColResize{
width:2px;
height:20px;
border:1px solid blue;
float:right;
display:block;
cursor:w-resize;
position:relative;
right:-3px;
float:top;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>S.No <div class="vUiDtColResize"></div></td>
<td>Name <div class="vUiDtColResize"></div></td>
<td>Qualif <div class="vUiDtColResize"></div></td>
</tr>
</thead>
<tbody>
<tr> <td>1</td><td>Rama Rao</td><td>M.C.A</td></tr>
<tr> <td>2</td><td>Dushyanth</td><td>B.Tech</td></tr>
<tr> <td>3</td><td>AnandKumar</td><td>M.C.A</td></tr>
<tr> <td>4</td><td>Veera Reddy</td><td>B.Tech</td></tr>
</tbody>
</table>
<div id="helper"></div>
</body>
<script>
$('.vUiDtColResize').each(function(){
var _rsTd = $(this).parent('td');
var _rsTr = _rsTd.parent('tr');
var _rsTdRight,_thisLeft,_rsTdWidth;
$(this).draggable({axis:'x',containment:_rsTd,refreshPositions:true,
create:function(event,ui){
},
start:function(event,ui){
_rsTdRight = _rsTd.offset().left + _rsTd.outerWidth();
},
drag:function(event,ui){
var _sizeDiff = $(this).offset().left - _rsTdRight;
_rsTdRight = $(this).offset().left;
_rsTdWidth = _rsTd.outerWidth() + _sizeDiff;
_rsTd.outerWidth(_rsTdWidth);
},
stop:function(event,ui){
}
});
});
</script>
</html>
I merged your code with some techniques that I found — http://jsfiddle.net/tpqn7/
IMHO, there are still some problems. First of all I suppose it's would be better (also easier) if table headers can be re-sized by pressing each TH, no only small border.
Hope this helps.
After had been exploring in internet for couple of days, I got a good code,which was modified by me to make it satisfies my requirement as well( Of course, my change is bit little.It might be useful to somebody else,so I am posting here...
style
<link rel="stylesheet" href="E:\Examples\BSP\BSPExtensions\jquery-ui-1.8.18.custom.css"/>
<style>
table {
table-layout: fixed;
border-collapse: collapse;
border: 1px solid black;
}
tr.last td {
border-bottom: 1px solid black;
}
td {
border-right: 1px solid black;
border-bottom: 1px solid black;
position: relative;
white-space:nowrap;
padding: 2px 5px;
text-align: left;
overflow:hidden;
}
td.last {
border-right: none;
}
thead td div:first-child{
text-overflow:ellipsis;
overflow:hidden;
}
tbody td div:first-child{
overflow:hidden;
}
.scrollContainer {
overflow:auto;
width:700px;
height:auto;
display:inline-block;
border:1px solid red;
}
#-moz-document url-prefix() {
.resizeHelper,.ui-resizable-e {
position: relative;
float: right;
}
}
</style>
Script
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script>
/**
* Enables resizable data table columns.
**/
(function($) {
$.widget("ih.resizableColumns", {
_create: function() {
this._initResizable();
},
_initResizable: function() {
var colElement, colWidth, originalSize;
var table = this.element;
this.element.find("thead td").resizable({
handles: {"e": ".resizeHelper"},
minWidth: 2, // default min width in case there is no label
// set correct COL element and original size
start:function(event, ui) {
var colIndex = ui.helper.index() + 1;
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
originalSize = ui.size.width;
},
// set COL width
resize: function(event, ui) {
var resizeDelta = ui.size.width - originalSize;
var newColWidth = colWidth + resizeDelta;
colElement.width(newColWidth);
// height must be set in order to prevent IE9 to set wrong height
$(this).css("height", "auto");
}
});
}
});
// init resizable
$("#MyTable").resizableColumns();
})(jQuery);
</script>
Your html is to be like:*
<div class="scrollContainer">
<table class="resizable" id="MyTable" width="100%">
<thead>
<tr>
<td class="ui-resizable" style="width:100px;">
<div>
<span >Column 1</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 2</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:300px;">
<div>
<span >Column 3</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:150px;">
<div>
<span >Column 4</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 5</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable last" style="width:100px;">
<div>
<span >Column 6</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
<tr class="last">
<td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
</tbody>
</table>
</div>