Displaying full map without scrolling using bootstrap and leaflet? - javascript

I'm working on a Web GIS, and I just learned about JavaScript and Bootstrap.
I want to make a website with 2 columns for text and map (col-4 and col-8). However, col-8 don't display the whole map, and I should scroll to the right and below to see more map. Also, the right-side map looks more extended than the navbar. I've tried to edit the style but it still doesn't work. Here's my html and css code:
HTML
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div>
<h3> About Jakarta Landmark Markers Map</h3>
</div>
</div>
</body>
<link rel="stylesheet" href="./leaflet/leaflet.css">
<div class="col-8">
<body>
<div id="map"></div>
<!-- <script src="index.js"></script>
<script src="./leaflet.ajax.js"></script> -->
</div>
</body>
</html>
CSS
.navbar{
padding: 20px 20px 10px 10px;
background-color: #28a7e9;
transition: all ease 0.4s;
position: relative;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
#map {
flex: 1;
width: 100%;
height: 360px;
position: absolute;
margin:0;
padding:0;
}

Related

How to re-create Facebook image modal?

I want to create something almost exactly like the Facebook image modal wherein the image is fixed while a user scrolls through the comments. I am messing with different ways to apply overflow: hidden to one div and overflow: scroll to the other. I even looked into applying it to their parent. Here is the code I've tried:
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>
div.image {
height: 300px;
overflow: hidden;
}
div.text-section {
height: 1000px;
overflow: scroll;
}
div.container {
height: 300px;
}
Plunkr
I supposed a code like this. The blue (image) remains fixed on the left, while you can scroll the green section (comments) on the right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container { background: red; width: 400px; height: 150px; display: flex; }
#image { background: url("https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb(255,255,255)"); width: 200px; height: 150px; }
#comments { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }
</style>
</head>
<body>
<div id="container">
<div id="image"></div>
<div id="comments">
<h3 style="color: red;">Comments</h3>
<p>Nice!</p>
<p>Good!</p>
<p>Wonderful</p>
<p>Bah...</p>
<p>Strange</p>
<p>Nice again</p>
<p>Amazing</p>
<p>Beautiful</p>
<p>Great</p>
<p>I don’t like it</p>
<p>Yes, nice</p>
<p>Super</p>
<p>Normal</p>
<p>Ok...</p>
<p>Nice</p>
<p>Bah</p>
<p>Great</p>
<p>Nice</p>
<p>I like it</p>
<p>Normal</p>
</div>
</div>
</body>
</html>
I don't have facebook so cant look at the behaviour, but you could put position: sticky; on the image container, that will keep it in place. It also depends on your browser support, like ie11 does not support it, but there are more ways to do this. Let me know if you need a more cross browser solution.
.container {
max-height: 600px;
height: 100%;
overflow: auto;
position: relative;
}
div.image {
height: 300px;
background-color: deepskyblue;
position: sticky;
top: 0;
}
div.text-section {
height: 1000px;
background-color: aqua;
}
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>

Image drag glitchy on mobile

I've built a quick block which allows someone to zoom in on an image and then drag (pan and zoom).
To do this, I have used panzoom:
jQuery(document).ready(function( $ ) {
$("#panzoom").panzoom({
$zoomRange: $(".zoom-range"),
$reset: $(".reset"),
contain: 'invert',
});
});
.wrap{
position: relative;
background: black;
padding: 60px 20px;
height: 600px;
}
.wrap .padding, section{
height: 100%;
}
.wrap .buttons {
position: absolute;
z-index:1;
top: 0;
right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/2.0.6/jquery.panzoom.min.js"></script>
<div class="wrap">
<div class="padding">
<section>
<div id="panzoom" style="text-align: center">
<img src="https://i.imgur.com/KhWo66L.png" width="100%">
</div>
</section>
<section class="buttons">
<button class="reset">Reset</button>
<input type="range" class="zoom-range">
</section>
</div>
</div>
The above works fine on desktop. But on mobile, since the user users the screen to scroll, when trying to drag the image across, it "stutters".
Difficult to explain, best demo'd on an actual device.
Any ideas on what the issue is here?
Use this library instead, it's more stable
// just grab a DOM element
const element = document.querySelector('.wrap');
// And pass it to panzoom
panzoom(element);
.wrap{
position: relative;
background: black;
padding: 60px 20px;
height: 600px;
}
.wrap .padding, section{
height: 100%;
}
.wrap .buttons {
position: absolute;
z-index:1;
top: 0;
right:0;
}
<script src='https://unpkg.com/panzoom#8.7.3/dist/panzoom.min.js'></script>
<div class="wrap">
<div class="padding">
<section>
<div id="panzoom" style="text-align: center">
<img src="https://i.imgur.com/KhWo66L.png" width="100%">
</div>
</section>
<section class="buttons">
<button class="reset">Reset</button>
<input type="range" class="zoom-range">
</section>
</div>
</div>

How do I have a navbar and body loaded from other html and update by the navbar?

So I have an index page with some bootstrap code to make the columns resize. I want to have a navbar on the left side and the body for the rest. However, I want to have more than one navbar. I want to create a few categories across the top and depending on which one of those you choose, it will load a navbar and a default body page into the bootstrap columns. It's for a tabletop RPG that I am writing.
So if I have Character Creation, Combat, Magic, Vehicles, etc. across the top and you click on Character Creation then it will load the navbar on the left for character creation and the main body would have a default overview page. If you click a link in the navbar, I want it to change the page on the main body.
I know how to do this the slow way and create a huge number of pages with all the navbars and such already in there. If I update one section, I have to go through and update dozens of pages.
I am trying to teach myself javascript and I know that I can do it in there but I am not sure how.
I can't seem to find an example of this to figure out the coding. I assume that there would be a variable that is being changed by the navbar when you click on the navbar links? Not sure.
This is what I have for the test index page:
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<h1>This is Test 4</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="thumbnail">
<div class="caption">
<div class="load-html" id="Navbar" data-source="navBar.html"></div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="thumbnail">
<div class="caption">
<div class="load-html" id="mainBody" data-source="test3.html"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$(".load-html").each(function () {
$(this).load(this.dataset.source);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
I have written a basic JS example for you below which will work ok in a small project, however it would not scale well in a larger project. You would be better learning a framework like vue.js and using the router along side it, or just using a router like the one Jon B linked you to in his comment above.
Anyway, something this will get you going. I have included a couple tricks which you will likely use in the future, for example data attributes, foreach loops and querySelectors and updating the dom. Let me know if you have any questions and enjoy Javascript :)
// Get all the nav items
var navItems = document.querySelectorAll(".nav-item");
var sideNavTitelEl = document.getElementById('side-nav-title');
var containersEls = document.querySelectorAll(".content");
// selected will be set to the nav item that was clicked on
var selected = 0;
// Add an event listener to all the nav items
navItems.forEach(addingEventListener);
function addingEventListener(item, index) {
item.addEventListener('click', function() {
// the item is what nav item we clicked on,
// lets set the side nav and main container value to be what was clicked on
sideNavTitelEl.innerHTML = item.innerHTML;
// Now lets update the main page container
selected = parseInt(item.dataset.value);
// We use the displayNone to show / hide a container.
// In a large scale project, you will want to begin to look at using a router, as this will speed
// up your site. For this example, it will work fine as is here.
// Hide and show the correct content on page
containersEls.forEach(hideContent);
});
}
function hideContent(item, index) {
if(index === selected) {
// we want to show this container
item.classList.remove('displayNone');
} else {
// hide the container
item.classList.add('displayNone');
}
}
body {
box-sizing: border-box;;
margin: 0;
padding: 0;
position: relative;
}
.top-nav {
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.logo {
margin-left: 30px;
margin-right: auto;
}
.nav-item {
margin-left: auto;
margin-right: 30px;
}
.nav-item:hover {
cursor: pointer;
}
.side-nav {
width: 200px;
height: calc(100vh - 60px);
position: absolute;
top: 60px;
left: 0;
display: flex;
align-items: center;
flex-direction: column;
}
.main-container {
width: 200px;
height: 200px;
background-color: yellow;
margin-left: 200px;
width: calc(100% - 200px);
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.displayNone {
display: none;
}
.container-one {
background-color: red;
}
.container-two {
background-color: green;
}
.container-three {
background-color: blue;
}
<div class="top-nav">
<p class="logo">Home</p>
<p class="nav-item item-1" data-value='0'>Item 1</p>
<p class="nav-item item-2" data-value='1'>Item 2</p>
<p class="nav-item item-3" data-value='2'>Item 3</p>
</div>
<div class="side-nav">
<p id="side-nav-title">Home</p>
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
<div class="main-container">
<div class="content container-one" data-value='1'>
<h1>Container 1</h1>
</div>
<div class="content container-two displayNone" data-value='2'>
<h1>Container 2</h1>
</div>
<div class="content container-three displayNone" data-value='3'>
<h1>Container 3</h1>
</div>
</div>

How to center align an element vertically? [duplicate]

This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Vertical alignment in Bootstrap 4
(2 answers)
Closed 5 years ago.
http://jsfiddle.net/m9121mxt/
This is my case. I want the button to stay in the center of viewmorebutton element. I tried margin:auto; and text-align: center; but they doesn't work. How can I center align the button in the middle vertically?
Thanks!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--facebook icon-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.thirdpage{
height: 90vh;
background-color: #101427;
}
.thirdoutter{
position: relative;
margin: 0 auto;
width: 80%;
height: 100%;
}
.viewmorebutton{
margin:auto;
height: 80%;
text-align: center;
}
</style>
<div class="thirdpage">
<div class="thirdoutter">
<div class="viewmorebutton">
<button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
</div>
</div>
</div>
If you just add the classes d-flex align-items-center justify-content-center to the div around your button, then you don't need any custom css because those Bootstrap 4 classes will do the job. After all, since you are loading Bootstrap 4 anyway, you might as well use it.
Here's the working code snippet (click the "run code snippet" button below):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.thirdpage{
height: 90vh;
background-color: #101427;
}
.thirdoutter{
position: relative;
margin: 0 auto;
width: 80%;
height: 100%;
}
.viewmorebutton{
margin:auto;
height: 100%;
text-align: center;
}
</style>
<div class="thirdpage">
<div class="thirdoutter">
<div class="viewmorebutton d-flex align-items-center justify-content-center">
<button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
</div>
</div>
</div>
One way to center items inside a div is set display to table to your .thirdoutter and display table-cell to the .viewmorbutton
.thirdpage{
height: 90vh;
background-color: #101427;
}
.thirdoutter{
display: table;
position: relative;
margin: 0 auto;
width: 80%;
height: 100%;
}
.viewmorebutton{
display: table-cell;
vertical-align: middle;
text-align: center;
margin:auto;
height: 80%;
}
.largercavas{
height: 100%;
width: 50%;
object-fit: cover;
}
.largerimg{
width: 100%;
max-height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="thirdpage">
<div class="thirdoutter">
<div class="viewmorebutton">
<button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
</div>
</div>
</div>
You have given .thirdoutter a position of relative, which is needed to make it an absolute container for .viewmorebutton
.viewmorebutton {
position: absolute;
top: 50%;
transform: translate(0, -50%) }
position: absolute will be in relation to its parent container
top: 50% will vertically centre item
transform: translate (0, -50%) will move the item itself up by half its own height to fully centre it

fadein heading while the buttons remains constant in jquery

I'm very much basic to jquery so im doing a site where when the page loads, i want my Heading on the top jumbotron fadeIn while the buttons below remains constant.
Could someone help me with this.because the buttons stay on top when the page starts and comes back to its position, i mean to the bottom. when the page completely loads and the Heading fadein...
$(document).ready(function () {
$('.main-heading').fadeIn(1000).removeClass('main-heading-hidden');
});
.jumbotron {
background-image: url("googlenownewyork.png");
background-position: center center ;
background-repeat: no-repeat;
background-size: cover;
width:100%;
height: 600px;
margin:0;
padding: 0;
}
.main-heading{
color: white;
text-align: center;
padding-top:140px;
}
.main-heading-hidden{
display: none;
}
.header-button{
text-align: center;
padding-top: 30px;
}
.header-button .btn:hover{
color: white;
background-color: black;
}
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" ></script>
<script src="metcorp.js" type="text/javascript"></script>
<div class="jumbotron">
<div class="container first-div">
<div class="row main-heading main-heading-hidden">
<h1>Mount Edge Technologies</h1>
<h3></h3>
</div>
<div class="row header-button btn-padding">
<button type="button" class="btn">About Us</button>
<button type="button" class="btn">Get A Quote</button>
</div>
</div>
</div>
display: none removes the header from the layout of the page.
Rather than display, try opacity.
You can also do this with css3 animations fairly easily, avoiding needing to use jquery's fadeIn function at all.
Live Demo
Add this script link to your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" type="text/javascript"></script>
And Don't write this code in ready function:
write directly in script
$('.main-heading').fadeIn(2000).removeClass('main-heading-hidden');

Categories