disable scrolling on webpage and allow it only on page sections - javascript

I'm working onepage website, what i'm trying to do is to disable scorlling on webpage and only and make transitions between sections using the navbar links to id. for that i have use this jquery code
$(document).ready(function() {
$('.js-scrollTo').on('click', function() {
var page = $(this).attr('href');
var speed = 1000;
$('html, body').animate( { scrollTop: $(page).offset().top }, speed );
return false;
});
});
and this on CSS
html, body {margin: 0; height: 100%; overflow: hidden}
everything work fine except one issue is that when im in a specific section that have a big content i can't scroll within in, what im trying to figure out is: how to enable scrolling within section itself without scrolling all the webpage

If I've understood your question correctly, what you can do in this case is add an overflow-y:scroll to the wrapping div of the content you wish to be scrollable.
For example, say we have a div#test with some content:
<div id="test">
... Some content
</div>
We can then simply apply the styles:
#test {
height: 300px;
width: 300px;
overflow-y: scroll;
background: #ff1000;
}
Here is it in action: http://codepen.io/anon/pen/RRYERR

You can add css to your div :-
yourDiv:hover { overflow: auto; height:desired height }

Related

ScrollTop to follow bottom of the page

I'd like my website to follow the content coming out of external source, which is loaded over time
I've tried to use
chatContainer.scrollTop = chatContainer.scrollHeight;
as my chatContainer is where the content is loaded, but it doesn't work as it should, could you give me some help with that? How to make a website follow the real-time rendered content with the view?
Whenever you add more content dynamically, just call the following on the container element.
const container = document.querySelector("#container");
container.scrollTop = container.scrollHeight;
Ensure you're calling this on the container that can scroll.
If you're using jQuery, it's quite simple and it can be animated.
$("#container").animate({ scrollTop: $("#container")[0].scrollHeight }, 100);
Note that when you call $("#container")[0].scrollHeight, you are specifying that you want the scrollHeight of the first match as a document element (rather than a jQuery selector). It's the equivalent of doing document.querySelector("#container"). The 100 at the end is the number of milliseconds the animation should take.
There is no need for the MutationObserver. You don't need an interval either. You just need to run one of the above functions whenever you add content to the page (like a new message). Make sure to run it after the content is added or it won't work.
Edit: If you're not sure, open your browser's element inspector. Click on the node in the list that you want to scroll and run the following code $0.scrollTop = $0.scrollHeight;. If it doesn't work, then you're selecting the wrong element OR you haven't set your container heights correctly.
Here's an example
let count = 0;
setInterval(function(){
document.querySelector("#conversation").innerHTML += `<div class="message">Message ${count}</div>`;
document.querySelector("#container").scrollTop = document.querySelector("#container").scrollHeight;
count++;
}, 1000);
html, body { height: 100%; margin: 0; overflow: hidden; }
#container { width: 100%; max-height: 100%; border: 1px solid black; overflow-y:auto; }
.message { width: 100%; background-color: green; min-height: 100px; border-bottom: 1px solid black; }
<div id="container">
<div id="conversation">
</div>
</div>

Scrollable DIV, I want to create an animation that scrolls to the bottom of the div on pageload

I have a DIV that has an overflow-y set to scroll.
.scrolling-div {
width: 85%;
height: 200px;
overflow-y: scroll;
}
Assuming that I have a bunch of content inside this div, I want it to scroll all the way to the bottom of the div on pageload. I actually want to see the animation of the scroll (so the div would start at the top, but then I want to see it scroll to the bottom).
How do I create this with either Javascript, Jquery, or just pure CSS? I also want to be able to control the speed of the scroll animation.
You can use jquery's animate:
$('.scrolling-div').animate({
scrollTop: $('.scrolling-div').prop('scrollHeight')
}, 1000);
See a working example here.
$(function() {
var wtf = $('#scroll');
var height = wtf[0].scrollHeight;
wtf.scrollTop(height);
});
#scroll {
width: 200px;
height: 300px;
overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll">

Div should appear when user scrolls down and back up again, but not on load

I'm a complete novice at javascript so this will probably be really easy for you.My website (http://www.pjsmusic.com) requires a div of 200px when the user scrolls 40px down the page to appear. I have added some javascript
$(document).scroll(function() {
$('#jerkBox').toggle($(this).scrollTop()> 40);
});
However, the div appears when the page loads even as the page isn't scrolled from the top at all. How could I make this div appear when the user scrolls 40px, and disappear when they scroll back up the page past 40px, but not appear on load? You'll see what I mean if you visitthe link. Thanks in advance!
JQuery .toggle() controls the display property of the element. You can set it as display: none on the css right from the start:
#jerkBox {
display: none;
}
$(document).scroll(function() {
$('#jerkBox').toggle($(this).scrollTop()> 40);
});
#jerkBox {
float: right;
width: 200px;
height: 200px;
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="jerkBox">
jerkBox div
</div>
<div style="height: 2000px">
</div>
You just have to hide #jerkBox by default. Either in the CSS style of the element, set it to display: none or hide it immediately on document ready in your script.
/* CSS */
#jerkBox {
display: none;
}
or
/* JavaScript */
$(document).ready(function() {
$('#jerkBox').hide();
}

How to resize a div to clients viewport height?

Ok, so i want to have a series of divs which are the exact width and height of the user's browser window, regardless of the screen size. I can easily make the divs stretch horizontally with "width: 100%;" but i cant work out how to make the height stretch itself. I am guessing that i need to use some bit of javascript to judge the height, and then another piece to resize the seperate divs. Unfortunately I am a complete javascript n00b and after two hours of seemingly fruitless searching and coming up with about 100 "solutions" this was as far as id gotten (Im sure that at some point I have probably been closer to the answer):
var viewportHeight = "height:" + document.documentElement.clientHeight;
getElementById('section-1').setAttribute('style', viewportHeight);
<div class="section" id="section-1"></div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"></div>
edit:
ah i should be more clear, im attempting to have all three divs take up the entire screen, so you have to scroll down to see each one - almost like seperate slides. The idea is that each one takes up the entire screen so you cant see the next section until you scroll down, rather than having three divs which take up a third of the screen.
If you haven't already tried it, you'll want to look at parent:child inheritance of elements within the DOM by way of using CSS.
What I want to STRESS is that everyone giving you JS hacks to accomplish this is not only providing you with overkill (YOU did ask for a JavaScript solution, so they gave it to you!), but it's also a deviation from standards. HTML is for structure, CSS is for presentation, and JavaScript is for behavioral aspects... setting a div to the width of the viewport on load is a PRESENTATION aspect and should be done in CSS... not JavaScript. If you were trying to change the width based on events or user interaction, then yes JavaScript is your friend... but stick with just HTML and CSS for now.
The trick is that most elements have an undefined height - and height is later defined by the content that the element holds.
If you want to 'trick' an element into having a height other than what it wants to default to, you'll have to explicitly define it. Since you want to inherit your height from the viewport, you'll have to define the height at the top and bring it down...
You might be in luck and can avoid JavaScript altogether (unnecessary). Just use CSS.
Try something like:
html, body {
height: 100%;
width: 100%;
}
Now, when you try to set your div's later on, specify width: 100% and the height gets inherited from the html --> body --> div.
Try that and see if that solves your problem - if not, point us to a website, a pastebin, or a SOMETHING with code in it that we can just show you how to do it (whereas what you posted for code was an attempt in JavaScript which is only 1 part of the code - post the full thing either to a server or temp site like pastebin).
Here is some sample code I wrote (tested in Chromium):
The HTML:
<html>
<head>
<title>Test Divs at 100%</title>
<link rel="stylesheet" type="text/css" href="divtest.css"
</head>
<body>
<div class="test1">aef</div>
<div class="test2">aef</div>
<div class="test3">aef</div>
</body>
</html>
The CSS:
html, body {
width: 100%;
height: 100%;
background-color: #793434;
padding: 0;
margin: 0;
}
div {
height: 100%;
width: 100%;
}
.test1 {
background-color: #E3C42E;
}
.test2 {
background-color: #B42626;
}
.test3 {
background-color: #19D443
}
try this
div#welcome {
height: 100vh;
background: black;
color: white;
}
div#projects {
height: 100vh;
background: yellow;
}
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
it should work for you, but little support in IE
A bit of jQuery should do it:
$(document).ready(function() {
var window_height = $(window).height();
$('#section-1").height(window_height);
});
And if you want to keep 100% height on window resize:
$(document).ready(function() {
function viewport_height() {
var window_height = $(window).height();
$('#section-1").height(window_height);
}
viewport_height();
$(window).resize(function() {
viewport_height();
});
});
try this
window.onload = init;
function init()
{
var viewportHeight = "height:" + document.documentElement.clientHeight+"px;";
document.getElementById('section-1').setAttribute('style', viewportHeight);
}
Here is a script free solution, just CSS. This assumes that the divs are directly in the body element or a parent with position absolute and the parent has no padding.
#section-1 {
position: absolute;
height: 100%;
width: 100%;
background: #ff0000;
}
#section-2 {
position: absolute;
width: 100%;
top: 100%;
height: 100%;
background: #00ff00;
}
#section-3 {
position: absolute;
width: 100%;
top: 200%;
height: 100%;
background: #0000ff;
}
See fiddle: http://jsfiddle.net/QtvU5/1/

Auto height grid

I have a product grid on my e-shop (http://shop.rukahore.sk/). Every product div is 222px x 222px, but I want it to have auto height.
I tried something like this - http://patterntap.com/code/stacking-columns-layout-masonry ,
but I had to add min-height and it didn't look good because some of the images were smaller or bigger and wrapping div was still 222px, which I don't want to happen due to hover effect, etc.
Can someone provide advice regarding this?
Well, for using the display shown in that page you need to use the plugin
<!-- Requires Masonry | visit http://masonry.desandro.com/ to download -->
If you don't want to add more plugins... Well, what makes you lose the height is the float css property. You should use other thing to make the grid, see for example how they do it in www.camarasdecolores.com.
To add the Masonry plugin:
Add an id to your container:
<div id="masonryContainer" class="hp-products allposts" style="position: relative; height: 2008px;">
Add the init js code in a script
$(window).load(function(){
$('#masonryContainer').masonry({
itemSelector: '.hp-product',
columnWidth: 60
});
});
change some css:
#masonryContainer { width: 0 auto; }
.hp-product {
width: 180px; float: left;
}
.hp-product-img {
}
.hp-product-img img {
max-width: 100%;
height: auto;
}
//Void the following ones
.hp-products {
}
.allposts {
}
.allposts .hp-product {
}

Categories