Scroll automatically inside of a div - javascript

Hello i have a problem with my website.
I want to make a JavaScript function which scrolls down to an object with the id #important. Usually i just modify the link to page.html#important. but because the object is at the bottom of a div which has a scrollbar itself that won't work.
Code:
<script language="javascript" type="text/javascript">
var timeout = setInterval(reloadChat, 10);
function reloadChat() {
$("#chat").load("chat.php");
}
reloadChat();
</script>
and in chat.php i fetch rows from my database in which the last row is being displayed in a <div id="lastmessage"></div> which i want to scroll down to
Thanks in advance

Is .scrollIntoView() something like you want?
https://www.w3schools.com/jsref/met_element_scrollintoview.asp
Or maybe this can help?
https://stackoverflow.com/a/270628/4335288
var objDiv = document.getElementById("important");
objDiv.scrollTop = objDiv.scrollHeight;

I would use Element.scrollIntoView() with behavior set to smooth.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
window.onload = function(e){
var element = document.getElementById('second');
element.scrollIntoView({ behavior: 'smooth' });
}
#first {
height: 2000px;
background-color: lightgreen;
}
#second {
height: 2000px;
background-color: lightpink;
}
#third {
height: 2000px;
background-color: lightblue;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
</html>
behavior: 'smooth' will quickly provide good UX.
You can choose when to call element.scrollIntoView({ behavior: 'smooth' });. It will scroll to that DOM element when called.

Related

Working with CSS, top propery in JQuery

I want to change top position of class bbb after 100 ms, but it took out that .css(top) does not work.
Please help.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="ddd"><div class='bbb'>Bobobo</div></div>
</body>
<script>
$(function myFunction() {
setInterval(alertFunc, 100);
});
function alertFunc() {
var b = $('.bbb').first();
b.css('top', 100 + 'px');
}
</script>
</html>
You should use setTimeout() instead of setInterval() this way alertFun() will only run once.
let alertFunc = function() {
$('.bbb').css('top', 100 + 'px');
}
setTimeout(alertFunc, 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ddd">
<div class='bbb'>Bobobo</div>
</div>
Just like #jhpratt mentioned. You need to add position:relative to the .bbb class.
See below.
$(function myFunction() {
setTimeout(alertFunc, 500);
});
function alertFunc() {
var b = $('.bbb').first();
b.css('top', 100 + 'px');
}
.bbb {
position: relative;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="ddd">
<div class='bbb'>Bobobo</div>
</div>
As others have already said, if you want to use the top attribute you need to give
position:relative;
to the element. This way the element will be set relative to his position and this could be a little tricky. By the way i usually prefer to make a container box relative ad put the positionable element absolute in it, so it will be displayed relative to his container:
.container{
position:relative;
}
.element{
position:absolute;
}
This is the html:
<div class="container">
<div class="element"></div>
</div>

I have a Div Element acting as a button but it will only work once

I am 11 years old and I started learning Javascript a couple of months ago, So I am trying to make a page where if you scroll down too much it will take you back to the top so I made a Div element that fills up a large space and onmouseover it will take you back up to the top but if you try it a second time it won't do anything. Please help. Thanks in advance !
I hope my understanding of your problem is right. You have a div and you want to go up each time you scroll too much.
As an example of how to handle the scroll in vanilla JavaScript you can have a look at the document for the onscroll event: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#container {
height: 500px;
width: 515px;
overflow: auto;
}
#foo {
height: 1000px;
width: 500px;
background-color: #777;
}
</style>
</head>
<body>
<div id="container">
<div id="foo"></div>
</div>
<script>
var container = document.getElementById('container');
container.addEventListener('scroll', function(event) {
// Get top and left value
var top = container.scrollTop
if (top > 400) {
// Go to the top
container.scrollTop = 0;
}
}, false);
</script>
</body>
</html>
In this example the contained element is bigger that the container so the container becomes scrollable with the overflow: auto; css property.
The scripts applies a onscroll event that checks the scroll value of the container and reset it to 0 when it exceed an arbitrary value (400 in the example).
I hope this has been useful to your work.

JQuery animate margin-top using var not working

I'm using JQuery to have my .wrapper div snap back to its original margin-top after being moved to margin-top. The original margin-top is dependent on browser height. I'm trying to do this by storing the original margin-top value into a variable, and using it for JQuery animate when I want to .wrapper div to snap back later on.
$(document).ready(function() {
//Adjust .wrapper Margin-top to adjust position to 1/4 of Window Broswer Height
var marginWindowSpace = ($(window).height()) / 4;
$(".wrapper").css("margin-top", marginWindowSpace);
var originalMargin = $(".wrapper").css("margin-top").toString();
});
$(".title").click(function() {
$("#results-container").empty();
$(".wrapper").animate({
'margin-top': originalMargin
}, 200);
$(".title-tag, .or, .random-article, .random-article-underline").fadeIn(500);
$("footer").addClass("footer-pos1");
});
QUESTION: Why wont my the animate margin-top accept my variable (where the original margin-top value is stored), even when converted to string? I don't want to use a static value as my margin-top.
If you want to see the app code, it's here. http://codepen.io/myleschuahiock/pen/zqvvNZ
Any help is appreciated! Thanks!
EDIT: I changed the click function to $('.go-back'), but the animate for magin-top should still be the same
Move the whole $(".title").click(function(){}) into the $(document).ready(function(){})
The problem exists because at the time of the initialisation of the $(".title").click(function(){}) originalMargin is not set yet because the document is not ready yet.
Do like this. there are some errors in your animate part.margin-top should be correct as marginTop and your string should convert as int and do like this.I implement as an example.hope this will help to you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.testing{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
div.two{
width: 200px;
height: 200px;
background-color: green;
position:
}
</style>
<body>
<div class="testing"></div>
<br><br>
<h3 class="clk">Click me!</h3>
<div class="two"></div>
<script type="text/javascript">
$(document).ready(function(){
var one = $(".testing").css("margin-top").toString();
var vaL = parseInt(one,10);
$(".clk").click(function(){
$(".two").animate({'marginTop':vaL+'px'},1000);
});
});
</script>
</body>
</html>
note :
var one = $(".testing").css("margin-top").toString();
int this part get the margin-top value as a string.
var vaL = parseInt(one,10);
convert it to an integer.
then the animate part
$(".two").animate({'marginTop':vaL+'px'},1000);

HTML5 full-screen doesn't work when set inside a timer

I am trying this code. It is supposed to generate an image and set its container div to full-screen when the p is clicked.
<html>
<head>
<style>
img { height: 643px; width: 860px; }
img:-moz-full-screen { height: 643px; width: 860px; }
div:-moz-full-screen { background: white; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$("p").click(function() {
setTimeout(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
},5000);
});
});
</script>
</head>
<body>
<p>Foo</p>
</body>
What it does is wiat for 5 seconds and prepend the image all right, but it is not set to full-screen. However, if you remove the timer and do it normally:
$("p").click(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
});
it works fine, it prepends the image and immediately sets it to full-screen.
Is this intentional, or a bug? Either way, is there any way to make it work?
The method has to be called in response to a user input event (ie. keypress, mouseevent).

Scroll in-page element only, not the whole page

Ever notice that, when you're scrolling an overflowed div or textarea with a mousewheel, and you scroll that to the bottom, the whole page starts scrolling?
Can that be prevented?
I did a quick test of jQuery's scroll() event handler but it seems to fire way too late.
Here's the test code if you want to play around.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#scroller').scroll(function() {
$('#notification').css('display','block').fadeOut();
return false;
})
})
</script>
</head>
<body style="height: 2000px">
<div id="scroller" style="width: 500px; height: 500px; overflow: scroll; margin: 50px">
<div style="width: 1000px; height: 1000px; background: #ddd"></div>
</div>
<div id="notification" style="display:none">Bang</div>
</body>
</html>
This JS will do it, basically just set the body overflow to hidden when the mouse is over the div#scroller then set it back to normal when you mouse out.
$("#scroller").hover(
function () {
$('body').css('overflow','hidden');
},
function () {
$('body').css('overflow','auto');
}
);
Tested on Safari, Firefox and IE8

Categories

Resources