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

Portfolio Expander width - Jquery CSS

I've been playing around with changing the way my portfolio looks and I've been struggling with getting my expander to push elements down (like google images does).
My test is here: http://chris-carpenter.co.uk/new/
I've used this as a starting point to add a filterable option for my work:
queness.com/post/14577/create-a-simple-responsive-portfolio-page-with-filtering-and-hover-effect
This is what is causing the problems. I've found ways to create the filterable portfolio, and ways to create a static portfolio that has an expanding content section but combining them is blowing my mind. I can't seem to figure it out.
At the moment this opens and pushes elements down, but the width is limited by the parent div, so anything below & to the right doesn't seem to shift.
<div class="portfolio--expand is-expanded">
</div>
I'm now looking at inserting a content div at the end of the row clicked. Much like this.
http://jsfiddle.net/JfcAu/450/
I'm not experienced enough with JS to understand what's happening and apply it to what I have though. Could anyone help me achieve a filterable grid which has a click to expand option?
I don't expect to retain any current styling ofcourse, since I haven't changed it at all from the original source yet, I just want the function working.
This has been hurting my brain for ages.
Useful things I've looked at:
isotope.metafizzy.co/filtering.html
oriongunning.com/blog/thumbnail-grid-expanding-preview/

You might have to do some width adjustment, but this:
#portfoliolist .portfolio {
box-sizing: border-box;
width: 23%;
margin: 1%;
display: none;
float: left; /* <-- this is taking it out of the DOM */
}
has a float:left - that is taking it out of the DOM - you have to remove the float:left - and then adjust width to maybe 22% or something to let the expanded content push everything out of the way.

Side Panel in CSS

I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:

Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.

All major browsers and IE10 support flexbox. Not supported < IE10.

jQuery: How to animate two elements without them bumping each other

I'm trying to get a 100% width table to "slide over" to reveal a "panel" behind it.
Here is a jsFiddle with an example of where I'm at and the "bumping" that happens: http://jsfiddle.net/z93se/2/ (using jQuery UI)
Click on a table row to see the transition happen. During the animation, the table "pops under" the new expanded panel. Then after the animate it goes back to the left where it belongs.
How do I get them to both slide at the same time and keep their positions?
PS - I'm okay with the moving which elements have the padding and floating as long as the end result works.
Update:
Two other requirements that I have: 1) The table needs to be 100% width before the animation. 2) The panel on the side that is "sliding out" needs to be fixed width.
Update 2:
New jsFiddle that shows the width of the table using a border (so it's easier to play with). http://jsfiddle.net/z93se/14/
Which brings up a second problem. You have to click the row twice for it to begin acting like I expect it to. It's default state is with the table expanded and the panel hidden. After clicking a row twice, it starts working closer to how I expect (except it still has the problems in the original question). Help on this would also be appreciated.

Finally got it working. Had to use the animate() function and pass in a callback to hide the div when it is done.
See this jsFiddle: http://jsfiddle.net/744BL/
Notes: Using IDs as selectors caused some problems that switching over to classes didn't.

This css would do
html, add container with id task-details-container to task-details
CSS
#task-list table {
width: 75%;
}
.details-active {
padding-right: 0px;
}
#task-details-container {
width: 25%;
float: right;
}
#task-details {
width: 100%;
padding: 0;
display:none;
}
I hope this is what you wanted, please see the css i have changed
**Updated

how scrollable text line inside a div without showing scroll bars

plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance

You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.

If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.

Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.