I am using swfupload plugin(http://demo.swfupload.org/Documentation/) to upload multiple files. I have the following swfupload settings object defined. Everything is working fine except the cursor doesn't change to 'hand' form. Here is the code:
var initialize_swfupload_for_image = function () {
if ($('#image-attach').length == 0){
return;
}
var url = $('#image-attach').data('url');
var params = $('#image-attach').data('params');
var buttonStyle = '.image-link {color: #FFF' +
';text-align: center'+
';} ' +
'.image-link:hover {color: #0FF' +
';} ';
var settings = {
upload_url:url,
flash_url: "<%= asset_path('swfupload/swfupload.swf') %>",
flash9_url: "<%= asset_path('swfupload/swfupload_fp9.swf') %>",
http_success:[ 200, 201, 204 ],
file_post_name:"file",
file_types: "*.jpg; *.gif; *.png; *.jpeg",
file_upload_limit:1,
file_queue_limit:0,
file_size_limit:"10 MB",
prevent_swf_caching:false,
custom_settings:{
progressTarget:"divImageProgressContainer",
cancelButtonId:"btnImageCancel"
},
button_placeholder_id:"image-attach",
button_text: "<span class='image-link'>Edit Photo</span>",
button_text_style: buttonStyle,
button_width: 90,
button_height: 20,
button_cursor:SWFUpload.CURSOR.HAND,
button_window_mode:SWFUpload.WINDOW_MODE.TRANSPARENT,
button_action:SWFUpload.BUTTON_ACTION.SELECT_FILE,
file_queued_handler:fileQueued,
file_queue_error_handler:fileQueueError,
file_dialog_complete_handler:fileDialogComplete,
upload_start_handler:uploadStartImage,
upload_error_handler:uploadError,
upload_progress_handler:uploadProgressImage,
upload_success_handler:uploadSuccessImage,
upload_complete_handler:uploadCompleteImage,
queue_complete_handler:uploadCompleteImage,
post_params:params
};
if (FlashDetect.versionAtLeast(9)) {
swf_image = new SWFUpload(settings);
} else {
//intentionally left blank
//TODO: javascript fallback when swfupload doesn't work
}
Any insights on why the cursor isn't changing on hovering over the object will be really helpful.
I have experienced the same problem. In my case the culprit was a 'px' that I had added accidentally to the button_width and button_height properties: button_width: "20px".
Your problem is obviously not the same one but it might be related in that you might have passed an invalid value to SWFUpload.
I copied your code and after cleaning it from the custom stuff I had no trouble getting the hand to show (didn't even change anything). Here's the code, tested with swfupload.swf 2.2.0.1 and swfupload.js 2.2.0 2009-03-25 (note that swfupload.swf and swfupload.js are in the same folder as the html file):
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<script type="text/javascript" src="swfupload.js"></script>
<script type="text/javascript" charset="utf-8">
var init = function () {
var settings = {
upload_url:'url',
flash_url: "swfupload.swf",
http_success:[ 200, 201, 204 ],
file_post_name:"file",
file_types: "*.jpg; *.gif; *.png; *.jpeg",
file_upload_limit:1,
file_queue_limit:0,
file_size_limit:"10 MB",
prevent_swf_caching:false,
custom_settings:{
progressTarget:"divImageProgressContainer",
cancelButtonId:"btnImageCancel"
},
button_placeholder_id:"image-attach",
button_text: "<span class='image-link'>Edit Photo</span>",
button_width: 90,
button_height: 20,
button_cursor:SWFUpload.CURSOR.HAND,
button_window_mode:SWFUpload.WINDOW_MODE.TRANSPARENT,
button_action:SWFUpload.BUTTON_ACTION.SELECT_FILE,
};
swf_image = new SWFUpload(settings);
}
</script>
</head>
<body id="index" onload="init()">
<div style="width:100px;height:100px;background-color:blue">
<div id="image-attach"></div>
</div>
</body>
</html>
My guess remains that maybe SWFUpload doesn't like one of the parameters (e.g. the <%asset stuff). Hope this helps anyway.
Related
i am trying some time now, to get the Chart.js in external file working with Thymeleaf. I was checking in countless external forums but couldnt find an answer. The closes to what i could find is the following
Thymeleaf external javascript file shares the module attributes with html file
but i still didn't manage to do it.
Here is my Controller
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
#Controller
public class ChartController {
#RequestMapping("/ExternalChart")
public String hello(Model model) {
String label[] = {"a","b","c","d","e","f","g","adasda","adasda2"};
int point[] = {5,3,7,1,8,3,4,50};
model.addAttribute("label",label);
model.addAttribute("point",point);
return "ExternalChart";
}
}
html file is located in src/main/resources/templates/
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link href="../static/css/Layout.css" th:href="#{/css/test.css}"
rel="stylesheet" />
<link href="../static/js/drawChart.js" th:href="#{/js/drawChart.js}"
rel="javascript" />
</head>
<body>
<h2>Donkey</h2>
<p>punch</p>
<canvas id="ChartDemo"></canvas>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script type="text/javascript" th:inline="javascript"
th:src="#{/js/drawChart.js}">
/*<![CDATA[*/
var xAxisData = /*[[ ${label} ]]*/[];
var yAxisData = /*[[ ${point} ]]*/[];
drawchart(xAxisData, yAxisData);
/*]]>*/
</script>
</body>
</html>
My javascript. it is located in src/main/resources/static/js
function drawchart(xAxisData, yAxisData) {
var ctx = document.getElementById("ChartDemo").getContext('2d');
var ChartDemo = new Chart(ctx, {
type : 'line',
data : {
labels : xAxisData,
datasets : [ {
label : "Chart-1",
borderColor : 'rgb(255, 0, 0)',
lineTension : 0,
fill : false,
data : yAxisData,
}, ]
},
options : {
responsive : true,
}
});
}
What i have noticed is that the attributes xAxisData and yAxisData get the values, but it seams that the drawChart(xAxisData,yAxisData) doesn't not get executed in browser.
I assume that i am making some silly mistake, and prospects of me finding it alone is close to zero. Thanks to anybody even trying to help me out
BR HK
p.s. i am really new with JS
I kind of have an answer. In this youtube video
https://www.youtube.com/watch?v=AEy7Hlz58bw? it is explained how to "externalize" JavaScript files. However, it is not really intuitive.
Javascript had to be written without function() part (which is something that i dont really understand)
//function done(xAxisData, yAxisData) {
var ctx = document.getElementById("ChartDemo").getContext('2d');
var ChartDemo = new Chart(ctx, {
type : 'line',
data : {
labels : xAxisData,
datasets : [ {
label : "Chart-1",
borderColor : 'rgb(10, 0, 0)',
lineTension : 0,
fill : false,
data : yAxisData,
}, ]
},
options : {
responsive : true,
}
});
//}
and respective HTML needs to look like this
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link href="../static/css/Layout.css" th:href="#{/css/test.css}"
rel="stylesheet" />
<link href="../static/js/drawChart.js" th:href="#{/js/drawChart.js}"
rel="javascript" />
</head>
<body>
<h2>Donkey</h2>
<p>punch</p>
<canvas id="ChartDemo"></canvas>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var xAxisData = /*[[ ${label} ]]*/[];
var yAxisData = /*[[ ${point} ]]*/[];
/*]]>*/
</script>
<script src="/js/drawChart.js"></script>
</body>
</html>
basically part where attributes xAxisData and yAxisData are initialized, could not contain the external script file.
If i manage to find more suitable solution, i will be glad to post it as an update to this answer as i have noticed that a lot of people get stuck in similar problems
BR DK
I would like to do the equivalent of the following Python in stand-alone BokehJS
color_mapper = bokeh.models.mappers.LogColorMapper('Viridis256',low=vmin,high=vmax)
How do I do it? Where are the color mappers located in the javascript CDN files?
They don't seem to be here, for example:
https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.7.js
and not here either:
https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.7.js
I am trying to follow examples like these:
https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html#minimal-complete-example
Thanks in advance
After reading Bokeh docs and js source this seems to work with version 0.12.5
var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});
I did try to get some sane result in example below but without much success. Maybe you can improve this code further. This is based on python source from Updating color mapper in a bokeh plot with taptool
Try to click on button "Add some data!" many times, more then 10.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.css" type="text/css"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.5.min.js"></script>
<title> by bokeh</title>
</head>
<body>
<div>
<div id="myplot" />
</div>
<button onclick="addPoint()">Add some data!</button>
<script type='text/javascript'>//<![CDATA[
// arrays to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [Math.random() * 10.0], y: [Math.random() * 10.0], humidity: [0, 10.0] }
});
var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var plot = Bokeh.Plotting.figure({title:'Example of Random data', tools: tools, height: 300, width: 300});
var pglyph = plot.patches({ field: "x" }, { field: "y" },
{ fill_color: { field: "humidity", transform: color_mapper}},
{ source: source, alpha: 1, line_width: 4})
var scatterData = plot.line({ field: "x" }, { field: "y" },
{ source: source, line_width: 10 });
// Show the plot, appending it to the end of the current
// section of the document we are in.
Bokeh.Plotting.show(plot, document.getElementById('myplot'));
function addPoint() {
// The data can be added, but generally all fields must be the
// same length.
source.data.x.push(Math.random() * 10.0);
source.data.y.push(Math.random() * 10.0);
// Also, the DataSource object must be notified when it has changed.
source.trigger('change');
}
//]]>
</script>
</body>
</html>
Models are located inside the main JS file (at least, for Bokeh 0.12.9): https://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.js
You can get LogColorMapper in your code by using:
Bokeh.require('models/mappers/log_color_mapper').LogColorMapper
I have already gone through this link
Chart.js - Doughnut show tooltips always?
I have implemented the code in the same way on my machine but the chart is not appearing.
The following is my code:
HTML:
<!doctype html>
<html>
<head>
<title>Doughnut Chart</title>
<script src="Chart.js"></script>
</head>
<body>
<div>
<canvas id="chart" width="200" height="200"/>
</div>
</body>
JS:
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870"
}
]
var options =
{
tooltipTemplate: "<%= value %>",
onAnimationComplete: function()
{
this.showTooltip(this.segments, true);
},
tooltipEvents: [],
showTooltips: true
}
var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data, options);
Please can anybody help me out with this trouble?
Or you could forget about jquery leave the <head></head as was in the code you posted and substitute
var context = $('#chart').get(0).getContext('2d');
with
var context = document.getElementById("chart").getContext("2d");
You just have to include this line in your html file to include jquery
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
In the code above seems to miss the ref to jquery between <head></head> tags
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
$.getJSON("ticketPriceInArray.js",
function(json) {
var ticketPriceArray=[json.tickets[0].price, json.tickets[1].price,
json.tickets[2].price, json.tickets[3].price, json.tickets[4].price,
json.tickets[5].price];
alert(json.tickets[0].type);
var inputWord =$("#keyword").val();
if (inputWord=="A"){$("#result").text(ticketPriceArray[0]);}
if (inputWord=="B"){$("#result").text(ticketPriceArray[1]);}
if (inputWord=="C"){$("#result").text(ticketPriceArray[2]);}
if (inputWord=="D"){$("#result").text(ticketPriceArray[3]);}
if (inputWord=="E"){$("#result").text(ticketPriceArray[4]);}
if (inputWord=="F"){$("#result").text(ticketPriceArray[5]);}
});
});
});
</script>
Here is "ticketPriceInArray.js"
{
"tickets":[
{
"type":"A Ticket",
"price":220,
},
{
"type":"B Ticket",
"price":180,
},
{
"type":"C Ticket",
"price":120,
},
{
"type":"D Ticket",
"price":100,
},
{
"type":"E Ticket",
"price":80,
},
{
"type":"F Ticket",
"price":50,
}
]
}
This is a simple html where when the corresponding text inputed, the corresponding ticket price will show in the html after a button-click. All the ticket info is stored in a .json file named "ticketPriceInArray.js" and I have been trying to read it using $.getJSON(), but unfortunately I haven't been able to get any success. The weird thing is I didn't get any warning on anything so I couldn't fix it. Please see if you can give me any suggestions. Thank you.
By adding an AJAX error handler, I received this
"parsererror" SyntaxError: Unexpected token }
The problem is the trailing commas after each price property.
The following example is working fine in FF and Chrome with the exact JSON you provided. In IE you will have to remove the commas after the prices, as Phil already said.
In my test both the test.html and test.js were placed in my apache server root; viewing the files directly from my desktop into my browser didn't work apparently due to security restrictions.
<html>
<head></head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
$.getJSON("test.js", function(json) {
for (var i in json.tickets) {
var type = json.tickets[i].type;
var price = json.tickets[i].price;
$('#result').append('<span>type: ' + type+ ', price: ' + price + '</span><br />');
}
});
});
});
</script>
<button id="Button1">click me</button>
<div id="result"></div>
</body>
</html>
I suggest you use http://jsonlint.com/ to validate your JSONs; or just rely on a good encoder instead of doing it by hand ;)
A little bit different approach to solving this problem. This is assuming that you aren't changing your ticket prices based on some data that you pass to the url.
ticketPriceInArray.js
{
"A" : 220,
"B" : 180,
"C" : 120,
"D" : 100,
"E" : 80,
"F" : 50
};
main file
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript">
var ticket_prices = {};
$(function() {
$("#Button1").click(function() {
$.getJSON("ticketPriceInArray.js", function(returnedJSON) {
ticket_prices = returnedJSON;
$("#result").text( ticket_prices[ $("#keyword").val() ] );
});
});
});
</script>
If there are any considerations (or questions about my assumptions) let me know and I will update based on that.
Assuming the following facts:
you're using firefox
there is no traffic in the network-tab when you click on #Button1
there are no errors logged
... I would like to say:
the element you click on is not $("#Button1")
Are you sure that the element you click on has the ID "Button1" and that there is only one element using that ID ?
Are you running this from a webserver or from your local filesystem?
My app is supposed to draw a grid over an image and provide you with the coordinates of that grid. This however does not seem to work in I.E., Safari, and Firefox when the image is hosted on my local machine. When I host the photo on Picasa the images show up fine. This is working in Chrome. The images will eventually be hosted on my server but I am working with it locally first. I am really new to this. Any help would be greatly appreciated. Thank you
Here is the HTML and javascript I am using:
<!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>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<meta charset=utf-8 />
<title>Grid test</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<link rel="stylesheet" type="text/css" href="css\grid_style.css">
<img src="c:\EA_A02_N_1-4_5mM_Xgal_7d_B.cropped.resized.grey.png" id="img"/>
<script>
function SetGrid(el) {
var size = el.getSize();
var coord = el.getCoordinates();
var gridTable = new Element('table', {
'id' : 'gridTable',
'styles' : {
'position': 'absolute',
'width' : size.x,
'height' : size.y,
'top' : coord.top,
'left' : coord.left
}
});
var numcols = 48;
var numrows = 32;
var cellSize = {
width: size.x / numcols,
height: size.y / numrows
}
for (var row = 1; row<=numrows; row++){
thisRow = new Element('tr', {
'id' : row,
'class' : 'gridRow'
});
for(var col = 1; col<=numcols; col++){
thisCol = new Element('td', {
'id' : col,
'title': row + ' x ' + col,
'class' : 'gridCol0'
});
thisCol.inject(thisRow, 'bottom');
};
thisRow.inject(gridTable, 'bottom');
}
gridTable.addEvents({
// Add the click event to the gridTable
click: function(e) {
// Do something with the grid position.
alert(Math.floor((e.client.x - coord.left) / cellSize.width)
+ ', ' + Math.floor((e.client.y - coord.top)/ cellSize.height));
}
});
gridTable.inject(el.getParent());
}
window.addEvent('load', function() {
SetGrid($('img'));
}
);</script>
</body>
</html>
It's probably a security "zone" related problem. Browsers tend to be picky about allowing javascript from external URLs run alongside code that reads things off the local disk for fear of leaking confidential information.
Does it work if you host all the javascript locally too?