How to open div over sibling div with Jquery and CSS - html
Hello I'm trying to make a more friendly UI for user when they click on a point on a map. I want the popup button to open a popup vertically (Bottom to Top) from the bottom of the div map. This is on a mobile app and there is not much room to work with. So I've seen a few apps open up the pop-up info from the bottom of the map and cover 1/3 of the map with the pop-up info.
I created a JSfiddle here https://jsfiddle.net/5kdryesz/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap core JS-->
<script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>
<!-- Jquery JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<style>
#map {
height: 700px;
width: 500px;
background-color: rgb(52, 58, 64);
}
.popup {
display: none;
background-color: blueviolet;
width: 500px;
}
</style>
</head>
<body>
<div> Testing </div>
<button id='popupbtn'> popup</button>
<div class='container'>
<div id='map'></div>
<div id='popupdiv' class='popup'> Info This needs to go over Map div
<br>phone: 324234
<br>email: asdfsa#ssdf.sdf</div>
</div>
<div>
testing and thinds
</div>
</body>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
$("#popupbtn").click(function() {
$("#popupdiv").show("slide", {
direction: "down"
}, 600);
})
</script>
</html>
I'm having issues understanding the position css property. I've tried absolute but just couldn't figured it out and I'm curious if absolute will work with all different sizes of phones. Any help is appreciated. Thanks
Hope this may help you.
If you use position:absolute then you should have position relative to its parent div.
google map (.leaflet-bottom) has z-index value 1000 so put our popup on map we should have higher z-index value of popup hence i have put z-index value 1001 to our popup.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
$("#popupbtn").click(function(){
$("#popupdiv").show("slide", { direction: "down" }, 600);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap core JS-->
<script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>
<!-- Jquery JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<style>
#map {
height: 500px;
width: 300px;
background-color: rgb(52, 58, 64);
}
.popup{
display: none;
background-color: blueviolet;
width: 300px;
position:absolute;
bottom:0;
z-index:1001;
}
.container{
position:relative;
}
</style>
</head>
<body>
<div> Testing </div>
<button id = 'popupbtn'> popup</button>
<div class = 'container'>
<div id= 'map'></div>
<div id = 'popupdiv' class = 'popup'> Info This needs to go over Map div
<br>phone: 324234
<br>email: asdfsa#ssdf.sdf</div>
</div>
<div>
testing and thinds
</div>
</body>
<script>
</script>
</html>
I assume this is what you need. I used z-index to put the pop-up on top of the map and fixed positioning to put the pop-up at the bottom.
The height of the pop-up will be the same on each device: 30% of the screen. The with is fixed because the width of the map is fixed and therefore also the pop-up.
If the pop-up needs to be 30% of the height of the map, it can be an absolute value.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
$("#popupbtn").click(function() {
$("#popupdiv").show("slide", {
direction: "down"
}, 600);
})
#map {
height: 700px;
width: 500px;
background-color: rgb(52, 58, 64);
position: relative;
z-index: 10;
}
.popup {
display: none;
background-color: blueviolet;
width: 500px;
height: 30vw;
position: fixed;
bottom: 0;
z-index: 20;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div> Testing </div>
<button id='popupbtn'> popup</button>
<div class='container'>
<div id='map'></div>
<div id='popupdiv' class='popup'> Info This needs to go over Map div
<br>phone: 324234
<br>email: asdfsa#ssdf.sdf</div>
</div>
<div>
testing and thinds
</div>
Related
HTML + CSS - Resize images for mobile only
I'll just jump straight in and show you rather than explain.
So this is how my website looks on browser:
And this is how my website looks when it's viewed on mobile:
Anyone give me any advice on how to fix it? I've tried bootstrap and media queries but im struggling with getting something to resize the images to a small enough size so that they appear next to each other on mobile.
Head:
img.mob-img {
width: 220;
height: 333;
}
#media screen and (max-width: 992) {
img.mob-img {
width: 100px;
height: auto;
}
}
#media screen and (max-width: 600) {
img.mob-img {
width: 100px;
height: auto;
}
}
<head>
<title>DrinkMania - Drink or Dare</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
<meta name="description" content="Drink or Dare! - Truth or dare developed with students in mind!">
<meta name="keywords" content="kings, ring of fire, drinking games, drinkmania, drinking games online,student, frat, dirty pint, kings cup, drinking games online,
app, mobile website, android, ios, reddit, scott montford, playing cards, university, party, friends, talisman webs">
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145322216-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '');
</script>
</head>
<body class="is-preload">
Section of the body:
<!-- Banner -->
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<img id="drinks" class="mob-img" src="assets/js/games/Cards/card-placeholder.png" > OR
<img id="wildcard" class="mob-img" src="assets/js/games/Cards/card-placeholder.png" >
</header>
<ul class="actions special">
<li>Draw 2 Cards</li><br>
</ul>
</div>
Learn More
<video src="images/banner.mp4" muted autoplay loop playsinline></video>
</section>
</body>
I set the image into a container <div style="display:flex; justify-content:center;"> and add max-width to your image css
img.mob-img {
width: 220px;
height: 333px;
}
#media screen and (max-width: 992) {
img.mob-img {
max-width: 100px;
height: auto;
}
}
#media screen and (max-width: 600) {
img.mob-img {
max-width: 100px;
height: auto;
}
}
<head>
<title>DrinkMania - Drink or Dare</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
<meta name="description" content="Drink or Dare! - Truth or dare developed with students in mind!">
<meta name="keywords" content="kings, ring of fire, drinking games, drinkmania, drinking games online,student, frat, dirty pint, kings cup, drinking games online,
app, mobile website, android, ios, reddit, scott montford, playing cards, university, party, friends, talisman webs">
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145322216-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '');
</script>
</head>
<body class="is-preload">
Section of the body:
<!-- Banner -->
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<div style="display:flex; justify-content:center;">
<img id="drinks" class="mob-img" src="https://cdn.pixabay.com/photo/2020/01/31/07/10/billboards-4807268_960_720.jpg" > OR
<img id="wildcard" class="mob-img" src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" >
</div>
</header>
<ul class="actions special">
<li>Draw 2 Cards</li><br>
</ul>
</div>
Learn More
<video src="images/banner.mp4" muted autoplay loop playsinline></video>
</section>
</body>
OK, you don't need to set two different max-widths when the values you're putting in them are the same. I would put the width at 100% with a max-width of 100px if that's the size you need. I'm not a big fan of inline css like you have it. I would rename the div you have the flex applied to and then put the code in with your other styling so it's not all over the place. It just helps to see it in one spot if you can.
<div id="cards">
<img id="drinks" class="mob-img" src="https://cdn.pixabay.com/photo/2020/01/31/07/10/billboards-4807268_960_720.jpg" > OR
<img id="wildcard" class="mob-img" src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" >
</div>
CSS
#cards {
display:flex;
justify-content:center;
}
img.mob-img {
width: 220px;
height: 333px;
}
#media screen and (max-width: 992px) {
img.mob-img {
width: 100%;
max-width: 100px;
height: auto;
}
}
is this what you are trying to do? I made sure it is responsive too. I didn't need to use any of the CSS you provided since you said you are using bootstrap.
I also made a few changes to the HTML by adding more divs to get this result.
if this is not your desired output please let me know in a comment I will try my best to help you out.
Ps. I commented out the video because it was causing horizontal scrolling.
.image-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.image-holder {
padding: 10px;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<div class="holder">
<div class="image-container">
<div class="image-holder">
<img id="drinks" class="mob-img img-fluid" src="https://picsum.photos/200">
</div>
<span>OR</span>
<div class="image-holder">
<img id="drinks" class="mob-img img-fluid" src="https://picsum.photos/201">
</div>
</div>
</div>
</header>
<ul class="actions special">
<li>Draw 2 Cards</li><br>
</ul>
</div>
Learn More
<!-- <video src="images/banner.mp4" muted autoplay loop playsinline></video> -->
</section>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
Background image that worked before Laravel 6.0 doesn't display
I have a view that has a <body></body> that should show a background image. I did it before but now it doesn't work. The background image is downloaded on my computer and it is in the public folder of the project in my Laravel instance.
<!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">
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<title>ACAVUCAB</title>
<style>
body {
padding-top: 56px;
background-image: url(fondo_cerveza1.jpg);
background-size: cover;
}
.dropnegro {
color: #141519;
text-align: center;
}
nav.navbar {
background: #141519;
background: linear-gradient(to right, #424448, #B7BCCD);
}
.tamano {
font-size: 16px;
}
.tope {
margin-top: 10px;
}
.centro {
text-align: center;
}
</style>
</head>
<body>
<div class="app">
#yield('content')
</div>
</body>
<!-- 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="js/bootstrap.min.js"></script>
</html>
It was an issue with the relative path. I have to do url("/fondo_cerveza1.jpg");
bootstrap img responsive height does not keep container height
I have an image that want to be responsive to the container size.
The parent container (cover-photo) has a height of 180px.
The image has a height of 853px. However when using img-fluid, the image does not keep the container height of 180px instead it keeps its own height of 853px.
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- 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="css/bootstrap.min.css">
<style>
.cover-photo {
height: 180px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="cover-photo">
<img class="img-fluid" src="http://newlovewallpapers.in/images/hd-love-images-and-wallpaper/hd-love-images-and-wallpaper-11-1280.jpg" alt="Background profile">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
<script src="js/parallax.js"></script>
</body>
</html>
I understand that img-fluid in Bootstrap is max-width: 100%; and height: auto; and are applied to the image so that it scales with the parent element. But in this case it does not scale to the parent height.
Any insights? Thanks!
Good morning
You need to give following CSS to img-fluid class
.img-fluid {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
Bootstrap welcome popup and hover
I need a little help to create this. My idea is to have a welcome popup on my web page. When the user firstly loaded the site. [ And after few seconds i need to place this image on top right corner of the site. like this How can i do this by using bootstrap css. Please help me :)
This is with Bootstrap 4 and JQuery. JQuery slim changed to min to allow animations. Run the code snippet.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
img {
width: 100%;
width: 100%;
position: relative;
float: right;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<img src="https://i.stack.imgur.com/Jrbqf.png">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$( document ).ready(function() {
$('img')
.hide()
.fadeIn(1000)
.delay(2000)
.animate({
width: "50%",
height: "50%"
}, 1500);
});
</script>
</body>
</html>
Load polymer element inside bootbox
I'm trying to create a map inside a bootbox dialog. Here is the code.
bootBox.dialog({ title:"test", message = "<div><google-map latitude='37.77493' longitude='-122.41942'></google-map></div>" });
It creates the dialog, creates the maps box with Google logo at bottom but do not load the map. It remains gray.
I found that if I open or close Chrome Developer Tools after the dialog has displayed the map is rendered.
Any suggestion?
Edit after comments:
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/global/plugins/bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/global/plugins/bootbox/bootbox.min.js"></script>
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<button onclick="ft()">Open Map</button>
<script>
var ft = function(){
bootbox.dialog({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'});
}
</script>
</body>
Set the height of google-map for it to appear:
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'})
</script>
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
</head>
<body>
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({
title: 'test',
message: '<div><google-map latitude="37.77493" longitude="-122.41942"></google-map></div>'
})
</script>
</body>
codepen