I'm a beginner in web development.
I'm trying to create a website with Google Maps, and I also want a menu sliding in and out on the left side.
The problem is: when the menu is going in, it pushes the map lower, instead of covering it, like it should. Also the CSS that makes that menu slide, doesn't seem to work properly, meaning it does not "slide".
Menu Hidden: http://imgur.com/UIiYsXf
Menu Showing: http://imgur.com/3IFyJNF
I searched a lot, tried an awful lot of stuff, but I just can't seem to make it work.
The nav menu is called 'menu' and the div that contains the map is called 'map'.
Any help appreciated, and please keep it simple. Thank you.
Here's my HTML code:
<% #page_title = "Main Page" %>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<title>Google Map Demo</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" id="menuToggle"> <label for="menuToggle" class="menu-icon">☰</label>
<div id = "qne_header"> TITLE</div>
<nav class="menu" >
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>INSPIRATION</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="map"></div>
<script>
var resize_flag=true;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.53, lng: 22.88},
zoom: 8,
disableDefaultUI: true
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyRSefwx9vuhCMEOLrxXsinO2efTsf4K4&callback=initMap"
async defer></script>
</body>
</html>
Here's my CSS code:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#qne_header{
height : 5%;
background-color: #b3e6ff;
text-align: center;
font-size: 200%;
}
#map {
position:absolute;
height: 99%;
width: 100%;
margin: auto;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
a {
text-decoration: none; color:#00a5cc;
}
nav {
width:10%;
text-align:center;
}
nav a {
display:block; padding: 15px 0; border-bottom: 1px solid #C3AA6E; color:#F0EADC;
}
nav a:hover {
background:#E5DAC0; color :#FFF;
}
nav li:last-child a {
border-bottom:none;
}
.menu-icon {
padding:10px 20px;
background:#FFFFFF; color:#987D3E;
cursor:pointer;
float:left;
margin-top:4px;
border-radius:5px;
margin-top: 5px;
}
#test{
position:relative;
}
#menuToggle { display:none; }
#menuToggle:checked ~ .menu {
position:absolute;
left:0px;
}
.menu {
width: 240px;
left: -240px;
position:absolute;
background:#FFFFFF;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
li {
list-style-type:none;
}
Remove position:absolute; off of .menu and it works.
EDIT:
#map{ z-index: -1; }
This allows the Map to be below the header/menu sections.
#map {
position:absolute;
height: 99%;
width: 100%;
margin: auto;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
z-index: -1;
}
This may cause issues with adjusting the map -- posting a JSFiddle will help everyone troubleshoot.
This solution is very simple, the menu is actually showing up at the right place when you press the button. The problem is that it appears to be below the map.
Give the .menu class a z-index of 1 and the menu will position itself in front of the map.
.menu {
z-index: 1;
}
Related
I've done some research and it doesn't seem that I can find exactly what I'm looking for. My goal is to have a navigation bar on the bottom of my JS-app and when a user clicks a certain button, it would start an animation where the navbar travels from the bottom of the app to the top of the app. Here's some edits I made to illustrate what I mean:
default position
after user presses "profile" button, for example
Not sure what JS library would help me with this or if there is a code-sample. The key here is that I dont want it to shift on any button clicked, only certain ones. For example, if the user clicks on "Library" from my example above, I want it to stay on the bottom.
Might anyone know how I can accomplish this?
EDIT: so the reason im doing this is because this is an electron app that i want some content to be local, and some content to be remote. This is why when the users presses "Library" i would want the navbar to remain stationary. However if the user presses "Profile" it would shift to the top and the "content" window would act sort of like a web-browser in that it would load a page on a remote webserver. I hope that helps. And thanks for all the info!
EDIT 2: A little off-topic, but i get this weird padding that im not sure where is coming from:
weird space
EDIT 3:
Heres the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS:
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}
You can use some JS to add a class to your nav bar to do the animation, and you can add this class when clicking on a button with specific IDs.
Below is a snippet that demonstrates this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
If you don't want it to animate, but just jump to top or bottom, then you can remove all of these lines:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Here is a snippet demonstrating this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
These examples us some JQuery, but if you want pure JS, you should be able to port it over to Vanilla with a bit of thought put into the code I have supplied.
It seems pretty straight forward but we need to know which property did you use to position the navbar at the bottom?. Best solution would be to create two css Properties of different properties in flexbox behavior then just use JavaScript to change the nav id corresponding the properties when the profile is clicked.
You can animate the navbar to slide between 2 vertical positions with css as such:-
#keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
Modify the "bottom" property to suit your page height and other requirements.
This question already has answers here:
Removing Class with Mouse Exit
(7 answers)
Closed 5 years ago.
I want to change the background image of a div when I hover over a li element. This I have figured out, as you can see in this https://jsfiddle.net/7zpt7g6b/! :) The only thing is that I want to change the pic back to the original CSS when I hover of the li element (hope I'm being clear). Now the div of the background-image keeps having the image of the last li I have hovered on. I want this to change back
My HTML
<section class="content">
<div class="projects">
<ul>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE I</li>
<li data-background="https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg">CASE II</li>
<li data-background="https://iso.500px.com/wp-content/uploads/2016/11/stock-photo-159533631-1500x1000.jpg">CASE III</li>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE IV</li>
</ul>
</div>
<div id="background">
<h1 style="color:#fff;">RICHIE / WEB DESIGN / UI / UX / BLABLABLA</h1>
</div>
</section>
My CSS
.projects ul{
list-style-type:none;
}
.projects a{
display:inline-block;
padding:10px;
text-decoration: none;
color:#434343;
font-size: 20px;
text-transform: uppercase;
font-family: 'Sorts Mill Goudy', serif;
line-height: 20px;
text-indent: -50px;
}
.projects a:hover{
}
.projects ul:hover li {
opacity: .5;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
.projects ul li:hover {
opacity: 1;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
#background {
background: url("https://www.aviary.com/img/photo-landscape.jpg");
width: 50%;
height: 100%;
position: fixed;
background-size: cover;
padding:50px;
background-position: center 30%;
}
My JS
var links = $(".projects li");
links.on("mouseover",function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url("+url+")");
});
It's probably just a simple edit on the Jquery, but I can't seem to find out what I have to add/change.
Thank you! I hope I'm being clear (if not I'd love to explain more)
You can add this mouseout function to the JS, using the URL of the background-image in your original CSS rule:
links.on("mouseout",function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url('https://www.aviary.com/img/photo-landscape.jpg')");
});
https://jsfiddle.net/t0n0u5yv/
Here you go! use .mouseleave()
var links = $(".projects li"),
sDefaultUrl = 'https://www.aviary.com/img/photo-landscape.jpg';
links
.mouseover(function(){
var sUrl = $(this).attr("data-background");
$("#background").css("backgroundImage","url(" + sUrl + ")");
})
.mouseleave("mouseover",function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url(" + sDefaultUrl + ")");
});
.projects ul{
list-style-type:none;
}
.projects a{
display:inline-block;
padding:10px;
text-decoration: none;
color:#434343;
font-size: 20px;
text-transform: uppercase;
font-family: 'Sorts Mill Goudy', serif;
line-height: 20px;
text-indent: -50px;
}
.projects a:hover{
}
.projects ul:hover li {
opacity: .5;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
.projects ul li:hover {
opacity: 1;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
#background {
background: url("https://www.aviary.com/img/photo-landscape.jpg");
width: 50%;
height: 100%;
position: fixed;
background-size: cover;
padding:50px;
background-position: center 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content">
<div class="projects">
<ul>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE I</li>
<li data-background="https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg">CASE II</li>
<li data-background="https://iso.500px.com/wp-content/uploads/2016/11/stock-photo-159533631-1500x1000.jpg">CASE III</li>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE IV</li>
</ul>
</div>
<div id="background">
<h1 style="color:#fff;">RICHIE / WEB DESIGN / UI / UX / BLABLABLA</h1>
</div>
</section>
You can use jQuery's mouseleave event.
https://api.jquery.com/mouseleave/
links.mouseleave(function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url("+[your-original-url]+")");
});
I have googled repeatedly and can not find a working answer to this query...
Website: http://miners-arms.wearepixel.co.uk/job-vacancies/
When you scroll down the page of this site the header changes. What I would like to know is, how can I add a fade transition when the change takes place?
Similar to this site: https://www.venndigital.co.uk/technology/
Many thanks,
With this script:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 110) {
//$("#headertop").addClass("parallax-window-top");
$("#headertop").fadeIn(200);
} else {
//$("#headertop").removeClass("parallax-window-top");
$("#headertop").fadeIn(200);
}
});
You are toggling a class called parallax-window-top:
.parallax-window-top {
min-height: 35px;
background: #fff;
opacity: 1;
z-index: 99999;
border-bottom: 1px solid #23bcbf;
height: 60px;
transition: display .5s ease;
-webkit-transition: display .50s ease;
-moz-transition: display .50s ease;
-o-transition: display .50s ease;
}
As you see, the display is the only thing that you want to transition. I think that opacity or height would be more appropriate. But also, this transition doesn't exist until you set the class. So when you toggle it off, you also remove the transition, which I think would make it fail. If display would be on and off based on the class, even if you transition opacity or height, you still couldn't see any change.
Here is a fiddle with a working example: https://jsfiddle.net/kas6r6rg/
I added a height and different transition times for opacity and height: https://jsfiddle.net/kas6r6rg/1/
Notice that removing the height value from the original CSS disables the effect. That is because transitions work on continuous properties, like numbers. Display is discreet: 'block','none'; there are no intermediate values between them.
So in your case, just change the CSS like this:
#headertop {
position: fixed;
width: 100%;
overflow: visible;
transition: opacity .5s ease;
-webkit-transition: opacity .50s ease;
-moz-transition: opacity .50s ease;
-o-transition: opacity .50s ease;
opacity: 0;
}
.parallax-window-top {
min-height: 35px;
background: #fff;
opacity: 1 !important;
z-index: 99999;
border-bottom: 1px solid #23bcbf;
height: 60px;
/* transition: display .5s ease;
-webkit-transition: display .50s ease;
-moz-transition: display .50s ease;
-o-transition: display .50s ease;*/
}
Ok this one works form me:
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tst</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<style type="text/css">
.content{
height:1600px;
}
.parallax-window-top {
min-height: 35px;
background: #fff;
opacity: 1;
z-index: 99999;
border-bottom: 1px solid #23bcbf;
height: 60px;
transition: display .5s ease;
-webkit-transition: display .50s ease;
-moz-transition: display .50s ease;
-o-transition: display .50s ease;
display:block;
}
#headertop {
position: fixed;
width: 100%;
overflow: visible;
background-color:#808080;
display:none;
}
body {
margin: 0px;
padding:0px;
}
</style>
<script type="text/javascript">
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 110) {
//$("#headertop").addClass("parallax-window-top");
$("#headertop").fadeIn(200);
} else {
//$("#headertop").removeClass("parallax-window-top");
$("#headertop").fadeOut(200);
}
});
</script>
</head>
<body>
<div id="headertop" >
HEADER
</div>
<div class="content">
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
</div>
</body>
</html>
I can't figure out whats wrong with it.. it worked fine before, I don't now what I changed to make it break.. The jQuery should be correct and the cdn works as well..
check my pen: http://codepen.io/mathiasvanderbrempt/pen/oXMJRr
HTML:
<div class="header">
<p class="covertxt">INTERIEURINRICHTING <br> & SCHRIJNWERKERIJ</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
CSS:
.header {
background:#333;
z-index: 5;
margin: 0 auto;
width: 80%;
max-width: 500px;
top: 30vh;
/*absolute centering*/
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #fff;
}
.header img {
width:100%;
}
.header p {
font-size: 22px;
font-family: montserratlight;
letter-spacing: 0.4em;
line-height: 1.3em;
text-transform: capitalize!important;
cursor: default;
text-align: center;
-webkit-transition: all 1.25s ease-in-out;
-moz-transition: all 1.25s ease-in-out;
-ms-transition: all 1.25s ease-in-out;
-o-transition: all 1.25s ease-in-out;
transition: all 1.25s ease-in-out;
}
jQuery:
$(document).ready(function() {
var delay = 3000; //3 seconds
setTimeout(function() {
$('.header p').fadeOut(300, function() {
$(this).text("A LIFESTYLE FOR EVERYONE").fadeIn(300);
});
}, delay);
console.log("replaced");
});
I'm not entirely sure what you're trying to do but commenting out all the xxx-transition properties makes the text fade.
See corrected pen
I have a div that have img with id and another div inside it
I want to hide the info div (you can see in code) on load of the page and then show it again on hover of the img - I also want the info div to slide right nicely..
Thanks in advance for helping :)
the HTML
<div class="wrapper">
<img id="logo" src="img/logo.png" alt="logo">
<div id="info">
info- blah <br>
blah & blah .<br>
email#gmail.com
</div>
</div>
The CSS
.wrapper{
float: left;
opacity: 0.4;
margin-top: -30px;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#logo {
width: 39px;
}
.wrapper:hover{
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
}
What is the jQuery I need for this?
Here's one way to do it.
I don't know if that's what you wanted, but since you're already using CSS3, you don't need jQuery for that:
.wrapper {
float: left;
opacity: 0.4;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
overflow:visible;
position:relative;
}
.wrapper:hover {
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
opacity:0;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
left:50%;
position:absolute;
top:0;
}
.wrapper:hover #info {
left:100%;
opacity:1;
}
http://jsfiddle.net/Y2B2v/
Place your .wrapper with the same image height. Place an overflow:hidden to hide text which is under.
After you must just change height in .wrapper:hover to show the text.
If you want a nice transition, you can adjust that with
.wrapper:hover{
opacity: 0.6;
height:100px;
transition: height 1;
-webkit-transition: height 1s; /* Safari */
}
like this : http://jsfiddle.net/AW9qh/2/