Automatically scroll to bottom of div - javascript

On my webpage the sql results are returned in a div where the maximum width and height has been defined and the overflow has been set to scroll. When someone visits the page I would like the default scroll position to be at the bottom. I have done a lot of research and the best solution I could find without using jQuery fails to work (Scroll to bottom of div?). Therefore I am wondering if anybody can explain where my error is or an alternate solution without using jQuery.
My Code
<html>
<style>
#test{
max-height: 150px;
max-width: 200px;
overflow: scroll;
background: #50a8ff;
}
</style>
<head>
<script language="javascript" type="text/javascript">
var objDiv = document.getElementById("test");
objDiv.scrollTop = objDiv.scrollHeight;
</script>
</head>
<body>
<div id="test"><h4>BIG TEXT</h4><h4>BIG TEXT</h4><h4>BIG TEXT</h4><h4>BIG TEXT</h4>
<h4>BIG TEXT</h4><h4>BIG TEXT</h4><h4>BIG TEXT</h4></div>
</body>
</html>
This is a simplified version of my code to demonstrate the problem.
Potential Causes
As the SQL data is fetched once the page has loaded, therefore would the scroll height be set before the div is filled, would setting a delay solve this problem? Although in this simple example I have the same problem even though the data is not being loaded from an SQL database.

the scrollHeight method is not always correct sometimes it gives unexpected values
try this
1.add a div inside your overflow div
<div class="container which has overflow">
<div class="inner div with no padding"> // note that this div must not have any padding margins are fine
MY CONTENT
</div>
</div>
2.JS code with jquery(I dont know about non-jquery)
var div = $(".container"); // the div which has the overflow
var div_inner = $(".container_inner"); //the div inside the overflow one
var a = div_inner.outerHeight();//get the height of the inner div
div.scrollTop(a); // make the overflow fiv scroll to the bottom

Related

Skrollr won't allow to scroll on mobile for Wordpress, what is the quickest way to resolve this?

I'm still newer to integrating Skrollr on Wordpress, and while I liked it at first I'm questioning if it is outdated to use. Regardless, I've looked up several articles on this but so far I've either done them wrong, or they don't work for some reason. I'll describe more below.
First, I use Elementor with a child theme derived from Hello Elementor. I have two sections with simple HTML plugins where I have scrolling panels fly in and out, the two sections I just have flipped panels. It works perfectly up until I try to use anything on a real life phone (as in not just an emulated one which worked fine) or tablet. Obviously since I've never used Skrollr before on a live site, I was not anticipating this type of hangup.
I'm brining in two instances, so for example here is one:
<div class="panels-container-1a">
<div
class="panel1-1a"
data-anchor-target="#panels-section--trigger-1a"
data-center-top="opacity: 0; top: 100%;"
data-400-top="opacity: 1; top[sqrt]: 60%;"
data-center="top: 50%"
data--400-bottom="opacity: 1; top[sqrt]: 40%;"
data-center-bottom="opacity: 0; top: -0%;"
></div>
<div
class="panel2-1a"
data-anchor-target="#panels-section--trigger-1a"
data-center-top="opacity: 0; top: 0%;"
data-400-top="opacity: 1; top[sqrt]: 40%;"
data-center="top: 50%"
data--400-bottom="opacity: 1; top[sqrt]: 60%;"
data-center-bottom="opacity: 0; top: 100%;"
>
<h2>Upcoming Events</h2>
<p>See the latest action, suspense, and champions live!</p>
<a class="button-shine--link2" href="#">
<div class="button-shine--button2">START WATCHING</div>
</a>
</div>
</div>
</section>
<script
type="text/javascript"
src="/wp-content/themes/rmpw/js/skrollr.min.js"
></script>
<script type="text/javascript">
0;
var s = skrollr.init();
</script>
I've tried creating the id="skrollr-body" by both wrapping the HTML above in a body tag, and I've also tried adding it to <body id="skrollr-body" <?php body_class(); ?>> within the header.php of the parent theme to the entire site. Once I do this, it seems to scroll fine on mobile until it reaches the HTML section, then stops. (I should mention though, that I have a sticky header as well so I'm not sure if that was the issue)
I've also tried putting the following code into the actual skrollr.js file at the bottom within the main function to just simply destroy it after it reached a certain width, then minified it after:
var _skrollr = skrollr.get(); // get() returns the skrollr instance or undefined
var windowWidth = $(window).width();
if ( windowWidth <= 767 && _skrollr !== undefined ) {
_skrollr.destroy();
}
And still to no avail. So what exactly am I doing wrong here? Any help would be appreciated, as I have two sites that currently use this and it would really suck to try to reinvent the wheel so late into release.
Edit: I've tried updating removing the full body ID and adding the id just to the main section for the homepage, and it still seems to not work.
var x = document.getElementsByClassName('elementor-18')[0];
x.id="skrollr-body"
I just simply stopped it from being called at all in the first place and it seems to do the trick, just use static images in place.
if (windowWidth > 767){
skrollr.init()
}

jquery multiple append avoid increasing window size

I have been working on the next example, I'm adding html to a div, at some point the size of the window start increasing, is there a way to avoid this?
example
$(document).ready(function() {
$('#b').click(function() {
$('#elDiv').append('<br><strong>Hello</strong><br>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>I would like to say: </p>
<button id="b">click now</button>
<div id="elDiv"></div>
I defined a style for the elDiv to be 100px height and scroll when content exceeds the div's height:
.myclass{
height: 100px;
overflow: auto;
}
Updated fiddle: https://jsfiddle.net/9rysbxw2/18/
to avoid this behavio i think you should set a size to the element and define a overflow behavior. So the content that is been added to the div will stay inside it. here is a modification of you code sample:
$('#b').click(function(){
$( '#elDiv').append('<br><strong>Hello</strong><br>');
});
<p>I would like to say: </p>
<button id="b">click now
</button>
<div id="elDiv" style="height:100px; overflow: auto;">
</div>
<!-- NOTICE THE OVERFLOW PROPERTIE I ADDED AND THE FIXED HEIGHT -->
i resolved the issue using the style properties
position: absolute;
top: 20px;
this way i can add multiple div at any position without increasing the screen size
example

footer JS adjustment issues

Recently just used a piece of JS from another user question and answer and it serves to be quite good in terms of being a solution to the initial issue I had which was to have footer stick to bottom of viewport height even on a page which content doesn't fill whole page, but it now seems to have caused another issue.
On pages that need scrolling to view all content, the page ends at viewport height and does not allow scrolling which means portions of content cannot be viewed.
The code which i have used is below, credit for the code goes to claudix and was from his answer on this page:
How to make the web page height to fit screen height
<!--Code Starts-->
<body style="overflow:hidden; margin:0">
<form id="form1" runat="server">
<div id="main" style="background-color:red">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</form>
<script language="javascript">
function autoResizeDiv()
{
document.getElementById('main').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
</script>
</body>
<!--Code Ends-->
Was wondering if anybody knew something i could add to that piece of javascript that would have the above code work for a page that does not have full content, however, when scrolling is needed, the JS code is disabled ?
Thanks !
Use this code in your head tag
<script type="text/javascript">
jQuery(document).ready(function(){
var docheight = jQuery(document).height();
var bodyheight = jQuery('body').height();
var bodywidth = jQuery('body').width();
/*alert(docheight+'--'+bodyheight);*/
if (bodyheight < docheight && bodywidth >= 1000) {
$(".footer-class-name").css('position',"absolute");
}
});
</script>
Try switching of the overflow:hidden; on the body tag as it is prevent content to be spead out.
From my understanding you want to create a one page site using your own custom scrolling techiques.
You could try adding slimScroll for jquery to create custom scrolling panels for your site while keeping everything in perspective without using the browser's scroll.
Just read a post form a blog. I've removed the JS code, it was good for anybody else that might need it, however, just want to make it clear i'm not saying anything bad about Claudix's JS code. However, I just used min-height: 100vh; on page container and now footer is always botton, even when there are no floating elements to clear and it solved both issues. Thanks ! :)

Is it possible to re-position a position:absolute DIV?

The scenario:-
A published HTML page has position:absolute DIVs and all DIV heights are set to specific px values. The page is editable via an online CMS such as Surreal or Cushy. The editor enters more content that the DIV was designed to take. The result is that the extra content overflows the DIV and the page design is trashed.
Is there any way that when an editor does this that the DIV height expands AND all other DIVs on the page move down? Bare in mind that the DIV heights cannot be set to 100% but have fixed px values.
I am assuming the solution maybe jQuery or JavaScript - any ideas?
<body>
<div id="two" style="position:absolute;left:163px;top:0px;width:738px;height:269px;z-index:5;padding:0;">
<img src="images/two.jpg" id="two" alt="two" border="0" title="two" style="width:738px;height:269px;">
</div>
<div id="three" style="position:absolute;left:0px;top:350px;width:900px;height:294px;z-index:6;" class="editable">
<!-- div content -->
<!-- this is where the user/editor will add content -->
</div>
<div id="four" style="position:absolute;left:0px;top:0px;width:900px;height:323px;z-index:7;padding:0;">
<div id="five" style="position:absolute;left:0px;top:0px;width:162px;height:269px;z-index:0;padding:0;">
<img src="logo.gif" id="logo" alt="Logo" border="0" title="Logo" style="width:162px;height:269px;">
</div>
I don't see exactly the scenario, but have you considered the scroll within your fixed size divs ?
Give a class to those divs, such as
<div class="bescrollable"></div>
and then in your css :
.bescrollable {overflow:auto;}
scrollbars will be added when overflows occur
You can set height of the div according to the content like this:
.container {
position: absolute;
width: 400px;
height: 400px;
}
.content {
width: 100%;
height: 100%;
}
<div class="container">
<div class="content">...</div>
</div>
$('.container').css('height', $('.content').height());
Here a fiddle: http://jsfiddle.net/Kdktw/
As CBRRacer mentioned in the comments, if we could see the HTML, the answer would be more accurate to your situation.
I hope this helps!
This would be predicated on the height of the content within the box. Probably the best method would be to have the height of the content div set to auto and use javascript to get the height of the element.
// Using jQuery
var contentDivHeight = $('#myContentDiv').height();
var startingOffset = 250; // The height of the div original set at startup
Then you could simply add this height to each of the primary display controls that would have to be moved "down". If you assigned them all a common class they could all easily be selected (such "primaryInterface" or something).
$(document).ready(function() {
$('.primaryInterface')each(function (i) {
var newTop = this.offset().top + contentDivHeight - startingOffset;
var newLeft = this.offset().left;
this.offset({ top: newTop, left: newleft });
});
});
This code is untested, but ideally, once the page loads, it would find all of the elements with the specified class and set their top offset to be the difference between the starting height of the div and the resultant height.

Dynamically resize text to fill div [duplicate]

This question already has answers here:
Auto-size dynamic text to fill fixed size container
(21 answers)
Closed 8 years ago.
I have been searching for a solution to resize the text size in a div to make the text fill out the entire div height and width, with no avail.
I have made some images to help understand this problem:
So this is a simple div with a height and width set. This height and width does not change, the text in the box does! So what I want to do is to make that text fill the whole width and height of the div just like in the image below.
I have been working on the simple example below and I simply cannot find out how to do this. I have tried setting relative font-sizes with percentage, doing things with overflow,
text-aligning all not giving me the result I want.
<html>
<head>
<title>Test</title>
<style type="text/css">
#box1, #box2{
width: 400px;
height: 300px;
color: white;
margin: 10;
font-size:larger;
text-align:justify;
letter-spacing: 100%;
}
#box1 { background-color: green;}
#box2 { background-color: blue;}
</style>
</head>
<body>
<div id="box1">
Llorem ipsum foo bar baz
</div>
<div id="box2">
Foobar
</div>
</body>
</html>
Is this problem even solvable with simple CSS or will I have to do some javascript/jQuery?
As I said this may be a dupe of
Auto-size dynamic text to fill fixed size container.
The OP did a jQuery plugin for that means, you can download it here
It doesn't seem to up to date though!
Good luck!
You can use FitText.js (github page) to solve this problem. Is really small and efficient compared to TextFill. TextFill uses an expensive while loop and FitText don't.
Also FitText is more flexible (I use it in a proyect with very special requirements and works like a champ!).
HTML:
<div class="container">
<h1 id="responsive_headline">Your fancy title</h1>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
You also can set options to it:
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>
CSS:
#responsive_headline {
width: 100%;
display: block;
}
And if you need it, FitText also has a no-jQuery version.
My guess is, this is not the kind of thing you can do with CSS. There isn't any kind of notion of percentage in fonts (as far as I know). You'll probably need to use Javascript.

Categories