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.
Related
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'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;
}
I am trying to achieve the effect shown here:
https://css-tricks.com/almanac/properties/t/transition/
Where the color changes when the user hovers over the element. But I want this to occur overtop a background image I set and for the animation to reverse when the user moves their cursor away from the element.
An example of which can be found here:
http://thefoxwp.com/portfolio-packery-4-columns/
I can get the transition part working with:
.box {
width: 150px;
height: 150px;
background: blue;
<!--background-image: url("http://lorempixel.com/380/222/nature");-->
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
}
<div class="box"></div>
But I am having trouble achieving it with a background image and making the white animation transparent over top of it.
The better way to do it would be to use an overlay over the image and apply transition on its opacity.
See this FIDDLE
Use a wrapper div for both .box and .overlay. Since we want overlay to placed exactly top of the box, we absolute positioned overlay on the top of box.
<div class="wrapper">
<div class="box">
</div>
<div class="overlay">
</div>
</div>
You Css
.wrapper {
position: relative;
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.box {
position: absolute;
//background: blue;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/380/222/nature");
}
.overlay {
position: absolute;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
background: white;
-webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-out;
-o-transition: opacity 2s ease-out;
transition: opacity 2s ease-out;
}
.overlay:hover {
opacity: 0.7;
}
You can add background-image:none on .box:hover. It will remove the background-image and you can get the background-color work. As soon as, you move out of the div.box, image will appear again.
.box {
width: 150px;
height: 150px;
background-image: url("http://lorempixel.com/380/222/nature");
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
background-image:none;
}
<div class="box"></div>
the problem is that background and background-image cannot both exist at the same time. try using nested div tags: one with the background color nested inside the background-image.
below is my code:
html:
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar">
<a href="#menu-toggle" id="menu-toggle" >Press</a>
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span></div>
</div>
</div>
css:
#wrapper {
width: 100vw;
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y:auto;
background: #5F657C;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
js:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
The jsfiddle is below:
JSFIDDLE
My problem is for the left side yellow div, the content inside will kinda squeeze together when the sidebar slide to the left.
I want to make it just hide underneath and don't want the content to be squeezed. Do you guys have any idea?
You could do it like this:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: -250px;
width: 250px;
height: 100%;
overflow-y: auto;
background: #050545;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar content show here
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar">
Press
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span>
</div>
</div>
</div>
</div>
The width is set default to 250px. In my snippet I'm playing with the offset left to hide/show the sidebar. Study my code and you'll see how it works.
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/