Hide div when contents of another div have loaded - javascript

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>

Related

Fade in and out series of images but only show a few at a time

So, I'm trying to figure out how to make this trick work.
I have a series of images:
<div class="images">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
</div>
And what I want to do is make them fade in and out, but only show a max of five at a time and then have them randomly fade in and out between each of them.
I know if I add this:
.images img:nth-child(n+5) {
display: none;
}
This will hide the rest of the images, but I can't really figure out how to go about getting the other to fade in and the other to fade out.
Not sure if there is a something like jQuery Cycle2 that can handle that or of there is something else that can try and "cycle" through the other images that are hidden and just keep going through.
I created a quick, simple jQuery function that might get you started. The function essentially takes two arguments (both classnames). The function takes all the images that have the classname set in the first argument, and gets one random image with that classname. It then removes that class from the image, and adds the class in the second argument.
Because I've defined two css classes, hide and show, I can use my function to hide a random image that's currently showing, then display another random image that's currently hidden.
The functions are set to a timer and will run every 600ms.
function shuffleRandomCat(remove, add) {
const cats = $("."+remove).toArray();
const catLength = cats.length;
const randomNum = Math.floor(Math.random()*catLength);
const randomCat = cats[randomNum];
$(randomCat).removeClass(remove);
$(randomCat).addClass(add);
}
window.setInterval(function(){
// remove a cat
shuffleRandomCat("show", "hide");
// display a cat
shuffleRandomCat("hide", "show");
}, 600);
img {
transition: opacity .5s ease;
border: 2px solid black;
max-height: 100px;
}
.show {
opacity: 1;
visibility: visible;
width: auto;
}
.hide {
opacity: 0;
visibility: hidden;
width: 0;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
<img src="http://placekitten.com/100/100" class="show">
<img src="http://placekitten.com/200/200" class="show">
<img src="http://placekitten.com/300/300" class="show">
<img src="http://placekitten.com/400/400" class="show">
<img src="http://placekitten.com/500/500" class="show">
<img src="http://placekitten.com/600/600" class="hide">
<img src="http://placekitten.com/700/700" class="hide">
<img src="http://placekitten.com/800/800" class="hide">
<img src="http://placekitten.com/900/900" class="hide">
<img src="http://placekitten.com/800/700" class="hide">
<img src="http://placekitten.com/700/600" class="hide">
</div>

Mark last visible child in overflown div using CSS or JS

I have a bar with inline-block divs. Some of them are out of viewport because I set: white-space:nowrap; overflow: hidden; for the container. I'm looking for ways to select last visible child. By visible I mean that the div is placed (preferably fully) in area of it's container.
As far as I know there is selector like that neither in CSS nor in jQuery. The closest one is jQuery's :visible but it says that all the divs are visible because they consume space in the page layout.
The only way out I see is to enumerate divs on load and every resize in order to calculate if the div is still in the container by summing it's width, padding and margins.
Do you have any better ideas?
#container {
white-space:nowrap;
overflow: hidden;
}
.element {
display: inline-block;
vertical-align:top;
}
<div id="container">
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
</div>
In current, non responsive version of stack overflow on the snippet we can see 4 full divs and small part of 5th. I'd like to select 5th one (or preferably 4th div because the next one isn't fully visible).
You could use media queries. Of course, this could become very cumbersome, depending on the number of child elements you have, but it does save the overhead of using an onresize event listener.
For the below Snippet, I've assumed that the parent element is running the full width of the screen.
*{box-sizing:border-box;margin:0;padding:0;}
#container{
font-size:0;
overflow:hidden;
white-space:nowrap;
}
.element{
display:inline-block;
opacity:.5;
padding:5px;
vertical-align:top;
width:150px;
}
img{
width:100%;
}
#media (max-width:299px){
.element:first-child{opacity:1;}
}
#media (min-width:300px) and (max-width:449px){
.element:nth-child(2){opacity:1;}
}
#media (min-width:450px) and (max-width:599px){
.element:nth-child(3){opacity:1;}
}
#media (min-width:600px) and (max-width:749px){
.element:nth-child(4){opacity:1;}
}
#media (min-width:750px) and (max-width:899px){
.element:nth-child(5){opacity:1;}
}
#media (min-width:900px) and (max-width:1049px){
.element:nth-child(6){opacity:1;}
}
#media (min-width:1050px) and (max-width:1199px){
.element:nth-child(7){opacity:1;}
}
#media (min-width:1200px){
.element:nth-child(8){opacity:1;}
}
<div id="container">
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
</div>
i've done some JQ code, hope it helps
this works if all elements have the same width. if they have different widths the code would need some small changes
see here > JSFIDDLE
JQ CODE :
var vwidth = $(window).width() // get window width
var ewidth = $(".element").width() // get element width
var total = vwidth / ewidth // calculate how many elements fit inside the window width
var integer = parseInt(total)// get the integer from the result above
$(".element").eq( integer - 1 ).addClass("lastvisible")// -1 because eq starts from 0
solution for elements with different widths :
JQ :
var vwidth = $(window).width(); // get screen width
$(".element").each(function(){
var eleft = $(this).offset().left // each element's distance from left of the screen
var ewidth = $(this).width()// each element's width
var total = eleft + ewidth
if (total < vwidth) { // if sum between distance from left of screen + element width is smaller than the window screen
that = $(this); // all elements that are visible inside the screen
}
});
that.addClass("lastvisible") //only the last element visible inside the screen
see fiddle here > JsFiddle
This is my way to make it work but I'll welcome any better way.
Everything is being calculated by jQuery:
var cwidth = parseInt($('#container').width()); // get container width
var lastElement = $('#container .element:first'); // assume that first element is visible
$("#container .element:not(:first)").each(function(){
//get right offset for every div
var rightOffset = $(this).offset().left
+ parseInt($(this).width())
+ parseInt($(this).css('padding-left'))
+ parseInt($(this).css('margin-left'));
//if the right offset is bigger than container width then stop enumerating - previous one was the last fully visible
if (rightOffset > cwidth){
return false;
}
//offset was lower than container with so this is our new fully visible element
lastElement = $(this);
});
lastElement.addClass("lastvisible")
advantages:
Working for different element sizes
Add same recalculating on window resize and you've got a working responsive way
drawbacks:
multiple jQuery recalculations that are quite havy for the browser
in my opinion ugly code
https://jsfiddle.net/6k5xujtc/1/

Manipulating Images in Array to fadein and out on hover via Jquery

I am trying to reference an array of images and everytime the user hovers over the image in the array, the image fades in. The image fades out when the user's mouse leaves the image.
the code that I have written is below but it does not seem to work. Help please
var imagearray=[document.getElementById("one"),document.getElementById("two"),document.getElementById("three")]
$.each(imagrarray,function(){
$.hover(function(){ $.fadeIn("slow");},function(){ $.fadeOut();
}); });
html below:
<div id="faces" style=" overflow-y:hidden; height:120px; display:inline-block; left: 20px ; position:relative; opacity:0.5" >
<div id="base" class="hidden" >
<li class=set1" style="display:inline;">
<img id="one" style="float:left" src="attachments/36508133/one.png?api=v2" height="100"width="52" />
<img id="two" style="float:left" src="attachments/36508133/two.png?api=v2" height="100"width="52"/>
<img id="three" style="float:left" src="attachments/36508133/three.png?api=v2" height="100" width="52"/>
</li></div></div>
Problem is that you're not applying the hover to anything.
The $.each callback has two arguments, the index of the iteration over the given array and then the array item at the given index. You need to pass this to hover. So...
$.each(imagrarray,function(index, item){
$(item).hover(function(){ $(this).fadeIn("slow");},function(){ $(this).fadeOut();
}); });
Also, you weren't applying the fadeIn/out to anything either. In this case, this refers to the element returned by $(item).
That said, the code could be refactored as you can see in Arun's jsfiddle.
I think what you are after is something like below, where you change the opacity of the elements
$('.hover-set').hover(function() {
$(this).fadeTo(500, 1);
}, function() {
$(this).fadeTo(500, .5);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faces" style=" overflow-y:hidden; height:120px; display:inline-block; left: 20px ; position:relative; opacity:0.5">
<div id="base" class="hidden">
<li class="set1" style="display:inline;">
<img id="one" class="hover-set" style="float:left" src="//placehold.it/64?text=1" height="100" width="52" />
<img id="two" class="hover-set" style="float:left" src="//placehold.it/64?text=2" height="100" width="52" />
<img id="three" class="hover-set" style="float:left" src="//placehold.it/64?text=3" height="100" width="52" />
</li>
</div>
</div>

Muliple hidden fullscreen divs?

I'm working on my portfolio website, but can't solve the following problem.
The website is basically just pictures, if you click on one,
a semi-transparent fullscreen div opens with information (more pics and some text).
If you click again the div will close.
jQuery for hiding and showing:
<script>
$(function()
{
$('.masonryImage').click(function()
{
$('.hiddenDiv').show();
$("body").css("overflow", "hidden");
});
$('.hiddenDiv').click(function()
{
$('.hiddenDiv').hide();
$("body").css("overflow", "auto");
});
});
</script
HTML:
<div class="masonryImage">
<img src="images/pic1.jpg" alt="">
</div>
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="images/pic2.jpg" alt="">
</div>
</div>
So far it works with one picture, but when I'm adding another,
the new hidden text will overlay the first one, same with the pictures.
Is it because I'm using the same class ("masonryImage")?
Or isn't my Javascript removing the divs properly?
Many thanks.
Edit: CSS might be usefull:
.hiddenDiv {
position:fixed;
top:0;
left:0;
background:rgba(255,255,255,0.8);
z-index:900;
width:100%;
height:100%;
display:none;
overflow: scroll;
}
.masonryImage {
margin: 20px 20px 20px;
display: inline-block;
cursor: pointer;
}
here is how I modified your code :
DEMO
HTML
<div class="masonryImage">
<img src="..." alt="">
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="..." alt="">
</div>
</div>
</div>
I put the hiddenDiv inside the masonryImage so every masonryImage will have a custom hiddenDiv to show/hide.
JQUERY
$('.masonryImage').click(function()
{
if ($(this).find('.hiddenDiv').toggle().is(":visible")) {
//alert('hiddenDiv is visible !');
$("body").css("overflow", "hidden");
}
else {
//alert('hiddenDiv is hidden !');
$("body").css("overflow", "auto");
}
});
You can just use .toogle() to show/hide the div. $(this) refers to the clicked masonryImage and .find('.hiddenDiv') to its child (you can also use .children('.hiddenDiv') ).
Then you can test if the clicked div is hidden or visible with .is(":visible"), to apply your body custom css :)
Hope I helped you.

Speeding up Nivo-Slider

Just wondering if anyone can assist me with the following issue. I'm using nivo-slider on my HOME page to rotate 3 (large) images; hwoever, when a visitor visits the page for the first time all 3 images can been seen for a good 5 seconds before they all load into the slider.
This is the script that I'm using on the site:
<script type="text/javascript">
$(window).load(function() {
$('#nivo-slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:5000,
startSlide:0,
directionNav:true,
directionNavHide: false,
controlNav:true,
controlNavThumbs:false,
controlNavThumbsFromRel:false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false,
captionOpacity:0.8,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}
});
});
</script>
And I then have the following HTML for loading the images:
<div id="slideshow">
<div class="slide slide-wide bg1">
<div class="containit ornament-left">
<div class="image">
<div class="thumb">
<div id="nivo-slider">
<img src="/images/slider/slide1.jpg" alt="" title="" />
<img src="/images/slider/slide2.jpg" alt="" title="" />
<img src="/images/slider/slide3.jpg" alt="" title=""/>
</div>
</div>
</div>
</div>
</div>
</div>
Does anyone know how to improve image load speed with this script and if so can you help me with it please. Thanks
Add display: none to #slider img. That will hide all the images until NivoSlider displays them properly.
Sorry, my first answer was entirely wrong, try:
#slider {
position:relative;
width: 800px; //your image width
height: 583px; //your image height
}
#slider img {
position:absolute;
top:0px;
left:0px;
}
You can check my implementation here:
http://www.duopixel.com/portafolio/

Categories