We Keep Coding

Automatically Animate/Scroll A Div Horizontally On Page Load

I have a seemingly basic question that I can't find any resources in what I am trying to acheive. I'm new to JavaScript and fairly mediocre at CSS.
What I am trying to accomplish is this. A page which can be displayed on a TV screen showing a list of sports results, overflowing to the right. I want the page to automatically scroll that div across to the right (which has a dynamic length depending on the amount of content) so it can see all the scores across all divisions and automaticaly scroll content to the right. When it reaches the end, pause, and then refresh (using Ajax) snapping back to the beginning.
I'm sure if I can be pointed in the direction of the right functions to use I can hook the various parts together.
Here's an example of something I am trying to run on page load that I'd like to scroll smoothly to the end over the course of 10 seconds, I just can't work out how to identify/set the "end" of the div.
$('#ScrollMe').animate({
scrollX: ??? //To div end;
}, 10000);
I think if I can solve this part, I can solve the rest.
Any pointers? Javascript, CSS.... open to anything!

You can use the .scrollWidth property to determine how far to scroll, subtracting the visible width will give a more accurate end point, eg:
(styles and animation time set to 2s, just to demonstrate what's happening)
$("#scrollMe").animate({
scrollLeft: ($("#scrollMe")[0].scrollWidth - $("#scrollMe").width()) + "px"
}, 2000);
#scrollMe { width: 100%; border:1px solid blue; overflow:auto; }
#inner { width: 6000px; border:5px solid red; height:20px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=scrollMe>
<div id=inner>
</div>
</div>

You just need to apply overflow: scroll css propertie, to the div you want to "overflow" the page width. So it will add a bar below the div, such as the default scrolling bar of every browser.
parentDivWithContentToOverflow{
Overflow: scroll;
}

This is a great example of what you need.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
But you need to specify the div to achieve this.
If your requirement is only to scroll to the end of the page(which is right), then you can use your example. But you need to specify the pixel location to scroll to right. For that, you might need something like the below.
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
The above code snippet was stolen from this answer 😁
https://stackoverflow.com/a/59520378/4972683

How avoid horizontal html scrolling when a layer is show

I have a div .layer that darkens the entire page to highlight a modal, but when I trigger the event there is a problem to occupying 100% of the screen, and is that the scroll bar of the original browser is deleted
Is there any fancy way to make the div .layer, when is visible, keep the original bar scroll of the page?
In smartphones / tablet I do not find any problem when shooting the event .layer").show(); but on desktop screens the original scroll bar of browser is eliminated and the whole html document moves to right, taking its place.
What would be the correct way to avoid html to the right?
Thanks in advance!
HTML:
<div class="layer"></div>
<div class="open-modal">Open</div>
<div class="modal">
<div class="close-modal">Close</div>
</div>
CSS:
html {width:100%;min-height:100%;margin:0 auto;top:0;left:0;padding:0}
body {top:0;left:0;margin:0;padding:0;min-height:100%}
.layer {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
min-height:100vh;
background:rgba(0,0,0,.9);
z-index:2
}
.modal {display:none;z-index:1}
SCRIPT:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer").show();
$("body").css("overflow","hidden");
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
$("body").css("overflow","");
});
});

You need to get rid of your use of "overflow". I've included a link below to the Mozilla Developer Network docs for "overflow", but below is a quick quote explaining what's happening.
"hidden
Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container."
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Also, after one cycle of clicking Open and Close, if you were to click Open again, the word Close won't show up. That's because you're not using the .show() method to show that text upon clicking Open. Updated JavaScript below.
JavaScript:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer,.close-modal").show();
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
});
});

How can I make part of my page always be in the same position relative to the screen?

I'm making a website, and I have a nav bar and a main content section, the nav bar is at the top of the screen and the main content in near the bottom of the screen. However, if I change my screen height, the main content section stays in the same place, and it goes out of my browsers viewport/window and disappears, which is perfectly normal and expected. But what I want is for the main content section to always be at the same place at the bottom of the screen, no matter what the screen size/resolution/height is. How can I accomplish this?
My website is jeffarries.com and what I'm talking about is on my home page, if you need a visual.
I've used JavaScript, and I'm not very familiar with it.
I have no experience with jQuery, however I'm fine implementing a finished jQuery script.
Thanks for your Time and Energy!
Please let me know if any further information in needed.
UPDATE: Since this question appears to be unclear, take a visit to my website, you will see the text that says "here you can learn about me and my adventures", I want that text to appear at the bottom of the browser window when loaded, however, I want it to remain in usual flow, being on top of the "recent activity" box. Basically I want the margin on top of the text to change based on the browser window height, keeping the text at the bottom of the browser window.

You can use archive this via CSS3 VH property [ View Port Height ]. For that you have to make one container and add its height to 100vh.
Here is the live demo - https://jsfiddle.net/8dptzvye/
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
.container{height:100vh}
.container span{position:absolute; width:100%; display:block; left:0; bottom:0; text-aling:center; padding:20px; background:black; color:#fff}
<div class="container">
<div class="cover">Extra Infomation </div>
<span>here you can learn about me and my adventures</span>
</div>

You may be looking for position: fixed
EDIT
If you want to change the margin based on the window size, you can use jquery's resize
$(window).resize(function () { /* change margin of element */ });

Javascript scroll - both horizontal and vertical - to particular positions on the page?

Here's my website:
violetoeuvre.com
What I'd like to do is have multiple veritcal and horizontal scrolls on the page. I think I should do this with Jquery.
Vertical:
Writing link at the top would scroll down when clicked so that the writing section on the side bar is at the top of the page.
Contact link at the top – same thing
(When I get the hang of this, I’m going to add up and down arrows on either side of the elements in the sidebar to scroll up and down to next / previous element. )
Horizontal:
In the writing section on the sidebar, I’d like the deadspin, gawker, and the awl links to scroll to content within the writing box when those buttons are clicked. I imagine this would have an overflow:hidden element somewhere? If vertical scrolling within this box would be easier, that’s ok too.
I found this excellent site which I think will be helpful:
http://demos.flesler.com/jquery/scrollTo/
relative position and relative selector look promising.
I'm guessing that I make each button a link that will be able to scroll to another part of the page.
So I would this class selector (the contact nav bar at the top), for example:
.nav_box_r {
display: block;
float:left;
width:219px;
text-align: left;
padding-right: 40px;
padding-top: 169px;
margin-top: 0;
}
as a link to scroll to the bottom of the page to the contact info, like
$(...).scrollTo( 0, 800, {queue:true} );
(Secondary question: Should I redo all the statis elements to have fixed positions?)
I'm new to this so would appreciate specificity. (Does the script go in the head, are the scrollUp / down to relative or fixed positions, etc.)
Thank you!

Hopefully this helps, you can use a href to jump to divs within your website.
Link
There is also this page that can help you as well.
How can I scroll to a specific location on the page using jquery?
Try this code
$(".yourclass").click(function() {
$(this).animate({ scrollTop: $('#title1').offset().top }, 1000);
});

Have a look at Balupton's ScrollTo plugin, it might be easier for you + there's a demo in there that shows you how to set it up.
Download zip at Github

How to let a part of a "background-image" still visible when scrolling down

I'm recently facing a dilemma with my new Wordpress site.
I'm wondering how to keep a part of my header image visible when i'm scrolling down in the page.
For now, my header image is 75% of the page height, but when i'm scrolling down, the image disapear as it should be.
But what i want, is that a certain part of it, let's say 20%, stay visible at the top in a "fixed" position.
So, to resume in pictures :
What i have without scrolling :
http://i.stack.imgur.com/2NxcQ.jpg
What i would like to have when scrolling down :
http://i.stack.imgur.com/nwoQw.png
I don't know if i'm clear enough, though, thanks to everyone who will try to help me on this !

You can use a jquery plugin like sticky:
<div class="top">Content</div>
<div class="header"></div>
<div class="content">
....
</div>
Then for CSS, you apply your image:
.header
{
background-image: url('http://placekitten.com/200/300');
height:300px;
width: 100%;
}
Then in your js, you can use the sticky plugin:
$(".header").sticky({topSpacing:-250});
Notice the negative number on the spacing offset, which allows most of the image to be scrolled.
Example fiddle: http://jsfiddle.net/CZYav/2/

I have a demo here: http://jsbin.com/ubolos/1/edit
Just keep tracking you scrolled distance and modify the background property of the div when you find that user has scroll too far down. No other plugins of jQuery needed.