We Keep Coding

Hide div when contents of another div have loaded

I've got an image that loads as a series of slices inside a div. I only want to display the div after all its contents have loaded. I'm using another div to mask the div that's loading:
<div id="prepage" style="position:absolute; left:0px; top:0px; background-color:white; height:100%; width:100%; z-index:1">
<div align="center">
<p>loading... please wait</p>
</div>
</div>
I'm trying to hide the above div when the images in div id="graphic" have loaded. I was thinking something like this might work:
$(window).load(function() {
$("#prepage").hide();
});
However it's not working. This seems a relatively common question, but for some reason none of the answers work for me - probably because my coding skills are rudimentary. Thanks in advance.
update it seems I should have included the contents of the image div:
<div align="center" id="graphic">
<div style="position:relative; left:0px; top:0px; width:251px; height:350px">
<div style="position:absolute; left:0px; top:0px; width:251px; height:8px;">
<img src="foo.gif" width="251" height="8" alt="">
</div>
<div style="position:absolute; left:0px; top:3px; width:96px; height:12px;">
<img src="bar.gif" width="96" height="12" alt="">
</div>
^ and so on. There's 25 gif slices that make up the entire image in the div.

Hide the div initially, and attach an onload event to the images.
Create a data attribute that increases for each image loaded, then show the div when it equals the total number of images:
$('#graphic img').on('load', function() {
let loaded = ($('#graphic').data('loaded') + 1) || 1;
$('#graphic').data('loaded', loaded);
if (loaded == $('#graphic img').length) {
$('#graphic').show();
}
});
$('#graphic img').on('load', function() {
let loaded = ($('#graphic').data('loaded') + 1) || 1;
$('#graphic').data('loaded', loaded);
if (loaded == $('#graphic img').length) {
$('#graphic').show();
}
});
#graphic {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div align="center" id="graphic">
<img src="https://picsum.photos/50/50?random">
<img src="https://picsum.photos/50/51?random">
<img src="https://picsum.photos/50/52?random">
<img src="https://picsum.photos/50/53?random">
<img src="https://picsum.photos/50/54?random">
<img src="https://picsum.photos/50/55?random">
<img src="https://picsum.photos/50/56?random">
<img src="https://picsum.photos/50/57?random">
<img src="https://picsum.photos/50/58?random">
<img src="https://picsum.photos/50/59?random">
<img src="https://picsum.photos/50/60?random">
<img src="https://picsum.photos/50/61?random">
<img src="https://picsum.photos/50/62?random">
<img src="https://picsum.photos/50/63?random">
<img src="https://picsum.photos/50/64?random">
<img src="https://picsum.photos/50/65?random">
<img src="https://picsum.photos/50/66?random">
<img src="https://picsum.photos/50/67?random">
<img src="https://picsum.photos/50/68?random">
<img src="https://picsum.photos/50/69?random">
</div>

Need to make unusual navigation work in all screen dimensions

I'm using somehwat unusual navigation, as seen here. When a user mouses over the bars, they slide out into view. All of that is working fine. The problem is, I cannot find the CSS to make the buttons align left of the edge of the screen (as seen in the image), regardless of the display dimensions.
I originally tried:
<style>
#container {width: 600px; height: 25px; position: relative;}
#bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}";
</style>
Which worked perfectly. But only on my screen. I thought that position:absolute inside position:relative would work regardless of screen dimensions, but was obviously wrong.
I then tried several variations on dynamically adjusting the screen width in container div with a function that runs onload:
function populateArrays() {
for (i = 0; i <= 5; i++) {
position[i] = -340;
bar[i] = document.getElementById("bar" + i.toString());
id[i] = i;
}
var sheet = document.createElement('style');
var sWidth = screen.width;
sheet.innerHTML = "#container {width: " + sWidth + "px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}";
document.body.appendChild(sheet);
}
But this also did not work.
What is the correct way to align the images to the far left, partially (mostly) off screen, regardless of dimensions?
Thank you
EDIT: HTML was requested. I don't know if this will help, the issue seems to be adjusting the CSS properly (perhaps with JavaScript).
<div id ="container">
<br><br><br><br>
<img src="homeSilverGlassText.png" alt="Home" width="200" height="35" id="bar0" onmouseover="startMove(0)" />
<br><br><br><br>
<img src="aboutSilverGlassText.png" alt="Anout Me" width="200" height="35" id="bar1" onmouseover="startMove(1)" />
<br><br><br><br>
<img src="contactSilverGlassText.png" alt="Contact Me" width="200" height="35" id="bar2" onmouseover="startMove(2)" />
<br><br><br><br>
<img src="gallerySilverGlassText.png" alt="Gallery" width="200" height="35" id="bar3" onmouseover="startMove(3)" />
<br><br><br><br>
<img src="uiSilverGlassText.png" alt="Design" width="200" height="35" id="bar4" onmouseover="startMove(4)" />
<br><br><br><br>
<img src="editSilverGlassText.png" alt="Editor" width="200" height="35" id="bar5" onmouseover="startMove(5)" />
</div>
Links for button clicks have not yet been added.
Thank you

I think I might have what you want. Your code really doesn't do a great job of describing your problem though. You have images that are only 200px wide and you start by moving them 340px to the left so that you won't be able to see them at all. What are you trying to achieve with that? I'm not sure this is one hundred percent what you want, but this HTML/CSS will move half of your images off screen and then slowly (2 seconds) move them to a "normal" position on hover. I only moved them 100px offscreen so you can actually see them. Let me know if you are actually going for a different effect.
#container {
width: 600px;
position: relative;
}
.bar {
position: absolute;
transition: left 2s;
left: -100px;
}
.bar:hover {
left: 0px;
}
<div id="container">
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Home" width="200" height="35" id="bar0" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Anout Me" width="200" height="35" id="bar1" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Contact Me" width="200" height="35" id="bar2" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Gallery" width="200" height="35" id="bar3" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Design" width="200" height="35" id="bar4" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Editor" width="200" height="35" id="bar5" class="bar" />
</div>

Javascript active state for buttons composed of images

Javascript newb here. I am trying to make a menu that changes it's image when the button is clicked and active.
Here is the html
<div id="expand_footer">
<div class="footer_btn" id="ftr_btn1">
<img class="shopbtns" src="outerwear_icon.png" width="66" height="87" style="padding-top:4px;" />
</div>
<div class="footer_btn" id="ftr_btn2">
<img class="shopbtns" src="top_icon.png" width="66" height="88" style="padding-top:4px;" />
</div>
<div class="footer_btn" id="ftr_btn3">
<img class="shopbtns" src="bottom_icon.png" width="89" height="91" style="padding-top:1px;" />
</div>
<div class="footer_btn" id="ftr_btn4">
<img class="shopbtns" src="boots_icon.png" width="66" height="80" style="padding-top:10px;" />
</div>
</div>
and the css
.footer_btn {
float:left;
text-align:center;
width:25%; /* percentage of stage to occupy */
margin-top:0px; /*adjust spacing between text and image */
padding:0!important;
cursor:pointer;
z-index: 405!important;
}
I'm switching from AS3 to JS so apologize if the question seems silly. Would the best way to accomplish this just be in CSS or can Javascript handle this. I'm not using Jquery. (avoiding the library load) I am using GSAP so perhaps there is a way with that or? Thanks in advance for any assistance.

Can you possibly use background-image and selector?
.footer_btn {
//Your css
}
.footer_btn:hover {
background-image: url('image.jpg');
}

Trying to rotate several divs over top of each other

I am sorry if this is covered somewhere else but I have not been able to find it. I am trying to create an area of my page with three <div>s that rotate on top of each other. I have written this css and code:
#block {
width:1202px;
height: 402px;
overflow: hidden;
margin: auto;
}
.content {
width:1200px;
height:400px;
margin: auto;
}
<div id="block">
<div class="content">
<a name=image1></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image2></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image3></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
</div>
<table style="margin: auto; width:20px;">
<tr>
<td>&#8226</td>
<td>&#8226</td>
<td>&#8226</td>
</tr>
I have not yet played with the formatting as right now it is just theory, but can you tell me how to make the 3 content divs rotate so that each displays for 10 seconds then moves to the next eventually rotating back to the beginning.I know this will likely require php or jquery, but I am uneducated in both.
Thank you for any help that you can offer.

jquery gallery fade in/out

I am building a simple image gallery based on the following markup:
<div id="image-list">
<ul>
<li id="image-1">
<img src="myimage1.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-2">
<img src="myimage2.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-3">
<img src="myimage3.jpg" width="500" height="500" alt="My Image" />
</li>
</ul>
</div>
<ul id="thumb-list">
<li id="thumb-1"><img src="myimage1-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-2"><img src="myimage2-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-3"><img src="myimage3-thumb.jpg" width="50" height="50" alt="My Image" /></li>
</ul>
I have styled this using CSS so that only one of the larger images is visible at one time (using overflow: hidden with a fixed container height).
I am then using jquery to absolutely position the UL within the container to show each image, using the following markup:
$('#thumb-list li img').click(function() {
var image = $(this).parent().attr('id').substring(6);
var position = $('#image-' + image).position();
$("#image-list ul").css({'top' : '-' + position.top +'px'});
});
Basically I want to fade out the entire "#image-list ul" while it's position is changed and then fade it back in to show the new image.
Could someone suggest the most efficient way to do this? - any help is much appreciated!

Remove the height and width from you img tags, css can take care of that.
CSS
#image-list{
position:relative;
height:500px;
width:500px;
}
#image-list img{
height:500px;
width:500px;
}
#image-list li{
position:absolute;
top:0;
right:0;
}
JS
$('#thumb-list li img').click(function() {
var image = $(this).parent().attr('id').substring(6);
$('#image-' + image).fadeIn("slow").siblings().fadeOut("slow");
});
are you using prototype or jquery?
if your using jquery, instead of relying on the .css() function try the .hide() function as it does exactly the same thing as css({'display' : 'none'}). and .fadeIn() will animate the return of your div. on first load they'll all be visible so instead of hiding them with css tell jquery to hide all of them with this command.
$('#thumb-list il').hide();

Another solution might be to use a plug-in and then modify your styles so that your page doesn't look broken if someone has Javascript disabled.
Check out: http://medienfreunde.com/lab/innerfade/
It's quite easy to use and hard to mess up. Good luck! :)