Develop Reference

Add image over text using jquery

I'm trying to add an image over some text that I have. This is similar to retailmenot.com's reveal coupon code. When a user clicks on the image the image is removed and reveals the text underneath while simultaneously linking the user to an external url.
The base layer can be as follows:
<div class="base">
<h3>Some text</h3>
</div>
I want to load an image with the following over it when the text is clicked:
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>
The height of the base layer with class "base" is variable, so the image has to be resized to fit it. I have a working example where I place the image and then resize it, but this creates issues when javascript may not be enabled as the image fails to be resized and looks messy. I want the script to fall back to just showing the underlying text if javascript is disabled.
How can I add and automatically resize such an overlay on page load using jquery or javascript?

You can do it like this:
$(document).ready(function () {
//Set overlay position and dimension to same as base
$base = $(".base");
$overlay = $(".overlay");
$overlay.offset($base.offset());
$overlay.height($base.outerHeight());
$overlay.width($base.outerWidth());
$overlay.show();
//Hide overlay on click (show hidden text)
$(".overlay").click(function () {
$(this).fadeOut();
});
});
and with css:
.overlay{
/* Hide overlay if no js */
position: absolute;
display: none;
}
Check it out here: JSFiddle

If you can have the overlay in the base, as such:
<div class="base">
<h3>Some text</h3>
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>
</div>
You can css this, no need for javascript:
.base{
position: relateive;
}
.overlay{
position: absolute; /* or fixed if scrollbars involved */
display: none;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* or replace right and bottom with: */
/* width: 100%;
height: 100%; */
}
You can now use javascript to toggle visibility:
$('.overlay').fadeIn();

Let your html page has this following code
<div class="base">
</div>
Don't place any code about your image in html page. And then in your jQuery code.
var img = '<img src="http://example.com/image.jpg"/>';
var txt = 'Some text';
$(document).ready(function(){
$(this).find('.base').html(txt).show();
$(this).find('.base').click(function(){
if($(this).html() == img)
$(this).html(txt).show();
else
$(this).html(img).show();
});
});
This will solve your issue.

JavaScript - Make an image turn white on click

I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image

Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});

To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)

You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>

With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...

jQuery animate movement left and right

Using jquery's .css() i am changing the left attributes value to move a div left or right. Im looking for a way to animate this change as it occurs. Nothing ive tried is working, ive tried jQueryUI's .show(slide) function, but this moves the whole div, rather than just the 120px movement i need.
This is my current function which is working without an animation:
$('#plrt').live("click",function(){
var lm=$('.plwid').css("left");
lm = (parseInt(lm) + 120);
$('.plwid').css("left", lm);
});
this is the slide function, it does not work properly as the whole div goes from display:hide to display:show, rather than just moving the pixel change

try animate()
$('#plrt').on("click",function(){
$('.plwid').animate({ left: '+=120' }, 400 );
});

I have whipped up a quick example of what I think you are trying to achieve.
You should check out jQuery Animate.
//note live is deprecated
$('#plrt').on("click", function() {
//perform custom animation to add 120px to current left CSS position
$('.plwid').animate({
left: '+=120'
});
});
#plrt{
position:relative;
background:red;
width:100px;
height:100px;
cursor:pointer;
}
.plwid{
position:absolute;
background:blue;
width:100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="plrt"></div>
<div class="plwid"></div>

try this http://api.jquery.com/animate/
$('#plrt').on('click', function() {
$('.plwid').animate({ left: '+=120', 5000 });
});

How do I pass javascript events from one element to another?

Setting up the stage:
I have 2 layers one on top of the other. The bottom layer contains links (simple images), The top layer contains advanced tooltip like hovers for the bottom layer. These tooltips can be large (they can overlap onto other links easily, and almost always overlap the link they are tooltipping).
My question:
I'd like my mouseover events to occur on the bottom layer, and then on mouseover display the tooltip in the upper layer. This way as you move off of the bottom link the tooltip in the upper layer goes away, and the tooltip for the new link can show up.
How do I take the events from the top layer and pass them to the layer below instead? So that the top layer is event transparent.
Example HTML:
jQuery(document).ready(function(){
jQuery('div.tile').click(function(){
jQuery('#log').html(this.id + " clicked");
return false;
});
jQuery('div#top').click(function(){
jQuery('#log').html('Top clicked');
return false;
});
});
.tile { width: 100px; height: 100px; position: absolute; }
.tile:hover, over:hover {border: 1px solid black;}
.over { width: 100px; height: 100px; position: absolute; display:none}
.stack, #sandwich { width: 400px; height: 400px; position: absolute; }
#tile1 {top: 50px; left: 50px;}
#tile2 {top: 75px; left: 10px;}
#tile3 {top: 150px; left: 310px;}
#tile4 {top: 250px; left: 250px;}
#tile5 {top: 150px; left: 150px;}
#over1 {top: 55px; left: 55px;}
#over2 {top: 80px; left: 15px;}
#over3 {top: 155px; left: 315px;}
#over4 {top: 255px; left: 255px;}
#over5 {top: 155px; left: 155px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="sandwich">
<div class="stack" id="bottom">
<div class="tile" id="tile1">1</div>
<div class="tile" id="tile2">2</div>
<div class="tile" id="tile3">3</div>
<div class="tile" id="tile4">4</div>
<div class="tile" id="tile5">5</div>
</div>
<div class="stack" id="top">
<div class="over" id="over1">Tooltip for 1</div>
<div class="over" id="over2">Tooltip for 2</div>
<div class="over" id="over3">Tooltip for 3</div>
<div class="over" id="over4">Tooltip for 4</div>
<div class="over" id="over5">Tooltip for 5</div>
</div>
</div>
<div id="log"></div>
With the example javascript I've verified that the events work like normal, and only top is clicked. But I basically want the "over" items to be event transparent.

For people stumbling on this nine years later (like I did) the best way to do this now is with the CSS pointer-events property... simply set it to 'none' for your element(s) and behold the magic. No JS required.
https://caniuse.com/#search=pointer-events

Hope I understand the OP, but you can replicate the event on any selector after the original event has occurred: http://jsfiddle.net/Cr9Kt/1/
In the linked sample, I take the event on the top layer and create a similar event fired on the bottom layer. You can take this further with any individual clicking of each element(as opposed to top and bottom as a whole).
This is a borrowed idea from another question: Triggering a JavaScript click() event at specific coordinates

I am not quite certain that I understand what you are asking for. It sound to me a bit like a tool tip. Here is an example of how to do a tooltip this using jQuery, CSS and HTML.
http://jsbin.com/ilali3/13/edit
Hope that gets you started. If you add some more details, or modify that jsbin with more details we can iterate a bit.
I updated the example a bit to include storing tool tip information into the html element itself using jQuery. This is a bit cleaner.
Bob

This may seem overly complex and inelegant...it fakes your functionality.. but it works ;)
$(document).ready(function(){
var tileData = new Array();
// get coordinate data for each tile
$('div.tile').each(function(){
var tileInfo = {};
tileInfo.id = this.id;
tileInfo.text = $(this).text();
tileInfo.width = $(this).outerWidth();
tileInfo.height = $(this).outerHeight();
tileInfo.position = $(this).position();
tileInfo.coords = {};
tileInfo.coords.top = tileInfo.position.top;
tileInfo.coords.right = tileInfo.position.left + tileInfo.width;
tileInfo.coords.bottom = tileInfo.position.top + tileInfo.height;
tileInfo.coords.left = tileInfo.position.left;
tileData.push(tileInfo);
});
$('div.tile').click(function(){
$('#log').html(this.id + " clicked");
return false;
})
$('div#top').click(function(event){
$('#log').html('Top clicked');
// try to find tile under your mouse click
for(i=0; i<tileData.length;i++){
if(
event.pageX >= tileData[i].coords.left &&
event.pageX <= tileData[i].coords.right &&
event.pageY >= tileData[i].coords.top &&
event.pageY <= tileData[i].coords.bottom
) {
// found a tile! trigger its click event handler
$('#' + tileData[i].id).click();
}
}
return false;
});
});
Try it here: http://jsfiddle.net/neopreneur/vzq4z/1/

jQuery fade to new image

How can I fade one image into another with jquery? As far as I can tell you would use fadeOut, change the source with attr() and then fadeIn again. But this doesn't seem to work in order. I don't want to use a plugin because I expect to add quite a few alterations.
Thanks.

In the simplest case, you'll need to use a callback on the call to fadeOut().
Assuming an image tag already on the page:
<img id="image" src="http://sstatic.net/so/img/logo.png" />
You pass a function as the callback argument to fadeOut() that resets the src attribute and then fades back using fadeIn():
$("#image").fadeOut(function() {
$(this).load(function() { $(this).fadeIn(); });
$(this).attr("src", "http://sstatic.net/su/img/logo.png");
});
For animations in jQuery, callbacks are executed after the animation completes. This gives you the ability to chain animations sequentially. Note the call to load(). This makes sure the image is loaded before fading back in (Thanks to Y. Shoham).
Here's a working example

$("#main_image").fadeOut("slow",function(){
$("#main_image").load(function () { //avoiding blinking, wait until loaded
$("#main_image").fadeIn();
});
$("#main_image").attr("src","...");
});

Well, you can place the next image behind the current one, and fadeOut the current one so that it looks like as though it is fading into the next image.
When fading is done, you swap back the images. So roughly:
<style type="text/css">
.swappers{
position:absolute;
width:500px;
height:500px;
}
#currentimg{
z-index:999;
}
</style>
<div>
<img src="" alt="" id="currentimg" class="swappers">
<img src="" alt="" id="nextimg" class="swappers">
</div>
<script type="text/javascript">
function swap(newimg){
$('#nextimg').attr('src',newimg);
$('#currentimg').fadeOut(
'normal',
function(){
$(this).attr('src', $('#nextimg').attr('src')).fadeIn();
}
);
}
</script>

Are you sure you're using the callback you pass into fadeOut to change the source attr and then calling fadeIn? You can't call fadeOut, attr() and fadeIn sequentially. You must wait for fadeOut to complete...

Old question but I thought I'd throw in an answer. I use this for the large header image on a homepage. Works well by manipulating the z-index for the current and next images, shows the next image right under the current one, then fades the current one out.
CSS:
#jumbo-image-wrapper
{
width: 100%;
height: 650px;
position: relative;
}
.jumbo-image
{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
HTML:
<div id="jumbo-image-wrapper">
<div class="jumbo-image" style="background-image: url('img/your-image.jpg');">
</div>
<div class="jumbo-image" style="background-image: url('img/your-image-2'); display: none;">
</div>
</div>
Javascript (jQuery):
function jumboScroll()
{
var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length;
var next_index = jumbo_index+1;
if (next_index == num_images)
{
next_index = 0;
}
$("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10");
$("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9");
$("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show();
$("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow");
jumbo_index = next_index;
setTimeout(function(){
jumboScroll();
}, 7000);
}
It will work no matter how many "slides" with class .jumbo-image are in the #jumbo-image-wrapper div.

For those who want the image to scale according to width percentage (which scale according to your browser width), obviously you don't want to set height and width in PIXEL in CSS.
This is not the best way, but I don't want to use any of the JS plugin.
So what can you do is:
Create one same size transparent PNG and put an ID to it as
second-banner
Name your original image as first-banner
Put both of them under a DIV
Here is the CSS structure for your reference:
.design-banner {
position: relative;
width: 100%;
#first-banner {
position: absolute;
width: 100%;
}
#second-banner {
position: relative;
width: 100%;
}
}
Then, you can safely fade out your original banner without the content which placed after your image moving and blinking up and down