Setting Div (#Map) height and width to 100% - javascript

I'm setting 100% width and height to the div (map), but my map shows only half of the page. I would like to display the full map below the div container.
I am using bootstrap and esri JavaScript api to build the page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
<script>
dojo.require("esri.map");
function init() {
var map = new esri.Map("map",{
basemap:"topo",
center:[-95.45,29.80], //long, lat
zoom:10,
sliderStyle:"small"
});
}
dojo.ready(init);
</script>
<style>
#map {
height:100%;
width:100%;
margin:0;
padding:0;
}
</style>
</head>
<body class="claro">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project Name</a>
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
<div id="map" class="claro"></div>
</div><!-- /.navbar -->
</body>
</html>

Add this (to your external css file or inline style tag):
html body {
height: 100%;
min-height: 100%;
}

At bootstrap 3.0 twitter bootstrap adds a .container css class which overrides the map container. The result is that a max-width is set on the .map .container. Add this to override and make the map fill the complete width:
html body {
height: 100%;
min-height: 100%;
}
.map .container{
max-width: 100%;
}

try this :
#map{height:100%; min-height:100%;}

Related

How to fix Uncaught ReferenceError: TimelineMax is not defined

My JS file:
const logo = document.querySelector("#logo");
const tl = new TimelineMax({});
tl.fromTo(logo, 1, {height: "0%"}, {height: "80%"});
My CSS file:
#logo{
width: 100%;
height: 100%;
position: absolute;
top: 200px;
z-index: -1;
}
My HTML file:
<!DOCTYPE html>
<html lang= "es">
<head>
<title>Quark</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="Limg">
<img id="logo" src= "Logo.svg">
</div>
<script src="animaciones.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js" integrity="sha512-0xrMWUXzEAc+VY7k48pWd5YT6ig03p4KARKxs4Bqxb9atrcn2fV41fWs+YXTKb8lD2sbPAmZMjKENiyzM/Gagw==" crossorigin="anonymous"></script>
</body>
</html>
And I don't know where the problem is already trying using different versions and nothing
Move your script tag for timeline max on header
<head>
<title>Quark</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="Style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js" integrity="sha512-0xrMWUXzEAc+VY7k48pWd5YT6ig03p4KARKxs4Bqxb9atrcn2fV41fWs+YXTKb8lD2sbPAmZMjKENiyzM/Gagw==" crossorigin="anonymous"></script>
</head>

I am trying to set up Leaflet map by their tutorial but something isn't working, can anyone take a look and see why?

I am currently trying to follow the step by step instructions on the Leaflet page on how to set up a basic map but something isn't working for me, the map is not showing up at all. I downloaded the Leaflet-stable release and put all those files in a folder and in it I also created index.html file.
Here is the code I have so far,
This is the HTML file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
///The above part comes from the download page from Leaflet.com. They say that if you download the files, the code above is what you should put in the head section///
</head>
<body>
<div id="mapid"></div>
</body>
</html>
And this is the .css. file. The instructions say that I have to add this "#mapid { height: 180px; }" in the .css file. Do I simply copy it in like this?
Original .css file that comes with leaflet.
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
My .css file with the #mapid { height: 180px; } code
/* required styles */
#mapid { height: 180px; }
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
What am I doing wrong?
Hope below code will help you.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<title>Leaflet, Demo Fazal!</title>
<style>#mapid { height: 380px; }</style>
</head>
<body>
<div id="mapid"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<script>
var map = L.map('mapid').setView([22.306841, 73.119037], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([22.306841, 73.119037]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
</script>
</body>
</html>

console log return null

i tried to do a popup and when i do my js in my html it work perfectly, but when i tried to separe my js of my html, my js file doesn't work and i don't know why...
i don't know if the problem its how i adapt my js or how my js is linked
if someone can help, it's will be really nice !
Here's my code, if you need anything else ask me ! :
var modal = document.getElementById('popup2');
var essai = document.getElementById('id02');
console.log(modal)
essai.addEventListener("click", function () {
modal.style.display = "block";
})
var span2 = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span2.onclick = function () {
essai.style.display = "none";
}
.popup2{z-index: 3;
display: none;
padding-top: 100px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.82);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Nejma Hamadi</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="vendor/bootstrap/css/styles.css" rel="stylesheet">
<link href="vendor/bootstrap/css/stylesGallery.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body id="page-top">
<section id="portfolio2">
<img src="img/img2.jpg" id="img1">
<div id="id02" class="popup2">
<div>
<span class="close">×</span>
<img src="img/img3.jpg" alt="Avatar" style="width:30%" id="img001">
<img src="img/img3.jpg" alt="Avatar" style="width:30%">
<img src="img/img3.jpg" alt="Avatar" style="width:30%">
</div>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<!-- Custom JavaScript for this theme -->
<script src="js/scrolling-nav.js"></script>
<!--<script src="js/popup.js"></script>-->
<script src="js/popup2.js"></script>
<script src="js/popupVideo.js"></script>
</body>
</html>
In your HTML, you are using popup2 as a class name, not an id!
Therefore, you should replace var modal = document.getElementById('popup2'); by
var modal = document.getElementsByClassName('popup2')[0];
Another thing: make sure this code runs after the HTML has loaded, otherwise it will return undefined. To do so, wrap your code inside:
document.onload = function() {
var modal = document.getElementsByClassName('popup2')[0];
//your code here
}
you can do that with Jquery
$("#popup").hide(); //hidden in start
$("#openPopup").on("click",function(){
$("#popup").show();
});
$("#closePopup").on("click",function(){
$("#popup").hide();
});
see CodePen Demo

Code from fiddle doesn't work locally

I found a simply tooltip in fiddle: http://jsfiddle.net/6L9j0v5y/1 and tried to use it locally but something goes wrong. I copied http://jsfiddle.net/6L9j0v5y/1/show frame source as well but there is the same effect(on page is only button and nothing happens when it is clicked).
I create file(by copying):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
[data-style=mypops] + .popover {
background: #4194ca;
}
[data-style=mypops] + .popover.bottom .arrow:after {
border-bottom-color: #4194ca;
}
[data-style=mypops] + .popover-content {
}
.popovermenu {
list-style: none;
padding: 0px;
margin: 0px;
}
.popovermenu li {
}
.popovermenu li a {
color: #fff;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#Pops").popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
});//]]>
</script>
</head>
<body>
<br>
<br>
<br>
<div class="col-sm-4">
<button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" id="Pops" data-style="mypops">Click Me</button>
<div id="popover-content" class="hide">
<ul class="popovermenu">
<li>Action
</li>
<li>Another action
</li>
<li>Separated link
</li>
</ul>
</div>
</div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "6L9j0v5y"
}], "*")
}
</script>
</body>
</html>
There is no error in console, how is it possible to check why it doesn't work?
It's because when on a local environment it treats the resource URLs as local files because it doesn't have the http / https protocols in front of the URLs.
It's not incorrect in doing that, when on a server it'll work fine, but locally it causes problems. Change the scripts to the following and it'll work fine.
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Can't get jQuery scrollTop to work

Im trying to make a jQuery script that makes a nav bar appear after scrolling down the page 800px.
This is the file:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('#fixedBar').fadeIn();
} else {
$('#fixedBar').fadeOut();
}
});
Here's the CSS:
#fixedBar {
display: none;
position: fixed;
background-color: rgba(255,255,255,.9);
top: 0;
left: 0;
width: 100%;
height: 80px;
}
Im not too sure why this jQuery isn't doing anything. All help is appreciated.
Here is the HTML in use:
<div id="fixedBar">
<h1>Company</h1>
</div>
Heres the head
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Links to JS/CSS/Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen"/>
<link rel="stylesheet" href="../css/jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/navView.css" />
<link rel="icon" type="image/ico" href="../img/favicon.ico"/>
<title>George | New Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../js/navBar.js" type="text/javascript"></script>
<script src="../js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="../js/jquery.maximage.min.js" type="text/javascript"></script>
<script src="../js/modernizr.custom.25376.js"></script>
</head>
Just checked the js folder and it contains the file navBar.js which has the jQuery code.
It's working fine for me: http://jsfiddle.net/8kzdx9wz/
<div id="fixedBar">nav bar</div>
Is your HTML written correctly and do you have enough content to scroll down to 800px on the page?

Categories