I am trying to place a ul list at the side of a div. The ul should begin at the right side and at the top of the div, and end on the bottom side of the div.
The problem is that it starts at the bottom of the div, not at the top of it. How can I fix it?
This is my code:
$(document).ready(function() {
$("#map").prepend('<img src="images/d2.png">');
var width = $("#map > img").attr("width");
$("#actions").css("width", width);
});
body {
margin: 0;
padding: 0;
}
nav {
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
position: fixed;
height: 100%;
width: 60px;
background: blue;
z-index: 1;
}
nav:hover {
width: 200px;
}
div#painel {
padding-left: 60px;
background: red;
width: calc(100%-60px);
display: block;
z-index: 0;
text-align: center;
}
div#map-container {
padding: 20px 0 20px;
width: 100%;
background: green;
text-align: center;
}
#map-interface,
div#map {
display: inline-block;
border: 0;
padding: 0;
margin: 0;
}
#map-interface {
background: gray;
list-style: none;
margin-left: -4px;
height: 488px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav>
</nav>
<div id="painel">
<div id="map-container">
<div id="map">
</div>
<ul id="map-interface">
<li>asda</li>
<li>asd</li>
<li>asdsad</li>
</ul>
</div>
</div>
<script src="jquery-1.11.2.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Inside the div#map, I have an image, and inside the list I will have a menu to interact with the image. The ul list should be a block with the same size as the image (or the div).
Try #map-interface { vertical-align:top; } to align inlined-block content to their tops.
Related
Hello I have this smooth scrolling navigation fixed when user's scroll down to the site.. But when the page go up and removes the class nav_fixed the header part jumps through it.. How do I tweak my jquery code that also enables smooth scrolling of the header part when user scrolls up.. As you can see in the sample below the behavior of the header jumps and it's kind of a minor bug.
/* Fixed Header Parallax */
var header_height = $('header').outerHeight(); //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > header_height) {
$('header').addClass('nav_fixed');
$('.dummyHeight').addClass('addHeight');
} else {
$('header').removeClass('nav_fixed');
$('.dummyHeight').removeClass('addHeight');
}
});
.main {height:700px;}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
/* Header */
header {
background: red;
height: 80px;
padding: 10px 40px;
border-bottom: 1px solid #caccd0;
position: relative;
transition: all 0.3s linear;
}
.nav_fixed {
position: fixed;
z-index: 45;
left: 0;
right: 0;
top: 0;
animation-name: fade-in;
animation-duration: 1s;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
nav ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
nav ul li a {
display: block;
color: #232323;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 0 10px;
line-height: 67px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
Sample
<div id="nav_area">
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
</header>
<div class="dummyHeight"></div>
<div class="main">
</div>
May be this what you need? Let me know if you need something else. I have modified script to remove that jump you are telling. I have removed the classes when you reach header scrolling up all the way.
/* Fixed Header Parallax */
var header_height = $('header').outerHeight(); //number of pixels before modifying styles
var offset = $('header').offset();
$(window).bind('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > header_height) {
$('header').addClass('nav_fixed');
$('.dummyHeight').addClass('addHeight');
} else if(scrollTop == offset.top) {
$('header').removeClass('nav_fixed');
$('.dummyHeight').removeClass('addHeight');
}
});
body{
margin: 0;
}
.main {height:700px;}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
/* Header */
header {
background: red;
height: 80px;
padding: 10px 40px;
border-bottom: 1px solid #caccd0;
position: relative;
transition: all 0.3s linear;
}
.nav_fixed {
position: fixed;
z-index: 45;
left: 0;
right: 0;
top: 0;
animation-name: fade-in;
animation-duration: 1s;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
nav ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
nav ul li a {
display: block;
color: #232323;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 0 10px;
line-height: 67px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
Sample
<div id="nav_area">
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
</header>
<div class="dummyHeight"></div>
<div class="main">
</div>
</body>
</html>
I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.
Here's the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="navbar">
<div id="logo">
<a href="#">
<h1>My logo</h1>
</a>
</div>
<ul id="menu">
<li><a class="link-button" href="#">HOME</a></li>
<li><a class="link-button" href="#">ARTICLES</a></li>
<li><a class="link-button" href="#">PROJECTS</a></li>
<li><a class="link-button" href="#">AUTHOR</a></li>
<li><a class="link-button" href="#">CONTACT</a></li>
</ul>
</div>
<div id="welcome">
<h1 id="welcome-text">My Portfolio</h1>
</div>
<div class="container">
</div>
<!-- Here script for hidding navbar on scroll down -->
<script>
window.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(window.pageYOffset > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
</script>
</body>
</html>
And here's the full css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow: hidden;
}
#navbar{
position: sticky;
width: 100%;
top: 0;
transition: background 0.5s;
background-color: transparent;
z-index: 2;
}
#navbar #logo{
float: left;
margin: 10px;
}
#navbar #logo a{
font-size: 155%;
color: #ffffff;
text-decoration: none;
}
#navbar ul{
float: right;
justify-content: space-around;
list-style: none;
align-items: center;
padding: 20px;
}
#navbar ul li{
display: inline-block;
}
/* === Here I'm changing the display property of the navbar to none to make it disappear. === */
#navbar.navbar-scroll{
display: none;
}
.link-button{
display: block;
text-align: center;
margin: 0 15px;
font-size: 89%;
color: #ffffff;
text-decoration: none;
}
.link-button::after{
content: '';
display: block;
width: 0;
height: 2px;
margin-top: 2px;
background: #ffffff;
transition: width .3s;
}
.link-button:hover::after{
width: 100%;
transition: width .3s;
}
#welcome{
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
#welcome::before{
content: "";
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
z-index: -1;
transform: translateZ(-2px) scale(3);
}
#welcome-text{
color: #ffffff;
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
/* text-align: center; */
font-size: 600%;
}
.container{
background-color: #1f1f1f;
height: 1000px;
}
In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.
If there's a better way of hiding the navbar on scroll then that's welcomed as well.
Thanks for your time.
Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.
From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.
Something like this should work as your JavaScript:
document.body.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(document.body.scrollTop > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.
I have a menu made with 3 div's nested in one div, that I am trying to have two different unordered list fade in or fade out depending on which one is showing when it is clicked. It almost works, however after i click on the menu the first time, every other time both list fade in together instead of just one.
HTML and CSS are good, but in js I've tried several variations of code to get it working, but this is the closest I can get it to work.
$(document).on('click','.menu', function()
{
$(".pagelinks").fadeOut('slow', function(){
$(".homelinks").fadeIn('slow');
});
});
$(document).on('click','.menu', function()
{
$(".homelinks").fadeOut('slow', function(){
$(".pagelinks").fadeIn('slow');
});
});
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
h1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 595px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 77%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.nav:hover{
cursor: pointer;
}
.pagelinks
{
margin: auto;
margin-left: 37%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
.homelinks
{
margin: auto;
margin-left: 54%;
position: fixed;
top: -10px;
display: block;
}
.homelinks ul
{
list-style-type: none;
}
.homelinks ul li
{
display:inline-block;
padding:30px;
margin: auto;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
}
.homelinks ul li:hover
{
color: deepskyblue;
transition: 0.6s;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="main.js" async></script>
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
<nav class="pagelinks">
<ul>
<li>Mortgage</li>
<li>Auto</li>
<li>Personal</li>
<li>Refinance</li>
<li>Investment</li>
</ul>
</nav>
</div>
<nav class="homelinks">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<script src="main.js"></script>
</header>
<div>
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
This looks like a situation in which you could use the toggleClass() function. Create and apply a .visible class on one of the <nav> elements. On the click event, do something like $('nav').toggleClass('visible'). See https://api.jquery.com/toggleClass/.
This is just the asynchronous nature of Javascript. What's happening is when you click the '.menu' for the first time two callback functions are called which get stacked in the event loop and when they execute '.homelinks' and '.pagelinks' both fade in.
What you need to do is simply give a class named 'visible' to any one of the two ('.homelinks' or '.pagelinks') and in your function just check for the element with visible class - fade this element out and fade the other one in and after that toggle visible class to the other element and remove visible class from original element.
For instance
initially - '.homelinks' has visible
'.pagelinks' does not have it
Now on click event
fadeout - element with visible class ('.homelinks')
fadein - the other element ('.pagelinks')
remove - visible class from '.homelinks'
add - visible class to '.pagelinks'
Here check this out in Codepen
$('.menu').click(function()
{
console.log("clickk");
let pl = $('.pagelinks');
let hl = $('.homelinks');
if(pl.hasClass('visible')){
pl.fadeOut('slow',function(){
hl.toggleClass('visible');
pl.toggleClass('visible');
hl.fadeIn('slow',function(){});
});
}else{
hl.fadeOut('slow',function(){
hl.toggleClass('visible');
pl.toggleClass('visible');
pl.fadeIn('slow',function(){});
});
}
});
I want the contents of a div to slide down from the top. All of the methods I have tried seem to 'reveal' the contents which is almost static. I want to slide down from off the edge of the screen and push the content too. How would I do this? Jsfiddle here
html
<div id="dolphin">
<div id="lizard"><img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg"></div>
</div>
<div id="content"></div>
css
#lizard {
padding:50px;
display:none;
}
#dolphin {
position: fixed;
width: 100%;
background-color: green;
}
#content {
height: 2000px;
}
js
$(document).ready(function(){
$("#dolphin").click(function(){
$("#lizard").stop().slideToggle("fast");
});
});
You can move things with negative margins to create a slide effect instead of a reveal effect.
This is a very rough example but you can see how it's originally hidden with margin-top: -100%; and revealed by setting margin-top to 0;
$(".slide-button").click(function(){
$(".lizard").toggleClass('slideit');
});
html, body {margin: 0; padding: 0;}
div {
text-align: center;
}
.slide-button {
position: fixed;
top: 0; right: 0; left: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
height: 20px;
background-color: green;
cursor: pointer;
}
.lizard {
width: 100%;
padding-top: 20px;
overflow: hidden;
background-color: green;
transition: all 0.5s ease;
}
.lizard img {
margin-top: -100%;
transition: all 0.5s ease;
opacity: 0;
}
.lizard.slideit img {
margin-top: 10px;
opacity: 1;
}
.content {
height: 1000px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button">slide it</div>
<div class="lizard">
<img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg">
</div>
<div class="content"></div>
fiddle
https://jsfiddle.net/Hastig/qjfgsrL0/1/
I've made a simple Navbar that's fixed to the top.
Originally when at the top, I would like the logo to be slightly larger, then on scroll down make it transition itself into the navbar.
When scrolling back to the top I would like the logo to come back out.
Any help or tips greatly appreciated!
Not scrolled
Scrolled down
Here's a codepen of what I have so far; the logo is oval shaped so I used batman as an example:
http://codepen.io/anon/pen/NRzWXk
HTML:
<nav>
<div id="nav_wrapper">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
<li><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
</li>
<li>Four
</li>
<li>Five
</li>
<li>Six</li>
</ul>
</div>
</nav>
CSS:
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
}
nav {
background-color: #704e46;
top: 0;
position: fixed;
width: 100%;
}
#nav_wrapper {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
Hope you are looking for something like this
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//>=, not <=
if (scroll >= 300) {
//clearHeader, not clearheader - caps H
$("#nav_wrapper").addClass("scrolled");
}
else{
$("#nav_wrapper").removeClass("scrolled");
}
});
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
height: 1000px;
}
nav {
background-color: #704e46;
top: 0;
position: fixed;
width: 100%;
}
#nav_wrapper {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
.logo {
padding: 50px;
transition: all ease-in .25s;
margin-bottom: -30px
}
.logo img{
transform : scale(3);
transition: all ease-in .25s;
}
.scrolled .logo{
padding: 15px;
}
.scrolled .logo img{
transform : scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> Camping Santa Lucia </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<div id="nav_wrapper">
<ul>
<li>One
</li><li>Two
</li><li>Three
</li><li class="logo"><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
</li><li>Four
</li><li>Five
</li><li>Six</li>
</ul>
</div>
</nav>
</body>
</html>
I'm not sure how to do it with pure CSS but since you tagged JQuery I'm going to go with that. The updated codepen is here: http://codepen.io/anon/pen/QyggBJ
Basically you add a position of absolute to your image and place it in the center. Then use jquery to detect scrolling and change position between static and absolute.
CSS:
img{
position:absolute;
right:48%;
}
Jquery:
$(window).scroll(function (e){
var scrollTop = $('body').scrollTop();
var topDistance = $('#nav_wrapper').offset().top;
if (topDistance == 0) {
$('img').css('position','absolute');
}else{
$('img').css('position','static');
}
});
try the jquery scroll() method
$("window").scroll(function() {
$("logo").animate(params);});
for params put in what 2d tranform you want like scale(2,3) etc.
Heres my take on it. Used jQuery for the toggling of the class:
http://codepen.io/banned/pen/GoEvEY
HTML:
<html>
<head>
<title> Camping Santa Lucia </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<div id="nav_wrapper">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<a class="image" href="#"></a>
<ul>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</nav>
</body>
</html>
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
height: 800px;
}
nav {
background-color: #704e46;
position: fixed;
width: 100%;
}
#nav_wrapper {
width: 100%;
text-align: center;
display: block;
}
nav ul {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
display: inline;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
Css:
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
.image {
height: 50px;
width: 80px;
background: url("http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908") no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle;
transition: 0.5s;
transform: scale(2);
margin: 30px 30px 0px;
}
.image.scrolled {
transition: 0.5s;
transform: scale(1);
margin: 0 10px;
}
jQuery:
$(window).scroll(function() {
if ($(window).scrollTop() > 70) {
if (!$(".image").hasClass("scrolled")) {
$(".image").toggleClass("scrolled");
}
} else if ($(window).scrollTop() < 70) {
if ($(".image").hasClass("scrolled")) {
$(".image").toggleClass("scrolled");
}
}
});