I need your help, I am using the Leaflet library, I would like to put the address search, but not the search inside the map, but yes, with an input, outside the map:
enter image description here
However, I saw that it can be done, Nominatim even uses it (https://nominatim.openstreetmap.org/), but there are no explanations on how to do it.
The Code looks like this
var target = document.getElementById('map');
document.addEventListener('DOMContentLoaded', function(e){ //executa o código somente após carregar o DOM
var optionsMap = {
center: [-21.511263, -51.434978],
zoom: 15
}
// criação do mapa
let map = new L.map(target, optionsMap);
map.doubleClickZoom.disable();
//adicionar uma camada de bloco do OpenStreetMap
let basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
}); basemap.addTo(map);
});
/*Imports*/
#import 'reset.css';
#import 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
#import 'https://unpkg.com/leaflet#1.6.0/dist/leaflet.css';
#import 'popup.css';
/*Geral*/
body{
background-color: rgb(109, 164, 182);
font-family: Arial, Helvetica, sans-serif;
}
.titulo{
padding: 0.5em;
color: white;
text-align: center;
font-size: 3em;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/*Section*/
.campo{
padding: 1em;
background-color: rgba(255, 255, 255, 0.5);
width: 80%;
height: 80%;
border-radius: 1em;
box-shadow: 0px 2px 6.35px 0.35px rgba(0, 0, 0, 0.3);
}
.pesquisa{
border: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 92%;
padding: 10px;
}
.btn{
border: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 10px;
margin-left: 0em;
margin-top: 0em;
}
.btn:hover{
background-color: rgb(90, 136, 221, 0.3);
}
#map{
width: auto;
height: 500px;
border: none;
border-radius: 1em;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
}
/*Footer*/
footer{
padding: 1em;
text-align: center;
color: white;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover{
font-weight: bold;
}
<!DOCTYPE html>
<html lang="pt-Br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet - Nominatim</title>
<link rel="stylesheet" href="css/estilos.css">
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
</head>
<body>
<div class="container">
<header>
<h1 class="titulo">Maps Leaflet - Nominatim</h1>
</header>
<section class="campo container">
<div class="container">
<input class="pesquisa" type="text"><input class="btn" type="button" value="Ok!">
</div>
<br>
<div id="map" class="container"></div>
</section>
<footer>cortelucas</footer>
</div>
<script src="js/map.js"></script>
</body>
</html>
I sincerely ask for your help!
As I said yesterday I prepared a working example working on the GeoJSON format. I slightly modified autosuggest my application.
I have connected with the nominatim and also added the option of working on a static GeoJSON file.
I prepared a branche - autosuggest+nominatim and the working example nominatim-leaflet-search
Of course, as much as I could test in a short time, but you have to reckon with the fact that there may be some errors. Gzip code, weighs around 8KB so it's not bad.
UPDATE
I prepared a project on github Leaflet.Autocomplete showing the work of the plugin and as much as I could explain how it works.
Related
I am quite green in the CSS, HTML and JS, but I wish to create click counter that counts all the clicks made by all the users.
ie. when the counter says "0" and if person A has opened the site and clicks the counter once the person B by clicking the counter once too gets result of "2" instead of "1".
I have watched many videos how to create the counter but it resets once the page is reloaded and that's not what I want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter App</title>
<!-- ---------------- linked css file ----------------- -->
<link rel="stylesheet" href="counter.css">
</head>
<body>
<!-- ----------------html formated --------------- -->
<div class="container">
<main>
<h1>Counter App</h1>
<div class="button-counter">
<button class="btn decreased"> - </button>
<span> 0 </span>
<button class="btn increase"> + </button>
</div>
</main>
</div>
<!-- ---------------- linked js file ---------------- -->
<script src="app.js"></script>
</body>
</html>
// initial value of span ========
let value = 0
// getting value by reference ==========
const span = document.querySelector("span");
const decreased = document.querySelector(".decreased")
const increase = document.querySelector(".increase");
// --------- calling the even function -------------------
decreased.addEventListener("click" , () => {
span.innerHTML=value--;
});
// --------------- event for increase button--------------------
increase.addEventListener("click" , () =>{
span.innerHTML=value++;
})
*{
margin 0%;
padding: 0%;
box-sizing: border-box;
background-color: rgba(255, 166, 0, 0.644);
}
.container
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: orange;
border: 1px solid orange;
border-radius: 20px;
box-shadow: 5px 5px 4px 2px rgb(211, 161, 96);
width: 300px;
height: 200px;
}
h1{
font-size: 30px;
text-align: center;
text-shadow: 2px 2px rgba(5, 5, 5, 5);
color: white;
}
.button-counter{
display: flex;
justify-content: space-around;
align-items: center;
}
button
{
text-align: center;
padding: 10px;
margin: 10px;
font-size: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(255, 166, 0, 0.445);
cursor: pointer;
box-shadow: 5px 5px 5px rgba(255, 166, 0, 0.829);
border: 1px solid rgb(231, 230, 230);
font-weight: bolder;
color: white;
}
button:hover{
background-color: #fff;
color: black;
}
span
{
text-align: center;
box-shadow: 5px 5px 4px 2px rgb(150, 143, 121);
font-size: 32px;
font-weight: bolder;
border-radius: 10px;
width: 50px;
border: 1px solid rgb(90, 89, 89);
color: rgb(36, 17, 33);
}
If you want the next user to count from what the previous left, you need to store the data somewhere (for example on a database) and when the page loads first of all you read that value again and show it to the user.
The answer is no, you cannot do that with only CSS, HTML and JS.
Best option to store public data on the frontend is local storage.
window.localStorage.setItem(name, data); // -> set item
window.localStorage.getItem(name); // -> get item
Disadvantages
can be changed using the DevTools
resets if cache is cleared
If you don't want that, you must use a database therefore you need a backend
EDIT: You need a database and a server to be able to shara data between multiple users and/or clients
Recently I was create animated image in html with SPAN ans Marquee tag. And now I want to create download link for this images, but I don't know how to do this? Please anyone help me...
This is my Online Project
<html>
<head>
<title> Marquee </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="figure">
<img src="a.jpg" name="images"/>
<div class="figcaption">
<span>
<h2> Believe In Your Self!!!</h2>
<span class='spacer'></span>
<br />
<span class='spacer' align='right'></span>
<h3><marquee>By: Ajay Rathod</marquee></h3>
</span>
</div>
</div>
</body>
</html>
h3
{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: white;
background: black; /* fallback */
background: rgba(0, 0, 0, 0.7);
padding: .5em;
}
#figure {
position: relative;
}
#figure img {
display: block; /* removes trailing whitespace */
outline: solid #000 1px;
width:100%;
}
.figcaption {
position: absolute;
bottom: 10%;
width: 501px;
margin: 0;
font-size: 1.5rem;
font-weight: bold;
line-height: 200%;
text-transform: capitalize;
}
.figcaption span h2{
color: white;
background: black; /* fallback */
background: rgba(0, 0, 0, 0.7);
padding: .5em;
&.spacer {
padding: 0 5px;
background: transparent;
&::before { content: " "; }
}
.figcaption span h3{
color: white;
background: black; /* fallback */
background: rgba(0, 0, 0, 0.7);
padding: .5em;
&.spacer {
padding: 0 5px;
background: transparent;
&::before { content: " "; }
}
You can make any image as downloadable link by doing this
<a download="name.jpg" href="Image-Path" title="Image-Name">
<img src="a.jpg" name="images"/>
</a>
Refer to this link for browser compatibility
Currently, I am working on a project to generate a dynamic card page. This page is based on the input of a specific json feed (e.g. a user role).
profile.json
{
"Messages": "card1",
"Activities": "card2",
"Agenda": "card3",
"Users": "card4",
"Charts": "card5"
}
Next, I use jQuery and Kendo UI to create cards. First, I need to extract the information from the json feed. As you may notice, every card will be placed inside a div. And every div will be appended to the cards div:
Below is code of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../style/font-awesome.css">
<link rel="stylesheet" href="/style/cards.css" />
<script src="../lib/jquery.min.js"></script>
<script src="../lib/custom/effects.min.js"></script>
</head>
<body>
<div id="cards"></div>
<script>
$.getJSON("profile.json", function (data) {
$.each(data, function (key, val) {
var card = "<div id='" + val + "' height='180' width='175'></div>";
$("#cards").append(card);
$('#' + val).load(val + '/index.html');
});
});
</script>
</body>
</html>
Every card does have some simple styling:
One of the card (card7/index.html)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html {
overflow: hidden;
}
a {
color: #428bca;
text-decoration: none;
}
#card7 {
width: 150px;
height: 150px;
position: relative;
}
.front {
padding: 10px;
text-align: center;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.back {
font-size: smaller;
padding: 10px;
text-align: left;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.front:hover, .back:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
}
img {
border-radius: 5px 5px 0 0;
}
.badge:after {
content: "1";
position: absolute;
background: rgba(255, 0, 0, 0.85);
height: 2rem;
top: 1rem;
right: 2rem;
width: 2rem;
text-align: center;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
color: white;
}
.seeBack {
margin-top: -30px;
margin-right: -10px;
float: right;
border-style: solid;
border-width: 0 0 40px 40px;
border-color: transparent;
}
.seeBack:hover {
border-color: transparent transparent #428bca transparent;
transition: 0.5s;
}
.seeFront {
margin-top: 10px;
margin-left: -10px;
float: left;
border-style: solid;
border-width: 40px 0 0 40px;
border-color: transparent;
}
.seeFront:hover {
border-color: transparent transparent transparent #428bca;
}
</style>
</head>
<body>
<div id="card7">
<div class="front">
<i class="fa fa-undo fa-5x"></i>
<h4><b>Tijdlijn</b></h4>
<div class="seeBack"></div>
</div>
<div class="back">
<p>Situatie vorige week</p>
<p>Situatie vorige maand</p>
<p>Situatie vorig jaar</p>
<div class="seeFront"></div>
</div>
</div>
<script>
$(document).ready(function () {
kendo.fx($("#card7")).flip("horizontal", $(".back"), $(".front")).play();
var card = kendo.fx($("#card7")),
flip = card.flip("horizontal", $(".front"), $(".back"));
flip.duration(100);
$(".seeBack").click(function () {
flip.stop().play();
});
$(".seeFront").click(function () {
flip.stop().reverse();
});
});
</script>
</body>
</html>
As you may expect, the program itself does not work properly. All cards will be displayed on top of each other in index.html, although they are placed in various div. I don't know what the problem is and I cannot fix this. Hopefully one can help me.
All cards are placed on top of each other.
Use static or relative position for .front and .back divs
Read that article about positioning for more info http://www.w3schools.com/cssref/pr_class_position.asp
I read millons of time that if you define a bootstrap class in your own CSS stylesheet you will overwrite them so your created element will have your predefined style as you want.
While this is true to half of the page, my input button using the class form-control it just won't work, and I can't figure it out the reason why, as anybody else is having this problem.
Here's a snippet with my issue:
var searcher = document.getElementById('buscador');
searcher.addEventListener("click", function()
{
var master = searcher.parentNode;
searcher.removeChild(searcher.childNodes[0]);
searcher.style.animationName = "expandismo";
searcher.style.animationDuration = "1s";
setTimeout(function(){
master.removeChild(searcher);
var barraSearch = document.createElement('input');
barraSearch.setAttribute('type', 'text');
barraSearch.setAttribute('id', 'barraSearch');
barraSearch.setAttribute('class', 'form-control');
barraSearch.setAttribute('placeholder', 'Buscar...');
var spanCheto = document.createElement('span');
var botonCheto = document.createElement('button');
var secondSpan = document.createElement('span');
spanCheto.setAttribute('class', 'input-group-btn');
botonCheto.setAttribute('class', 'btn btn-default');
secondSpan.setAttribute('class', 'glyphicon glyphicon-search');
secondSpan.setAttribute('aria-hidden', 'true');
botonCheto.appendChild(secondSpan);
spanCheto.appendChild(botonCheto);
master.appendChild(barraSearch);
barraSearch.focus();
}, 1000);
}, false);
.container-fluid
{
text-align: center;
}
#toplane
{
color: white;
background-image: url(citybackground.jpg);
background-size: 100% 100%;
min-height: 400px;
}
#botlane
{
}
#headone
{
margin-top: 130px;
color: black;
text-shadow: 0px 0px 12px white, 0px 0px 8px white, 0px 0px 3px white, 0px 0px 5px white;
font-family: "Times New Roman", Times, monospace;
font-size: 60px;
}
#buscador
{
color: #595959;
width: 40px;
height: 40px;
border-radius: 18px;
background-color: lightgrey;
cursor: text;
}
#buscador:hover
{
background-color: lightgrey;
opacity: 1;
}
#buscador:active
{
background-color: white;
}
.input-group
{
width: 100%;
text-align: center;
}
.form-control
{
width: 70%;
border-radius: 18px;
background-color: lightgrey;
height: 40px;
padding-left: 10px;
font-size: 20px;
color: black;
}
.form-control:focus
{
box-shadow: 0px 0px 5px #66d9ff;
box-shadow: 0px 0px 10px #66d9ff;
box-shadow: 0px 0px 8px #66d9ff;
box-shadow: 0px 0px 12px #66d9ff;
}
#keyframes expandismo
{
from{width: 40px}
to{width: 70%}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Price Surfer FAQ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="wean1.css">
</head>
<body>
<div class="container-fluid" id="toplane">
<h1 id="headone">PRICE SURFER FAQ</h1>
<div class="input-group">
<button id="buscador"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
<div class="container-fluid" id="botlane">
</div>
<script type="text/javascript" src="wean1.js"></script>
</body>
</html>
.container-fluid .input-group .form-control{
/* yous css*/
}
This is because the bootstrap get the .form-control with two clases and this type of selection .input-group .form-control is stronger then just .form-control
.input-group .form-control{
}
Use this website to calculate which selector is stronger .
Check this screenshot the first selectors have 3 points and the second has only two so doesn't matter where you place the first selectors are stronger than second. Every id has 100 points , classes have 10 points and tags have 1 point
You should add !important with the property that is not being picked.
Like:
.form-control
{
width: 70%!important;
border-radius: 18px!important;
background-color: lightgrey!important;
height: 40px;
padding-left: 10px;
font-size: 20px;
color: black;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
some of my CSS does not seem to work with my webpage, I have tried looking up answers, I even tried a CSS validator with no luck.
I don't have a webpage but if you are able to figure out the problem by reading the code it would be greatly appreciated!
Also: look at the picture: http://puu.sh/jIxvw/818d4da42a.png
(to low reputation to post img)
The code that doesn't work for me is the code which is not blue
CSS
#import url(http://fonts.googleapis.com/css?family=Teko:300,700);
body { margin: 0; padding: 0; background-color: #092f6e; color: #fff; }
#WP {
font-size: 15px;
font-family: 'Teko', sans-serif;
width: 500px;
margin: 25px auto;
border: 1px solid rgba(256, 256, 256, .2);
background: #092f6e url(satellite_dish.jpg) no-repeat center bottom;
min-height: 575px;
}
#WP .Heading {
background-color: rgba(0,0,0,.5);
padding: 15px 0px 2px 0px;
margin: 0px 0px 30px 0px;
}
#WP h1 {
font-size: 4.2em;
color: #FFFFFF;
text-transform: 300;
line-height: 70px;
margin: 0px 0px 0px -5px;
padding: 0;
text-align: center;
}
#WP h2 {
font-size: 1.5em;
color: #64fb5f8;
text-transform: uppercase;
font-weight: 700;
line-height: 18px;
margin: 0px;
padding: 0;
text-align: center;
letter-spacing: 9px;
}
#WP .my-countdown .countdow-row {
display: block;
text-align: center;
}
#WP .my-countdown .countdow-section {
display: inline-block;
width: 95px;
}
#WP .my-countdown .countdow-amount {
display: block;
color: #FFFFFF;
font-size: 5.6em;
line-height: 55px;
}
If you by any chance need the HTML
<!DOCTYPE HTML>
<html>
<head>
<meta id="view" name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1">
<title>Creating a Countdown</title>
<link rel="stylesheet" type="text/css" href="my_countdown.css">
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jquery.plugin.min.js"></script>
<script type="text/javascript" src="jquery.countdown.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.my-countdown').countdown({
until: $.countdown.UTCDate(0, 2016, 4,1, 23,0,0,0)
});
});
</script>
</head>
<body>
<div id="WP">
<div class="Heading">
<h2>Countdown to the</h2>
<h1>World premiere</h1>
</div>
<div class="my-countdown"> </div>
</div>
</body>
</html>
NOTE: this is code from the tutorial Creating an Event Countdown with Chris Converse
http://www.lynda.com/JavaScript-tutorials/Styling-injected-HTML-from-plugin/373559/407364-4.html
you seem to have forgotten a few N's?
".countdowN-row /-selection /-amount"
#WP .my-countdown .countdown-row {
display: block;
text-align: center;
}
#WP .my-countdown .countdown-section {
display: inline-block;
width: 95px;
}
#WP .my-countdown .countdown-amount {
display: block;
color: #FFFFFF;
font-size: 5.6em;
line-height: 55px;
}
Basically you have to fix that
.countdow-row try to replace that with .countdown-row same for countdow-section and .countdow-amount so just add a "n" after the "w".