I want to turn on the div #overlay opacity: 1 when I move mouse over div #header. Also it's important that #header remains relative, so it won't affect that.
I tried to do this with jQuery (code below), but it did not work at all.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Overlay Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#header").hover(function(){
$("#overlay").fadeTo(200, 1);
}, function(){
$("#overlay").fadeTo(200, 0, function(){
$(this).hide();
});
});
</script>
<style>
body {
padding: 0;
margin: 0;
font-family: Arial, Helvetica;
font-size: 1rem;
color: #7a7a7a;
}
#header {
padding: 20px 60px;
position:relative;
height:auto;
width: auto;
background: #f6f6f6;
text-align: center;
z-index: 10;
}
#content {
padding: 60px;
text-align: center;
z-index: 1;
background: #D1D1D1;
width: auto;
height: auto;
}
#overlay {
background: rgba(0, 0, 0, 0.5);
opacity:0;
height: 100%;
left: 0;
top: 0;
position: fixed;
width: 100%;
z-index: 5;
</style>
</head>
<body>
<div id="header">
<h1>Header menu area</h1>
</div>
<div id="content"><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3></div>
<div id="overlay"></div>
</body>
</html>
JSFiddle: https://jsfiddle.net/tuuni/o5pLuvr1/2/
This is how I want the header to look like if I move mouse over it:
Neither the JSFiddle and nor the code you included in your question will work, but they don't work for different reasons. The JSFiddle doesn't work because you haven't included the jQuery library. But otherwise, it should work. But let's focus on the code you provided. Let's look at your code with the less relevant portions omitted.
<!DOCTYPE html>
<html>
<head>
<!-- Other Tags -->
<script>
$("#header").hover(
function() {
$("#overlay").fadeTo(200, 1);
},
function() {
$("#overlay").fadeTo(200, 0, function() {
$(this).hide();
});
}
);
</script>
<!-- Other Tags -->
</head>
<body>
<div id="header">
<h1>Header menu area</h1>
</div>
<div id="content">
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</h3>
</div>
<div id="overlay"></div>
</body>
</html>
$("#header", ...) runs before the content in the body is created in the DOM, so the hover event listener can't attach to anything. You can fix this by wrapping it all in a $(document).ready() call, as shown below. This waits for the body to be created in the DOM before attaching the hover event listener. You can read more at the jQuery docs site.
$(document).ready(function() {
$("#header").hover(
function() {
$("#overlay").fadeTo(200, 1);
},
function() {
$("#overlay").fadeTo(200, 0, function() {
$(this).hide();
});
}
);
});
Related
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<br />
<input id="datetimepicker" type="text" >
<div id="navbar">
Home
News
Contact
</div>
<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
<p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
<p>Scroll down this frame to see the effect!</p>
<p>Scroll up to show the navbar.</p>
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
$(function(){
$('#datetimepicker').datetimepicker({
inline:true,
});
})
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
</script>
</body>
<!-- XDSoft DateTimePicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>
</html>
I am using the following calendar with Django:
https://xdsoft.net/jqplugins/datetimepicker/
Problem is that when scrolling down the page, Month and Year calendar
components goes over my menu-bar. There is a way to fix this ? maybe
to override some css from the calendar or in my HTML/Javascript ?
I reproduced my scenario within an HTML example from w3school. See code snipped.
No need to be set such a high z-index value for inline calendar since
is not showing up over the date field like the default calendar.
Instead of z-index: 9999 use z-index: 101 like the dropdowns for
month and year uses. Solution is to override calendar's css:
<script>
.xdsoft_datetimepicker .xdsoft_label {
z-index: 101 !important;
}
</script>
When I randomize position of some divs with text and some others with images (on load and using setInterval), images always get on the top of the divs with text. I’ve been trying to find a solution by myself but I just started learning how to code a few weeks ago, and I don’t even know what am I looking for. So I’d appreciate if someone could help me. This is my code so far:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title></title>
<style>
div{
position: absolute;
}
.description{
width: 650px;
}
</style>
<script type="text/javascript">
function Init(){
divs = document.querySelectorAll("div");
setInterval (mover, 500);
}
function mover(){
divs.forEach(div => {
var spaceH =window.innerHeight - div.clientHeight;
var spaceW =window.innerWidth - div.clientWidth;
div.style.top=Math.round(Math.random()* spaceH) + "px";
div.style.left=Math.round(Math.random()* spaceW) + "px";
});
}
</script>
</head>
<body onload="Init()">
<div class="description">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div><img src="MyImage1.jpg" class="imagenes" alt=""></div>
<div><img src="MyImage2.jpg" class="imagenes" alt=""></div>
</body>
</html>
I intend to doit with many divs more. This is just a test. And sorry if I’m not explaining myself properly.
If one div is rendered after another, it will overlay the prior div. It doesn't matter if the div contains text or an image. The newer div will still overlay the older div.
Example:
.overlay {
border: 1px solid gray;
width: 80px;
height: 80px;
background: transparent;
padding: 0.2rem;
position: absolute;
color: red;
}
<div class="overlay">
Here is a div with text. Lots and lots.
</div>
<div class="overlay" style="left: 40px; top: 40px">
<img src="https://picsum.photos/80" style="width: 80px; height: 80px">
</div>
<div class="overlay" style="left: 80px; top: 20px">
Here is a div with text. Lots and lots.
</div>
I have a simple javascript problem that I can't seem to solve.
I want to make a header that hides on scroll down and shows on scroll up, but not with a simple trigger that goes from 0 to 100 on a threshold, but instead I want it to be bound to the scroll. Example: http://oma.eu/
Any ideas?
You can easily do that with Headroom.js: https://wicky.nillia.ms/headroom.js/
You cannot do that in pure javascript without checking the pageYOffset of the window, there is a simple example on w3schools website, see the demo here:
How To Hide Navbar on Scroll Down
UPDATED:
below is a demo of the updated fix (using css transform translateY to set the position of the header):
Demo solution
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display:block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div id="navbar">
Home
News
Contact
</div>
<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
<p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
<p>Scroll down this frame to see the effect!</p>
<p>Scroll up to show the navbar.</p>
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.transform = "translate(0px, 0px)";
} else {
document.getElementById("navbar").style.transform = "translate(0px, -30px";
}
prevScrollpos = currentScrollPos;
}
</script>
</body>
</html>
I am trying to create a navigation bar that sticks to the top of the screen after some scrolling. I followed two different tutorials but I can't seem to make either of them work properly.
The first tutorial does not stick to the top of the screen at all. The second tutorial does stick to the top of the screen, but if you scroll down far enough, you can't see the navigation until after it sticks to the top.
This is what I have right now (following the first tutorial):
var n = $("#nav-bar");
ns = "nav-bar-scrolled";
hdr = $('#nav-bar').offset().top;
$(window).scroll(function(){
if($(this).scrollTop() > hdr){
n.addClass(ns);
}else{
n.removeClass(ns);
}
});
This is the JS code following the second tutorial:
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('header').height();
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#nav-bar').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block'); //this doesn't do anything
} else {
$('#nav-bar').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none'); //this doesn't do anything
}
});
});
Full code here: https://jsfiddle.net/linahsie/rhp65j2b/2/
Thank you!
In your JS, n should be #nav-bar, ns (since you're toggling a class) should be nav-bar-scrolled, and hdr should be the bottom position of the header, since that's the point where you want the nav to affix itself to the top of the window. Then in your CSS, you want to use #nav-bar.nav-bar-scrolled as the selector for the fixed menu to match the changes you're making in your JS.
var n = $("#nav-bar");
ns = "nav-bar-scrolled";
hdr = $('header').offset().top + $('header').outerHeight();
$(window).scroll(function(){
if($(this).scrollTop() > hdr){
n.addClass(ns);
}else{
n.removeClass(ns);
}
});
/*
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('header').height();
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('nav').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('nav').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
*/
/*
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('nav').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('nav').css({
position: 'fixed',
top: '0px'
});
$('#about').css('margin-top', $('nav').outerHeight(true) + parseInt($('header').css('marginBottom')));
} else {
$('nav').css({
position: 'static',
top: '0px'
});
$('#about').css('margin-top', '0px');
}
});
});
*/
*{
margin: 0;
padding: 0;
}
.container{
margin-right: auto;
margin-left: auto;
width: 1000px;
}
header{
height: 100vh;
background: #f07057;
}
#after-header{
padding-top: 100vh;
}
#nav-bar,
#about,
#a2{
position: relative;
}
#header-content{
position: absolute;
top: 50%;
left: 50%;
}
#nav-bar{
height: 75px;
font-family: 'Montserrat';
background-color: #FFE77C;
z-index: 150;
width: 100%;
}
header{
position: fixed;
width: 100%;
}
#nav-bar.nav-bar-scrolled{
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
#nav-bar h1{
padding-top: 10px;
font-size: 270%;
text-align: center;
float: left;
}
#nav-list{
float: right;
}
.dir{
float: left;
padding-top: 25px;
text-decoration:none;
padding-left: 15px;
}
#about{
height: 100vh;
background-color: antiquewhite;
}
#a2{
height: 100vh;
background-color: beige;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<div id="header-content">
<h1>Text Here</h1>
</div> <!--header-content-->
</header>
<div id="after-header">
<nav id="nav-bar">
<div class="container">
<h1>Nav Bar</h1>
</div> <!--container-->
</nav> <!--nav-->
<div id="about">
<div class="container">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
</div> <!--end of about-->
<div id="a2">
<div class="container">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
</div>
</div> <!--end of after-header-->
</body>
Had a look at the jquery, you define var n = $("#nav"); but you don't have a nav with id="nav", change to n = $("#nav-bar");
I have 3 rollover image that i want to use it as a trigger to show text box under each images. Whenever I try to click it disappears and does not works. I'm trying to make the first one work at least.
here's my code and webpage.
http://yunjinkimdesign.com/question/practice_div.html?
the image showed on snippet is just sample I brought from google...snippet and my actual sample is different
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.bottom').hide();
$parent_box.find('.bottom').toggle();
});
img{
width: 200px;
border-radius: 50%;
}
div{
margin: 20px;
}
.container .box .top {
padding: 12px;}
.container .box .bottom {
padding: 12px;
background-color: red;
color: white;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="top">
<img src="http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg" onmouseover="this.src='https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg'" onmouseout="this.src='http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg'">
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
You have given href=? in the anchor, Just replace the ? to # or remove href attribute from anchor and your code will run as you want.
<img src="lib/2.png" onmouseover="this.src='lib/papa.jpg'" onmouseout="this.src='lib/2.png'">
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.bottom').hide();
$parent_box.find('.bottom').toggle();
});
img {
width: 200px;
border-radius: 50%;
}
div {
margin: 20px;
}
.container .box .top {
padding: 12px;
}
.container .box .bottom {
padding: 12px;
background-color: red;
color: white;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="top">
<a href="#">
<img src="http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg" onmouseover="this.src='https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg'" onmouseout="this.src='http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg'">
</a>
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>