I am making a website and this is my current setup:
http://puu.sh/hU5KJ/421b5aa76d.png
I have 2 main divs, at first the bold one is displayed in full browser window, and after clicking the button, whole window is scrolled down to the 2nd div. The divs are literally placed as in the picture, with the lower div being off screen and the scroll down function is a simple javascript.
My main question here is, can this be done in any alternative way? This feels kinda wrong, also whenever i'm at the lower div and resize the height of the browser window it all gets messed up.
EDIT:
I'd like to have it so that its impossible to scroll by any other means than just those buttons (no arrowkeys, no mouse wheel and preferably no pg down/up buttons). Is that even possible?
HTML buildup:
<div id="wrapper">
<div id = "overall"></div>
<div id = "chat"></div>
</div>
With "overall" being the bolded div on the image and "chat" being the lower one. There is plenty of other things i have placed inside of these divs, if you want the full code i can post it, but this is mostly about switching between these 2 only.
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#wrapper {
overflow-y: hidden;
overflow-x: hidden;
}
#overall {
background-color: red;
height: 100%;
width: 100%;
text-align: center;
}
#chat {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
And the JS function that scrolls:
function scrollDown() {
$('html, body').animate({
scrollTop: $("#chat").offset().top
}, 1000);
}
function scrollUp() {
$('html, body').animate({
scrollTop: $("#overall").offset().top
}, 1000);
}
My knowledge level is low and i guess you can see i only understand the most basic stuff for now, so please explain your answers. Thanks for any help.
The key is using the CSS width:100% & height:100% properties. These will make sure your element is always sized to the full size of your browser. Even when you resize it.
$(document).ready(function() {
$("#scroll-down").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#block2").offset().top + 'px'
}, 'slow');
})
$("#scroll-up").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#block1").offset().top + 'px'
}, 'slow');
});
});
html,
body {
height: 100%;
}
.full-size {
display: block;
width: 100%;
height: 100%;
}
#block1 {
background-color: red;
}
#block2 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper full-size">
<div class="full-size" id="block1">
scroll down
</div>
<div class="full-size" id="block2">
scroll up
</div>
</div>
EDIT: included JS smoothscroll
Related
Now I know, yes there are heaps of questions on how to smooth scroll to elements on a page yes I know I can use jquery like this..
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
and yes I know I can do this with javascript
element.scrollIntoView();
but neither of those are giving me the desired result..
Okay so... Is there an easy way to scroll to an element inside a component?
So I have a sidebar and the sidebar has its own scroll outside of the body because its component with the overflow set to scroll.. so what I want to be able to do is scroll to a certain element within that component
I have tried to do..
scrollIntoView like so..
upNext.scrollIntoView({behavior: 'smooth', block: 'start'});
but I find that I cannot get it to scroll to the right place on the element, its buggy and its extra features like behavior: 'smooth'dont have great broswer support
So my question is how can I scroll to a certain element within an element with a scroll?
You have to trigger scroll in the sidebar rather than the document or html
$('#scroll-sidebar').click(function(){
$('sidebar').animate({
scrollTop: $("#scroll-here").offset().top
}, 2000);
});
.container{
position: relative;
display: flex;
background: white;
}
sidebar, main{
padding: 15px;
}
sidebar{
width: 200px;
background: red;
height: 400px;
overflow-x: auto;
}
ul > li{
display: inline-block;
margin: 5px 0;
}
main{
flex: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<sidebar>
<h1>Sidebar</h1>
<ul>
<li>Iste, doloribus!</li>
<li>Labore, animi.</li>
<li>Adipisci, dolores?</li>
<li>Odio, excepturi.</li>
<li>Odio, aliquid!</li>
<li>Numquam, officia.</li>
<li>Alias, officiis!</li>
<li>Tenetur, quas!</li>
<li>Totam, vitae.</li>
<li>Dignissimos, at?</li>
</ul>
<hr>
<ul id="scroll-here">
<li>Iste, doloribus!</li>
<li>Labore, animi.</li>
<li>Adipisci, dolores?</li>
<li>Odio, excepturi.</li>
<li>Odio, aliquid!</li>
<li>Numquam, officia.</li>
<li>Alias, officiis!</li>
<li>Tenetur, quas!</li>
<li>Totam, vitae.</li>
<li>Dignissimos, at?</li>
</ul>
</sidebar>
<main>
<h1>Main Container</h1>
<button id="scroll-sidebar">Scroll Sidebar</button>
</main>
</div>
How do they make the "Tell me more" effect on the website provided below. I've read about read more/less effect in jQuery, but what I find interesting with that site is the page cannot be scrolled unless that button is clicked.
Effect link
I hope this snippet helps you for the effect.
$('button').click(function(){
$("body").addClass("scroll");
$('html, body').animate({
scrollTop: $(".goto").offset().top
}, 500);
});
body{
margin: 0;
height: 1000px;
overflow: hidden;
}
body.scroll{
overflow: auto;
}
.goto{
margin-top: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button>Goto section</button>
<div class="goto">
Section
</div>
You can use html anchor instead, even the given site's link has used the same
Like this
<style>
#header_div {
height: 100vh; //fit to screen's height
}
#more_info_div {
height: 100vh;
}
</style>
<div id="header_div">--content--</div>
<div id="more_info_div">--content--</div>
Use # before your div id in href to take to that particular div, like this
<a href="#more_info_div" >Click me</a>
you can give transition and other effects through css
For whatever reason using element.offset().top or element.position().top as the value of scrollTop compels the browser to scroll well past the given element.
I've tried console-logging the $(window).scrollTop() and element.offset().top, and before anything happens the readouts are as expected:
$(window).scrollTop() == 0
element.offset().top == 999
However, when the animated scroll completes the readouts are not entirely as I would expect them to be:
$(window).scrollTop() == 999
element.offset().top == 831 (Unexpected, shouldn't it be 0?)
So I guess to one degree or another the question becomes: Why is the element's offset barely effected if the browser is scrolled 200vh?
(I am using parallax on the splash page, so could this be the culprit? Can adjusting the transform: translate(X,Y) of elements above during the scrolling process be effecting the offset of the given element?)
HTML
<body>
<div id="splash"></div>
<div id="sect1">
<div id="text">
</div>
</div>
<div id="sect2"></div>
</body>
CSS
body {
overflow: hidden;
}
#splash {
height: 200vh;
width: 100vw;
position: relative;
}
#sect1 {
height: 100vh;
width: 100vw;
position: relative;
}
#sect2 {
height: 100vh;
width: 100vw;
position: relative;
}
#downbtn {
width: 50px;
position: fixed;
}
jQuery
function scroll() {
var downbtn = $('#downbtn');
var sect1 = $('#sect1');
$('html, body').animate({
'scrollTop' : sect1.offset().top
});
});
$(document).ready(function(){scroll();});
I have two divs with animation, both are doing the same but with different animation. I have
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle' });
});
});
Whole code in in jsfiddle http://jsfiddle.net/xLHb8/192/
Can anyone please explain to me why first div is animating right to left, left to right and second div is animating always to top left corner.
How can I make second div animate same as first div?
First, the relevant details in your code should be included in your question (in addition to providing the fiddle). But so you have the following CSS:
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second img {
max-width:100%;
max-height:100%;
}
.second {
width: 200px;
}
With the following HTML:
<button id="show_hide_button">click me</button>
<div id="some_box"></div>
<div class="second">
<img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" />;
</div>
Note that you're setting the img to have a maximum width and height of its parent container. So because you're toggling the width of the parent, as parent collapses, the image is scaling down. Further, since you don't have a height setting on the img, its height is going to animate along with the animated width. This creates the effect of the image animating to the top left corner.
Without further details, it's hard to say how to fix your code to achieve the desired effect.
Update
If you want the width only to collapse, you can set a pixel height on your image so that it doesn't scale in proportion to its width:
.second img {
max-width: 100%;
height: 200px;
}
You can also put both animations in a single click event handler, like so:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle'});
$('.second').animate({ width: 'toggle' });
});
});
Forked your fiddle: http://jsfiddle.net/u1sdd8j5/1/
Update 2
From the comments, it seems like you want the image to collapse to the left, without losing the aspect ratio. We need to get a little creative to pull that off, especially if you're looking for a solution involving jQuery.animate(). The image actually needs to move downwards as it is scaled down. We can pull that off by animating the <img> itself, rather than its container, and adjusting its top margin at the same time animate its width.
Revised CSS (making the containers the same size for consistency):
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second {
width: 25%;
height: 200px;
}
.second img {
max-width: 100%;
max-height: 100%;
}
Revised JS:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle' });
var $secondImg = $('.second img'),
secondImgMargin = $secondImg.is(':visible') ? '50%' : 0;
$('.second img').animate({
width: 'toggle',
marginTop: secondImgMargin
});
});
});
Note that we need to first determine whether or not the <img> is visible. If it is, then we want to animate the top margin to 50%. If it's not, then switch the top margin back to 0.
Here's a new forked fiddle: http://jsfiddle.net/xwanm9ze/1/
Final Note
All of this might be easier to achieve with CSS3 transitions. You would want to set up a class that toggles the animation. And you can specify the transform-origin which, in this case, would be 'left center'.
The problem is, that you added a relative width and height attribute to the inside the second div and did not give a height and width attribute to the second div. This way, the image controls the height and width of the second div, since it has no height and width attribute.
In your case, a solution would be to give the second div a fixed width and height
Also, for the JQuery, you only need one $(document).ready function
$(document).ready(function () {
$('#show_hide_button').click(function () {
$('#some_box').animate({
width: 'toggle'
});
$('.second').animate({
width: 'toggle'
});
});
});
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second img {
width:100%;
height:100%;
}
.second {
width:200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show_hide_button">click me</button>
<div id="some_box"></div>
<div class="second">
<img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" />
</div>
I have a menu on the highest zone of my web, but not on the top. I want that when the user scrolls the page it stays on the top, but only when it would disapear instead. If the title is visible i want the menu under it, on an apparent static position.
Is it possible without javascript, only with css? I see it on a website, but I don't remeber where.
Thank you in advance (and sorry for my ugly english!) ;)
I think this is what you are looking for: https://jsfiddle.net/QuVkV/2/
Here html structure:
<div id='wrapper'>
<div id='upper'>This is upper content</div>
<div id='position-saver'>
<div id='bar'>This is the menu bar</div>
</div>
<div id='lower'>This is some content lower than the menu bar</div>
</div>
This is the css :
#wrapper {
width: 100%;
height: 2000px;
}
#upper {
width: 100%;
height: 100px;
}
#position-saver {
height: 50px;
width: 100%;
}
#bar {
position: static;
height : 50px;
width: 100%;
}
And here is the javascript :
$(document).on('scroll', function(){
if ($('#bar')[0].offsetTop < $(document).scrollTop()){
$("#bar").css({position: "fixed", top:0});
}
if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
$("#bar").css({position: "static", top: 0});
}
});
I'm not sure but I've seen this type of thing on many site. One on 9gag.com
Anyway, you can use the position property of the css.
like this one: JSFiddle
#scroll-me{
width:100%;
height:100px;
background:#333;
position: fixed;
top:15px;
}
The position:fixed with top:15px of the scroll-me div makes it always 15px on top