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 ! :)
Related
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()
}
I've been trying to automatically go to the bottom of the web page upon page load. On the get AND the post, in fact, no matter how the view has been called, it has to go automatically to the bottom of the page.
I want to do it with javascript.
Seemed like something simple, something I could find in here easily. Well this looks like it :
Set page scroll position on page load of MVC app
There is only one problem... The answer doesn't put the javascript solution in context. And without context... I have no idea where to put these line, no matter what I try...
I won't play all day to know how to accomplish this, so HERE'S A CONTEXT :
#model WhateverModelYouWant
#{
ViewBag.Title = "Formulaire de reprise";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
document.getElementById("ImportantStuff").scrollIntoView();
</script>
<h2> TITLE OF THE VIEW <h2>
<div> Lots of content here </div>
<div> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
<input type="submit" value="ImportantButton" >
Needless to say this doesn't make the page scroll anywhere... Thanks in advance.
ERROR :
In your example nothing can be scrolled anyway because everything is in the visible area. Apart from that mituw16 already gave you the right solution. Here is an example how to use the scrollIntoView function.
<script type="text/javascript">
function scrollToImportantStuff() {
document.getElementById('ImportantStuff').scrollIntoView()
}
window.onload = scrollToImportantStuff;
</script>
<h2> TITLE OF THE VIEW <h2>
<input type="button" onclick="document.getElementById('ImportantStuff').scrollIntoView()" value="Scroll ImportantStuff into View" />
<div style="height:500px;"> Lots of content here </div>
<div style="height:500px;"> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
This doesn't really have anything to with MVC. It is accomplished with javascript.
document.getElementById("ImportantStuff").scrollIntoView();
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
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
Hello guys I have a problem with the javascript (i m not a big fan of this language :)). So I would like on my website an automatic Scroll : i have four div,which one has the same height (depends on the size of your screen). I want when i scroll to the bottom (or the top) that the slider goes directly to the next div (or previous), like a magnet. So I tried the scrollTo but i don t know how it works because i have to listen the scroll... so here is my html:
<!--Samsung Galaxy-->
<div class="bloc" id="samsungtab">
<img src="images/samsung.png" alt="samsunggalaxytab" />
</div>
<!--ORA-->
<div class="bloc" id="ora">
<img src="images/ora.png" alt="logo" />
</div>
<!--Oculus Rift-->
<div class="bloc" id="oculus">
<img src="images/oculus.jpg" alt="logo" />
</div>
<!--Acer-->
<div class="bloc" id="acer">
<img src="images/acer.jpg" alt="logo" />
</div>
and the javascript for the automatic size of the different div:
$(document).ready( function(){
var hauteur = (document.documentElement.clientHeight);
var position = hauteur/4;
$(".bloc").css("height",hauteur);
$("#samsungtab").css("margin-top",position);
$("#ora").css("margin-top",position);
$("#oculus").css("margin-top",position);
$("#acer").css("margin-top",position);
});
Thank you very much in advance for your help!!!!
Tom
To me it seems like you are looking for something like this:
https://github.com/peachananr/onepage-scroll (demo here: http://www.thepetedesign.com/demos/onepage_scroll_demo.html)
I would advise you to use this jQuery plugin (based on the JS code in your example you are using jQuery).
If you'd like to code it yourself, you should start by rewriting your CSS. Setting the height of the .block elements via JS should not be necessary, but it depends on how the rest of your HTML is built up. If you add the complete HTML file here I might be able to assist on this as well.
After that you should look into jQuery's .scroll() handler. Usage:
$(window).scroll(function(){
//code that runs on scroll here
})
Another useful jQuery function in this case is .offset(). You can get the coordinates (so as well the distance from the top) of any visible element like this:
$('.block').offset().top.
Lastly, you should look into jQuery's .scrollTop() function. You can use this function to get the current scroll position: $(document).scrollTop(), or to set the desired scroll position:
$(document).scrollTop(200)
Good luck, I hope it helps!
I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");