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
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>
I want to make custom height of an element using jQuery. height is being changed but an effect (like blink effect) is being shown on page load every time. How to solve this problem?
$(document).ready(function() {
$('.jQuery-Container').height('100px');
});
.jQuery-Container {
background-color: Red;
height: 700px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jQuery-Container">
This is text..!!
</div>
On page load height of the div is being changed but after the page is fully loaded. I want to change height before the page is fully loaded.
You can See my jsfiddle here.
You could do like this, where you run a script immediately after the element, and as long as it is plain javascript, it will work.
.JS-Container {
background-color: Red;
height: 700px;
width: 200px;
}
<head>
<script>
function changeThis(sel) {
document.querySelector(sel).style.cssText = 'height: 100px;';
}
</script>
</head>
<body>
<div class="JS-Container">
This is a sample text
</div>
<script>changeThis('.JS-Container');</script> <!-- this will run before page is fully
loaded, so no "blink" will occur -->
</body>
make you div first hidden then after your jquery logic make div visible
CSS
.jQuery-Container {
background-color: Red;
height: 700px;
width: 200px;
display:none;
}
JS
$(document).ready(function(){
$('.jQuery-Container').height('100px').show();
});
I'm pretty new to javascript and I'm trying to create a horizontal scrolling div :-
JSfiddle
As you can see the menu links go to each colour but I would like to put this inside a container which is 250x250px so only 1 colour is visible, then you click on whichever link and it scrolls to that colour.
Hope someone can help me with a few pointers.
Thanks!
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollLeft: $(this.hash).offset().left
}, 200);
});
});
.container {
white-space: nowrap;
}
.child-element {
min-width: 250px;
display: inline-block;
height: 250px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
PURPLE
ORANGE
BLACK
GREEN
BLUE
RED
<div class="container">
<div id="purple" class="child-element child1"></div>
<div id="orange" class="child-element child2"></div>
<div id="black" class="child-element child3"></div>
<div id="green" class="child-element child4"></div>
<div id="blue" class="child-element child5"></div>
<div id="red" class="child-element child6"></div>
</div>
As #Script47 mentioned, you'll want to apply overflow-x as a CSS property to your element, in addition the width (to act as a viewport). Here's what your final CSS might look like:
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
After that, you'll need to modify your JS slightly. You'll still want to scroll to the offset of the element, but you'll also need to take into account your current scroll position.
(To clarify, if you clicked orange - which has an offset initially of 250px, post-animation, the offset for orange would be0px, and black would be250px. If you then click black, it will attempt to scroll to 250px, which is the orange element.)
Here's what the updated JS might look like:
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
var current = $('.container').scrollLeft();
var left = $(this.hash).position().left;
event.preventDefault();
$('.container').animate({
scrollLeft: current + left
}, 200);
});
});
A fiddle to demonstrate: https://jsfiddle.net/bpxkdb86/4/
For the fiddle, I removed physical white-space in the HTML (to prevent the divs from having space between them) using <!-- comments -->, and also added position: relative to the containing element (to use position)
A CSS solution, try adding this to you element in CSS,
overflow-x: scroll;
This, should do it for you.
You need two changes for this to work.
First, add height and width for the container and then set overflow in css.
width:250px;
height:250px;
overflow: auto;
Second update jquery to animate the container, now it is animating the body.
$('.single-box').animate({
JSFiddle is avaialble in the following link
https://jsfiddle.net/jym7q0Lu/
just use a css if you want your div to be scrollable..
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
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
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