I have a 3 divs which are relatively positioned on the right side of my page inside an absolute parent div. I want them fade in and out as they scroll outside of they view (parent div). The fade feature was working before I set my parent divs positioning. How do I fix this? Thanks in advance for any help!
Here is a Codepen
<div class="container">
<div class="row">
<div class="col-sm-6" id="left_content">
<img src="buffalo.png">
</div>
<div class="col-sm-6" id="content">
<div class="right_content" id="box1">
<h4>Hi. My name is Jack.</h4>
<p>Scroll down for more info</p>
</div>
<div class="right_content" id="box2">
<h4>I'm a 21 year old developer living in Buffalo, Ny.</h4>
</div>
<div class="right_content" id="box3">
<h4>Hi. My name is Jack.</h4>
<p>Scroll down for more info</p>
</div>
</div>
</div>
JS:
$(window).scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, .5);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
CSS:
#left_content {
position: fixed;
}
.right_content {
position: relative;
}
::-webkit-scrollbar {
display: none;
}
#content {
width: 45%;
height: 400px;
overflow: scroll;
position: absolute;
right: 0;
}
h4, p {
margin-left: 10%;
}
#box1 {
top: 250px;
}
#box2 {
top: 650px;
}
#box3 {
top: 1050px;
margin-bottom: 600px;
}
Your .scroll() is not on the proper area. Because you are actually scrolling your <div id="content"> and not the window itself, so adjust your script like so:
<script type="text/javascript">
$('#content').scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0.5);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
</script>
Related
is it possible to combine together addClass and fadeIn with JS?
I'm not really practice with JS but I'm trying to develop a script where on text hover, the div container change background fading in/out.
I made a CodePen to show better what I'm trying to achieve. When you hover a title, the background appear but without any sort of transition.
https://codepen.io/Freddan3/pen/NWzpKRz
$(document).ready(function () {
$('#1st').hover(function () {
$('#BG').addClass('first');
$('#BG').removeClass('second');
});
$('#2nd').hover(function () {
$('#BG').addClass('second');
$('#BG').removeClass('first');
});
});
section{
min-height: 500px;
text-align: center;
}
.title{
margin: 50px auto;
font-size: 5em;
font-weight: 400;
}
.first {
background: url(https://cdn.pixabay.com/photo/2022/11/03/15/24/coffee-7567749_960_720.jpg);
background-size: cover;
}
.second {
background-image: url(https://cdn.pixabay.com/photo/2022/10/25/13/28/hanoi-7545860_960_720.jpg);
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="BG">
<div id="1st" class="title">TITLE</div>
<div id="2nd" class="title">TITLE 2</div>
</section>
Is it possible to add the fadeIn to the current item you are hovering and fadeOut the other one?
Thanks in advance for any kind of suggestions :-)
You could use a second div arround your #BG and give both different background-images:
<div id="container">
<div id="BG">
<h2 id="1st">First</h2>
<h2 id="2nd">Second</h2>
</div>
</div>
#container {
background-image: url(https://cdn.pixabay.com/photo/2022/11/03/15/24/coffee-7567749_960_720.jpg);
}
#BG {
background-image: url(https://cdn.pixabay.com/photo/2022/10/25/13/28/hanoi-7545860_960_720.jpg);
}
Then you would animate the opacity of #BG on hover:
$('#1st').hover(function () {
$('#BG').animate({opacity: 0}, 1000);
});
$('#2nd').hover(function () {
$('#BG').animate({opacity: 1}, 1000);
});
To prevent the content (#1st and #2nd) to fade away too, you could wrap it in an extra div with position absolute:
<div id="container">
<div id="BG"></div>
<div id="content">
<h2 id="1st">First</h2>
<h2 id="2nd">Second</h2>
</div>
</div>
#content {
position: absolute;
top: 0;
}
Working example:
$('#1st').hover(function () {
$('#BG').animate({opacity: 0}, 1000);
});
$('#2nd').hover(function () {
$('#BG').animate({opacity: 1}, 1000);
});
#container {
background-image: url(https://cdn.pixabay.com/photo/2022/11/03/15/24/coffee-7567749_960_720.jpg);
}
#BG {
height: 100px;
background-image: url(https://cdn.pixabay.com/photo/2022/10/25/13/28/hanoi-7545860_960_720.jpg);
}
#content {
position: absolute;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="BG"></div>
<div id="content">
<h2 id="1st">First</h2>
<h2 id="2nd">Second</h2>
</div>
</div>
I'm trying to stick my navbar to the top of the window, After window scrolling about 50px that navbar wasn't stick anymore. could anyone solve my problem. i'm stuck. I don't have proper knowledge about javascript and materialize css
thanks in advance
<!--Style-->
<style>
.header{
width: 100%;
height: 50px;
padding: 2px 30px;
}
.box{
height: 500px;
margin-top: 100px;
}
.sticky-nav{
position: fixed;
top: 0;
width: 100%;
}
</style>
<!--Adding JQuery Script for Sticky navbar-->
<script>
$(window).scroll(function() {
if($(this).scrollTop()>50){
$('nav').addClass('sticky-nav');
}else{
$('nav').removeClass('sticky-nav');
}
});
</script>
</head>
<body>
</div>
<!--navbar-->
<nav>
<div class="nav-wrapper">
<div class="container">
<ul>
<li>Home</li>
<li>Article</li>
<li>Login</li>
<li>Signup</li>
<li>India</li>
</ul>
</div>
</div>
</nav>
<!--Sample Boxes -->
<div class="container">
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</div>
</body>
</html>
It is "sticky" and works as it should :
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('nav').addClass('sticky-nav');
} else {
$('nav').removeClass('sticky-nav');
}
});
.header {
width: 100%;
height: 50px;
padding: 2px 30px;
}
.box {
height: 500px;
margin-top: 100px;
}
.sticky-nav {
position: fixed;
top: 0;
width: 100%;
}
nav {
background-color: skyblue;
}
body {
height: 1000vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="nav-wrapper">
<div class="container">
<ul>
<li>Home</li>
<li>Article</li>
<li>Login</li>
<li>Signup</li>
<li>India</li>
</ul>
</div>
</div>
</nav>
Try the following please:
Change CSS to:
.sticky-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 10px 0;
z-index: 999;
}
Change JS to:
let scrollTopY = window.pageYOffset || document.body.scrollTop;
let navigation = document.querySelector('nav');
window.addEventListener('scroll', function() {
if(scrollTopY > 50) {
navigation.classList.add('sticky-nav');
} else {
navigation.classList.remove('sticky-nav');
}
}
Feel free to accept if this works for you.
As the title suggest, I am making a div with a fixed attributes then stops when the user reaches a certain point scrolling.
Below is a GIF sample of the event i'm trying to replicate.
http://i.imgur.com/wCXAOwW.gifv
and here's my fiddle:
https://jsfiddle.net/e1u4rqtk/2/
var navWrap = $('#cont'),
nav = $('cont'),
startPosition = navWrap.offset().top,
stopPosition = $('#stop').offset().top - nav.outerHeight();
$(document).scroll(function() {
//stick nav to top of page
var y = $(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
But its not properly working. any idea what did i miss?
You don't need javascript for that, you can use position: sticky
HTML: (you don't need those extra divs)
<div class="d" id="fixedscroll">
<img src="https://ormuco.com/wp-content/uploads/2018/08/Large-Rectangle-336-x-280-Google-Ads-1-1-336x250.jpg">
</div>
CSS:
.d {
background-color: #FFF000;
width: 336px;
height: 600px;
margin: 0px auto;
}
#fixedscroll img {
position: sticky;
top: 0px;
}
Check it working https://jsfiddle.net/w9n2ubmg/
https://developer.mozilla.org/en-US/docs/Web/CSS/position
You can use position: sticky for newer version of browser, but in case you want your website work under IE/Edge 15, check out this example.
$(function(){
$("#adArea").css("min-height", $("#adArea").height());
var stopPos = $("#ad").offset().top;
var contPost = $("#adArea").next().offset().top - $("#ad").height();
$(document).scroll(function(){
var scrollTop = $(this).scrollTop();
if(scrollTop >= stopPos){
if(!$("#ad").hasClass("sticky")) $("#ad").addClass("sticky");
if(scrollTop >= contPost){
$("#ad").css("top", contPost - scrollTop);
}else{
$("#ad").css("top", 0);
}
}else{
if($("#ad").hasClass("sticky")) $("#ad").removeClass("sticky");
}
});
});
.container {
width: 100%;
background-color: #c2c2c2;
}
.block {
padding: 30px 0;
width: 100%;
border: 1px solid #000;
}
.sticky {
position: fixed;
top: 0;
}
#stop {
border:1px solid blue;
bottom: 0;
position: absolute;
width:100%;
}
#stop{
display:block;
}
#ad {
width: 336px;
height: 250px;
background-color: #000;
}
#adContainer {
padding: 50px 0px 300px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="block"></div>
<div class="block" ></div>
<div class="block" ></div>
<div id="adArea">
<div id="adContainer">
<div id="ad"></div>
</div>
</div>
<div class="block"></div>
<div class="block"></div>
<div class="block" ></div>
<div class="block" ></div>
<div class="block" ></div>
<div class="block" ></div>
<div class="block" ></div>
<div class="block" ></div>
<div class="block" ></div>
<div class="block" ></div>
<div class="block" ></div>
</div>
I am making sort of a drop down list but more of a button, and i needs to be able to look good. I have almost got every thing I need but when i move the mouse onto the box that appears (drop down list), it disapears. This is what I have so far;
html
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
css
#box {
position: absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}
#content {
position: absolute;
left: 11vw;
width: 10vw;
height: 10vw;
background-color: red;
display: none;
}
jquery
$("#box").hover(
function() {
$("#content").slideDown(); //.show();
},
function() {
$("#content").fadeOut(); //hide();
}
);
$("#content").hover(
function() {
$("#content").show(); //.show();
},
function() {
$("#content").fadeOut(); //hide();
}
);
Anything I am doing wrong, better ways to do this or a link to an existing question that already answers this would be very much appreciated. Thanks!
Here is exactly what you wanted.
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
https://jsfiddle.net/kvbvLy4d/
You could also achieve this without any Javascript / JQuery by animating the height of the content with CSS.
#box {
position: absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}
#box:hover + #content, #content:hover {
height: 10vw;
}
#content {
position: absolute;
left: 11vw;
width: 10vw;
height: 0;
background-color: red;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}
<div id="buttons">
<div id="box"></div>
<div id="content">content</div>
<div id="box1"></div>
<div id="content1">content</div>
<div id="box2"></div>
<div id="content2">content</div>
</div>
I have created a navigation based on expandable and closable divs, the autoclose and open works but there is always a invisable div present that takes up space. Also when reclicking a menu item should close the div. Tried different closing methods but it wont let me.
Here is what I got so far:
HTML
<div class="secondtopdiv">
<div class="containerdiv">
<div id="nav">
Target 1
Target 2
Target 3
</div></div>
<div id="navcontent">
<div class="panel" id="target1">Target 1</div>
<div class="panel" id="target2">Target 2</div>
<div class="panel" id="target3">Target 3</div>
</div>
</div>
^^^^^^^^^^UNWANTED SPACE FROM DIV NAVCONTENT, MUST PUSH MAIN CONENT DOWN INSTEAD OF ALWAYS BEING THERE
<div class="spacerdiv"></div>
<div class="containerdiv">
<div class="maindiv">
<div class="divtitle">
Title
</div>
<center>Some div in main page</center>
</div>
CSS
.containerdiv
{
min-width:400px;
max-width:500px;
overflow:hidden;
display:block;
margin-left:auto;
margin-right: auto;
}
.secondtopdiv
{
width: 100%;
height: 100px;
background: #61c5bb;
color:#000000;
vertical-align: middle;
line-height: 100px;
}
#nav{
width: 100%;
overflow: hidden;
}
#navcontent {
position: relative;
float: left;
width: 100%;
min-height: 100px;
overflow: hidden;
}
.spacerdiv
{
height:20px;
}
.divtitle {
font-size: 18px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
div.panel {
position: absolute;
background: #61c5bb;
height: 100%;
width: 100%;
display: none;
}
Jquery/JS:
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
top: -($target.height())
}).animate({
top: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
top: -$this.height()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
});
Link to fiddle: http://jsfiddle.net/6swdzycc/10/
If i understood correctly, you remove the min-width from #navcontent and can use the following script:
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if ($other.length) $other.removeClass("active").slideUp("slow", function () {
$target.toggleClass("active").slideToggle("slow");
})
else $target.toggleClass("active").slideToggle("slow");
});
});
JSFiddle
div.panel1 {
background: #61c5bb;
height: 150px;
width: 100%;
display: none;
}
<div class="containerdiv">
<div id="nav">
Target 1
Target 2
Target 3
</div>
</div>
<div id="navcontent">
<div class="panel1" id="target1">Target 11111</div>
<div class="panel1" id="target2">Target 21111</div>
<div class="panel1" id="target3">Target 31111</div>
</div>
<script>
$('document').ready(function(){
$('.panel').click(function(){
var thisHref=$(this).attr('href');
$('.panel1').hide();
$(thisHref).slideToggle('slow');
});
});
</script>