Displaying text over an image with javascript - 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?

Related

How to force < iframe> to be sticky in on side on the HTML page?

I'm trying to make with google maps reference stick on the right side of my page I've tried this code still scrolls with the rest of the page
#map{
position: -webkit-sticky;
position: sticky;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
You are looking for position:fixed:
#map {
position: fixed;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Elements with position:fixed will stay in place when their parent element is scrolled.
This should stick your map to the top (I've added a div to be able to scroll down):
#map {
position: -webkit-sticky;
position: sticky;
top: 0;
}
div {
background-color: yellow;
height: 2000px;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<div>Extra Space</div>
If you want to the right, right: amount should do the trick. left for left and bottom for bottom.
#Edit - I've found that setting right does not seem to be working. I've searched around and seems like there are several rules when it comes for something to be sticky. I haven't used sticky yet so I don't know if I'm just missing something. I apologize as my comment is most likely useless in your case.
You might want to check Interneting Is Hard if you want to learn more about positioning, though it does not have sticky, it should have enough for your needs without the use of sticky.
add
top:0;
in #map. this will stick the page at the top. This way you can user css position.
Make a sticky div before you insert your iframe in.
<div style="position:sticky; top:3vh;">
<iframe src="page.html"></iframe>
</div>

Image slider sporadically causing page wide black bar

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;
}

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 />

Create a small color box in html

I have a li element. Inside the li element there are many elements like input, labels.
I want to put now a small color inside each li. The color will be provided dynamically. I want to have something square and on page load it fills with the color i provide. Is there something already existing?
Are you looking for something like this?
HTML
<div class="input-color">
<input type="text" value="Orange" />
<div class="color-box" style="background-color: #FF850A;"></div>
<!-- Replace "#FF850A" to change the color -->
</div>
CSS
.input-color {
position: relative;
}
.input-color input {
padding-left: 20px;
}
.input-color .color-box {
width: 10px;
height: 10px;
display: inline-block;
background-color: #ccc;
position: absolute;
left: 5px;
top: 5px;
}
See jsFiddle for live example.
Disclaimer: I'm not familiar with CSS.
I became annoyed with nuances of CSS and not getting the look and feel quite right and figuring out different configurations of div's. I stumbled on to something much simpler (to me and hopefully others): use SVG.
Here's an example of a yellow-box:
<html>
Look at me - I'm a yellow box!
<svg width="20" height="20">
<rect width="20" height="20" style="fill:#E9E612;stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</html>
When used with a jinja template I can configure the fill color by supplying the correct string from python:
<svg width="20" height="20">
<rect width="20" height="20" style="fill:{{supplied_color_str}};stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
It's old school, but it's simple and gets the job done.

Categories