This question already has answers here:
How to get a leaflet map canvas to have a 100% height?
(3 answers)
Closed 8 months ago.
I'm doing the leaflet step by step for webmap with javascript, html and css.
The internet page is blank when I run the code, but the script doesn't show an error. Please, help
<!DOCTYPE html>
<html lang="pt-br">
<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>Tutorial youtube</title>
<!-- leaflet css-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
<style>
body{
margin: 0;
padding: 0;
}
#map{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<!--leafleat js-->
<script src="https://unpkg.com/leaflet#1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<script>
//inicialização do mapa
var map = L.map('map').setView([-14.23,-51.92], 4);
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'});
osm.addTo(map);
</script>
You need to set a non-zero height on the map div.
height: 100% results in a 0px height for your map div.
One of these rules will work.
height: 100vh;
height: 400px;
height: 50rem;
Related
I want to apply a smooth transition effect when I'm enlarging an image. Usually its pretty easy but since I'm trying to enlarge image from being constrained vertically to be contained horizontally it doesn't seem to work properly.
This code doesn't seem to work... probably because of the width auto... before moving into JS territory, forcing a px height/width, I'd love to see if it's possible to solve it with just CSS. Thanks.
$(".enlargeButton").click(function() {
$(".image").toggleClass('larger');
});
.image img {
height: 80vh;
width: auto;
transition: height 600ms, width 600ms;
}
.image.larger img {
width: 80vw;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- your HTML here -->
The Problem you are facing is that you set the classes together in your css: image.larger img try to seperate those to only .larger.
Maybe this code helps you to understand your issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=q, initial-scale=1.0" />
<title>Document</title>
<style>
.image {
height: 80vh;
width: auto;
transition: 600ms ease-in-out;
}
.larger {
height: 80vw;
width: auto;
}
</style>
</head>
<body>
<img
class="image"
src="https://lelolobi.com/wp-content/uploads/2021/11/Test-Logo-Small-Black-transparent-1-1.png"
alt=""
/>
<button class="enlargeButton">Enlarge</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(".enlargeButton").click(function () {
$(".image").toggleClass("larger");
});
</script>
</body>
</html>
I am trying to make a fade in- fade out transition between two pages with full screen images. Currently I'm trying to achieve this with the swup plugin.
I can achieve a new full screen image on each page by setting a class on every html, like:
<!DOCTYPE html>
<html lang="en" class="home_bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
Home
About
</nav>
</body>
</html>
And css:
*{
margin: 0;
padding: 0;
}
.home_bg {
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
.about_bg {
background: url(img/ocean.jpg) no-repeat center center fixed;
background-size: cover;
}
nav{
font-size: 24px;
}
Html for the transition:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer src="node_modules/swup/dist/swup.min.js"></script>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
Home
About
</nav>
<main id="swup" class="transition-fade">
<h1>This is home</h1>
</main>
</body>
</html>
And the css:
*{
margin: 0;
padding: 0;
}
nav{
font-size: 24px;
}
.transition-fade{
opacity: 1;
transition: 500ms;
}
html.is-animating .transition-fade {
opacity: 0;
}
There is also one line js for the transition:
const swup = new Swup();
My problem is I can't seem to get these two to work together. I either get the full image pages OR the transition, not the full image pages WITH transition. The problem seems to lie in the fact that the image has to be within the "swup". But every time I try to put my image there, I lose control over its size and proportions, even if I give it a class of its own.
Now I have tried about a zillion things and I have tried to google this for a few days but no luck. I have only been working with html, css and js with this. Should I be looking elsewhere?
Any help here is highly appreciated.
Thanks
I finally managed to solve this. It may not be the best solution, so if you have a better one, please let us know.
I added this html-part below the navigationbar:
<main id="swup" class="transition-fade">
<div class="background-parent">
<div class="background-home"></div>
</div>
</main>
And in the css:
.background-home {
width: 100%;
height: 100%;
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
How can i set position absolute for ie7 only
this is not working in ie7.
$(document).find('.fixedheader').css({'position':'absolute','top':'356px'});
To add css rules targeting IE7 you can use an asterisk in front of the css rule e.g.
*position: absolute;
But this will not work with jQuery $('selector').css(... or $('selector').attr('style', ... methods.
The only way it worked for me was to add a style tag to the head of the page like so:
$('<style type="text/css">.fixedheader {*position:absolute;*top:356px}</style>').appendTo($('head'));
Here is an example:
Copy the following snippet to a new HTML document and test it in IE7 and any other browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header {
position: relative;
}
.fixedheader {
width: 100%;
min-height: 50px;
background-color: black;
}
</style>
</head>
<body>
<header>
<div class="fixedheader"></div>
</header>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$('<style type="text/css">.fixedheader {*position:absolute;*top:356px}</style>').appendTo($('head'));
</script>
</body>
</html>
There is an example here where he inserts an iframe where the height of the iframe is changed to be the height of the inserted content. He explains the trick here.
However when I try and do it with my Bootstrap example, then something is preventing the JavaScript from modifying the iframe. height is never added to the iframe.
Question
Can someone see why height isn't added to the iframe, as it is done in the original example?
I am using this as iframe content
wget http://www.456bereastreet.com/lab/iframe-height/iframe-content.html
and my html is
<!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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
iframe {
width:100%;
margin:0 0 1em;
border:0;
}
#external-frame {min-height:800px;}
body {
padding-top: 70px;
}
.container .jumbotron {
background-color: #ffffff;
padding-right: 0px;
padding-left: 0px;
height: 100%;
margin:0 auto;
}
</style>
<script>
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<iframe src="iframe-content.html" frameborder="0" id="external-frame"></iframe>
</div>
</div>
</body>
</html>
This feels too obvious, but it really looks like you just didn't define setIframeHeight or include any script that defines it.
If you want to call a function, obviously you need to have that function.
That's the function, copied from the page you linked to:
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
Paste it in your script tag and you should be good to go.
I have a dynamic map in Google Maps (API v2)
I want to overlay an image inviting the user to zoom
image overlay http://img362.imageshack.us/img362/1480/screenshot20100319at121.jpg
The image disappears when the zoom level is greater than (say) 10
Any idea how to achieve this? Thanks
You may want to listen to the zoomend event, as in the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Zoom Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
<style type="text/css">
#zoom {
background-color: red;
width: 75px;
padding: 5px 5px 5px 5px;
position: absolute;
left: 60px;
top: 90px;
z-index: 1000;
}
</style>
</head>
<body onunload="GUnload()">
<div id="zoom">Zoom</div>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(new GLatLng(37.33, -121.89), 8);
GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) {
if (newLevel > 10)
document.getElementById('zoom').style.display = 'none';
else
document.getElementById('zoom').style.display = 'block';
});
</script>
</body>
</html>
The zoom label would disappear once the zoom level exceeds 10:
alt text http://img532.imageshack.us/img532/6946/gmapzoom.png