I am having some difficulty integrating leaflet with Bootstrap. I am using a script that creates a collapsible left navbar. When I interact with the leaflet map, the bootstrap navbar disappears.
This seems to be a CSS conflict, but I can't seem to identify where to begin troubleshooting. Here is the jsfiddle followed by CSS: http://jsfiddle.net/6sSrE/. Notice that when clicking the map, the navbar disappears.
It would be helpful if another set of eyes could suggest a different direction to identify this problem. I would really like to use Bootstrap for this application, but I can't resolve the conflict.
html, body, #map {
height: 100%;
margin: 0;
}
body .viewport {
position: absolute;
padding: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
body .viewport .frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
padding: 0;
}
body .viewport .frame .navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
body .viewport .frame .menu {
height: 100%;
/* background-color: #3D6AA2; */
}
body .viewport .frame .menu.collapse {
float: left;
height: 100% !important;
width: auto;
}
body .viewport .frame .menu.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
body .viewport .frame .menu.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
body .viewport .frame .menu.collapse.in.width {
width: auto;
}
body .viewport .frame .menu.collapse.in.height {
height: auto;
}
body .viewport .frame .menu .collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
body .viewport .frame .menu .navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
body .viewport .frame .menu .nav-stacked {
padding: 0 10px;
}
body .viewport .frame .view {
width: 50%;
height: 100%;
overflow: hidden;
}
body .viewport .frame .view .navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
body .viewport .frame .view #map {
margin: auto 15px;
text-align: justify;
}
It looks like every time the map gets focused the webpage is moving 78 pixels down. (You might be able to find where this is happening and fix it.)
However I just came up with something quick that would adjust your navbar so that it would show up at the top of the page every time.
$(document).ready(function(){
var margin = 78;
$('#map').on('mousedown',function(){
$('#navBar').css('margin-top',margin+'px');
});
$('#map').blur(function(){
margin = margin+78;
});
});
Note: I also added a ID to your nav bar.
<div class="navbar navbar-inverse" id="navBar">
Here is an example, seems to work pretty good for now, but might be worth your time later to figure out why the page is being moved down.
http://jsfiddle.net/6sSrE/15/
Related
I have a problem with some code I grabbed from Codepen, trying to modify to my needs. I want to be able to see "Our Desks" in the top left side of the screen with the background, idk why but when the background changed the span fades. thanks!
here is the Fiddle: https://jsfiddle.net/zm8ps24a/1/
HTML
<body>
<span class="svc-title"> Our Desks
</span>
<section id="section-1">
<div class="hover-link flexboxcenter">
<div class="nav-1">
Oldschool Desk
<div class="bg-1"></div>
<br>
Modern Desk
<div class="bg-2"></div>
<br>
Modern Desk Version 2
<div class="bg-2"></div>
</div>
</div>
</section>
</body>
CSS
#import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
/* General */
#nr-1:hover + .bg-1,#nr-2:hover + .bg-2{
opacity:8.0;
}
.flexboxcenter {
display: flex;
justify-content: center;
align-items: center;
}
.section-1 {
width: 100%;
height: 100vh;
display: block;
position: relative;
}
.hover-link {
height: 100px;
width: 100%;
z-index: 100000;
}
.hover-link .nav-1 {
z-index: 10000;
}
.hover-link .nav-1 a {
top:50px;
text-align: center;
display: block;
font-family: 'Droid Serif', serif;
text-decoration: none;
color: black;
font-size: 50px;
letter-spacing: 1px;
padding: 10px;
transition: all 500ms ease-in-out;
}
/* Background classes */
.bg-1 {
position: absolute;
top: 0px;
left: 0px;
background: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8') center center no-repeat;
background-size: cover;
height: 200vh;
width: 100%;
z-index: -1;
opacity: 0.0;
-webkit-transition-property:opacity;
transition-property: opacity;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.bg-2 {
position: absolute;
top: 0px;
left: 0px;
background: url('https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3628f27cd5768ece147877e2dd792c6c') center center no-repeat;
background-size: cover;
height: 200vh;
width: 100%;
z-index: -1;
opacity: 0.0;
-webkit-transition-property:opacity;
transition-property: opacity;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
/* Hover effect classes */
.new {
color: white !important;
opacity: 1 !important;
}
.bla {
opacity: 0.3;
}
/* Hover Effect Underline From Center by Ian Lunn */
.hvr-underline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #63A9A9;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
left: 0;
right: 0;
}
.svc-title{
position:relative;
font-size:20px;
font-family:'Heebo';
float:left;
left:20px;
top:10px;
opacity:1;
color: #a2a3a7;
}
JS
//Updated
$(function() {
$('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
$('.hover-link .nav-1 a').toggleClass('bla');
});
});
// Second script - Hover effect on active link
$('.hover-link .nav-1 a').hover(function() {
$(this).addClass("new");
},
function() {
$(this).removeClass('new');
});
just for saying the base code is by Håkan-Filip Swahn.
I was struggling for a bit, I fixed it by adding
#section-1 {
position: relative;
z-index: 5;
}
.svc-title {
position: relative;
font-size: 20px;
font-family: 'Heebo';
float: left;
left: 20px;
top: 10px;
opacity: 1;
color: #a2a3a7;
z-index: 6;
}
#section-1 is the parent of the navigation links
The span disappears because its z-index CSS property is lower than the other elements. Add a higher z-index property value to '.svc-title' and the span will stay visible:
.svc-title{
position:relative;
font-size:20px;
font-family:'Heebo';
float:left;
left:20px;
top:10px;
opacity:1;
color: #a2a3a7;
z-index:100001;
}
I found a nav layout I would like to use but I seem to have run into 2 problems.
problem #1 the transitions in the css do not seem to be transitioning smooth when scrolling up or down.
problem #2 if the scroll position is not zero I do not want mainnav to shrink and i want the top nav to show or hide when i scroll up or down.. thats hard to word so what I am trying to accomplish exactly is the following
https://www.battlefield.com/games/battlefield-4/classes
now when you scroll down it hides the top nav but if you scroll just a little each way it will show or hide thats what I am trying to do.. but I dont want the 2nd nav to scale down unless the top is 0
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.netnav').addClass('hide-nav');
$('.netnav').removeClass('show-nav');
$('.mainnav').addClass('scrolled');
}
else {
$('.netnav').addClass('show-nav');
$('.netnav').removeClass('hide-nav');
$('.mainnav').removeClass('scrolled');
}
});
body {
margin: 0px;
}
.hwrap {
display: block;
position: fixed;
width: 100%;
}
.netnav {
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
z-index: 1;
}
.netnav.show-nav {
top: 0;
transition-duration: .4s;
}
.netnav.hide-nav {
transform: translate3d(0, -40px, 0);
transition-duration: .4s;
}
.mainnav {
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: transform .3s, width .3s;
width: calc(100% - 60px);
}
.mainnav.scrolled {
top: 0;
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
transition: transform .3s, width .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
<div class="netnav">net nav</div>
<div class="mainnav">main nav</div>
</header>
<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>
Demo
http://jsfiddle.net/gos4hwp9/52/
Explanation
Added transition: all ease-in-out .4s for smooth transitions of all properties
If scrollTop > 0 added margin: 0px and border-radius: 0px to bottom (primary) nav, Else made margin and border-radius same as initial state
If scrollDir == "down" added translateY(-50px) to header, Else removed translateY
Moving the whole header will move both navs which is nice as compared to moving them individually
I've slightly changed your transitions and added transitions to the classes which you toggle.
body {
margin: 0px;
}
.hwrap {
display: block;
position: fixed;
width: 100%;
}
.netnav {
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
z-index: 1;
transition: .3s all;
}
.netnav.show-nav {
top: 0;
transition: .3s all;
}
.netnav.hide-nav {
transform: translate3d(0, -40px, 0);
transition: .3s all;
}
.mainnav {
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: .3s all;
width: calc(100% - 60px);
}
.mainnav.scrolled {
top: 0;
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
transition: .3s all;
}
I followed the link you provided and edit the JavaScript and CSS.
Fixed the transitions in the CSS that does not seem smooth in transitioning when scrolling up or down using JavaScript.
You may visit this pen that I edited based on your snippet, and play around with it.
$(window).scroll(function(){
if ($(this).scrollTop() > 15) {
$('.netnav').addClass('hide-nav');
$('.netnav').removeClass('show-nav');
$('.mainnav').addClass('RemoveTop');
}
else {
$('.netnav').addClass('show-nav');
$('.netnav').removeClass('hide-nav');
$('.mainnav').removeClass('RemoveTop');
$('.mainnav').removeClass('scrolled');
}
});
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.mainnav').addClass('scrolled');
}
else {
$('.netnav').removeClass('scrolled');
}
});
body {
margin: 0px;
}
.hwrap{
display:block;
position: fixed;
width: 100%;
}
.netnav{
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
transition: all .3s;
z-index: 1;
}
.netnav.show-nav {
top: 0;
transition-duration: .4s;
}
.netnav.hide-nav {
transform: translate3d(0,-40px,0);
transition-duration: .4s;
}
.mainnav{
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: all .3s,width .3s;
width: calc(100% - 60px);
}
.mainnav.RemoveTop {
top: 0px;
}
.mainnav.scrolled {
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
<div class="netnav">net nav</div>
<div class="mainnav">main nav</div>
</header>
<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>
I am have made a heading (the word Welcome) that reveals itself once the page has loaded (onload="").
Fiddle in case the code below doesn't work.
function animate() {
document.getElementById("mainText").style.width = "100%";
}
#mainText {
margin: 0px;
display: inline-block;
font-size: 100px;
width: 0%;
transition: width 2s;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
The CSS and Plain JS work fine but I want the word "Welcome" to be revealed right side first and then moving along, so from the e to the W, instead of how it currently is, which opens left to right.
I have tried text align: right;, but this doesn't change anything.
I preferably don't want to use any jQuery, if the solution is a JS one.
An example of what the desired look should be, half way though the transition:
You can use the clip-path property to clip parts of the element so they are not visible. This property can also be animated to reveal the element again, using the forwards keyword in the animation so it stays in it's 'revealed' end state.
The inset takes values that are in order: from-top, from-right, from-bottom, from-left.
#text {
margin: 0;
font-size: 100px;
animation: reveal 2s forwards;
}
#keyframes reveal {
from {
clip-path: inset(0 0 0 100%);
}
to {
clip-path: inset(0 0 0 0);
}
}
<h1 id="text">Welcome</h1>
Yes, it is possible using Transitions and Positions:
window.onload = function () {
document.querySelector("h1").classList.add("active");
};
h1 {
overflow: hidden;
display: inline-block;
position: relative;
}
h1 .mask {
position: absolute;
transition: all 0.5s linear;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #fff;
}
h1.active .mask {
right: 100%;
}
<h1><span class="mask"></span>Welcome</h1>
I just wrote an article about this - CSS Transitions & JavaScript for Animated Entry Effects. Hope it is useful... :)
One option is transform: translate with a pseudo element, and no extra element needed.
function animate() {
document.getElementById("mainText").classList.add('show');
}
#mainText {
position: relative;
margin: 0px;
display: inline-block;
font-size: 100px;
white-space: nowrap;
text-overflow: clip;
overflow: hidden;
}
#mainText::after {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background: white;
transition: transform 2s;
}
#mainText.show::after {
transform: translateX(-100%);
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
Another option, an even better solution, using the pseudo with direction and left/width.
This one work in the same way clip-path does, completely transparent against its background, as opposite to having a mask that revels the text, and with much better browser support.
function animate() {
document.getElementById("mainText").classList.add('show');
}
body {
background: black;
}
#mainText {
position: relative;
margin: 0px;
display: inline-block;
font-size: 100px;
white-space: nowrap;
color: rgba(0, 0, 0, 0);
}
#mainText::before {
content: attr(data-text);
position: absolute;
left: 100%;
top: 0;
width: 0;
height: 100%;
color: white;
direction: rtl;
overflow: hidden;
transition: left 2s, width 2s;
}
#mainText.show::before {
left: 0;
width: 100%;
}
<body onload="animate()">
<h1 id="mainText" data-text="Welcome">Welcome</h1>
</body>
Something like this
function animate() {
document.getElementById("overlay").style.width = "0%";
}
#mainText {
margin: 0px;
display: inline-block;
font-size: 100px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
#overlay{
width: 100%;
position:absolute;
top:0;
left:0;
background:#fff;
transition: width 2s;
height:100%;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
<div id="overlay"></div>
</body>
This will require a pseudo-element with a background on top of your heading serving as a mask. Instead of altering the inline styles I will simply add a class is-active. So everything style related can be styled via CSS.
function animate() {
document.getElementById("mainText").className = "is-active";
}
#mainText {
margin: 0px;
display: inline-block;
position: relative;
font-size: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
#mainText:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
background: #FFF;
transition: width 2s;
}
#mainText.is-active:before {
width: 0%;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
I use Transform: translateX to achieve the desired effect.
It slides the text sideways or horizontally on the X axis.
.message {
color: darkred;
font-size: 30px;
display: inline-block;
font-weight: 100;
font-family: sans-serif;
}
.sliding-text-1,
.sliding-text-2,
.sliding-text-3 {
animation-name: slide;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
opacity: 0;
}
.sliding-text-2 {
animation-delay: 2s;
color: darkblue;
}
.sliding-text-3 {
animation-delay: 4s;
color: darkgreen;
}
#keyframes slide {
from {
transform: translateX(200px);
}
to {
transform: translateX(0px);
opacity: 1;
}
}
<h1 class="message sliding-text-1">Hello!</h1>
<h1 class="message sliding-text-2">Thanks for visiting!</h1>
<h1 class="message sliding-text-3">Have a nice day!</h1>
I'm trying to achieve an overlay on divs when i hover them.
Basically i'm adding a class on mouseover and removing the class on mouseleave.
The problem is that i cannot make a transition since the main effect of the class belongs to the :after pseudo element.
I'm actually targeting the div with a placeholderclass called .img-target
CSS
.img-overlay{
height: 100%
width: 100%
transition: all 1s ease;
}
.img-overlay::after{
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, .3);
transition: all 1s ease;
}
jQuery
$(window).ready(function() {
$(".img-target").mouseover(function() {
$(this).addClass('img-overlay',1000);
});
$(".img-target").mouseleave(function() {
$(this).removeClass("img-overlay");
});
});
I've already tried to apply a transition to the :after and to the .img-target but nothing seems to be working.
Any ideas? :)
P.S. unfortunately using after pseudo element is actually the only way to overlay the div becouse of the theme structure.
Your problem is the :after pseudo element does not have an initial state
$(window).ready(function() {
$(".img-target").mouseover(function() {
$(this).addClass('img-overlay', 1000);
});
$(".img-target").mouseleave(function() {
$(this).removeClass("img-overlay");
});
});
.img-target {
position: relative;
background-color: gold;
height: 50px;
width: 50px;
transition: all 1s ease;
}
.img-target::after {
content: "";
display: block;
transition: all 1s ease;
}
.img-overlay::after {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, .3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-target"></div>
if you are only using jQuery for the mouse in and our detection you can use CSS instead .img-target:hover::after {...}:
.img-target {
position: relative;
background-color: gold;
height: 50px;
width: 50px;
transition: all 1s ease;
}
.img-target::after {
content: "";
display: block;
transition: all 1s ease;
}
.img-target:hover::after {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, .3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-target"></div>
I am trying to create a simple full page overlay with bootstrap.
However the overlay is appearing 'behind' my main content (a blue box in the example).
I'm sure I am missing something very obvious however any help would be appreciated.
I need to overlay to disappear when the page is clicked anywhere, this is working.
I have included my current code and a jsfiddle. You can see that the overlay is behind the blue box, which seems to load first?
HTML
<div class="overlay overlay-data">
<p>click anywhere to close this overlay</p>
</div>
<div class="col-md-4">
<div class="menu-item blue">
<p>MY INFO BOX</p>
</div>
</div>
JS
$(document).ready(function () {
$(".overlay").addClass('overlay-open');
$("section").addClass('blur');
});
$(document).on('click', '.overlay', function () {
$(".overlay").removeClass('overlay-open');
$("section").removeClass('blur');
});
CSS
.blur {
-webkit-filter: blur(2px);
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
}
.overlay p {
text-align: center;
position: relative;
top: 20%;
height: 60%;
font-size: 80px;
}
.overlay-data {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
visibility: 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
opacity: 0.5;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.blue {
background: #28ABE3;
}
.menu-item {
padding-top: 45px;
padding-bottom: 45px;
margin-bottom: 45px;
transition: all 0.3s;
border: 5px solid transparent;
}
Specify the z-index in your css to be greater than your main content.
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index: 1;
}
JSFiddle
Read more about it at MDN, z-index.
Use z-index to add overlay effect use this css
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index:99999
}