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

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.

You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.

Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Fixed div as background on mobile devices

I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?

I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.

You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}

My webpages div doesnt set dynamic width correctly

I have 2 toolbars, 1 of each side of the screen, and a main content area. I dont want it to have to sidescroll cause that is pathetic, so i was trying to figure out if someone could help me set it up.
My current attemp was:
$("#main").css("width", window.outerWidth - $("#t1").width() - $("#t2").width());
The issue is that it is too big still because of margins. Instead of me doing width, should i do outerWidth, similar to how i did window, or is there a jquery command which will do just that?
Thanks
here is a basic fiddle: it is set up differently, but the idea is there. I just am unsure as to how to do it. http://jsfiddle.net/fallenreaper/DfZx7/
Upon tinkering deeper and deeper with my fiddle, i am fairly certain i figured it out in the example i had given. derp Standby while i look and see if i can apply the same thing to my code.
The sample did not work with my code, but border was set to 2px around, for both main and attributes. Deducting 8 pixels resolves.

You don't need JavaScript to avoid scrollbars. It's a layout width two fixed-width columns and a liquid one.
Here is the "skeleton" of your layout in a responsive way:
<div id="window">
<div id="column-sx"></div>
<div id="main"></div>
<div id="column-dx"></div>
</div>​
CSS:
#window {
width:100%;
overflow:hidden;
}
#column-sx {
width:54px;
float:left;
}
#column-dx {
width: 140px;
float:right;
}
#main {
width:100%;
float:left;
margin-right:-194px; /* left + right col width */
}
#main > * {
margin-right:194px; /* left + right col width */
}
This way it will never "break" nor cause an horizontal scrollbar.
Anyway, probably you want to set a min-width for #main contents, and add another container for contents instead of targeting them with > *
Check this fiddle with your code revised

Off the top of my head, i would think outerWidth would work. If it doesnt, you can find the margin value via the .style attribute - but thats not ideal.
One thing you should be aware of is window resize if your setting your widths dynamically and you truely hate horizontal scrolling. You could put the above function also in the $().resize() function to ensure the widths are always within the window and complement this with css min-width so it doesnt go too small.

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