I'm uploading the image file and then previewing on jquery dialog for cropping using jcrop. For small size its working fine but when i'm uploading large file the dialog become stretch.
header includes:
<head>
<script type="text/javascript" src="<html:rewrite page='/scripts/crop/jquery.Jcrop.js'/>"></script>
<script type="text/javascript" src="<html:rewrite page='/scripts/jquery-plugins/jquery-ui-1.10.3.custom.min.js'/>"></script>
<link rel="stylesheet" src="<html:rewrite page='/styles/crop/jquery.Jcrop.css'/>"/>
<%--<link rel="stylesheet" type="text/css" src="<html:rewrite page='/styles/crop/jQueryUI.css'/>"/>--%>
<style type="text/css">
#media print {
.label.active {
background-color: transparent !important;
border-right: white !important;
}
}
table.form img {
width: 128px;
height: 128px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, .8);
}
.ui-dialog .ui-dialog-content {
max-width: 500px !important;
max-height: 600px !important;
/*width: 600px !important;*/
}
</style>
javascript code:
<script language="Javascript">
var jcrop_api;
function initJcrop()
{
jcrop_api = $.Jcrop('#cropBox',{
onChange: setCoords,
onSelect: setCoords
})
jcrop_api.setOptions({
allowSelect: true, allowMove: true, allowResize: true, aspectRatio: 1
});
}
// });
function setCoords(c)
{
jQuery('#x1').val(c.x);
jQuery('#y1').val(c.y);
jQuery('#x2').val(c.x2);
jQuery('#y2').val(c.y2);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
};
function imageHandler(e2)
{
initJcrop();
// var elem = ;
$("#dialog").dialog({
show: {
modal:true,
resizable: true
,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500
// effect: 'fade',
// duration: 2000
} ,
// maxHeight:document.getElementById('cropBox').height,
// maxWidth:document.getElementById('cropBox').width,
close: function( event, ui ) {
jcrop_api.destroy();
$('#dialog').dialog('close');
}
});
// elem.dialog('open');
}
function readFile(){
var preview = document.querySelector('#cropBox');
var file = document.querySelector('#imageId').files[0];
var reader = new FileReader();
// fr.readAsDataURL(filename);
reader.onload = function () {
preview.src = reader.result;
imageHandler();
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
document.getElementById("isSubmit").value = "false";
}
function cropPic(){
document.getElementById("postForm").submit();
}
$(".ui-dialog-titlebar").hide();
function closeDialog(){
jcrop_api.destroy();
$('#dialog').dialog('close');
}
function setCoordinates(c) {
//alert("x " + c.x + " y " + c.y);
//alert("w " + c.w + " h " + c.h);
document.myForm.x.value = c.x;
document.myForm.y.value = c.y;
document.myForm.w.value = c.w;
document.myForm.h.value = c.h;
};
function checkCoordinates() {
if (document.myForm.x.value == "" || document.myForm.y.value == "") {
alert("Please select a crop region");
return false;
} else {
return true;
}
};
</script>
html
<span id="reuploadImg" ><html:file name="uf" property="file" size="37" onchange="readFile()" styleId="imageId" /></span>
<td>
<input type="hidden" name="x1" id="x1"/>
<input type="hidden" name="y1" id="y1"/>
<input type="hidden" name="x2" id="x2"/>
<input type="hidden" name="y2" id="y2"/>
<input type="hidden" name="w" id="w"/>
<input type="hidden" name="h" id="h"/>
<input type="hidden" name="isSubmit" id="isSubmit" value="true"/>
</td>
<div id="dialog" style="display: none;max-height: 600px;max-width: 600px" title="Preview" >
<img id="cropBox" style="max-height: 600px;max-width: 600px"/>
<br/><br/>
<div style="width: 100%;text-align: center">
<input type="button" value="Save" onclick="cropPic()" class="stdbutton"/>
<input type="button" value="Cancel" onclick="closeDialog()" class="stdbutton"/>
</div>
</div>
Here are the images:
Related
My code with css is defined in my JSP and css as follows:
basic.css
*{
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css
#Outage{
width: 984px;
margin: 0 auto;
}
#bgd{
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper{
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner{
padding-right: 100px;
overflow: auto;
}
header.jsp
<div id="bgd">
<div id="Wrapper">
<div><img src="<%=contextPath%>/images/logo.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
<div>
<div>
Now I want to add outage at the top of all this as follows:
<div id="Outage">
<div id="notificationDiv" style="display:none; width: 255px; height: 34px;">Test</div>
</div>
<div id="bgd">...////...</div>
But this is acting as a layover on "bgd", so the img gets cuts off. I would want actually "Outage" to have a plain background and "bgd" and its css to start only after "Outage". Any help highly appreciated.
basic.css * {
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css #bgd {
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper {
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner {
padding-right: 100px;
overflow: auto;
}
<div id="bgd">
<div id="Wrapper">
<div><img src="https://data.photofunky.net/output/image/4/1/7/1/4171e9/photofunky.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
</div>
</div>
I see that the div outage gets the same body as the dbg. Is there a way to apply body to my 1st div and bgd has its own div?
I'm a beginner in web-programming and I've got this problem with a search bar. The thing is how do I finish it so it'd give out a drop bar with prospective results to choose from and to select other div to give out the search results themselves? Should be something similar as the tag search bar down this page.
The code is below and thanks in advance! WHERE "TODO"!!!
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
var delay = (function(){ // to set timer
var timer = 0;
return function(callback, ms){
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function() {
var $search = $("#search");
$search.keyup(function() {
delay(function () {
var $string = $("#search").val();
if ( $string == "" || /\s+$/.test($string)) return;
var $tag = $string.match(/\S+$/)[0]
$.getJSON('/get_tags_by_substring', {'tag':$tag}, function ($data) {
console.log($data);
/* TODO */
});
}, 500);
});
}); </script> </head>
<style>
.search_bar{
bottom: 5px;
right: 100px;
/* margin-right: 10px; */
float: right;
} </style>
<header> <style type="text/css"> .form {
float: right;
margin-top: 0px;
margin-right: 10px; } </style>
<div id="wrapper">
<div id = "header" style="display: table; width: 1150px;">
<div id="logo" style="display: table-cell;">
<a href="/">
{% load staticfiles %}
<!--img src="{% static '.../images/logo_1.png'%}" alt="... logo" align="left"-->
</a>
</div>
<div style="display: table-cell;">
<nav id="navig" style="margin:0px;">
<ul>
<li class="button">1</li>
<li class="button">2</li>
<li class="button">3</li>
<li class="button">4</li>
</ul>
</nav>
</div>
<div class="search_bar">
<input type="text" id="search" placeholder="tag..."/><br/>
<div id="search_results"></div>
</div>
</div>
</div> </header>
My Highchart is displaying fine in Chrome, however when I try to open it in Internet Explorer only the title and css border shows up. My main problem is that it doesn't show up when I'm trying to display it in a jEditorPane in a java application; it only shows the border. I can display simple HTML pages in the jEditorPane, but I'm guessing this has something to do with the javascript / jquery?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chart Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
colors: ['#1a1334','#26294a','#01545a','#017351','#03c383','#aad962','#fbbf45','#ef6a32','#ed0345','#a12a5e','#710162','#110141']
});
var chart;
$(document).ready(function () {
$('#container').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
backgroundColor: '#f5f5f5'
},
title: {
text: 'Chart Title',
style: {
fontSize: '35px',
fontWeight: 'bold',
fontFamily: 'Oswald'
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.y}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
fontSize: '15px'
}
},
showInLegend: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 75,
backgroundColor: '#e4e4e4',
borderRadius: '5px',
itemStyle: {
fontSize: '15px',
fontWeight: 'light'
}
},
credits: {
enabled: false
},
series: [{
name: 'Chart Title',
innerSize: '40%',
data: [
['Work',11],
['Eat',2],
['Commute',2],
['Watch TV',2],
['Sleep',7],
['Other', 30],
['New', 45],
['Extra', 56], ]
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="width: 945px; height: 525px; border-color: #333; border-style: solid; border-width: 10px 5px 5px 10px;"></div>
</body>
</html>
jEditorPane code:
jEditorPane1.setEditable(false);
try {
jEditorPane1.setPage(getClass().getResource("html/pie.html"));
} catch (IOException e) {
System.out.println(e);
}
Most of the solutions for Highcharts not displaying involved the ordering of the scripts, but I'm pretty sure that's not my problem.
Any ideas?
Try to use the WebView from JavaFX.
http://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm
IIRC it is based on Webkit and should be able to render highcharts correctly
Let's consider I have a HTML markup:
<div class="pull-right">
<div class="btn-group">
<a href="#" class="btn btn-default">
<i class="ico ico-prev"></i>
</a>
<div class="dropdown2 inline">
<a href="#" class="btn btn-default btn-shorter">
<strong>1-8</strong>
</a>
<ul class="dropdown-menu spec_width">
<li><a data-ico="1" href="#">10-30</a></li>
<li>30-40</li>
<li>40-50</li>
<li>50-60</li>
</ul>
</div>
<a href="#" class="btn btn-default">
<i class="ico ico-next"></i>
</a>
</div>
<span class="page-title">from<strong>45</strong></span>
.dropdown-menu {
padding: 0;
margin: 0;
left: -1px;
top: 37px;
font-size: 13px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
border: 1px solid #d1d4d3;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: #f9f9f9;
}
.dropdown-menu li > a {
color: #4d5357;
padding: 8px 20px;
}
.spec_width {
width: 72px;
min-width: 72px;
left: 50% !important;
margin-left: -36px;
max-height: 150px;
min-height: 30px;
float: left;
overflow: hidden;
display: block !important;
visibility: hidden;
}
.spec_width li {
line-height: 29px;
width: 100%;
text-align: center;
padding: 4px 0;
}
.spec_width li:hover {
background: #e1e1e1;
}
.spec_width li a {
padding: 0px 0;
background: none !important;
width: 100%;
text-align: center;
}
I use that markup in ModalWindow, and it works pretty good, but when I apply CSS class to <ul> tag I don't see it in the browser, but when I inspect element, it generates in HTML code. I think that it must be because I use it in ModalWindow, and something(script, style) is conflicted. Any ideas?
In order to use Wicket to create HTML emails, we need to fake the request/response cycle. I wrote this convenient method that renders a bookmarkable page (pageclass + pageparameters) to a string:
http://www.danwalmsley.com/render_a_wicket_page_to_a_string_for_html_email
protected String renderPage(Class extends Page> pageClass,
PageParameters pageParameters) {
//get the servlet context WebApplication application =
(WebApplication) WebApplication.get();
ServletContext context = application.getServletContext();
//fake a request/response cycle MockHttpSession servletSession =
new MockHttpSession(context); servletSession.setTemporary(true);
MockHttpServletRequest servletRequest = new MockHttpServletRequest(
application, servletSession, context); MockHttpServletResponse servletResponse = new MockHttpServletResponse(
servletRequest);
//initialize request and response servletRequest.initialize();
servletResponse.initialize();
WebRequest webRequest = new WebRequest(servletRequest);
BufferedWebResponse webResponse = new
BufferedWebResponse(servletResponse); webResponse.setAjax(true);
WebRequestCycle requestCycle = new WebRequestCycle(
application, webRequest, webResponse);
requestCycle.setRequestTarget(new
BookmarkablePageRequestTarget(pageClass, pageParameters));
try { requestCycle.request();
log.warn("Response after request: "+webResponse.toString());
if (requestCycle.wasHandled() == false) {
requestCycle.setRequestTarget(new WebErrorCodeResponseTarget(
HttpServletResponse.SC_NOT_FOUND)); } requestCycle.detach();
} finally { requestCycle.getResponse().close(); } return
webResponse.toString();
}
The problem was solved after I append target.appendJavaScript("launchJS();"); where I had AjaxRequestTarget in my pages.
I'm working with Struts 2 and jQuery. The plugin of timepicker doesn't work.
My JSP:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>TestPicker</title>
<sj:head jqueryui="true" locale="es" jquerytheme="redmond" />
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<style type="text/css">
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
</style>
<script type="text/javascript">
$(function(){
$('#txtTime').timepicker({});
});
</script>
</head>
<body>
<input id="txtTime" type="text" name="txtTime" value="" ></input>
</body>
</html>
It generates this HTML:
<script type="text/javascript" src="/Asistencia/struts/js/base/jquery-1.10.2.min.js">
</script>
<script type="text/javascript"
src="/Asistencia/struts/js/base/jquery.ui.core.min.js?s2j=3.6.1"></script>
<script type="text/javascript"
src="/Asistencia/struts/js/plugins/jquery.subscribe.min.js?s2j=3.6.1"></script>
<script type="text/javascript"
src="/Asistencia/struts/js/struts2/jquery.struts2.min.js?s2j=3.6.1"></script>
<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version="3.6.1";
jQuery.scriptPath = "/Asistencia/struts/";
jQuery.struts2_jquery.local = "es";
jQuery.struts2_jquery.gridLocal = "es";
jQuery.struts2_jquery.timeLocal = "es";
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup ({
cache: false
});
jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2.min.js?s2j=3.6.1");
});
</script>
<link id="jquery_theme_link" rel="stylesheet"
href="/Asistencia/struts/themes/redmond/jquery-ui.css?s2j=3.6.1"
type="text/css"/>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
I think this code ?s2j=3.6.1 gets the problem.
Page of TimePicker addon
Now, I will try with ama3+anytime plugin.
This parameter is not the problem, it is just for internal use and tells the plugin about version of plugin. The problem is in your jQuery code because you are trying to bind a timepicker on the element before this element is created. Try
$(document).ready(function(){
$('#txtTime').timepicker({
timeFormat: "hh:mm tt"
});
});