Javascript, filtri e altri misteri

Deb · 5 Apr 2016

Salve a tutti,

sono appena arrivata. Un amico mi ha suggerito di iscrivermi a questo forum per chiedere il vostro aiuto.

È la prima volta che scrivo su un forum, quindi vi chiedo scusa in anticipo se ho sbagliato sezione o qualcos'altro.

Devo realizzare un tool per un esame ma sono in altissimo mare e non so come fare. Si tratta di uno strumento che, attraverso filtri che agiscono su una mappa, permette all'utente di selezionare un master universitario che corrisponde ai criteri che ha inserito.

Ho già uno scheletro di html, css e javascript ma non so come farlo funzionare. Qualcuno può aiutarmi per favore? Sono disperata. Vi lascio i miei codici, così capite di cosa si tratta.

Grazie mille a tutti
Deb

Qesto è l'index.html

HTML:

<html>
<div id= title> <h1> Where can I afford to study? </h1></div>
	<head>
		<!--link to css-->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	  	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	  	<!-- 	  	<link rel="stylesheet" href="/resources/demos/style.css">
 -->	  	
 		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="row">
				<div class="col-xs-12 col-md-4">
				<!--filters-->

				<h2>How much can you spend</h2>
				<p>
				<input type="text" id="amount" readonly>
				</p>
				<div id="slider-range"></div>
				<div class="dropdown">
				  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Chose your favourite area
				  <span class="caret"></span></button>
				  <ul class="dropdown-menu">
				    <li><a href="#">Agriculture and Forestry</a></li>
				    <li><a href="#">Applied Sciences and Professions</a></li>
				    <li><a href="#">Arts, Design and Architecture</a></li>
				    <li><a href="#">Business and Management</a></li>
				    <li><a href="#">Computer Science and IT</a></li>
				    <li><a href="#">Education and Training</a></li>
				    <li><a href="#">Engineering and Technology</a></li>
				    <li><a href="#">Environmental Studies and Earth Sciences</a></li>
				    <li><a href="#">Hospitality, Leisure and Sports</a></li>
				    <li><a href="#">Humanities</a></li>
				    <li><a href="#">Journalism and Media</a></li>
				    <li><a href="#">Law</a></li>
				    <li><a href="#">Medicine and health</a></li>
				    <li><a href="#">Natural science</a></li>
				    <li><a href="#">Social science</a></li>
				    
				  </ul>
				</div>
				<a href="#" class="myButton">Search</a>
			</div>
		  	<div class="col-xs-12 col-md-8">
		  		<div id="map"></div>
		  	</div>
	  	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
		<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
		<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

		<script src="script.js"></script>
	</body>
</html>

Questo è lo script.js

Codice:

var mymap = L.map('map').setView([54.693, -4.724], 6); 

	 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'deb81.pe4jb36j',
    accessToken: 'pk.eyJ1IjoiZGViODEiLCJhIjoiY2lsbDA2aWxwMDA4OG8wa3F1ZzgwY2VpMCJ9.x7NfiRFvgml11ypZHHnMnA'
}).addTo(mymap);
   /*Bath, spa university*/
var marker = L.marker([51.378743, -2.437402])
.addTo(mymap);
/*Hatfield, university of hertfordshire*/
var marker = L.marker([51.7528765, -0.242173])
.addTo(mymap);
/*Bath, bath university*/
var marker = L.marker([51.380530, -2.324754])
.addTo(mymap);
/*Brighton*/
var marker = L.marker([50.864249, -0.085693])
.addTo(mymap);
/*London, City*/
var marker = L.marker([51.527789, -0.102322])
.addTo(mymap);
/*London, met*/
var marker = L.marker([51.508810, -0.307005])
.addTo(mymap);
/*Glasgow, Caledonia*/
var marker = L.marker([55.866166, -4.250567])
.addTo(mymap);
/*Glasgow, university of G.*/
var marker = L.marker([55.871751, -4.288360])
.addTo(mymap);
/*Lancaster, L. University*/
var marker = L.marker([54.010468, -2.786910])
.addTo(mymap);
/*Lancaster, University of Cumbia*/
var marker = L.marker([54.891117, -2.921478])
.addTo(mymap);

$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 1,
      max: 25000,
      values: [ 1, 25000 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
       + $( "#slider-range" ).slider( "values", 1 ) );
  });

E questo è il css

Codice:

#map {
	height: 650px;
	width: 100%;
	padding-top: 5px;
}
#Range-slider {

	border:0; 
	color:#f6931f; 
	font-weight:bold;

}
#title{
    height: 51px;
    left: 365px;
    top: 198px;
    width: 100%;
    background-color:#CC0033;
    color:white;
    align: center;
}
.dropdown{
	margin: 10px;
}
.btn-primary {
	background-color:#CC0033;
	}
	.myButton {
	margin: 10px;
	-moz-box-shadow:inset 0px 1px 0px 0px #CC0033;
	-webkit-box-shadow:inset 0px 1px 0px 0px #CC0033;
	box-shadow:inset 0px 1px 0px 0px #CC0033;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #CC0033), color-stop(1, #CC0033));
	background:-moz-linear-gradient(top, #CC0033 5%, #CC0033 100%);
	background:-webkit-linear-gradient(top, #CC0033 5%, #CC0033 100%);
	background:-o-linear-gradient(top, #CC0033 5%,#CC0033 100%);
	background:-ms-linear-gradient(top, #CC0033 5%, #CC0033 100%);
	background:linear-gradient(to bottom, #CC0033 5%, #CC0033 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#ff0000',GradientType=0);
	background-color:#d0451b;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #854629;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff0000), color-stop(1, #d0451b));
	background:-moz-linear-gradient(top, #ff0000 5%, #d0451b 100%);
	background:-webkit-linear-gradient(top, #ff0000 5%, #d0451b 100%);
	background:-o-linear-gradient(top, #ff0000 5%, #d0451b 100%);
	background:-ms-linear-gradient(top, #ff0000 5%, #d0451b 100%);
	background:linear-gradient(to bottom, #ff0000 5%, #d0451b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#d0451b',GradientType=0);
	background-color:#ff0000;
}
.myButton:active {
	position:relative;
	top:1px;
}

Cerca

Cerca

Javascript, filtri e altri misteri

Deb

Nuovo Utente

Discussioni simili