Images load on localhost, but not loading when deployed to server - javascript

Hi good folk of Stackoverflow. I have a problem that's doing my head in. I have a Js file that loads images into my web app. When I test it on localhost, it loads the images just fine. I also have a "ticking" noise that loads from it that works locally. My problem arises when I deploy everything to my production server. My images dont display and my ticking noise doesn't play. I am hoping one of you can point me in the right direction as to why this is happening.
How my folder is setup
Here is my .js file:
// Super Wheel Script
jQuery(document).ready(function($){
$('.wheel-with-image').superWheel({
slices: [
{
text: 'images/1.png',
value: 1,
message: "Transactional Lend Pillar",
background: "#f3971c",
},
{
text: 'images/2.png',
value: 1,
message: "Commercial Property Finance Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/3.png',
value: 1,
message: "Agriculture Lend Pillar",
background: "#f3971c",
},
{
text: 'images/4.png',
value: 1,
message: "Structured Finance Solutions Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/5.png',
value: 1,
message: "Commercial Property Finance Lend Pillar",
background: "#f3971c",
},
{
text: 'images/6.png',
value: 1,
message: "ABF & FML Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/7.png',
value: 1,
message: "Transactional Lend Pillar",
background: "#f3971c",
},
{
text: 'images/8.png',
value: 1,
message: "Transactional Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/9.png',
value: 1,
message: "Agriculture Lend Pillar",
background: "#f3971c",
},
{
text: 'images/10.png',
value: 1,
message: "Structured Finance Solutions Lend Pillar",
background: "#00a4aa",
}
],
text : {
type: 'image',
color: '#CFD8DC',
size: 25,
offset : 10,
orientation: 'h'
},
line: {
width: 0,
color: "#78909C"
},
outer: {
width: 10,
color: "#e6e6e6"
},
inner: {
width: 10,
color: "#78909C"
},
marker: {
background: "#ff0000",
animate: 1
},
width: 700,
selector: "value",
});
var tick = new Audio('media/tick.mp3');
$(document).on('click','.wheel-with-image-spin-button',function(e){
$('.wheel-with-image').superWheel('start','value',1);
$(this).prop('disabled',true);
});
$('.wheel-with-image').superWheel('onStart',function(results){
$('.wheel-with-image-spin-button').text('Spinning...');
});
$('.wheel-with-image').superWheel('onStep',function(results){
if (typeof tick.currentTime !== 'undefined')
tick.currentTime = 0;
tick.play();
});
$('.wheel-with-image').superWheel('onComplete',function(results){
//console.log(results.value);
if(results.value === 1){
swal({
type: 'success',
title: "A question about...",
html: results.message
});
}else{
swal("Oops!", results.message, "error");
}
$('.wheel-with-image-spin-button:disabled').prop('disabled',false).text('Spin');
});
});

Related

Particles.js not working properly in .NET Core

NET MVC Core and I am trying to use Particles.js. I have already tried referencing a few tutorials, but am unable to solve this issue. This is how it normally looks like. https://vincentgarreau.com/particles.js/#default
I got this however, with big and super laggy buttons and also it does not occupy full screen nor does it have the hover action (whereby the circle moves away as the mouse approaches). The onclick circle works though. And the configuration shouldn't be wrong, as I downloaded the default one.
Update: Just before posting I managed to make it full screen. However, the big buttons and lagginess remains.
The following is my codes so far. I tried to search the id or class but due to the lack of documentation it is quite hard to find. Hope someone who knows it can help! Thank you very much :)
#{
ViewData["Title"] = "Home Page";
}
<div id="particles-js" style="background-color: rgb(0, 0, 0); background-image: url(""); background-size: cover; background-repeat: no-repeat; ba">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<script src="~/js/particles.js" data-turbolinks-track="reload" asp-append-version="true"></script>
<script>
particlesJS("particles-js", {
particles: {
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#fff'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#ff0000'
},
polygon: {
nb_sides: 5
},
image: {
src: '',
width: 100,
height: 100
}
},
opacity: {
value: 1,
random: false,
anim: {
enable: false,
speed: 2,
opacity_min: 0,
sync: false
}
},
size: {
value: 20,
random: false,
anim: {
enable: false,
speed: 20,
size_min: 0,
sync: false
}
},
line_linked: {
enable: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 3000,
rotateY: 3000
}
},
array: []
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'grab'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 100,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 200,
size: 80,
duration: 0.4
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
},
mouse: {}
},
retina_detect: false,
});
//var count_particles, stats, update;
//stats = new Stats;
//stats.setMode(0);
//stats.domElement.style.position = 'absolute';
//stats.domElement.style.left = '0px';
//stats.domElement.style.top = '0px';
//document.body.appendChild(stats.domElement);
//count_particles = document.querySelector('.js-count-particles');
//update = function () {
// stats.begin();
// stats.end();
// if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
// count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
// }
// requestAnimationFrame(update);
//};
//requestAnimationFrame(update);;
</script>
Update: I finally found the answer. To facilitate people who working on this in the future, make sure to use the download from the sidebar and not the one in the center.
Not this (the download in the center):
But this (the one at the bottom right side, "Download current config(json)"):

Plotly.js modebar, download as png, give png a name

I have a Plotly on my webpage and you can download it as a png by clicking the picture icon in the modebar. However when I click it, it downloads it as a png with the name new-plot, how can I give it a custom name?
My current code (var data is just data, so left it out) :
var layout = {
showlegend: true,
legend: {
x: 0,
y: 1
},
xaxis: {
title: 'Date',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: 'Sales',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
}
};
var options = {
scrollZoom: true,
showLink: false,
modeBarButtonsToRemove: ['zoom2d', 'pan', 'pan2d', 'sendDataToCloud', 'hoverClosestCartesian', 'autoScale2d'],
displaylogo: false,
displayModeBar: true,
};
Plotly.newPlot('tester', data, layout, options);
Use Plotly.downloadImage
https://plot.ly/javascript/plotlyjs-function-reference/#plotlydownloadimage
Add this to your modebar setup for the button callback:
Plotly.downloadImage({
filename: 'customNamedImage',
format: 'png', //also can use 'jpeg', 'webp', 'svg'
height: 500,
width: 500
});
Edit:
I ran a custom example and I think you will want to custimze your own download button in the modebar, like so:
Plotly.newPlot(gd, [{
y: [1, 2, 1],
line: { shape: 'spline' }
}], {
title: 'custom modebar button',
width: 400,
height: 700
}, {
showTips: false,
displayModeBar: true,
modeBarButtons: [[{
name: 'custom download button',
icon: Plotly.Icons.camera,
click: function (gd) {
Plotly.downloadImage(gd, {
filename: 'your_custom_name',
format: 'jpeg',
width: gd._fullLayout.width,
height: gd._fullLayout.height
})
}
}, 'toImage'
], []]
})
There's an easier way to do this in newer versions of Plotly (v1.38+). Use the toImageButtonOptions parameter in the config like this:
Plotly.newPlot(graphDiv, data, layout, {
toImageButtonOptions: {
filename: 'image_filename',
width: 800,
height: 600,
format: 'png'
}
});
You can leave out options you don't need to use the defaults.

jqGrid change selected row style ui-jqgrid ui-state-highlight for one grid only, not all the others on the same page

Our company uses hundreds of jqGrids. I am adding one to a page that already has jqGrids on that page. I may not alter the style or behavior for those grids. The new grid that I am adding (also a jqGrid) must have a unique selected row style (background white and borders rbg(153, 153, 153)).
If I change the jqGrid style on the page this works on the new grid, but changes the other grids. This is not allowed:
/This over-rides the normal jqGrid selected row style for the xyz grid/
.ui-jqgrid .ui-state-highlight { background: white; border-color: rgb(153, 153, 153); }
I have attempted to change the style when declaring the grid like this, but it didn't work:
ResultsGrid.jqGrid({
datatype: "local",
data: data,
minheight: 20,
width: 700,
height: '100%',
//altRows: true,
//altClass: 'myAltRowClass',
colNames: ['aaa', 'bbb', 'ccc', 'ddd', 'ccc', 'ddd', 'eee'],
colModel: [
{ name: 'aaa', hidden: true, key: true },
{ name: 'bbb', formatter: thingy.format_bbb },
{ name: 'ccc', hidden: true },
{ name: 'ddd', formatter: thingy.format_ddd, width: 80, align: 'center' },
{ name: 'eee', formatter: thingy.format_eee },
{ name: 'fff', hidden: true },
{ name: 'ggg', sortable: false, formatter: thingy.format_ggg, width: 25, align: 'center' }
],
viewrecords: true,
emptyrecords: 'No Data',
onSelectRow: function () {
//ResultsGrid.removeClass('ui-jqgrid ui-state-highlight');
//ResultsGrid.addClass('ui-jqgrid complaint_selectedrow');
//.ui-jqgrid .ui-state-highlight { background: white; border-color: rgb(153, 153, 153); }
//$("#table").removeClass('ui-jqgrid ui-state-highlight').addClass('ui-jqgrid complaint_selectedrow');
//$("#table").removeClass(' ui-state-highlight').addClass('complaint_selectedrow');
//$("head").append('<style type="text/css"></style>');
//var new_stylesheet = $("head").children(':last');
//new_stylesheet.html('.ui-jqgrid ui-state-highlight{background: white; border-color: rgb(153, 153, 153);}');
alert('This alert does pop-up when a row is selected.');
}
Please help if you have any ideas. Thanks in advance.
oh my gosh I fixed it, the right way by using javascript in the onSelectRow function, like this:
onSelectRow: function () {
var sheet = document.createElement('style');
sheet.innerHTML = ".ui-jqgrid .ui-state-highlight { background: white; border-color: rgb(153, 153, 153); }";
document.body.appendChild(sheet);
}
That did the trick!

How to show Qr Code in Kendo Grid?

This is my div but it outside kendo grid
<div>
<div id="qrUrl"></div>
</div>
This is my kendo grid field
columns: [
{
field: "Id",
},
{
title: "QrCode",
width: 300,
template: function(dataItem)
{
$(#Qrurl).kendoQRCode({
value: "www.google.com"+ dataItem.Id,
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
}
In this situation my Qrcode generated outside grid with uniq (url+id )
but i want to this all qrcode in my kendo grid.
i tried servel time this and another code but still not reached up to mark.
template: function(dataItem)
{
$('<div></div>')
.kendoQRCode({
value: "www.google.com"+ dataItem.Id,
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
}
If i tried with div id at that time i got qrcodes as per requirement but outside grid here, i want to complete this thing in my grid.
Please help me.
Thank you for advance.
The template function needs to return a string of the HTML that will be used. I would have the template create an empty DIV in the grid cell with a class="QRME" and a data attribute for the id. Then in the dataBound event of the grid, loop through all the QRME divs, get the id and create the QR codes:
$("#grid").kendoGrid({
columns: [ {
field: "Id",
}, {
title: "QrCode",
width: 300,
template: function(dataItem) {
return "<div class='QRME' data-id='" + kendo.htmlEncode(dataItem.Id) + "'></div>";
}
}],
dataSource: [ { Id: "1" }, { Id: "2" }, { Id: "3" } ],
dataBound: function(e) {
$("div.QRME").each(function(idx){
$(this).kendoQRCode({
value: "www.google.com"+ $(this).data("id"),
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
});
}
});
Working DEMO
I can't use dataBound and therefore I was looking for a solution that works with template.
First I make a div instance and put the QR code there and return outerHTML.
template: function(dataItem) {
return jQuery("<div class='qrcode'></div>")
.kendoQRCode({
value: kendo.htmlEncode(dataItem["Id"]),
errorCorrection: "M",
size: 60,
border: {
color: "#000",
width: 1
}
}).html();
}
working DEMO

Bootstrap datetimepicker calendar is not visible

I am using bootstrap 3 datetimepicker. Here Bootstrap datetimepicker calendar is not visible outside the grid. It is hiding inside the grid. Please see the jsfiddle.
http://jsfiddle.net/rtzxsa3e/
$(function () {
var data = [
{ rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },
{ rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
];
var obj = {
height:300,
title: "ParamQuery Grid with JSON Data",
scrollModel:{autoFit:true, theme:true}
};
obj.colModel = [
{ title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
{ title: "Company", width: 200, dataType: "string", dataIndx: "company" },
{ title: "DatePicker", width: 200, dataType: "string", dataIndx: "date",editable:false,
render : function(){
var date = '<div class="form-group" style="width:150px;margin-left:50px;text-align:center"><div class="input-group date" id="datetimepicker123"><input type="text" value="04/05/2012 00:00" class="form-control"><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>';
return date;
}
},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
];
$('body').on('mouseover','.input-group',function() {
$(".input-group.date").datetimepicker();
});
obj.dataModel = { data: data };
$("#grid_json").pqGrid(obj);
});
td.pq-grid-cell{
overflow:visible !important;
}
span.input-group-addon {
width: 27px;
}
<div id="grid_json" style="margin:100px;"></div>
If I click the picker, bootstrap calendar is open but it is not visible the whole calendar. I want to display the calendar outside the grid. I have given "overflow:visible" and "visibility:visible" but still it is not working. Please help me for do this.
You need to remove overflow:hidden; from parent containers also.
Add this css:
.pq-grid, .pq-grid-center, div.pq-grid-cont, .pq-grid-cont-inner {
overflow: visible!important;
}
Demo: http://jsfiddle.net/rtzxsa3e/2/
I am not supporting the use of !important here. You know your html code well. If you can assign more specific selector which can override the default css of grid plugin, then that will also work.

Categories