We Keep Coding

Image on image overlay on hover with Javascript

I have a php sql query that will generate a lot of images, and I need a code that will overlay a semi transparent image on top of the original image on hover.
I've seen a lot of code to do this with CSS, but that will add a ton of html code that I don't think is needed. The query can return up to like 4000 results with 40x40 images and I need just one overlay image to overlay all of them (only the one hovering) on hover.
So technically, this is what I need
Javascript
find class or id iconoverlay
onhover overlay this transparent image
HTML
<img src="" class or id="iconoverlay" />
I'm currently using JQuery in my site but I'm not familiar with javascript.

If you have a span, a or similar block tag wrapping img. You can do this:
<a class="imgHover" href="#"><img src="" /></a>
<style>
.imgHover { display: inline-block; position: relative;}
.imgHover:after {content:''; width: 100%; height: 100%; background: #000 url('MyPlaceholderURI.jpg') no-repeat center center; display: block; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .5s linear; }
.imgHover:hover:after {opacity: 1}
</style>
You can see this in action here:
https://codepen.io/fabioarantes89/pen/rwMqNE

here's some code to float a div on hovering over an element:
function createTooltips(elem) {
if (!elem.getAttribute) return;
if (elem.getAttribute('tooltip')) {
$(elem).hover(
function (event) {
$('#tt').html(this.getAttribute('tooltip'));
$('#tt').css('left',(event.pageX + 10) + 'px');
$('#tt').css('top',event.pageY + 'px');
$('#tt').show();
},
function (event) {
$('#tt').hide();
});
}
for (var i = 0; i < elem.childNodes.length; i++) {
createTooltips(elem.childNodes[i], num);
}
}
createTooltips(document.body[0]);
All you need to do then if put your img tags into the "tooltip=" attribute and add to your page

Without delay, how to hide all images in body with js or jquery

I'm trying to write a browser extension with js and jquery that hides all images (all img elements + background images of any element) and also put an option to show the image optionally if user wants right on the images.
So far I've tried to hide all matched elements in body with these:
$(document).ready(function() {
$('body').find("*").each(function() {
imageHider($(this)); // my custom function
bgImageHider($(this)); // also this is customized
});
});
But some images aren't hidden because those didn't finish loading. So I did:
$(window).load(function() {
$('body').find("*").each(function() {
imageHider($(this));
bgImageHider($(this));
});
});
But this causes images to show up for some moments. How can I do this without any delay, meaning without images displayed for some moments?
Is it possible to trigger functions both onready and onload events?

$("img").hide()
makes more sense - put it in a script tag at the bottom before the </body>
Faster:
<style>img { display:none }</style>
If you want them to take up space, use
<style>img { visibility:hidden }</style>
If you are inside some function, you can do
if($(this).is("img")) $(this).hide();

Iterating through the image node with pure javascript would be the fastest way because it doesn't depend on the full jquery object to be loaded before executing .
Example :
var imageTags = document.getElementsByTagName('img');
for (var i = 0; i < imageTags.length; i++){
imageTags[i].style.display = 'none';
}
Hope this helps

Add some css to hide all images.
body.hideimages img{
display:none;
}
Now you can do $('body').addClass('hideimages')
I assume this to be more performant than modifying the DOM for each image, which is what I suppose jQuery will be doing.

EDIT:
OP changed specifications.
You can do something like this. In the demo it is managed with click events but you can call a function or w/e you want to handle triggering back the image and backgrounds.
DEMO
$(document).ready(function() {
var elements = $("*:not(img)"),
images = $("img");
$.each(elements, function() {
if ($(this).css("background-image") != "none") {
var $this = $(this);
var bgImg = $this.css("background-image");
$this
.css("background-image", "none")
.on("click", function() {
$this.css("background-image", bgImg);
});
}
});
$.each(images, function() {
var cover = $("<div>", {
"class": "img-wrapper is-covered"
});
$(this).wrap(cover);
});
$(".img-wrapper").on("click", function() {
var $this = $(this);
$this
.removeClass("is-covered")
.find("img").addClass("is-visible");
});
});
img {
visibility: hidden !important;
position: relative;
}
.is-visible {
visibility: visible !important;
}
.img-wrapper {
display: inline-block;
position: relative;
border: 1px solid grey;
}
.is-covered::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: silver;
cursor: pointer;
}
div {
width: 50px;
height: 50px;
background: url("http://fillmurray.com/50/50") no-repeat center center;
background-size: cover;
border: 1px solid dodgerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://fillmurray.com/50/50">
<img src="http://fillmurray.com/50/50">
<img src="http://fillmurray.com/50/50">
<img src="http://fillmurray.com/50/50">
<div></div>
<div></div>
<div></div>
<div></div>
There are multiple ways to achieve this.
But this causes images to show up for some moments. How can I do this
without any delay, meaning without images displayed for some moments?
The fastest and easiest way to get rid of every image in your body is using CSS.
CSS Method:
DEMO
img {
display: none;
}
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
<p>
Example text.
</p>
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
jQuery Method:
DEMO
$(document).ready(function() {
$("img").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
<p>
Example text.
</p>
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
Javascript Method:
(Wrap it in a script tag right before closing the body tag.)
DEMO
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
images[i].style.display = 'none';
}
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
<p>
Example text.
</p>
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">

Iframe | Mobile back button on youtube iframe

I have got a video that appears in a light box from you tube, a custom one not a plugin.
On mobile when displayed portrait the video spans the full page width which looks nice and leaves some room at the top and bottom to click out.
The issue is when I go landscape the video fills the full screen and you cannot get back onto the page. My initial reaction was to hit the phones back button but I don't know a way of getting this to simply remove my lightbox. Is there a way in JS of getting a onclick off the phones back button?
The reason it goes full screen is because I am keeping the aspect ratio
var width: number = $('.youtube-video-lightbox').outerWidth();
var height: number = (width / 16) * 9;
$('.youtube-video-lightbox').height(height);

You can try using the following code:
You need to listen to navigation event and state.direction.
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
// close the light box here
}
if (direction == 'forward') {
// do something else
}
});
More details in this link
Tested the above code in my mobile and it works fine. You might need to stop the program flow after closing the light box so that default navigation of the back button is stopped.

Weave: http://kodeweave.sourceforge.net/editor/#e110ed7e89c3a38335739656a02f9850
Have you thought of trying a Pure CSS Based Lightbox?
$('[data-target]').on('click', function() {
$('.page').attr('src', $(this).attr('data-target'));
});
$('#call').on('change', function() {
(this.checked) ? "" : $('.page').attr('src', '');
});
input[id=call] {
display: none;
}
a {
margin: 1em;
}
.bg,
.content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: all ease-in 150ms;
}
.bg {
background: #515151;
background: rgba(0, 0, 0, 0.58);
}
.content {
margin: 2.6352em;
padding: 1em;
background: #fff;
}
input[id=call]:checked ~ .bg,
input[id=call]:checked ~ .content {
visibility: visible;
opacity: 1;
}
.block {
display: block;
}
.pointer {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="call" type="checkbox" />
<p>
<a href="javascript:void(0)" data-target="http://bing.com/" class="pointer block">
<label for="call" class="pointer">Bing</label>
</a>
<a href="javascript:void(0)" data-target="http://duckduckgo.com/" class="pointer block">
<label for="call" class="pointer">DuckDuckGo</label>
</a>
</p>
<label for="call" class="bg pointer"></label>
<div class="content">
<iframe width="100%" height="100%" frameborder="0" class="page"></iframe>
</div>

Fade images without black transfer between them - JQuery

http://www.chooseyourtelescope.com/
When you hover the logos buttons (moon, planet, etc...) it does background1>BLACK>background2.
I would like to get directly background1>Background2 and keep the fade effect.
(I don't know anything about Javascript, I found this code below on Stackoverflow)
Here is the code for the moon button:
HTML
<div class="top-logos-home" id="top-logos-lune-front" >
<img src="logo-moon.png" alt="MOON">
</div>
CSS
.image-home {
position: absolute;
width: 100%;
height: 100%;
background-image: url(Frontpage.jpg);
background-size: cover;
display:inline;
top:0;
}
JQUERY
jQuery(function(){
var $body = $('.image-home');
$('#top-logos-moon-front').hover(function(){
$body.fadeOut('slow',function(){
$body.css('background-image', 'url("Frontpage-moon.jpg")').fadeIn('slow');
});
}, function() {
$body.css('background-image', '')
})
})

I have create a jsFiddle here : https://jsfiddle.net/h0f6y58z/
Html
<div class="top-logos-home" id="top-logos-lune-front">
<img class="image-1 image" src="http://s.hswstatic.com/gif/singapura-cat.jpg" />
<img class="image-2 image" src="https://pbs.twimg.com/profile_images/424484505915621376/EOwsjaMZ_400x400.png" />
</div>
css
.image {
position: absolute;
width: 100%;
height: 100%;
background-image: url(Frontpage.jpg);
background-size: cover;
top:0;
}
jQuery
$(function () {
$('.image-2').hide();
$('.top-logos-home').mouseover(function () {
$('.image-1').fadeOut();
$('.image-2').fadeIn();
});
});
All this does is checks to see if the mouse enters the div and if so, we will fadeout the first image and fade in the second image. You could use first image hide and last image show if you would prefer
Like so
jQuery
$(function () {
$('.image-2').hide();
$('#top-logos-lune-front').mouseover(function () {
$('.image').first().fadeOut();
$('.image').last().fadeIn();
});
});

I found a solution by using the opacity property. Now its working perfectly.
HTML
<img id="background-moon-front" class="hover-backgrounds" src="Frontpage-moon.jpg" />
CSS
.hover-backgrounds {
opacity:0;
transition: opacity 0.6s linear;
top:0;
position:absolute;
background-size: 100%;
}
JAVASCRIPT
$(document).ready(function (e) {
$("#top-logos-lune-front").hover(function (e) {
$("#background-moon-front").css("opacity", "1");
}, function() {
$("#background-moon-front").css("opacity", "0")
})
});

Hyperlink in JQuery Only Working in JSFiddle

I found something that can not only toggle on/off an image, but also make that image a link.
Problem: It only works in JSFiddle.
I put everything back into html (providing script) and made sure that everything was the same...but still, on my site it won't work. On JSFiddle, it does.
If anyone has a solution, I'd be most grateful.
The code I'm using for the site:
<center>
<p>
<div class="icon-container">
<a id="TOURBUTTON">
<img src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" style="width: 188px; height: 188px;" />
</a>
</div>
</p>
</center>
<center>
<p>
<div class="display-container">
<img id="T5" style="display:none;" a href="http://music.britrodriguez.com" src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#TOURBUTTON').on("click", function(){
$('#T5').toggle();
});
});
$('#T5').click(function(event){
var link = $(this);
var target = link.attr("target");
if ($.trim(target).length > 0){
window.open(link.attr("href"), target);
} else {
window.location = link.attr("href");
}
event.preventDefault();
});
</script>
<style type="text/css">
.icon-container{
display:inline-block;
margin-bottom: 0px;
margin-top: 10px;
}
</style>
The JSFiddle:
http://jsfiddle.net/ccymzmvn/
The site it's not working on:
http://www.britrodriguez.com/HITEST

Why do you open the url with JavaScript? Just try:
<a href="http://music.britrodriguez.com">
<img src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png" />
</a>

These are just suggestions, but:
Make sure your HTML document is well formed and remove extraneous levels. The deeper the DOM tree goes, the "heavier" the page can get for the browser. Always strive towards a shallow DOM tree
The event handler when you click #T5 doesn't really need jQuery, I've used native JS, you can see it has a one to one drop-in.
Whenever you have a click event on an element, change the cursor for the user so they know it is clickable.
I have also user opacity to hide the #T5 instead of display. That way you can make it fade nicely
http://jsfiddle.net/ccymzmvn/5/
HTML
<p class="icon-container">
<a id="TOURBUTTON">
<img src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" />
</a>
</p>
<p class="display-container">
<a href="http://music.britrodriguez.com">
<img id="T5" src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png" />
</a>
</p>
CSS
body {
text-align: center;
}
#TOURBUTTON {
display: inline-block;
}
#TOURBUTTON img {
cursor: pointer;
display: block;
width: 188px;
height: 188px;
}
img#T5 {
border: 1px solid red;
max-width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 800ms;
transition: opacity 800ms;
}
img#T5.active {
opacity: 1;
pointer-events: auto;
}
JavaScript
function open_link(event) {
event.preventDefault();
var link = this,
target = link.target;
if($.trim(target).length > 0) {
window.open(link.href, target);
} else {
window.location = link.href;
}
}
$(document).ready(function() {
var $T5 = $('#T5');
$('#TOURBUTTON').on("click", function(){
$T5.toggleClass('active');
});
$T5.on('click', open_link);
});