I'm trying to start each page after the homepage about 500px down, similar to this website: http://unionstationdenver.com/
You'll notice when viewing pages after the homepage, you're automatically scrolled down without notice but you can than scroll up to revel the featured slider again.
I've played with scrolledHeight but I dont think that is what I need????
Basically I have a featured section that is on top of all my content pages, but you shouldn't be able to see this section until you scroll up. Any help?
You can use .scrollIntoView() for this. It will bring a specific element into the viewport.
Example:
document.getElementById( 'bottom' ).scrollIntoView();
Demo: http://jsfiddle.net/ThinkingStiff/DG8yR/
Script:
function top() {
document.getElementById( 'top' ).scrollIntoView();
};
function bottom() {
document.getElementById( 'bottom' ).scrollIntoView();
window.setTimeout( function () { top(); }, 2000 );
};
bottom();
HTML:
<div id="top">top</div>
<div id="bottom">bottom</div>
CSS:
#top {
border: 1px solid black;
height: 3000px;
}
#bottom {
border: 1px solid red;
}
You can use two different techniques to achieve this.
The first one is with javascript: set the scrollTop property of the scrollable element (e.g. document.body.scrollTop = 1000;).
The second is setting the link to point to a specific id in the page e.g.
section one
Then if in your target page you'll have that ID the page will be scrolled automatically.
here is the example using Pure JavaScript
function scrollpage() {
function f()
{
window.scrollTo(0,i);
if(status==0) {
i=i+40;
if(i>=Height){ status=1; }
} else {
i=i-40;
if(i<=1){ status=0; } // if you don't want continue scroll then remove this line
}
setTimeout( f, 0.01 );
}f();
}
var Height=document.documentElement.scrollHeight;
var i=1,j=Height,status=0;
scrollpage();
</script>
<style type="text/css">
#top { border: 1px solid black; height: 20000px; }
#bottom { border: 1px solid red; }
</style>
<div id="top">top</div>
<div id="bottom">bottom</div>
Use document.scrollTop to change the position of the document. Set the scrollTop of the document equal to the bottom of the featured section of your site
Related
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>
I've been having problems with creating a colored block which is hidden, and then appears after a mouse press (no where specific, anywhere on the page), then stays there for 2 seconds and then disappears again... until another mouse press happens, and the whole thing happens again. Have been experimenting with '.click(function' and other things but haven't been able to make it work.
At the moment I have a DIV layer like this...
HTML:
<div class="overlay"></div>
CSS:
.overlay {
position: absolute;
z-index: 1000;
right: 240px;
top: 500px;
width: 1000px;
height: 100px;
background: rgba(255, 255, 200, 100);
}
I'm quite new to javascript so any advice will be very helpful.
You can do it using setTimeout in jQuery
$( "#target" ).on( "click", function() {
$("#messageBox").hide().slideDown();
setTimeout(function(){
$("#messageBox").hide();
}, 2000);
});
#messageBox {
display:inline-block;
float:right;
border:1px solid #060;
background:#FFC;
padding:10px 20px;
box-shadow:2px 2px 4px #666;
color:#060;
font-weight:bold;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="messageBox">
Hi there.
</div>
<input type="button" id ="target" value="click"/>
The jQuery(document) does the trick as it will consider click for the whole document and not to a specific place on page.
jQuery(document).click(function(event) {
var $div = $(".overlay");
if ($div.is(":visible")) { return; }
$div.show();
setTimeout(function() {
$div.hide();
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Doing this you do need a target div or element to fire an event on click. This will allow you to fire the event on the whole document.
How to resize a divs when resizing textarea within it?
If I create two or more sticky and use ESC all sticky will be closed. How to set up the ESC to close only active pop-up?
How to keep alive sticky when page is refreshing?
I use this code to make a pop-up sticky note: http://codepen.io/anon/pen/XXNBoz
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
<script>
$(document).ready(function(){
function limitTextareaLine(e) {
if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) {
return false;
}
}
$(function() {
$('textarea.limited').keydown(limitTextareaLine);
});
var x = "<div class='darkYellow'><div class='close'>X</div>Note<div class='lightYellow'><textarea maxlength='250' rows='8' cols='25' class='limited'></textarea></div></div>";
$('#click').click(function () {
$('#one').append('<div class="note">'+x+'</div>');
$( ".darkYellow" ).draggable();
$('.close').each(function(){
$('.close').click(function() {
$(this).parent().remove();
});
});
});
$('.darkYellow').live('click', function() {
$(this).addClass("index");
});
$('.darkYellow').live('blur', function() {
$(this).removeClass("index");
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
window.open(location, '_self', '');
openedWindow.close();
}
});
});
Change the fixed width and height to min-width and min-height like below.
And it should auto resize.
*{
margin:auto;
padding:0;
}
.darkYellow {
position:absolute;
background-color: #76B5F0;
min-width:200px;
min-height:150px;
font-size:12px;
text-indent:1px;
-webkit-box-shadow: 1px 1px 10px #888888;
cursor:move
}
.lightYellow {
min-width:200px;
min-height:135px;
background-color: #8EC0EE;
margin-top:1px;
}
textarea {
background-color: #8EC0EE;
border: 0px;
}
.index {
z-index: 55;
}
.close {
width:7px;
height:7px;
padding:0;
line-height:2pt;
float:right;
margin-top:6px;
margin-right:4px;
font-size:14px;
cursor:pointer;
}
also use a more up to date version of JQuery, I've updated you fiddle below.
https://jsfiddle.net/link2twenty/gLrmgqgz/10/
You can capture the resize event with the resize of jQuery
$("textarea").resizable({
resize: function() {
//resize your div
}
});
For the sticky notes: how do you define the variable openedWindow?
In CSS set the parent div's display to display: table should fix the problem and make it resize as you change the textarea's size.
EDIT: As for the escape thing (just refreshed and saw that) you could use document.activeElement or since you're using jQuery you could do $(':focus').
EDIT: take your openWindow variable and set it as openWindow = $(':focus'); and as for the 3rd item you added you would have to save the active sticky in the localstorage of the page and just update it each time you change which sticky is active. Here's some info on localstorage localstorage MDN
I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}
In Chrome is ok
In IE8+ is ok (i know a hack)
In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)
Working fiddle -> https://jsfiddle.net/8oj0sge4/6/
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}
#wrapper {
width: 100%;
height: 1500px;
border: 1px solid red;
padding-top: 380px;
}
#wrapper .container {
border: 1px solid green;
width: 100%;
height: 500px;
overflow: scroll;
}
#wrapper .container-scroll {
height: 1500px;
width: 100%;
border: 1px solid yellow;
position: relative;
}
#wrapper .main {
width: 200px;
height: 500px;
background: black;
overflow: scroll;
position: absolute;
color: white;
left: 50%;
margin-left: -100px;
margin-top: 10px;
}
<div id="wrapper">
<div class="container">
<div class="container-scroll">
<div id="main-site" class="main">
My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
</div>
</div>
</div>
</div>
Thank you guys.
I hope this demo helps you out to make the div content scroll when mouse hover and when mouse out of the div.
<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>
<script>
function loadpage()
{ document.getElementById('marquee1').stop(); }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>
</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()" onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test
content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content
</marquee>
</body>
</html>
you just add this js file to get a smooth scrolling effect.
https://github.com/nathco/jQuery.scrollSpeed
live deomo
http://code.nath.co/scrollSpeed
Not 100% sure what you are up to but you can get the fixed position with css "fixed". It will stay where you put it. The following css fixes to the bottom of the page.
.fixed {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: auto;
}
There is already an answer on scroll position:
How to get scrollbar position with Javascript?
I don't know important is that content, and by this I mean if it needs to stay selectable.
If not a pretty good solution would be to use #wrapper .main{ pointer-events: none; }, meaning that the content will not get any events from mouse and it would go through it to the next element behind it - in your case the scroll would go dirrectly to #wrapper.
Safari does this because every browser has its own scrolling. If you have a fixed header on a phone it acts bouncy and if you do this on a PC it acts normal. Explorer scrolls smooth and Chrome scrolls right to the place without a smooth transition.
The reason why your #main-site is "jiggling" is because the browser keep "repaint" the position of this element.
One Trick to solve this is called Debounce Function, (you may also google it to see other variations.) The basic idea is to delay the scroll event handler to clear out those untriggered callbacks.
In your case, you may do something like this:
main.parentNode.parentNode.onscroll = function(event) {
debounce(offsetting, 10);
}
function offsetting() {
main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";
}
function debounce(method, delay) {
clearTimeout(method._tId);
method._tId= setTimeout(function(){
method();
}, delay);
}
If you keep seeing the jiggling issue, you can simply edit the delay parameter (i.e, change 10 to 50). The downside for that is your #main-site element will be 'cut off the top` for a while, depending on your delay settings.
Since your code works perfectly on Chrome and IE, there might be a bug on scrollHeight or offsetHeight attribute on Safari. I recommend you to use getBoundingClientRect for calculating element position since this method is more reliable and accurate.
var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;
I am trying to built a window located in the center of the screen and when I scroll down it will always be in the center, I have tried the follwing code:
<style>
#Window {
display: none;
text-align: center;
border: 1px solid #333;
position:absolute;
width: 200px;
height: 80px;
z-index:9999;
background:#fff;
border-radius: 5px;
padding: 10px;
}
</style>
<script>
$("#window").css('top', 200);
$("#window").css('left', winW/2- $("#window").width());
$(window).scroll(function () {
var winH = $(window).height();
setTimeout( function(){
$('#alertWindow').animate({'top':winH/2-$("#window").height()/2},200);
}, 1000);
});
</script>
<div id="window">this is scroll window</div>
The problem is that when I scroll down, the window moves to the center at the first time which works, but when I scroll again, it won't keep moving to the center, I think the scroll function is only called once, how can I keep the window move constantly to the center of the creen when I scroll down or up, any one could help me with that, sorry if I did present the whole code.
All you need is css.
Just use position: fixed
You should try taking advantage of Jquery UI's excellent dialog plugin http://jqueryui.com/demos/dialog/. There is an option to update the position of the dialog
$( ".myDialogWindow" ).dialog( "option", "position", 'center' );
as well as being able to theme it with css however you want.