noob160
Reputation: 13
How to hide/show a div when a certain div is in view?
I need to make a div fade out if another div is showing on screen. I've been told that I need to use Javascript to do this, as well as making it load automatically.
Does anyone know a solution?
I've googled around, and I've tried to edit the following, but I'm having no luck implementing it.
<script type="text/javascript">
window.onLoad(function () {
if ($('.section5').is(":visible")) {
$(".arrow").fadeOut(fast);
} else if ($('.section5').is(":hidden")) {
$('.arrow').fadeIn(fast);
}
});
</script>
Upvotes: 0
Views: 105
Answers (2)
Rohan Kumar
Reputation: 40639
window.onLoad is not a function use $(function(){...})
And fast is a string not variable try this,
$(function () {
if ($('.section5').is(":visible")) {
$(".arrow").fadeOut('fast');
} else if ($('.section5').is(":hidden")) {
$('.arrow').fadeIn('fast');
}
});
Upvotes: 2
Karim Seoudy
Reputation: 127
if you are looking for the solution to make the div show/hide when you scroll down or up the page, and to make it visible when you scroll the page and the other div is not on the page after scroll , here is what you should do:
assume that the div that should be visible on the form while scrolling is like that:
<div id='div1'></div>
and the div that should hide and show accordingly is like that:
<div id='div2'></div>
here is the script you show use:
<script type="text/javascript">
$(document).ready(function () {
AdjustDiv();
$(window).scroll(function () {
AdjustDiv();
})
});
function AdjustDiv() {
var windowheight = window.innerHeight;
var div1height = $('#div1').height();
var scroll_top = $(window).scrollTop();
var div1top = $('#div1').offset().top;
var window_bottom = scroll_top + windowheight;
var div1_bottom = div1top + div1height;
if
(
(
(scroll_top >= div1top)
&&
(scroll_top < div1_bottom)
)
||
(
(scroll_top <= div1top)
&&
(window_bottom >= div1_bottom)
)
||
(
(scroll_top <= div1top)
&&
(window_bottom > div1top)
)
) {
$('body').css('background-color', 'green');
}
else {
$('body').css('background-color', 'red');
}
}
</script>
just for demo i turn the background red if the div1 is not visible and green if visible
and here is the complete example, please try:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id='div0' style='border: solid 1px black;'>
<p>
aadsa dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas da2121212121s dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
</div>
<div id='div1' style='border: solid 1px black;'>
<h1>
DIV 1</h1>
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
</div>
<div id='div3' style='border: solid 1px black;'>
<p>
aadsa dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas da2121212121s dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
</div>
<div id='div4' style='border: solid 1px black;'>
<p>
aadsa dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas da2121212121s dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
<br />
<p>
tdasd dasdas das dasdas das das</p>
</div>
<div id='div2' style='border: solid 1px black;'>
div 2<br />
div 2<br />
div 2<br />
div 2<br />
</div>
<script type="text/javascript">
$(document).ready(function () {
AdjustDiv();
$(window).scroll(function () {
AdjustDiv();
})
});
function AdjustDiv() {
var windowheight = window.innerHeight;
var div1height = $('#div1').height();
var scroll_top = $(window).scrollTop();
var div1top = $('#div1').offset().top;
var window_bottom = scroll_top + windowheight;
var div1_bottom = div1top + div1height;
if
(
(
(scroll_top >= div1top)
&&
(scroll_top < div1_bottom)
)
||
(
(scroll_top <= div1top)
&&
(window_bottom >= div1_bottom)
)
||
(
(scroll_top <= div1top)
&&
(window_bottom > div1top)
)
) {
$('body').css('background-color', 'green');
}
else {
$('body').css('background-color', 'red');
}
}
</script>
</body>
</html>
Upvotes: 0
Related Questions
- How to hide an element when a certain div is present?
- Fade in div if other div is not visible
- hide one div when another is showing in jQuery?
- Show/Hide Div based on content within that div
- show div when another div is visible
- How to use jQuery to hide div then fade it in on document scroll?
- Showing/hiding <div> using javascript
- Hide a div when another div is shown
- fadeIn/fadeOut specified div on click of another div?
- Checking if a DIV is currently shown on the page