My leaflet map is showing blank space while collapsing the left panel - javascript

I'm creating a portal, where am using leaflet map. But when I collapsing my left panel. it showing blank space. how to solve it. Also I have invalidateSize() function . but It's not working. Kindly let me know how to solve it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
#map { height: 100%; }
.box {
}
.left {
width:20%;
background:red;
float:left;
}
.right {
width:80%;
background:green;
float:left;
}
.right-100 {
width:100%;
}
.left-0 {
width:0%;
}
.collapse {
background:blue;
color:white;
width:100px;
}
</style>
</head>
<body>
<div class="collapse" id="collapse">collape it</div>
<div class="box">
<div class="left">
Hello Shubham
</div>
<div class="right ">
<div id="map"></div>
</div>
</div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
maxZoom: 18
}).addTo(map);
// Listen for the event that fires when the panel is collapsed
document.getElementById("#collapse").addEventListener("click", function () {
alert('sasASas');
// Call the invalidateSize method to trigger a recalculation of the map's size
map.invalidateSize();
});
</script>
<script>
$(document).on('click', '.collapse', function () {
alert('SasASas');
$('.right').addClass('right-100');
$('.left').addClass('left-0')
})
</script>
</body>
</html>

Please try this, i hope it will work, just added map.invalidateSize(); in your document on click function.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
#map { height: 100%; }
.box {
}
.left {
width:20%;
background:red;
float:left;
}
.right {
width:80%;
background:green;
float:left;
}
.right-100 {
width:100%;
}
.left-0 {
width:0%;
}
.collapse {
background:blue;
color:white;
width:100px;
}
</style>
</head>
<body>
<div class="collapse" id="collapse">collape it</div>
<div class="box">
<div class="left">
Hello Shubham
</div>
<div class="right ">
<div id="map"></div>
</div>
</div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
maxZoom: 18
}).addTo(map);
</script>
<script>
$(document).on('click', '.collapse', function () {
alert('SasASas');
$('.right').addClass('right-100');
$('.left').addClass('left-0')
map.invalidateSize();
})
</script>
</body>
</html>

Related

Why does my popup window move the icon on the desktop, and how can I prevent it?

I'm making a portfolio site for my work, and I'm wanting the popup window to give an instruction to the user. I want the window to close and the icons to pop up. But to start I need the window to not be an obstruction to the icons. How come when you press okay on the popup window it moves the icon on the desktop?
I'm using jquery to handle window draggability.
$(document).ready(function() {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#main').offset().top
}, 'slow');
});
$(function() {
$("#mainBar").draggable();
});
$(function() {
$("#icon1").draggable();
});
function close() {
document.getElementById("main").style.display = "none";
}
$(document).ready(
function() {
$("#icon1").click(function() {
$("#main").fadeToggle();
});
});
body {
background-color: black;
overflow: hidden;
}
.title-bar:hover {
cursor: grab;
}
.window {
-webkit-filter: drop-shadow(0px 0px 7px rgba(255, 255, 255, 0.5));
}
.docs {
background-image: url(https://desktop.trovster.com/desktop/images/my_documents.png);
z-index: -1
}
.main {
z-index: 1;
display: show;
}
a,
:active,
:visited {
text-decoration: none;
}
a {
color: inherit;
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/7.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
</script>
<script src="script.js"></script>
<title>vys</title>
</head>
<body>
<div class="main" id="main">
<div id="mainBar" class="window" style="max-width: 300px; left: 447px; top: 266px;">
<div class="title-bar">
<div class="title-bar-text">Welcome!</div>
<div class="title-bar-controls">
</div>
</div>
<div class="window-body">
<p>Get started by clicking on any of the icons you see on the desktop!</p>
<section class="field-row" style="justify-content: flex-end">
<button onclick="showOrHideDiv()" class="default">OK</button>
</section>
</div>
</div>
</div>
<div id="icon1">
<a href="#main">
<img src="https://desktop.trovster.com/desktop/images/my_documents.png">
</a>
</div>
<script>
function showOrHideDiv() {
var v = document.getElementById("main");
if (v.style.display === "none") {
v.style.display = "block";
} else {
v.style.display = "none";
}
}
</script>
</body>
</html>

Jquery slide plugin text on image

I'm using slider plugin: owlcarousel2. The problem that i want the text to be on the picture not in next slide. I want also the div tag to group elements, not to be ignored.
<html>
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script src="jquery.js"></script>
<script src="owl.carousel.min.js"></script>
<head>
<style>
*{margin:0;padding:0;overflow:hidden}
img{
width:100vw;
height:100vh;
}
p{
background-color:black;
opacity:0.7;
z-index:9999
}
</style>
<div class="owl-carousel">
<div>
<img src='img.jpeg' alt='Hi!'></a>
<p class='text'>hi</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
items:1,
center:true
})
});
</script>
</html>
Your javascript is fine, but there are some other mistakes that prevent it from working. I'll walk you through it. First, close your <head> and wrap the carousel in <body> tags. Remove the rogue </a> after the slide image and the unnecessary </div> located just before the script at the bottom.
To get the text on top of the image you can set an absolute position on the paragraph element and a relative position on it's parent.
Here's what your code should look like after these adjustments:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: false,
items: 1,
center: true
});
});
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.slide {
position: relative;
}
img {
width: 100vw;
height: 100vh;
background: #f00;
}
p {
background-color: black;
opacity: 0.7;
position: absolute;
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</head>
<body>
<div class="owl-carousel">
<div class="slide">
<img src='img.jpeg' alt='Hi!'>
<p class='text'>hi</p>
</div>
</div>
</body>
</html>

How to do Jquery Animation Floating Correctly

I recently have been trying to use Jquery to create and html animation and I am trying to make a bar float to the right as it is currently floated to the left. Although when I try to do this it wont work please help
Html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="assests/css/main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".bar").animate({float: 'right'});
});
</script>
</head>
<body>
<div id="wrapper" align="center" >
<div class="obj">
<div class="bar"></div>
<div class="body">
<h1> Welcome </h1>
</div>
</div>
</div>
</body>
</html>
Css :
#import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin:0px;
padding:0px;
font-family:Raleway;
}
#wrapper {
width:100%;
height:100vh;
}
.obj {
width:500px;
height:200px;
margin-top:14%;
}
.bar {
float:left;
height:200px;
width:5px;
background-color:#95a5a6;
transition: all .5s ease-in-out;
}
.body {
width:495px;
height:200px;
float:right;
}
.body > h1 {
font-size:70px;
color:#333;
padding-top:50px;
}
You can animate the position like this:
$(document).ready(function() {
$('.bar').animate({"left" : 700 +'px'});
});
http://codepen.io/anon/pen/eZpbaP

Run function when all div elements are set to display:none

In this code I want the paragraph text to change to murderer after all the div elements are display to none. In this problem the paragraph text changes to murderer only one of the div elements are display to none. I understand I can use the if statement and give the condition for display:none individually and then run the function but what if there are hundred div elements. This is just a fun experiment and I need an efficient way of doing this.
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#green {
width:200px;
height:200px;
background-color:green;
border-radius:50%;
margin-top:50px;
}
.red {
width:200px;
height:200px;
background-color:red;
margin-top:50px;
}
</style>
</head>
<body>
<div id="green"></div>
<div class="red"></div>
<div class="red"></div>
<h1 id="murder">Hello</h1>
<script>
$("murder").html("murderer!");
$("div").click(function() {
$(this).css("display", "none");
if ($("div").css("display") == "none") {
$("#murder").html("murderer!");
}
});
</script>
</body>
</html>
With jQuery's :visible selector:
if($("div:visible").length == 0) {
// Do stuff
}
Does this give you what you want? You could devise a more sophisticated/complex solution using events but that may be overkill for your requirements?
$("div").click(function() {
$(this).hide();
if ($("div:visible").length == 0) {
$("#murder").html("murderer!");
}
});
This should do it.
$("div").click(function() {
$(this).hide();
if (!$('div:visible').length) {
$("#murder").html("murderer!");
}
});
DEMO:
$("murder").html("murderer!");
$("div").click(function () {
$(this).css("display", "none").addClass("hidden");
alert($("div.hidden").length);
if ($("div.hidden").length == 3) {
$("#murder").html("murderer!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#green {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
margin-top: 50px;
}
.red {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
}
</style>
<div id="green"></div>
<div class="red"></div>
<div class="red"></div>
<h1 id="murder">Hello</h1>
You could also use every function:
function isInvisible(e) {
return e.style.display == "none";
}
$("div").click(function() {
$(this).css("display", "none");
if ($("div").toArray().every(isInvisible)) {
$("#murder").html("murderer!");
}
});
#green {
width:50px;
height:50px;
background-color:green;
border-radius:50%;
margin-top:10px;
}
.red {
width:50px;
height:50px;
background-color:red;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="green"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<h1 id="murder">Hello</h1>

blank space occurs after footer in my html page

i have a html page,it's displaying well if i put my css code in the html.for example
<html>
<head>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">My header</div>
<div id="content">
Content
</div>
<div id="footer">My Footer</div>
</div>
</body>
</html>
when i put this css into external stylesheet it displaying well in first time but after i reloading the same page the empty space occurs at bottom of the page.For example
style.css
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
my.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How To Keep Your Footer At The Bottom of The Page - CSSReset.com</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div><!-- #header -->
<div id="content">
content
</div><!-- #content -->
<div id="footer">
footer
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
how to correct this error?
Any help will be greately appreciated.
try after removing height from footer (in css).footer will take height automatically as per data.

Categories