I'm having some problem with this function. I ask sorry if the code looks a bit confused.
Basically what i'm trying to do is to divide some elements between the top and bottom of the documents having between them the same space circa.
i wrote this code but seems like the first "for" cycle goes loop ever and ever again.
** update**
so i improved the code and now the problem seems to be the variable "ifc"(if-counter). It suppose to increase by one every time that one of the if or else if is completed , but as you can see on the console it always remain 0 .
anyone can help?
thanks
var sizewidth = window.innerWidth;
var sizeheight = 3000;
function initialPosition(){
var els = document.querySelectorAll('.ico');
var tb = Math.round(els.length * 0.4);
console.log(tb);
var lr = els.length - tb;
var distPixEachTopBottom = sizewidth / (tb/2);
console.log(distPixEachTopBottom);
var distPixEachLefRight = sizeheight / (lr/2);
var nextTop = 0;
var nextLeft = 0;
var nextBottom = 0;
var nextRight = 0 ;
for (i = 0; i < els.length; i++) {
var ifc = 0;
console.log('i' + i);
if(i < tb){
var sf = 0;
for(;;){
console.log('sf' + sf + 'tb ' + tb);
if(ifc > 1){
console.log('ifc'+ ifc);
ifc = 0;
break
}else if(ifc == 0){
els[i].style.top = 0 +'px';
els[i].style.left = nextTop + 'px';
console.log('ifc ' + ifc + 'i ' + i + 'nexttop' + nextTop)
nextTop = nextTop + distPixEachTopBottom;
ifc++;
break;
}else if(ifc == 1){
els[i].style.bottom = 0 +'px';
els[i].style.right = nextBottom + 'px';
console.log('ifc ' + ifc + 'i ' + i + 'nextbottom' + nextBottom)
nextBottom = nextBottom + distPixEachTopBottom;
ifc++;
break;
}else{
console.log('else if problem')
break;
}
}
}else{
}
}
initialPosition();
update
i created a pen as you asked
codepen
So basically of all the boxes the 40% of them (6 in this case) should be divided between top and bottom but they go just on top.
So I solved by myself .
I put the var ifc before then any function .
Anyway thanks everyone
Now there is a map of custom tile rules locally. There is already a custom JavaScript library that can be called normally. Now I need to replace this library with leaflet. How to use the algorithm in the old JavaScript library and leaflet to make the tile map Normal call?
The tile map projection rule is Mercator projection. The tile size is irregular. The width is 256 pixels. The height is the same on each line, but the different line heights are different. The old JavaScript library defines the ellipsoid parameters. Various levels of scale, rank number calculation rules, etc., now want to use leaflet to load these tile maps, how to use the old rules and leaflet combination?
MapBase defines various basic parameters, loadMapImage is a key function
function LoadMapImage() {
var tileLoadInfo = mapBase.getViewInfo();
MapInfo.Map.basemapslicedlayer.empty();
for (var i = 0; i < tileLoadInfo.TileInfo.length; i++) {
if (MapInfo.Map.Tiles[tileLoadInfo.TileInfo[i].Col + "_" + tileLoadInfo.TileInfo[i].Row + "_" + tileLoadInfo.Mode] == undefined) {
if (tileLoadInfo.Mode == 6) {
var src = DNCOptions.url + "&" + DNCOptions.paramX + "=" + tileLoadInfo.TileInfo[i].Row + "&" + DNCOptions.paramY + "=" + tileLoadInfo.TileInfo[i].Col + "&" + DNCOptions.paramZ + "=" + tileLoadInfo.TileInfo[i].Level + "&SessionID=" + WinfoDNCSessionID
} else if (tileLoadInfo.Mode == 8 || tileLoadInfo.Mode == 9) {
var level = tileLoadInfo.Level + 2;
if (tileLoadInfo.Mode == 9) {
level = tileLoadInfo.Level - 3
}
src = MapInfo.ServicePath + "?REQUEST=GetMap&SERVICE=CacheMap&Y=" + tileLoadInfo.TileInfo[i].Col + "&X=" + tileLoadInfo.TileInfo[i].Row + "&LEVEL=" + level + "&LAYERS=" + DNCOptions.layername + "&SessionID=" + WinfoDNCSessionID
} else {
var src = MapInfo.ServicePath + "?REQUEST=GetMap&SERVICE=WINFODNC&X=" + tileLoadInfo.TileInfo[i].Col + "&Y=" + tileLoadInfo.TileInfo[i].Row + "&LEVEL=" + tileLoadInfo.Level + "&LAYERS=" + tileLoadInfo.Mode + "&SessionID=" + WinfoDNCSessionID
}
MapInfo.Map.Tiles[tileLoadInfo.TileInfo[i].Col + "_" + tileLoadInfo.TileInfo[i].Row + "_" + tileLoadInfo.Mode] = w$("<img>").css({
position: "absolute",
left: tileLoadInfo.TileInfo[i].Offset_x,
top: tileLoadInfo.TileInfo[i].Offset_y
}).attr("src", src)
}
MapInfo.Map.basemapslicedlayer.append(MapInfo.Map.Tiles[tileLoadInfo.TileInfo[i].Col + "_" + tileLoadInfo.TileInfo[i].Row + "_" + tileLoadInfo.Mode].css({
position: "absolute",
left: tileLoadInfo.TileInfo[i].Offset_x,
top: tileLoadInfo.TileInfo[i].Offset_y
}))
}
}
function GetTileInfoByViewportParam(vp) {
var Box = {};
var i, row1, row2, col1, col2, hTileSize;
var L, R, T, B;
var LT = ScreenPoint2Coordinate(vp, 0, 0);
Box.Top = LT[0];
Box.Left = LT[1];
var RB = ScreenPoint2Coordinate(vp, vp.Width, vp.Height);
Box.Bottom = RB[0];
Box.Right = RB[1];
var rc = CalculateTile(LevelZeroTileSizeDegrees, Box, vp.Level);
row1 = rc[0];
row2 = rc[2];
col1 = rc[1];
col2 = rc[3];
var LRTB = CalculateTileExtend(LevelZeroTileSizeDegrees, vp.Level, row1, col1);
L = LRTB[0];
R = LRTB[1];
T = LRTB[2];
B = LRTB[3];
var Offset = Coordinate2ScreenPoint(vp, T, L);
vp.Offset_x = Offset[0];
vp.Offset_y = Offset[1];
MapViewInfo.Level = vp.Level;
MapViewInfo.Box = Box;
i = 0;
var offsety = vp.Offset_y;
MapViewInfo.TileInfo = [];
for (var j = row1; j >= row2; j--) {
hTileSize = CalculateTileSize(vp.Level, j, col1);
var offsetx = vp.Offset_x;
for (var z = col1; z <= col2; z++) {
var tileInfo = {};
tileInfo.Row = j;
tileInfo.Col = z;
tileInfo.Height = hTileSize;
tileInfo.Widht = TileSize;
tileInfo.Offset_x = offsetx;
tileInfo.Offset_y = offsety;
offsetx += TileSize;
MapViewInfo.TileInfo[i] = tileInfo;
i++
}
offsety += hTileSize
}
return MapViewInfo
};
According to the default initialization map method of leaflet, the parameters can only be retrieved to the blank tile.
The script works great for adding items on invoice however i cant figure how to convert the data using .toFixed(2) to show $10.00 instead of 10. I get an error every time I try to add .toFixed(2) . thank you
<script type="text/javascript">
function myFunction() {
var answer = document.getElementById('total');
var x = document.getElementById('itemprice1');
var y = document.getElementById('itemprice2');
var z = document.getElementById('itemprice3');
var w = document.getElementById('itemprice4');
var taxt = document.getElementById('taxtot');
var thetot = document.getElementById('thetot');
// parseFloat converts to values, otherwise you'll concatenate the strings.
answer.value = parseFloat("0" + x.value) + parseFloat("0" + y.value) + parseFloat("0" + z.value) + parseFloat("0" + w.value);
}
function myFunction1() {
var answer = document.getElementById('total');
var taxt = document.getElementById('taxtot');
var thetot = document.getElementById('thetot');
thetot.value = parseFloat("0" + answer.value) + parseFloat("0" + taxt.value);
if (thetot > "0") {
{
//function myFunction2()
var taxt = document.getElementById('taxtot');
var tx1 = document.getElementById('tax1');
var tx2 = document.getElementById('tax2');
var tx3 = document.getElementById('tax3');
var tx4 = document.getElementById('tax4');
var x = document.getElementById('itemprice1');
var y = document.getElementById('itemprice2');
var z = document.getElementById('itemprice3');
var w = document.getElementById('itemprice4');
var answer = document.getElementById('total');
taxt.value = parseFloat("0" + tx1.value) * ("0" + x.value) + parseFloat("0" + tx2.value) * ("0" + y.value) + parseFloat("0" + tx3.value) * ("0" + z.value) + parseFloat("0" + tx4.value) * ("0" + w.value);
}
}
}
</script>
Presumably your controls are in a form, so you can reference them simply using their name in the form. You can also convert strings to numbers using unary +:
function myFunction(formId) {
var f = document.getElementById(formId);
var answer = f.total;
var x = +f.itemprice1.value;
var y = +f.itemprice2.value;
var z = +f.itemprice3.value;
var w = +f.itemprice4.value;
var taxt = f.taxtot;
var thetot = f.thetot;
// Presumably here is where you want to use toFixed
answer.value = '$' + (x + y + z + w).toFixed(2);
}
function to_dollar_string(amount)
{
return "$" + amount.toFixed(2);
}
to_dollar_string(10);
=> "$10.00"
to_dollar_string(10.567);
=> "$10.57"
So, i'm adding 2 characters 4 levels together (hp, attack, strength and defense) and then comparing them. However I am having a problem. when the numbers are added together they're added together as a string so it outputs as follows. 9060951/99709940 instead of 246 (90+60+95+1)/308 (99+70+99+40). Here is what I am doing.
function calculate(player1, player2) {
var total1 = player1.getTotal();
var total2 = player2.getTotal();
var differencePercentage;
if(total1 > total2) {
differencePercentage = total2 + "/" + total1 + " = " + (total2/total1);
} else {
differencePercentage = total1 + "/" + total2 + " = " + (total1/total2);
}
var percentage = differencePercentage;
return percentage;
}
function Player(hp, attack, strength, defense) {
this.hp = parseInt(hp);
this.attack = parseInt(attack);
this.strength = parseInt(strength);
this.defense = parseInt(defense);
this.getTotal = function() {
var total = 0;
total = hp + attack + strength + defense;
return total;
}
}
Why is this happening?
You are parsing the Ints into this.hp, this.attack etc. in your Player function but not into the getTotal function
Try this
this.getTotal = function() {
var total = 0;
total = this.hp + this.attack + this.strength + this.defense;
return total;
}
I'm using a JQuery/PHP script which displays 12 clocks on a page. The Javascript file calls a PHP file to determine the timezone offset, but with 12 clocks to display, 12 PHP requests is crashing my page.
JS FILE
/*these are the div id names you added to your html*/
var clockAllDivs = [
"clock0",
"clockNYC",
"clockTOR",
"clockVAN",
"clockLAX",
"clockFRNK",
"clockSAO",
"clockTOK",
"clockBEI",
"clockHON",
"clockLONDON",
"clockPARIS",
"clockSYDNEY"
];
var tz = jstz.determine(); // Determines the time zone of the browser client
tz.name();
/*get timezone from this list: http://php.net/manual/en/timezones.php*/
var timeZones = [
tz.name(),
"America/New_York",
"America/Toronto",
"America/Vancouver",
"America/Vancouver",
"Europe/Zurich",
"America/Sao_Paulo",
"Asia/Tokyo",
"Asia/Hong_Kong",
"Asia/Hong_Kong",
"Europe/London",
"Europe/Paris",
"Australia/Sydney"
];
/*titles you want to show for each clock*/
var clockTitles = [
tz.name(),
"Los Angeles",
"Melbourne",
"Kathmandu",
"Tokyo",
"Johannesburg"
];
var useTitle1 = false;
var useTitle2 = false;
var clockWidthHeight = 118;//width and height of the clock
var distanceBetweenClockTitle = 5;
var secondHandSpeed = 100;//in ms, the lower the number, the faster
var smoothRotation = false;//true or false
var useSecondHand = false;//set to false if you don't want to see the 2nd hand
/*location of the images*/
var clockFaceImg = "img/clockBg.png";
var hourHandImg = "images/hourHand.png";
var minuteHandImg = "images/minuteHand.png";
var secondHandImg = "images/secondHand.png";
var amImg = "images/am.png";
var pmImg = "images/pm.png";
/*location of the high res images for retina display*/
var clockFaceHighResImg = "img/clockBgHighRes.png";
var hourHandHighResImg = "images/hourHandHighRes.png";
var minuteHandHighResImg = "images/minuteHandHighRes.png";
var secondHandHighResImg = "images/secondHandHighRes.png";
var amHighResImg = "images/amHighRes.png";
var pmHighResImg = "images/pmHighRes.png";
/*text for days and months*/
var dayText = [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
];
var monthText = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
///////////////////////////////
//Do not edit below this line//
///////////////////////////////
var clockDivs = [];
var offsets = [];
var minuteHand;
var hourHand;
var secondHands = [];
var minuteHands = [];
var hourHands = [];
var ams = [];
var pms = [];
var retina = false;
var imgsLoaded = 0;
var imagesToLoad = 6;
var callInterval = 1000;
var thisOffset;
var formerHr = [];
var isStart = true;
var tzChecked = 0;
//once the page is ready . . .
$( document ).ready(function() {
var dNow = new Date();
thisOffset = dNow.getTimezoneOffset();//figure out user's timezone
//get the timezone info for each of your clocks
for(var i = 0;i<clockAllDivs.length;i++){
getTZOutput(i);
}
});
//build each clock
function AnalogClock(){
retina = window.devicePixelRatio > 1;//check if retina
//if it's high res, use the high res images
if(retina){
clockFaceImg = clockFaceHighResImg;
hourHandImg = hourHandHighResImg;
minuteHandImg = minuteHandHighResImg;
secondHandImg = secondHandHighResImg;
amImg = amHighResImg;
pmImg = pmHighResImg;
}
//determine if you want to use the second hand
if(useSecondHand == false){
imagesToLoad = imagesToLoad - 1;
}
//change the call interval for smooth rotation
if(smoothRotation == true && useSecondHand){
callInterval = 50;
}
//create each clock visually
for(var i = 0;i<clockAllDivs.length;i++){
var clockAllDiv = $("#" + clockAllDivs[i]);
//add bg
clockAllDiv.append("<div id='analog-clock" + i + "' class='myClock'></div>")
//add title
if(useTitle1 || useTitle2){
var clockTitlePos = distanceBetweenClockTitle + clockWidthHeight;
if(useTitle1)clockAllDiv.append("<div><p class='clockTitle'>" + clockTitles[i] + "</p></div>");
if(useTitle2){
clockAllDiv.append("<div><p id='title2_" + i + "' class='clockTitle2'></p></div>");
}
$('.clockTitle').css({"margin-top":clockTitlePos + 'px'});
if(useTitle2 && !useTitle1)$('.clockTitle2').css({"margin-top":clockTitlePos + 'px'});
}
clockDivs[i] = "analog-clock" + i;
var clockDiv = $("#" + clockDivs[i]);
//set clock holder css
clockDiv.css({"height":clockWidthHeight + "px", "width":clockWidthHeight + "px", "position":"relative"});
//add more graphical elements
clockDiv.append("<img id='bg' src=" + clockFaceImg + " height="+clockWidthHeight+" width="+clockWidthHeight+" />");
//add the div for am/pm
clockDiv.append("<img id='am' class='ampm' src='" + amImg + "' width='28' height='18' />");
clockDiv.append("<img id='pm' class='ampm' src='" + pmImg + "' width='28' height='18' />");
//add hands
$("<img id='hourHand' src=" + hourHandImg + " />").appendTo("#" + clockDivs[i]);
clockDiv.append("<img id='minuteHand' src=" + minuteHandImg + " />");
if(useSecondHand)clockDiv.append("<img id='secondHand' src=" + secondHandImg + " />");
//define elements
if(useSecondHand)secondHands[i] = $("#" + clockDivs[i] + " #secondHand");
minuteHands[i] = $("#" + clockDivs[i] + " #minuteHand");
hourHands[i] = $("#" + clockDivs[i] + " #hourHand");
ams[i] = $("#" + clockDivs[i] + " #am");
pms[i] = $("#" + clockDivs[i] + " #pm");
if(i == 0){
//check to see if the images are loaded
$('#bg').load(function() { checkIfImagesLoaded(); });
if(useSecondHand)secondHands[i].load(function() { checkIfImagesLoaded(); });
minuteHands[i].load(function() { checkIfImagesLoaded(); });
hourHands[i].load(function() { checkIfImagesLoaded(); });
ams[i].load(function() { checkIfImagesLoaded(); });
pms[i].load(function() { checkIfImagesLoaded(); });
}
//set clock css
var handIds = $("#" + clockDivs[i] + " #bg, #hourHand, #minuteHand, #secondHand");
handIds.css({"position":"absolute"});
}
};
function checkIfImagesLoaded(){
//this gets called each time an image is loaded
imgsLoaded++;
if(imgsLoaded == imagesToLoad){//once all the images are loaded
for(var i = 0;i<clockAllDivs.length;i++){
//adjust widths and heights if 2x resolution
if(retina){
if(useSecondHand)secondHands[i].css( { "height":secondHands[i].height()/2, "width":secondHands[i].width()/2 } );
minuteHands[i].css( { "height":minuteHands[i].height()/2, "width":minuteHands[i].width()/2 } );
hourHands[i].css( { "height":hourHands[i].height()/2, "width":hourHands[i].width()/2 } );
}
//set the position of the hands
if(useSecondHand)secondHands[i].css( { "left": (clockWidthHeight - secondHands[i].width())/2 + "px", "top": (clockWidthHeight - secondHands[i].height())/2 + "px" });//set x and y pos
minuteHands[i].css( { "left": (clockWidthHeight - minuteHands[i].width())/2 + "px", "top": (clockWidthHeight - minuteHands[i].height())/2 + "px" });//set x and y pos
hourHands[i].css( { "left": (clockWidthHeight - hourHands[i].width())/2 + "px", "top": (clockWidthHeight - hourHands[i].height())/2 + "px" });//set x and y pos
//if(useSecondHand)setSecondStart();
//fade the clocks in
$("#" + clockAllDivs[i]).animate({ opacity:1 }, "slow");
}
//call rotatehands function
setInterval(function(){
rotateHands();
}, callInterval);//1000 = 1 second
if(!smoothRotation)rotateHands();//make sure they start in the right position
}
}
function rotateHands(){
for(var i = 0;i<clockAllDivs.length;i++){
//get current time/date from local computer
var now = new Date();
now.setMinutes(now.getMinutes() + offsets[i] + thisOffset);
//set the second hand
var secondAngle = 6 * now.getSeconds();//turn the time into angle
if(smoothRotation)var smoothSecondAngle = now.getMilliseconds()/1000 * 6 + secondAngle;
var currentHr = now.getHours();
if(formerHr[i] && currentHr != formerHr[i]){
getTZOutput(i);
setDayMonthTxt(now, i);
}
formerHr[i] = currentHr;
if(useSecondHand){
if(smoothRotation){
secondHands[i].rotate(smoothSecondAngle, 'abs');//set the hand angle
}else{
if(secondAngle == 0){
secondHands[i].rotate(-6, 'abs');//set the hand angle
}
secondHands[i].rotate({ animateTo:secondAngle, duration:secondHandSpeed}, 'abs');
}
}
//set the minute hand
var minuteAngle = 6 * now.getMinutes() + secondAngle/60;//turn the time into angle
minuteHands[i].rotate(minuteAngle, 'abs');//set the hand angle
//set the hour hand
var hourAngle = 360/12 * currentHr;//turn the time into angle
var hourAngleWOffset = hourAngle + minuteAngle/12;
hourHands[i].rotate(hourAngleWOffset%360, 'abs');//set the hand angle
}
isStart = false;
}
//get timezone info from the
function getTZOutput(thisNum) {
$.ajax({
type: "POST",
url:'timezone-clock-scripts/getTimezoneTime.php',
data: {thisTz:timeZones[thisNum]},
dataType: "json",
success: function (response) {
offsets[thisNum] = response/60;
allTZChecked();
},
error: function (){
console.log("error");
}
});
}
//make sure the php script has called first
function allTZChecked(){
tzChecked++;
if(tzChecked == clockAllDivs.length){
AnalogClock();
for(var i = 0;i<clockAllDivs.length;i++){
var now = new Date();
now.setMinutes(now.getMinutes() + offsets[i] + thisOffset);
setDayMonthTxt(now, i);
}
}
}
function setDayMonthTxt(now, thisNum){
var thisDay = dayText[now.getDay()];
var thisMonth = monthText[now.getMonth()];
var thisDate = now.getDate();
var thisYear = now.getFullYear();
//this is what the actual strong of text looks like, but you can modify it as you please.
if(useTitle2)$("#title2_" + thisNum ).html(thisDay + " " + thisMonth + " " + thisDate + ", " + thisYear);
//determine am/pm
if(now.getHours() < 12){
ams[thisNum].fadeIn();
pms[thisNum].fadeOut();
}else{
ams[thisNum].fadeOut();
pms[thisNum].fadeIn();
}
}
PHP FILE
<?php
$tzTxt = $_REQUEST['thisTz'];
$date = new DateTime();
$tz = new DateTimeZone($tzTxt);
$date->setTimezone($tz);
echo $date->format(Z);
//echo $date;
?>
Sometimes the page will reload, other times I get a a "Connection Was Reset" error.
When I disable this script, everything works fine.
Is there a way to alter my PHP settings to allow this script to work, or should I explore another option?
If the problem is that your server cannot handle the simultaneous requests, there are a few options:
Only call your php script once and send the information of all clocks at once. You can have your script return a json object that contains all offsets. This is what I would do.
Call the function when the previous version has finished (in the callback or have it return a promise). Possible, but overly complicated and you will hit your server still with an extra request for each clock.