how to create mutiple rectangle on gmaps? Ask Question

I want to create multiple rectangle on gmaps but I don’t know where must I put the code.

This is my sample code

 function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: {lat: 37.0924, lng: -119.4179324},
      mapTypeId: 'terrain'
    });

	var contentString = '<div id="content">'+
        '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large 
        '</div>';
		
	  var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    var rectangle = new google.maps.Rectangle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: 
      new google.maps.LatLngBounds
  <?php 
	  $con = mysqli_connect("localhost","root","","test");
	  
	  $query=mysqli_query($con,"SELECT * FROM map");
	  $cc=mysqli_fetch_array($query);
	  ?>
      (
        new google.maps.LatLng (<?php echo $cc['nelat']; ?>, <?php echo $cc['nelng']; ?>),
		new google.maps.LatLng (<?php echo $cc['swlat']; ?>, <?php echo $cc['swlng']; ?>),
        ),

      
    });
	  rectangle.addListener('click', function() {
      infowindow.open(map, rectangle);
    });
  }
    #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Rectangles</title>
   
  </head>
  <body>
    <div id="map"></div>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAogXD-AHrsmnWinZIyhRORJ84bgLwDPpg&callback=initMap">
  </script>
</body>
</html>

I am not Getting Any Errors but When i am trying to click on Form my form Type Mouse does not appear Ask Question

My form is Getting no Errors on Chrome Developers Error code but i am not getting and Text field or anything in my forms it is a very easy task but it had become a headache for me i will be very Helpfull if you help me with this

 <section class="reservation">
        <img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
        <div class="wrapper">
            <div class="container-fluid">
                <div class=" section-content">
                    <div class="row">
                        <div class="col-md-5 col-sm-6">
                            <form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
                                      {{ csrf_field() }}

                                <div class="row">
                                    <div class="col-md-6 col-sm-6">

                                    <div class="form-group">
                                        <input type="text" class="form-control reserve-form empty iconified" name="name" id="name"
                                               placeholder="    Name">
                                    </div>
                                    <div class="form-group">
                                        <input type="email" name="email" class="form-control reserve-form empty iconified" id="email"  placeholder="    e-mail">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone"  placeholder="    Phone">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder="  Time">
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3"  placeholder="    We're listening"></textarea>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <button type="submit" id="submit" name="submit" class="btn btn-reservation">
                                        <span><i class="fa fa-check-circle-o"></i></span>
                                        Make a reservation
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

html onclick event: how to update a value based on argument given to the onclick Ask Question

I’m reviewing some javascript interview questions, and came upon a codepen with the following line:

<form oninput="result2.value=add(parseInt(c.value))(parseInt(d.value))">

I’ve tried to do something similar with a button press, and know see that I don’t understand the proper syntax to update my output value upon the button-press. It works fine in the codepen example I was emulating. Does anyone know what I’m missing here?

I know I could create a js function that specifically updates my result.value by referencing it directly, but I’m trying to make my add function general so that don’t have to rewrite function for future input and output id’s.

HTML:

<input id="inputA" type="number"/><br>
<input id="inputB" type="number"/><br>
<button onclick="result.value=add(inputA.value, inputB.value)">
Add A and B
</button>
<br>
<output id="result" value=""></output>

JS:

$(document).ready(function() {
    function add(a,b) {
    return a+b;
  }
});

Selecting Input Element by Name in IE, in iFrame, using AHK? Ask Question

There is a daily report that is used at work that records the starting, ending, and total run time of a particular process. There is an excel spreadsheet that is used for recording this time. It’s a simple process to do, but I’d like to automate it using AutoHotKey. However, I am running into issues because everything on the page is contained within iFrames.

Below is the DOM structure
HTML>frameset>frameset>frame>html>body>form>table>tbody>tr>td>table>tbody>tr>td>font>input

The input element is what I want to select. It is a Report Filter that I would like to send the name of the particular report to, and select ‘search’ so that this one particular report is called successfully.

I can return the text of the ‘font’ element above the ‘input’ element with the below line

a:= pwb.document.parentWindow.frames("FrameB").document.all.tags("font")[46].innertext

however, when I attempt to select the “input” element by name or by tag index, it doesn’t return anything.

a:= pwb.document.parentWindow.frames("FrameB").document.getElementsByName("ReportCodeFilter")[0].value

The above line returns nothing for AHK, and it only returns two double quotes in the JS console in IE. I can see within the HTML DOM that the value is set to the name of the report I want to search after I put it in. This is the only place the ‘name’ is used.

How can I create a randomizer in javascript which will redirect to a random webpage? Ask Question

My question is about how to create a travel destination generator for a school project (similar to this https://travelsp.in/) but my HTML keeps on having issues redirecting to the other webpages. Here’s my js:

var place = ['sydney', 'calgary', 'london'];
function differentPlace() {
var randomNumber= Math.floor(Math.random()*(place.length));
document.getElementById('placeDisplay').innerHTML=place[randomNumber];
}
if (placeDisplay=="calgary") {
 return window.location.href = "http://ide50-w.cs50.io:8080/calgary";
  }
else if (placeDisplay=="london") {
  return window.location.href = "http://ide50-w.cs50.io:8080/london";
}
  else if (placeDisplay=="sydney") {
  return window.location.href = "http://ide50-w.cs50.io:8080/sydney";
 }

and my html is:

 <body>
     <h2>Discover a new destination:</h2>
<div id="placeDisplay">
    </div>
    <button onclick="differentPlace()">Find your next journey!</button>
    <script src="javascript.js"></script>
 </body>

Multiple files upload with android doesnt work Ask Question

I’ve created an upload form. With a normal computer and IOS it works perfect. But when I use Android I can’t upload multiple files at once. Just one by one.

    <form id="galleryFooter" action="uploaddone.php" method="post" enctype="multipart/form-data">
 <center>   

    <input name="upload[]" type="file" multiple="multiple" accept="image/*, audio/*, video/*" />

    <script type="text/javascript">
function showButton() {
  document.Form.Button.style.display = "inline";
}

function checkit() {
  if (document.Form.Box.checked == false) {
    alert("Fehler!");
  } else {
    location.href = "index.php";
}
}
</script>


<input type="checkbox" name="regeln" value="gelesen" onChange="document.getElementById('submitButton').disabled = !this.checked;" /> Ich habe die Bedingungen* gelesen und bin einverstanden.
<br><br><br><br>
<input type="submit" value="Hochladen und bereitstellen" id="submitButton" name="submit" disabled="disabled" /> 

 <br><br>
</center>
</form>

Is there any chance to resolve this problem?

Re-Spin Wheel after Complete Stop Ask Question

How can I re-spin the wheel below, after it comes to a stop. Having one of those days where I just can’t figure it out.

I created a resetWheel function that resets the wheel once it comes to a complete stop. I tried inserting it once the wheel is locked and stopped, but it refuses to work with me. Thank you in advance for the feedback and help. Feel free to add to my existing code, since I’m still fairly new, any advice is good !

function rand(min, max) {
    return Math.random() * (max - min) + min;
}

var color = ['#6897bb', '#6dc066', '#f67f5c', '#cc5466', '#e6e6fa', '#fbc', '#f88', "#fbc", "#f67"];
var label = ['5', '3', '2', '1', '15', '6', '10', '0', "20", '0'];
var slices = color.length;
var sliceDeg = 360 / slices;
var deg = rand(0, 360);
var speed = 0;
var slowDownRand = 0;
var ctx = canvas.getContext('2d');
var width = canvas.width; // size
var center = width / 2; // center
var isStopped = false;
var lock = false;
var logged = false;
let totalScore = 0;

function deg2rad(deg) {
    return deg * Math.PI / 180;
}

function drawSlice(deg, color) {
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.moveTo(center, center);
    ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
    ctx.lineTo(center, center);
    ctx.fill();
}

function drawText(deg, text) {
    ctx.save();
    ctx.translate(center, center);
    ctx.rotate(deg2rad(deg));
    ctx.textAlign = "right";
    ctx.fillStyle = "#fff";
    ctx.font = 'bold 30px sans-serif';
    ctx.fillText(text, 130, 10);
    ctx.restore();
}

function drawImg() {
    ctx.clearRect(0, 0, width, width);
    for (var i = 0; i < slices; i++) {
        drawSlice(deg, color[i]);
        drawText(deg + sliceDeg / 2, label[i]);
        deg += sliceDeg;
    }
}

drawImg();
function resetWheel() {
    (anim());
}

startSpin.addEventListener("click", function anim() {
    deg += speed;
    deg %= 360;

    // Increment speed
    if (!isStopped && speed < 3) {
        speed = speed + 1 * 0.1;
    }
    // Decrement Speed
    if (isStopped) {
        if (!lock) {
            lock = true;
            slowDownRand = rand(0.959, 0.998);
        }
        speed = speed > 0.2 ? speed *= slowDownRand : 0;
    }

    if (lock && !speed) {
        var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
        ai = (slices + ai) % slices; // Fix negative index
        let score = label[ai];
        if (!logged) {
            console.log(score);

            totalScore = totalScore + score;
            console.log(totalScore)
            logged = true;


        }

    }

    drawImg();

    window.requestAnimationFrame(anim);
});
document.getElementById("stopSpin").addEventListener("mousedown", function() {
    isStopped = true;
    //setTimeout(loadPhrase, 2000); //waits for wheel to stop, then starts function
}, false);
#wheel {
    display: block;
    text-align: center;
    overflow: hidden;
}

#wheel:after {
    content: "";
    background: red;
    border: 2px solid white;
    position: absolute;
    top: -7px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -7px;
    transform: rotate(45deg)
}
    <div id="gameScreen">
        <div id="wheel">
            <canvas id="canvas" width="300" height="300"></canvas>

        </div>

        <br>
        <button id="startSpin">Spin!</button>
        <button id="stopSpin">Stop!</button>
        <div id="gameWrapper">
            <h1 id="game_header">Guess The Correct Letters</h1>
            <div id="display">



            </div>
          
        </div>
    </div>

Shouldn't I follow the OWASP DOM based XSS recommendations no matter where the payload is injected? Ask Question

I heard/read at various contexts that DOM based XSS is caused by untrusted client side input and developers need to follow instructions at the OWASP “DOM based XSS Prevention Cheat Sheet” in order to mitigate it.

My question is: Shouldn’t this guide be used irrespective of where the malicious payload is injected (client side which can be from DOM elements like URL, or server side which can be from parameters of immediate previous requests) if you are inserting untrusted data into javascript execution contexts?

Lets keep aside the debate of if it will be called DOM based XSS or not in the later case because I am more interested in knowing if this guide should be applied irrespective of where the payload is coming from (server/client) if you are putting untrusted data in execution contexts.

Linking to a specific tab from a href link Ask Question

I’m trying to link index.html with a href link to players.html — > Pele tab.

Here is my index.html code:

  <a href="players.html#client-panel-2"></a>

and my players.html

              <ul data-tabs="data-tabs" id="example-tabs" class="tabs">
                <li class="tabs-title is-active" tab-community-amenities="tab-community-amenities"
                    role="presentation">
                  <div class="tabs-link" data="#client-panel-0" role="tab" aria-controls="client-panel-0"
                       aria-selected="false" id="client-panel-0-label">Messi
                  </div>
                </li>
                <li class="tabs-title" tab-apartment-amenities="tab-apartment-amenities" role="presentation">
                  <div class="tabs-link" data="#client-panel-1" role="tab" aria-controls="client-panel-1"
                       aria-selected="false" id="client-panel-1-label">Pele
                  </div>
                </li>
                <li class="tabs-title" tab-pet-policy="tab-pet-policy" role="presentation">
                  <div class="tabs-link" data="#client-panel-2" role="tab" aria-controls="client-panel-2"
                       aria-selected="false" id="client-panel-2-label">Kaka
                  </div>
                </li>
                <li class="tabs-title" tab-parking-details="tab-parking-details" role="presentation">
                  <div class="tabs-link" data="#client-panel-3" role="tab" aria-controls="client-panel-3"
                       aria-selected="false" id="client-panel-3-label">Benzema ;)
                  </div>
                </li>
                <li class="tabs-title" tab-parking-details="tab-parking-details" role="presentation">
                  <div class="tabs-link" data="#client-panel-4" role="tab" aria-controls="client-panel-4"
                       aria-selected="false" id="client-panel-4-label">Berbatov
                  </div>
                </li>
              </ul>