Connect search box for map - javascript

I am trying to create a search box and button for this map,
can anyone help me how to connect the search box to the map?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form class="example" action="/" style="margin:auto;max-width:300px">
<input type="text" placeholder="Search.." name="search2">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
<div class="mapouter">
<div class="gmap_canvas">
<iframe
width="600" height="500" id="gmap_canvas"
src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
</iframe>
embedgooglemap.net</div>
<style>
.mapouter {
text-align: right;
height: 500px;
width: 600px;
}
.gmap_canvas {
overflow: hidden;
background: none !important;
height: 500px;
width: 600px;
}
</style>
</div>
</body>
</html>

This can easily be done with Vanilla JavaScript.
On your html, bind the onkeyup event
<input type="text" onkeyup="search()" id="search-input" placeholder="Search.." name="search2">
And on your JavaScript file
function search() {
const input = document.getElementById('search-input');
console.log(input)
}

Related

How can I change the CHANGE ME text inside my script

I've tried this code on my pc and it doesn't work, does anyone know why?
There is this paragraph that contains the text CHANGE ME. It contains an id of "warning", now I want to change that text when someone clicks on the login button. It does not work on my pc. What am I doing wrong?
<!DOCTYPE html>
<html style="height: 100%; width: 100%; margin: 0;">
<head>
<title></title>
</head>
<body style="display: flex; height: 100%; width: 100%; margin: 0;">
<!-- maxlength="20"> -->
<form style="margin: auto; border: solid; padding: 10px;">
<label style="font-size: 40px;"> Welcome! </label>
<br>
<input id="passwordText" type="password" placeholder="Password" maxlength="20">
<input id="loginButton" type="button" value="Login" onclick="submit()">
<br>
<p id="warning">CHANGE ME</p>
</form>
<script>
function toggleWarningText(text)
{
document.getElementById('warning').innerHTML = text;
}
function submit()
{
//toggleWarningText("");
let password = document.GetElementById("passwordText").value;
//This togglewarningtext doesn't work
toggleWarningText(password);
//This below doesn't work either
if(password.length < 4)
{
toggleWarningText("The password must be at least 4 characters long");
}
else
{
toggleWarningText(password);
}
}
</script>
</body>
</html>
Change submit() function name.
It calls form submit() function.
<!DOCTYPE html>
<html style="height: 100%; width: 100%; margin: 0;">
<head>
<title></title>
</head>
<body style="display: flex; height: 100%; width: 100%; margin: 0;">
<!-- maxlength="20"> -->
<form style="margin: auto; border: solid; padding: 10px;">
<label style="font-size: 40px;"> Welcome! </label>
<br>
<input id="passwordText" type="password" placeholder="Password" maxlength="20">
<input id="loginButton" type="button" value="Login" onclick="clicked()">
<br>
<p id="warning">CHANGE ME</p>
</form>
<script>
function toggleWarningText(text)
{
document.getElementById('warning').innerHTML = text;
}
function clicked()
{
//toggleWarningText("");
let password = document.getElementById("passwordText").value;
//This togglewarningtext doesn't work
toggleWarningText(password);
//This below doesn't work either
if(password.length < 4)
{
toggleWarningText("The password must be at least 4 characters long");
}
else
{
toggleWarningText(password);
}
}
</script>
</body>
</html>
I think you're looking for
function toggleWarningText(text)
{
document.getElementById('warning').value= text;
}
instead of .innerHTML

How can i use coordinates provided in a form to position an element using jquery

I am using jquery to create an element, i would then like the user to input the x and y values of the desired position of the element, and then click a button so the element would then appear at that position. This is a rough code of how the page is setup. want #newelement to appear in a new position after the forms are filled and the button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>
Create div element using jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#parent {
height: 300px;
width: 600px;
background: green;
margin: 0 auto;
}
#newElement {
height: 100px;
width: 100px;
margin: 0 auto;
background-color: red;
position: absolute;
}
</style>
</head>
<div id= "parent"></div>
<br><br>
<!-- Script to insert div element -->
<script>
function insert() {
$("#parent").append('<div id = "newElement">A '
+ newdiv </div>');
}
</script>
<button onclick="insert()">
insert
</button>
<form id="form1">
<b>First Name:</b> <input type="text" name="positionX">
<br><br>
<b>Last Name: </b><input type="text" name="positionY">
<input type="submit" value="Submit">
</body>
</html>
Using the "top" and "left" style attributes can be used if you want to position the top left corner of the new div relative to the top left corner of the parent
i.e. something like
<!DOCTYPE html>
<html>
<head>
<title>
Create div element using jQuery
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#parent {
height: 300px;
width: 600px;
background: green;
}
#newElement {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="parent"></div>
<!-- Script to insert div element -->
<script>
function insert() {
// Get the X and Y from the form elements
var x = parseInt($("[name='positionX'").val());
var y = parseInt($("[name='positionY'").val());
var newElement = $('<div id="newElement">newdiv</div>').css({top: y, left:x});
$("#parent").append(newElement);
}
</script>
<button onclick="insert()">
insert
</button>
<form id="form1">
<b>X:</b><input type="text" name="positionX" />
<br />
<b>Y:</b><input type="text" name="positionY" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

Unable to hide div element using Jquery

In my code i am trying to hide a div element which contains a image, but when i run the code i get - ReferenceError: jQuery is not defined
})( jQuery ); in the file jquery-ui.js (line 314). My code is given below
<!DOCTYPE html>
<html>
<head>
<title>Sliding a div</title>
<script type="text/javascript" src="plugin/ui/jquery-ui.js"></script>
<script type="text/javascript" src="plugin/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#1').click(function(){
console.log("i am inside");
$('#element').hide('slide',{direction:'left'},1000);
});
});
</script>
</head>
<body>
<div id="headder" style="width: 1300px; height: 100px">
<h1>Slide the div</h1>
</div>
<div id="element" style="width: 600px; height: 400px; border: 2px solid red; position: relative">
<img src="images/aa.jpg" width="600" height="400">
</div>
<div id="control" style="position: relative">
<input type="button" id="1" value="PRESS">
</div>
</body>
</html>
Please let me know the reason behind this.
You need to reference jQuery before jQuery UI:
<script type="text/javascript" src="plugin/jquery-1.9.1.js"></script>
<script type="text/javascript" src="plugin/ui/jquery-ui.js"></script>

Unable to drop the image in a target location

I have written a simple code for drag and drop. lets have a look at the code
<!DOCTYPE html>
<html>
<head>
<title>System Drag and Drop Example</title>
<script type="text/javascript">
{
function dragUser(user,oEvent)
{
oEvent.dataTransfer.setData('User',user.id)
}
function dropUser(target,oEvent)
{
var user= oEvent.dataTransfer.getData('User');
alert(user);
alert(target);
target.appendChild(document.getElementById('user'));
oEvent.returnValue=false;
}
}
</script>
</head>
<body>
<p>Try daragging this text to the red box</p>
<p>
<div style="border: 1px solid black; width: 150px; height: 150px">
<img id="img" src="mine,image,life,quote,words,message-5eb746364548d71d07c86e52e63b7b56_h.jpg" width="100px" height="100px" ondragstart="dragUser(this,event)">
</div>
<div id="div2" style="background-color: red; width: 100px; height: 100px; clear: both" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false">
</div>
</p>
</body>
</html>
The problem is that when i try to drag the image from the above div to the lower div with id="div2" than my image is not being dropped instead of it it opens in in a tab as an image.
please let me know the reason behind this.

jquery: Maintaining the same button size given changes in the text

I have the following piece of code:
$(document).ready(initialize);
function initialize() {
$('#btnPoint').css('width', $('#btnPoint').width());
}
When I debug it in Chrome $('#btnPoint').width() is 83 before the width is set. But it becomes 67 immediately after the css statement is executed.
What is going on?
EDIT
I have no particular stylesheets loaded. Here is my html page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=bla-bla-bla&sensor=false&libraries=geometry">
</script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="sdr.js"></script>
</head>
<body>
<div style="display: table; height: 100%; width: 100%;">
<div id="data" style="display: table-row; height: 20px;">
<div style="display: table-cell;">
<input id="btnPoint" type="button" value="Mark the point" onclick="markPoint()" />
Point: <input id="txtPoint" type="text" /><br />
<input id="btnPolygon" type="button" value="Mark the polygon" />
Polygon:<input id="txtPolygon" type="text" />
</div>
</div>
<div style="display: table-row; ">
<div id="map_canvas" style="display: table-cell;"></div>
</div>
</div>
</body>
</html>
jQuery's width() doesn't contain padding or border which are default styles on a button use outerWidth() like:
$('#btnPoint').css('width', $('#btnPoint').outerWidth());
to keep your button the same size, but have the text morph to fit, check out the fitText plugin or fitText on github it's made for large display text, but might work for your needs.

Categories