I'm trying to make a website scroll divs. When a visiter wants to scroll it should automatically go to the next or previous div.
Below you can see how my html looks like.
<body>
<header>
</header>
<div id="content">
<div id="contentv1">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv3">
</div>
</div>
</body>
I'm trying it with the following code:
(function() {
var scrollTo = function(element) {
$('html, body').animate({
scrollTop: element.offset().top
}, 500);
}
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if ($current.index() != $('#content > div').length - 1) {
$current.removeClass('current').next().addClass('current');
scrollTo($current.next());
}
});
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if (!$current.index() == 0) {
$current.removeClass('current').prev().addClass('current');
scrollTo($current.prev());
}
});
})();
The header has an height of 10% and sticks to the top. The content divs have a height of 90%. So when scrolled the top of the content divs should aline with the bottom of the header.
Can anyone help me into the right direction?
Related
There is a website, there is a mobile version. The mobile version has a drop-down menu. This menu works fine, but it doesn't close when clicked outside the block.
I've been looking for a solution on the Internet for a really long time, but nothing came up( I'll be very grateful for the help!
HTML
<header class="header" id="header">
<div class="container">
<div class="header__inner" id="header">
<div class="header__logo">
<img src="Images/ActiveBox_logo.png" alt="Logo" class="img__logo">
</div>
<nav class="nav" id="nav">
Features
Works
Our Team
Testimonials
Download
</nav>
<button class="burger" type="button" id="navToggle">
<span class="burger__item">Menu</span>
</button>
</div> <!-- header__inner -->
</div>
</header>
JS
let header = $("#header");
let intro = $("#intro");
let introH = intro.innerHeight();
let scrollPos = $(window).scrollTop();
let nav = $("#nav");
let navToggle = $("#navToggle");
checkScroll(scrollPos, introH);
$(window).on("scroll resize", function() {
introH = intro.innerHeight();
scrollPos = $(this).scrollTop();
checkScroll(scrollPos, introH);
});
function checkScroll(scrollPos, introH) {
if( scrollPos > introH ) {
header.addClass("fixed");
} else {
header.removeClass("fixed");
}
}
/* Smooth scroll */
$("[data-scroll]").on("click", function(event) {
event.preventDefault();
let elementId = $(this).data('scroll');
let elementOffset = $(elementId).offset().top;
nav.removeClass("show");
$("html, body").animate({
scrollTop: elementOffset - 70
}, 700);
});
// Nav Toggle
navToggle.on("click", function(event) {
event.preventDefault();
nav.toggleClass("show");
});
How about something like this?
$(document).on('click', function (e) {
if ($(e.target).closest("#box").length === 0) {
$("#box").hide();
console.log('clicked outside the box');
}
else {
console.log('clicked on the box');
}
});
#box{
width:100px;
height:40px;
background-color:blue;
color:white;
padding:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box'>
click me, then click outside
</div>
I have several buttons in div in an html page , I want to click the buy button which is visible in viewport , when I press the key B.
$(document).keydown(function(e) {
if (e.keyCode == 66) {
//click the visible buy button in viewport ,
$(".buy").click();
}
});
<section>
<div class="buy">BUY</div>
<div class="buy">SELL</div>
</section>
<section>
<div class="buy ">BUY</div>
<div class="buy ">SELL</div>
</section>
<section>
<div class="buy ">BUY</div>
<div class="buy ">SELL</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note : there are 100's of buy button , but only 1 buy button appears at a time in viewport
If other .buy buttons are invisible really, you can try this:
$(".buy:visible").click();
Else, get your visible section by this:
var myVisibleSection = document.elementFromPoint(x+10, y+10);
(The x and y are position of parent of your sections that is matches with visible section and you can get them by jquery (.offset()) or vanilla js. 10's are sum of border and padding of the parent.)
Now:
myVisibleSection.find(".buy").click();
You could try to use this convenient function which tells us if the button is visible in the viewport, which I found in this blog. Also please make the css class sell which is the same as buy and set it for the sell div's, since we need to distinguish between the two buttons!
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(document).keydown(function(e) {
if (e.keyCode == 66) {
//click the visible buy button in viewport ,
$(".buy").each(function( index ) {
if($(this).isInViewport()){
console.log($(this).html() + " - " + index);
$(this).click();
}
});
}
});
section {
height: 100vh;
width: 100%;
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="buy">BUY</div>
<div class="sell">SELL</div>
</section>
<section>
<div class="buy">BUY</div>
<div class="sell">SELL</div>
</section>
<section>
<div class="buy">BUY</div>
<div class="sell">SELL</div>
</section>
i need help my stuff isn't working i'm not sure why. It's a scroll function that moves a navigation bar 20 px down if the window isn't at the top of document. And its supposed to move back 20px once the window is scrolled to the top.
<script type="text/javascript">
$(window).scroll(function(){
if( $(window).scrollTop() == $(document).height()- $(window).height() ){
$('#nav_space').animate({top:'20px'},200);
}
else {
$('#nav_space').animate({top:'-3px'},200);
}
});
</script>
<div id="nav_space">
<div id="nav_symbol">
</div>
<div id="nav_name">
<h3>Ascension</h3>
<span style="position: absolute; left: 19px; top: 39px;">Entertainment</span>
</div>
You can simplify using scrollTop(). Change your javascript to this instead:
$(window).scroll(function(){
if( $(window).scrollTop() > 0){
$('#nav_space').animate({top:'20px'},200);
}
else {
$('#nav_space').animate({top:'-3px'},200);
}
});
I have this HTML code
HTML
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
and this CSS code
CSS
#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}
Script:
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
$("#d1").css("display","block");
}else {
$("#d1").css("display","none");
}
});
});
</script>
Question:
When I scroll page down each div display one by one.
When scroller reach at "#d2" the div "#d1" should be displayed, When scroller reach at "#d3" div "#d2" should be displayed.... and when scroller reach at the end of page "#d5" should be displayed.
You may try this similar case:
http://jsfiddle.net/j7r27/
$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).css('opacity',1);
} else {
$(this).css('opacity',0);
}
});
});
I am using jQuery code from http://www.dconnell.co.uk/blog/index.php/2012/03/12/scroll-to-any-element-using-jquery/ to scroll to a Div within a Wrapper.
The code provided animates the body (Scrolls the body down onClick) I am trying to animate the scroll inside a div, not body.
My code below:
HTML:
Scroll Down
<div class="Wrapper" style="height:400px; width:600px; overflow:hidden;">
<div id="Div1" style="height:200px; width:600px;"></div>
<div id="Div2" style="height:200px; width:600px;"></div>
<div id="Div3" style="height:200px; width:600px;"></div>
</div>
jQuery
function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('html, body').animate({
scrollTop: offsetTop
}, time);
}
$(document).ready(function() {
$('a.ScrollDown').click(function (e) {
e.preventDefault();
scrollToElement('#Div3');
});
});
I know it has something to do with $('html, body').animate({ }) but im not sure how to change it.
Thanks
JSFiddle http://jsfiddle.net/3Cp5w/1/
Animate the wrapper instead of the body:
$('.Wrapper').animate({
scrollTop: offsetTop
}, time);
http://jsfiddle.net/robbyn/qU6F7/1/
Try the following Code
<body>
Scroll Down
<div class="Wrapper" style="height:200px; width:600px; overflow:scroll;">
<div id="Div1" style="height:200px; width:600px;background-color:red;" ></div>
<div id="Div2" style="height:200px; width:600px;background-color:green;" ></div>
<div id="Div3" style="height:200px; width:600px;background-color:yellow;" ></div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('.Wrapper').animate({
scrollTop: offsetTop
}, time);
}
$(document).ready(function() {
$('a.ScrollDown').click(function (e) {
e.preventDefault();
scrollToElement('#Div3');
});
});
</script>
i think you want div3 to scroll down inside Wrapper
you need to first specify the height of Wrapper to a small number so that scroll is visible
&
as you guessed change html,body to .Wrapper
do ask for help
Add the jQuery updated file reference
<script src="http://code.jquery.com/jquery-1.10.2.js" />