We Keep Coding

Simple HTML, CSS and Javascript image viewer - scrollbars missing in fullscreen

I am trying to implement a simple Imageviewer that displays an image that fits screen and when clicked, the image shoud be shown in fullsize.
Everything almost works, but when image is displayed in full-size, there are no scrollbars, so I can only see the center of the image and not explore the rest.
const image = document.getElementById("image");
const imageContainer = document.getElementById("image-container");
image.addEventListener("click", function() {
if (image.classList.contains("full-size")) {
image.classList.remove("full-size");
imageContainer.classList.remove("full-size");
} else {
image.classList.add("full-size");
imageContainer.classList.add("full-size");
}
});
#image-container {
position: relative;
width: 100%;
overflow: hidden;
}
#image {
width: 100%;
height: auto;
transition: transform .5s;
cursor: zoom-in;
}
#image.full-size {
cursor: zoom-out;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 10;
transform: scale(2);
}
#image-container.full-size {
overflow: auto;
}
<div id="image-container">
<img id="image" src="https://bigbookofamigahardware.com/bboah/media/download_photos/cybervisppc_4_big.jpg">
</div>
The implementaion can be seen here:
https://codepen.io/bobittjek/pen/qBMWpdy

How to replace the white in an image using Javascript?

Pinterest (here is an example) and some other sites replace the white in their images with a gray color. They do that for all of their images and it seems to be on the client side.
Is this possible using Javascript, or is there another way they are doing this?

Here's a quick & dirty example that might help get you started:
$('#container').on("mouseenter mouseleave", () => {
$('.overlay').toggle();
});
#container {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: .25;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='container'>
<img src="http://imagizer.imageshack.com/v2/600x742q90/537/xAgiLR.jpg" width="200px" height="247px">
<div class="overlay" />
</div>

Change class of iframe element on click

I have an iframe (soundcloud embedded track) of a particular class.
What I want is that, when I click on the iframe, its class change to another one with different properties.
My code for that is:
index.html
<script src="javascripts/jquery.min.js"></script>
<iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&color=00ffc6&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_artwork=false&show_reposts=false"></iframe>
<script>
$('#soundcloudtrack').click(
function (v) {
$(this).toggleClass('soundcloud soundcloudext');
/*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
}
);
</script>
and style.css:
.soundcloud{
z-index:99997;
width:100%;
height:62px;
opacity:0.25;
}
.soundcloudext{
z-index:99997;
width:100%;
height:135px;
opacity:1;
}
But it's not working and I can't see why. I have also tried with getElementById. Can you please help?

You can't really target the iframe directly as I.G stated, you need to set something over the iframe that you can control on your webpage , I wrote something on jsfiddle, please try and see if it's what you are looking for: https://jsfiddle.net/652ejv6j/#run.
<div id="player">
<span>click here</span>
<iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&color=00ffc6&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_artwork=false&show_reposts=false"></iframe>
</div>
$('#player span').click(function() {
//alert(1);
$("#soundcloudtrack").toggleClass('soundcloud soundcloudext');
alert($("#soundcloudtrack").attr("class"));
/*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
});
.soundcloud {
z-index: 0;
width: 100%;
height: 62px;
opacity: 0.25;
}
.soundcloudext {
z-index: 99997;
width: 100%;
height: 135px;
opacity: 1;
}
#player {
position: relaitve;
z-index: 999;
width: 100%;
height: auto;
}
#player span {
position: absolute;
height: 20px;
top: 40px;
opacity: 0;
z-index: 999;
text-align: center;
width: 100%;
}
ALT Check if there's an API for your player through which you can control directly.

Pre-loader Image at page load issue

I am sorry for asking a very minor thing but I feel a bit helpless in this one. I have integrated a pre-loader image at my page load in a very simple way
This is my Page link
HTML: (Div for loading Pre-loader image)
<div class="se-pre-con"></div>
Jquery to trigger the pre-loader on page load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut();
});
A bit of Styling . CSS
<style>
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
}
Problem
When Page loads, it splashes before the Pre-loader image one time and then loads after the pre-loader image complete its effect. Theoretically, pre-loader should display before page load. I hope anyone of you can figure out where and what I did wrong?
Regards

I think your HTML isn't well formatted on the link you provided:
What I would do is make sure the HTML page has a structure similar to this:
<html>
<head>
<script>
</script>
</head>
<body>
<div class="se-pre-con"></div>
<div class="site-content"></div>
</body>
</html>
And inside your script tag have the following method:
$(window).load(function() {
$(".site-content").show(); //or fadeIn (what ever suits your needs)
$(".se-pre-con").fadeOut();
});
And in your css make sure you set
.site-content{
display: none;
}
EDIT: (To answer your question in comment- call loader at any time)
I would probably create a function like this:
function toggleLoader(show){
if(show == true){
$(".se-pre-con").show();
$(".site-content").fadeOut();
}
else{
$(".site-content").show();
$(".se-pre-con").fadeOut();
}
}
Then on window load you would call: toggleLoader(false),
When you make a request call: toggleLoader(true),
And when you receive a response call: toggleLoader(false).

page content is also visible on page load along with loader element so there no any sequence which content load first, but you can manger by following code, Suppose you have two div, one pre-loader div another site container div
<body>
<div class="se-pre-con"></div>
<div id="container" style="display: none;">
<!-- site content here -->
</div>
</body>
in container div add display: none style so site content cant't blink on page load.. and when page load then you can show container div, see below code
$(window).load(function() {
// Animate loader off screen
$("#container").show();
$(".se-pre-con").fadeOut();
});

Just gone thru your page link and noticed that display:none; was added to .se-pre-con as shown below. Please remove the display:none; property. It works buddy!
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}

/* page Loader dynamically call */
/* for particular div and all page */
/*html*/
<div id="divLoaderContainer">
<!--Lodar for body start-->
<div class="preLoaderPage nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for body end-->
<!--Lodar for div start-->
<div class="preLoaderDiv nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for div end-->
</div>
/*css*/
.preLoaderPage {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background-color: #dae3ec;
z-index: 99;
}
.preLoaderDiv {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
display: block;
opacity: 1;
background-color: rgba(255, 255, 255, 0.94);
z-index: 99;
}
.preLoaderPage .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
width: 180px;
height: 180px;
}
.preLoaderDiv .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
}
/*Loader here end*/
/*JS function*/
// for full loader
function showLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").removeClass('nodisplay');
}
else {
showPartialLoader(id)
}
}
function hideLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").addClass('nodisplay');
}
else {
hidePartialLoader(id)
}
}
// for specific div loader
function showPartialLoader(id) {
var loaderdiv = $("#divLoaderContainer div.preLoaderDiv").clone();
$(loaderdiv).removeClass('nodisplay');
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').append(loaderdiv);
else {
$("div#" + id).append(loaderdiv);
}
}
function hidePartialLoader(id) {
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').find('div.preLoaderDiv').remove();
else
$("div#" + id + ' div.preLoaderDiv').remove();
}
/*call by JS*/
$.ajax({
showLoader(id);// id of div or container
success: function (data) {
// your code
},
hideLoader(id)// id of above div or container
});

.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}

Hover/mouseover not firing in IE, image in the way

I have a div and within that div is an image, and layed on top of those is 2 divs which have jquery hover attached to them (same issue with onmouseover though, so not jquery).
Problem is when the image is loaded, even though the divs are layed on top of the image they won't fire because the image is always on top (even though it isn't actually, and i've tried putting it lower down on z-index but it didn't help).
jquery:
<script type="text/javascript">
$(document).ready(function () {
$(this).find("#largeInset").find(".content").css("width","0");
$("#largeInset").hover (function() {
$(this).find(".content").animate({width: '100%'}, 500, function() {});
},
function() {
$(this).find(".content").animate({width: '0'}, 500, function() {});
});
$(this).find("#largeArticles").find(".content").css("width","0");
$("#largeArticles").hover (function() {
$(this).find(".content").animate({width: '40%'}, 500, function() {});
},
function() {
$(this).find(".content").animate({width: '0'}, 500, function() {});
});
});
</script>
Html:
<div class="largeContent">
<img src="<?php echo $img[0]; ?>" border="0" alt="" title="" />
<div id="largeInset">
<div class="content">
[content]
</div>
</div>
<div id="largeArticles">
<div class="content">
<ul> (loop fills this)
<li>
[content]
</li>
</ul>
</div>
<br style="clear: both;" />
</div>
</div>
Is this a known IE bug that I just haven't come accross before? Or is there a bug in my code? When filled with content the largeInset and largeArticles divs should fire on hover and slide out across the image, works in chrome but not IE as IE seems to select the image on top of the divs even though they are actually below it (Would work fine if the image didn't load).
Any ideas? Hopefully I made sense.
CSS:
.articles { position: relative; width: 100%; padding: 0; float: left; background-color: #fff; }
.large { margin: 0 0 10px; border: 0px solid #000; min-height: 200px; }
.large img { max-width: 100%; min-width: 100%; min-height: 350px; z-index: -1; }
.largeContent { z-index: 99; position: absolute; top: 0; width: 100%; height: 100%; }
.filler { width: 100%; height: 100%; }
#largeInset { position: absolute; top: 0; right: 0; min-height: 100%; width: 25%; color: #fff; }
#largeInset .head { padding: 10px 0; }
#largeInset p { font-size: 0.9em; margin: 5px 10px; }
#largeInset .content { overflow: hidden; position: absolute; top:0; background-color: #000; right: 0; color: #fff; }
#largeArticles { position: absolute; top: 0; left: 0; width: 25%; min-height: 100%; }
#largeArticles .content { overflow: hidden; position: absolute; top: 0; left: 0; width: 40%; background-color: #000; }

I've solved this for now by adding content to the divs. IE will only fire when you mouseover the content in the div (maybe because position is absolute?). I added a transparent 1px image to the divs, but stretched to 100% x 100%, so you hover over the image and it will fire.
This seems a bit hacked together though
See http://iamnotahippy.com/ice/web/?cat=5 (hover over sides of image)