Develop Reference

how to remove scroll bar in jpeg image

I have written some code to convert html in a bootstrap modal to image in jpeg format.
It is working fine but in the image it is showing some scroll bar(s). In this code I didn't include any scrollbar.
How to resolve this problem. can any one please help me. example image here I have included one image, I am getting scrollbar like this when I click on the download button.
$(document).on("click", "#jpgfrmt", function() {
domtoimage.toJpeg(document.getElementById('download'), {
quality: 0.95
})
.then(function(dataUrl) {
var link = document.createElement('a');
link.download = 'astDetails.jpeg';
link.href = dataUrl;
link.click();
});
});
#download {
background: #fff;
color: #000;
width: auto;
height: auto
}
#buttons {
margin: 0 auto;
display: inline;
}
#jpgfrmt {
float: right;
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<div id="content" class="content">
<div id="buttons">
<div class="action_btn">
<a href="javascript:;" id="jpgfrmt" class="btn btn-xs btn-warning m-b-10">
<i class="fa fa-download m-r-5"></i> Download
</a>
</div>
</div>
<div class="row" id="download">
<div class="col-md-8">
<div class="table-responsive">
<table class="table">
<tr>
<td style="border:none;">
<table class="table">
<tr>
<td class="field highlight" width="25%" style="border:none;">Name:</td>
<td width="75%" style="border:none;">
Name
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Description:</td>
<td width="75%" style="border:none;">
Description
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Serial No:</td>
<td width="75%" style="border:none;">
Serial Number
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

Changing height of element when event is fired (javascript)

I want to change the height of at element when I have a click event. The height is set to auto, but when the event is fired I want to draw the chart with a different height..
My HTML looks like:
<table class="col-sm-12">
<tr>
<td>
<div class="col-sm-12" style="height: 300px; overflow: auto !important; text-align:left" id="errorTable">
</div>
</td>
<td>
<table class="col-sm-12">
<tr> <td style="height:300px; width:100%" id="Chart"></td></tr>
<tr> <td id="errorDetails" style="height:100%; width: 100%"></td></tr>
</table>
</td>
</tr>
</table>
and part of the javascript:
document.getElementById('Chart').setAttribute("style", "height:75");
document.getElementById('Chart').style.height = "75px";
Have tried everything, but nothing works...
Now I have found out that when i predefined the height of ID= "chart" to 100% then I am able to change if afterwards. But this does not work for me. I need to set the size of the height of the Chart to 300px in the start and then change it. But i does not work....

When you try to apply height to td tags it wont get applied.
For more details on this click here
So you may have to put a div inside your td tag and apply height to it.
HTML
<table class="col-sm-12">
<tr>
<td>
<div class="col-sm-12" style="height: 300px; overflow: auto !important; text-align:left" id="errorTable">
</div>
</td>
<td>
<table class="col-sm-12">
<tr>
<td >
<div id="Chart" style="height:300px; width:100%">
</div>
</td>
</tr>
<tr>
<td>
<div id="errorDetails" style="height:100%; width: 100%">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Javascript
document.getElementById('Chart').style.height = "75px";
Here is a working jsfiddle

Input button onclick do not work in JSP

I test my issue in Firefox. I click the save button(it is a input, and the type is button), it ought to execute:
onclick="checkchar()"
but it did not.
My part of code in jsp:
<script language="javascript">
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
//alert('before...');
document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
document.Form2.submit();
alert(" 待办事宜保存成功!");
}
...
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">
I don't know why I click my save button, the method did not execute, some one can help me with this? and if is caused by the upload stylesheet (http://localhost:8080/css/Font.css)? I am not sure.
EDIT
Because the main framework is frameset, and the javascript methods and the input button is in my main page(you can see the below, which is in red rectangle I add). So use firebug it shows there do not contains any javascript code.
EDIT -2
The all code of my actingIndex.jsp:
<%# page language="java" pageEncoding="UTF-8"%>
<%--引入struts tags--%>
<%# taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>运行监控模块编辑</title>
<link href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/showText.css" type="text/css" rel="stylesheet">
<script language="javascript" src="${pageContext.request.contextPath }/script/function.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/script/limitedTextarea.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/script/showText.js"></script>
<script src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"/>
<script src="${pageContext.request.contextPath}/ckfinder/ckfinder.js"/>
<script type="text/javascript">
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
alert('before...');
document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
document.Form2.submit();
alert(" 待办事宜保存成功!");
}
function addEnter(element){
document.getElementById(element).value = document.getElementById(element).value+"<br>";
}
function checkTextAreaLen(){
var stationRun = new Bs_LimitedTextarea('stationRun', 2500);
stationRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
stationRun.draw();
var devRun = new Bs_LimitedTextarea('devRun', 2500);
devRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
devRun.draw();
}
window.onload=function(){
//checkTextAreaLen();
}
</script>
</head>
<body>
<form name="Form1" id="Form1" method="post">
<table cellSpacing="1" cellPadding="0" width="90%" align="center" bgColor="#f5fafe" border="0">
<tbody>
<tr height=10><td></td></tr>
<tr>
<td>
<TABLE style="WIDTH: 105px; HEIGHT: 20px" border="0">
<TR>
<TD align="center" background="${pageContext.request.contextPath }/images/cotNavGround.gif"><img src="${pageContext.request.contextPath }/images/yin.gif" width="15"></TD>
<TD class="DropShadow" background="${pageContext.request.contextPath }/images/cotNavGround.gif">运行监控列表</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td class="ta_01" align="center" bgColor="#f5fafe" colspan=3>
<table cellspacing="0" cellpadding="1" rules="all" bordercolor="gray" border="1" id="DataGrid1"
style="BORDER-RIGHT:gray 1px solid; BORDER-TOP:gray 1px solid; BORDER-LEFT:gray 1px solid; WIDTH:100%; WORD-BREAK:break-all; BORDER-BOTTOM:gray 1px solid; BORDER-COLLAPSE:collapse; BACKGROUND-COLOR:#f5fafe; WORD-WRAP:break-word">
<tr style="FONT-WEIGHT:bold;FONT-SIZE:12pt;HEIGHT:25px;BACKGROUND-COLOR:#afd1f3">
<td align="center" width="40%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">站点运行情况</td>
<td align="center" width="40%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">设备运行情况</td>
<td align="center" width="20%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">创建日期</td>
</tr>
<div id="showInfomation" style="visibility: hidden"></div>
<tr onmouseover="this.style.backgroundColor = 'white'" onmouseout="this.style.backgroundColor = '#F5FAFE';">
<td style="HEIGHT:22px" align="center" width="40%">
<div class="scrollStyle" align="left" onmouseover="showInfoWithPanel(this)" onmouseout="hiddenInfoPanel(this)" style="table-layout:fixed;">
<s:property value="stationRun"/>
</div>
</td>
<td style="HEIGHT:22px" align="center" width="40%">
<div class="scrollStyle" align="left" onmouseover="showInfoWithPanel(this)" onmouseout="hiddenInfoPanel(this)" style="table-layout:fixed;">
<s:property value="devRun"/>
</div>
</td>
<td style="HEIGHT:22px" align="center" width="20%">
<s:date name="createDate" format="yyyy-MM-dd HH:mm:ss" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</form>
<form name="Form2" id="Form2" method="post">
<table cellspacing="1" cellpadding="5" width="90%" align="center" bgcolor="#f5fafe" style="border:1px solid #8ba7e3" border="0">
<tr>
<td class="ta_01" colspan=2 align="center" background="${pageContext.request.contextPath }/images/b-info.gif">
<font face="宋体" size="2"><strong>运行监控编辑</strong></font>
</td>
</tr>
<tr height=10><td></td><td></td></tr>
<tr>
<td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">站点运行情况：</td>
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<s:textarea name="stationRun" id="stationRun" cssstyle="width: 1000px; height: 160px; padding: 1px;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('stationRun');"></s:textarea>
<!--<script type="text/javascript">
CKEDITOR.replace("stationRun", {height:200, width:800});
</script>-->
</td>
</tr>
<tr>
<td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">设备运行情况：</td>
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<s:textarea name="devRun" id="devRun" cssstyle="width:1000px; height: 160px; padding:1px;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('devRun');"></s:textarea>
<!-- <script type="text/javascript">
CKEDITOR.replace("devRun", {height:200, width:800});
</script> -->
</td>
</tr>
<tr>
<td class="ta_01" style="width: 100%" align="center" bgcolor="#f5fafe" colspan="2">
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">
<input style="font-size:12px; color:black; height:20px; width:80px" id="BT_Export" type="button" value="导出设置" name="BT_Export"
onclick="openWindow('${pageContext.request.contextPath }/system/exportExcel.jsp?belongTo=5-3','700','400')">
</td>
</tr>
</table>
</form>
</body>
</html>

You open script tag , But it is not closed,and
it is important to insert the script at the END of the page. So that the page
can register the controls first.
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
//alert('before...');
//document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
//document.Form2.submit();
alert(" 待办事宜保存成功!");
}
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">

Try this checkchar() function
function checkchar(){
alert("Hello");
}

JSS resize images on table HTML

i'm doing a webapplication for android and iOS
i'm resizing every object in my html file by Javascript
but there's a problem, the first table it's perfect
but when i copy it down the image of the second table doesn't resize, can you help me please?
this is the site
http://bestparty.altervista.org/IOS/IOS/eventi.php
this is .JS file
$(document).ready(function() {
$("body").css("height", ((($(window).height() * 100) / 100)));
$("#evntfoto").css("height", ((($(window).height() * 20) / 100)));
$("#evntfoto").css("width", ((($(window).width() * 40) / 100)));
document.ontouchstart = function(e) {
e.preventDefault();
};
});
and this is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="True" name="HandheldFriendly">
<meta content="on" http-equiv="cleartype">
<link href="css/stile.css" rel="stylesheet" type="text/css">
<meta content="width=320, initial-scale=0.7, user-scalable=no" name=
"viewport">
<script src="JS/jquery-1.11.1.js.js"></script><!--PER EVENTI-->
<script src="JS/func.js"></script><!--PER EVENTI-->
<title>BParty</title>
</head>
<body>
<div id="navigation">
<table width="100%">
<tr valign="middle">
<td align="center" valign="middle" width="25%"><</td>
<td align="center" valign="middle" width="50%">BPARTY</td>
<td align="center" width="25%">></td>
</tr>
</table>
</div>
<div id="evntprg">
EVENTI IN PROGRAMMA
</div>
<div id="container" style="overflow:scroll;">
<div style=
"width:90%; display:block; margin:0 auto; padding-top:10px; margin-top:10px; padding-left:10px; background-color:#FFF; padding-bottom:10px;">
<table width="100%">
<tr valign="middle">
<td align="center" id="evntfoto" style=
"background-image:url(IMG/fnky.jpg); background-position:center; background-size: cover;"
valign="middle"></td>
<td align="left" id="evnttxt" valign="top">
<b>Fnky carnival</b><br>
Sabato 21 Febbraio<br>
Nikita<br></td>
</tr>
</table>
<table width="100%">
<tr valign="middle">
<td align="center" id="evntfoto" style=
"background-image:url(IMG/fnky.jpg); background-position:center; background-size: cover;"
valign="middle"></td>
<td align="left" id="evnttxt" valign="top">
<b>Fnky carnival</b><br>
Sabato 21 Febbraio<br>
Nikita<br></td>
</tr>
</table>
</div>
</div>
</body>
</html>

You are using ID's. ID's in HTML are unique there only can be one.
Change id="eventfoto" to class="eventfoto" in your HTML. Then in jQuery change your selectors to be $(".evntfoto"). Some knowledge about HTML ID'S. The reason why you would use classes is because you can use more than one on the HTML page.

Change below td width as 80%.
Static Html code :
<td valign="middle" align="center" id="evntfoto" style="height: 119px; width: 80%; background-image: url(http://bestparty.altervista.org/IOS/IOS/IMG/fnky.jpg); background-size: cover; background-position: 50% 50%;">
</td>
Dynamic code using jquery :
$("#evntfoto").css("width","80%");

jQuery .load duplicating div

I'm attempting to refresh a div and am ending up with a duplication of the div ie; one inside of the other. I'm currently using jQuery, Struts2, and the Struts2 jQuery plugin for my view.
what it is currently doing:
<div id="nameVolumeWrapper....>
<div id="nameVolumeWrapper....>
</div>
</div>
refresh script
<script>
function reloadContent() {
$('#nameVolumeWrapper').load('${jsonAction} #nameVolumeWrapper');
}
</script>
Element that calls the refresh script
<sj:select href="%{jsonURL}"
id="utility"
name="selectedUtility"
list="utilityList"
headerKey="-1"
headerValue="Please Select A Utility"
onchange="reloadContent()"
onChangeTopics="reloadSecondList"/>
div that I'm attempting to reload
<sj:div id="nameVolumeWrapper" listenTopics="reloadSecondList"
effect="pulsate" effectDuration="1000"
cssStyle="height:250px; overflow-y: scroll; width:910px;
margin-left:auto; margin-right:auto;">
<table id="pricingInput" class="footable" style="width: 800px;
table-layout: fixed; margin-left: auto; margin-right: auto;
margin-bottom:50px;">
<thead>
<tr>
<th style="text-align: center;">Account Name</th>
<th style="text-align: center;">Annual kWh Volume</th>
<th style="text-align: center">Rate Class</th>
<th style="text-align: center;">Add Another?</th>
</tr>
</thead>
<tbody>
<tr>
<td><s:textfield name="nameHolder" /></td>
<td><s:textfield name="volumeHolder" /></td>
<s:url id="jsonURL" action="jsonAction" namespace="/"/>
<td>
<sj:select href="%{jsonURL}"
id="rate_class" name="rateHolder"
list="rateClassList"
headerKey="-1"
headerValue="Please Select a RateClass"
reloadTopics="reloadSecondList"/>
</td>
<td>
<input type="button" class="addButton" value="Add" />
<input type="button" value="Delete" onclick="deleteRow(this)">
</td>
</tr>
</tbody>
</table>
long story short, how do I modify my javascript or div definition to make it so that the div doesn't duplicate when the javascript is called?

you could do something like this:
$.get("${jsonAction} #nameVolumeWrapper", function(data) {
$('#nameVolumeWrapper').html($(data).html());
});
Or if that doesn't work you could do:
var wrapper = $('#nameVolumeWrapper');
wrapper.load('${jsonAction} #nameVolumeWrapper', function() {
wrapper.children('#nameVolumeWrapper').unwrap();
});