Image slider sporadically causing page wide black bar - javascript

Background: My company has a website built using "MojoPortal", which I believe is ASP. We used one of their apps to make a web banner/slider with six images. I'm told that in order for the built in app to work, images need to be in separate containers.
Issue: When the page loads we get a funky looking black bar where the image should be, the image size is drastically reduced and placed at the left side. This doesn't happen every time, seems to be better if images are cached on the machine, and goes away with a page refresh. So far this has occurred mostly on Chrome, but also on Firefox. Have not been able to recreate in edge.
I'm not much of a web developer. Wondering if this is rooted in the CSS or the built in "MojoPortal" application to slide the images. Seen this before?
Screenshot
Editor:
<div><img alt="" src="img1" /></div>
<div><img alt="" src="img2" /></div>
<div><img alt="" src="img3" /></div>, etc
When viewing/inspecting page source:
element.style {
background-color: rgb(0, 0, 0);
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 6;
opacity: 0;
width: 720px;
height: 20px;
}

Related

How to make different aspect ration images into same width and height without getting cropped?

I have multiple div with class called card. I need my all div to be same height and same width. I want to add images to those div. I have different images with different aspect ratios. Also I want whole image filled inside the div. (I want to prevent from cropped images). Therefore, If I can convert all images into same aspect ratio first, then it should be okay. Then I can set .card-img {width=100%}. Height should be same for all images because .card has same width and all images have same aspect ratio. How can I make this work as I mentioned?
<div class="card">
<img class="card-img" src="img-1.jpg" alt="" />
</div>
<div class="card">
<img class="card-img" src="img-2.jpg" alt="" />
</div>
<div class="card">
<img class="card-img" src="img-3.jpg" alt="" />
</div>
.card{
width: 270px
height: 400px;
}
Assume img-1.jpg, img-2.jpg, img-3.jpg has different aspect ratios.
You can't force an image to have a different aspect ratio from its natural one without either cropping or distorting it. You say you don't want to crop so that is not a possibility and you would be unlikely to want to distort it (stretch it in one direction or the other).
What you can do is make sure that the whole image is always visible is use contain instead of cover.
Obviously this means there will be space either at the top and bottom or at the sides of your cards in some cases but this is an inevitable consequence of the no-cropping requirement.
I have faced the same problem many a times. Unfortunately the only options we have available when height and width are fixed are:
Use object-fit: cover on the img element. This results in some cropping.
Use object-fit: contain on the img element. This ensures there is no cropping but adds whitespace around the image.
If you are okay with differing height and width, then you have the option to use a masonry layout as described here:
https://masonry.desandro.com/layout.html
Easy, just set max width and max height to 100% and let the browser sort it out.
.card {
width: 270px;
height: 400px;
border: 1px solid #333;
}
.card img {
max-width: 100%;
max-height: 100%;
}
<div class="card">
<img class="card-img" src="https://picsum.photos/370/400" alt="" />
</div>
<div class="card">
<img class="card-img" src="https://picsum.photos/400/100" alt="" />
</div>
<div class="card">
<img class="card-img" src="https://picsum.photos/400" alt="" />
</div>
This is in case you want the image element. If you want the image as a background, use the contain property.
UPDATE
If you want the images to fill the cells, use
.card img {
width: 100%;
height: 100%;
}
But this will stretch the image. These are the two options you have without cropping.

Remove unused Javascript base.js (Youtube iframe api)

Google PageSpeedInsights flags Base.js as unused Javascript in my report. It's pretty substantial at 487kb. Appears to come from including the Youtube player iframe api. Is this file needed and if so, does anyone know why it is being flagged as unused JS in the report?
Iframe API: https://developers.google.com/youtube/iframe_api_reference
Large file that gets flagged on PageSpeedInsights as unused JS:
https://www.youtube.com/s/player/c88a8657/player_ias.vflset/en_US/base.js
If a script is listed under the "Remove Unused Javascript" tab, it doesn't mean the entire script is unused, it means a certain amount of the script's code isn't doing anything on the page.
The algorithm for finding unused code isn't perfect either, I often see scripts that aren't used at all on a page having some sort amount of used code according to google.
The "Remove Unused Javascript" should really be taken with a pinch of salt, and in cases of plugins, like youtube's API, it should be ignored since you can't edit a external API to be more efficient.
In your case, the file is very much needed if your using an embedded Youtube video.
If you want to optmize how you load your Youtube video, consider lazyloading it.
If you want to fix it with just HTML you can setup the embed to load when the video clicked using the srcdoc attribute.
You basically write an HTML link inside the attribute and the video won't load until the link inside srcdoc is clicked.
Here's an example:
<!-- Reference: https://vumbnail.com/examples/srcdoc-iframe-for-lighthouse -->
<iframe
srcdoc="
<style>
body, .full {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
display: flex;
justify-content: center;
object-fit: cover;
}
</style>
<a
href='https://www.youtube.com/embed/Q-X_ED4LHrQ?autoplay=1'
class='full'
>
<img
src='https://vumbnail.com/Q-X_ED4LHrQ.jpg'
class='full'
/>
<svg
version='1.1'
viewBox='0 0 68 48'
width='68px'
style='position: relative;'
>
<path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
<path d='M 45,24 27,14 27,34' fill='#fff'></path>
</svg>
</a>
"
style="max-width: 640px; width: 100%; aspect-ratio: 16/9;"
frameborder="0"
></iframe>
It can be a bit clunky to write HTML inside an attribute but it gets the job done.
If you don't want to have to go in and replace all the YouTube IDs I wrote a simple builder here: https://vumbnail.com/embed-builder
I have been looking for 2 days to find a way to download YouTube videos, and I found out that this file is really important, because it loads all video/audio files:

Looking for some approach to put 'moving image' over video (youtube video)?

What I need is this:
Overlay image which can change its X and Y position over youtube video without page reload.
Ideally this should be Javascript I guess which upon Interval gets the X and Y values from text file (or MySQL).
In other words...say a car is driving in the Youtube video, the overlay should be red rectangle that every 1 second or so the Javascript gets the X and Y from text file and redraws over the youtube screen red rectagle.
The final result should be something like this:
https://i.ytimg.com/vi/aEBigBm7KBk/hqdefault.jpg
I am C++/C# kind of guy with very little knowledge of Javascript so I want to port a machine learning demo to a friendly interface (webpage), I know this can be too much coding so if someone can at least point me to a free script will be super helpful! thanks!
I've prepared a sample JSFiddle that can get you started in the right direction: https://jsfiddle.net/2nfswab3/
Basically, the <div class="overlay"... are the red squares that overlay the video. You may add as many as you like of them inside the #app container. You mentioned that their position will be changing dynamically every second with values coming from your backend code. Changing their position is as easy as updating their left, right, top, bottom CSS attributes.
You can do that through vanilla JS in this way:
var redSquares = document.getElementsByClassName('overlay');
var squareOne = redSquares[0];
squareOne.style.left = '300px';
HTML:
<div id="app">
<iframe width="100%" height="400px" src="https://www.youtube.com/embed/KGN_9xZBgYY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="overlay" style="left: 370px; top: 140px;"></div>
<div class="overlay" style="left: 170px; top: 140px;"></div>
</div>
CSS:
html,body{
position: relative;
width: 100%;
height: 100%;
}
#app{
position: relative;
}
.overlay{
border: 2px solid red;
color: #fff;
z-index:2;
position: fixed;
width: 100px;
height: 100px;
}
I hope this helps. If you have further need of help or elaboration please ask as a comment.

Change image on mouse over

<img onmouseover="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
Its not working. It comes up as a box, not a broken image but a box which doesn't display the image. I'm adding it to my website, could i be putting it in the wrong place? Also, i put it in my forum wrapper and i want the image to be displayed and when you hover your mouse over it so it changes to image 2 please help.
If you intend the image to change on mouseover, you can use this:
<img onmouseover="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png'"
onmouseout="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png'"
src="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
this.src='something'
will set the image src to something.
However, it would be prettier to use CSS and have it as background image, then it will work without javascript.
Please use some CSS, that inline style code gets so confusing.
If you want to do it the nice way do something like this:
#facebook {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png") no-repeat;
width: 231px;
height: 231px;
margin-top: -12px;
margin-right: -60px;
}
#facebook:hover {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png") no-repeat;
}
<div id="facebook"></div>
This may not be right but from looking at your code your img script doesnt end.
You need to have />

Displaying text over an image with javascript

I am looking for a JavaScript(or anything really) framework that can add text with a semi opaque background to images. I am also wanting something with simple mouse over support. I've seen some that use solely css but wont work in my case due their use of multiple images (My images are hi res and I don't want to waste bandwidth). Another I found worked but created invalid code and added too much to load times. Is there a framework out their or am I just going to have to code my own?
Thanks
<div style="position: relative; height: 200px; width: 200px;">
<img src="something.jpg" width="200" height="200" alt="Your Image" />
<div style="position: absolute; height: 200px; width: 200px; left: 0; top: 0; line-height: 200px; vertical-align: middle; opacity: 0.5;">Your semi-opaque text</div>
</div>
going off the top of my head, but wouldn't something like that do the trick?

Categories