Develop Reference

Replace image in another div with text upon mouse over elsewhere

I have tried around a dozen different ways to do this, I'm only going to post my most recent attempts though.
Basically I am trying to have it so that when a user hovers the mouse over an image on the page, another image in a separate div gets replaced with text.
I have the JS variables for the text elements to replace as well as the original image being replaced to put it back.
My most recent attempts were:
function replaceMainPage(x) {
$('#logozone').empty();
$('#logozone').append(x);
}
function hoverCircles(y) {
$(this).hover(replaceMainPage(y), replaceMainPage(mainLogo));
}
I don't really understand the "this" feature of JS, but have also tried that function as:
function hoverCircles(y) {
$('#logozone').hover(replaceMainPage(y), replaceMainPage(mainLogo));
}
From here I have tried calling the function is my main JS file like so:
$("#cir1").hover(replaceMainPage(logoReplacements.cakes), replaceMainPage(mainLogo));
As well as tried doing it in html on the img element itself with a onmouseover. Nothing has worked yet.
Am also open to non-JS ways of handling this, but I looked for those as well and couldn't find anything.

This will help you, here is a jsFiddle:
var oldContent = '';
$('.hoverMe').hover(function() {
oldContent = $('.toReplace').html();
$('.toReplace').html('xxxxxxxx');
}, function() {
$('.toReplace').html(oldContent);
});
HTML
<div class="hoverMe">
HOVER ME
</div>
<div class="toReplace">
<img src="//cdn2.hubspot.net/hub/360031/hubfs/feature_practicetest.jpg?t=1470774914678&width=365">
</div>
I've created a global variable called oldContent. When hover on the .hoverMe div, store the old content of that div, change the content of div, and when you move your mouse out, put back the old content.
UPDATE
Based on OP comment, I create another jsFiddle where you can set any text on the .hoverMe
If there are longer texts, or kind of texts what can not be stored in the data attribute, then add data-id="1" to n, and retreive the text through ajax based on the id.

HTML
<div id="firstImgDiv">
<div class="text"></div>
<img src="a.png" onmouseenter="replaceImg('secondImgDiv', 'new Text')">
</div>
<div id="secondImgDiv">
<div class="text"></div>
<img src="b.png" onmouseenter="replaceImg('firstImgDiv', 'new Text')">
</div>
JS
function replaceImg(id, text){
// show all images again
$('img').show();
// clear all text
$('.text').html('');
// hide target img
$('#'+id+' > img').hide();
// set target text
$('#'+id+' > .text').html(text);
}

jQuery: inserting text into container div on hover

I'm using a simple jQuery image slider (Owl Carousel) to show a list of speakers at a convention with photos, and I'm trying to find a way to overlay text associated with each speaker onto a div placed above the slider. I have a mockup page here. As you can see on the mockup, I have two primary divs-- i.e. div#sit and div#carousel-sit; within the former I have an container with the class .sit-quote-container into which I'd like the quote text/markup injected. I would like this overlay text to pull from the paragraph elements with the .sit-quote class that exist for each speaker.
In addition to the problem of displaying the appropriate text within the container div, I'm seeing that placing the .sit-quote paragraph within each slide is causing a gap to appear under the speaker name (the grey box underneath) and I have no idea why this is happening given that I've set .sit-quote to display:none. I'm wondering if perhaps I need to move the elements containing the quotations out of the slider markup altogether (?)
As for the actual hover function, this is what I have so far, with the help of another SO user; but it doesn't seem to be working:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container");
}, function(){
$(".sit-quote-container").html(""); // this clears the content on mouseout
});
Ultimately, I'd like the quotes to fade in/out positioned within the main div. Thanks for any assistance, and please let me know if I need to provide further clarification as to the aim here.

you should first visible that quote
try this:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").show(); // Here you should show the quote
}, function(){
$(".sit-quote-container").html("");
});
if you want to fade in:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").fadeIn(); //Here if you want to fade the quote
}, function(){
$(".sit-quote-container").html("");
});

Use the below script to pull the text from .sit-quote p tag of the hovered item and display it in the .sit-quote-container
UPDATE
If needed wrap the quote in a para tag and to avoid complexity use a different class name, in this case .sit-quote_inner.
CSS : .sit-quote_inner{ display:none; }
JS
$('.sit-carousel-container .owl-item').hover(function(){
var quote = $(this).find('.sit-quote').text(); //Only text not the p tag
quote = '<p class="sit-quote_inner">' + quote + '</p>';
$('.sit-header .sit-quote-container').html(quote);
$('.sit-quote_inner').fadeIn(); //Add this
},function(){
$('.sit-header .sit-quote-container').html('');
});

The carousel seems to be dynamically injecting clones of the slides. In this case, you might want to delegate your event handler so that it works with the dynamically generated slides.
Also, if you want to fadeOut the text, you should remove it in the complete callback of fafeOut instead of simply emptying the html Try
$(document).on("mouseenter",".slide-sit",function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").fadeIn("slow");
});
$(document).on("mouseleave",".slide-sit", function(){
$(".sit-quote-container")
.find(".sit-quote")
.fadeOut("slow",function(){ // Fadeout and then remove the text
$(this).remove();
})
});
The gap (grey background) is the background of .slide-sit, which is visible due to the margin-bottom: 15px; applied on the paragraph containing name (style rule .item p main.css line 67 it seems), removing this will fix the issue.
Update
It'd be better if you keep a .slide-sit inside the .sit-quote-container so that you can fade it in/out properly using the below script.
$(document).on("mouseenter",".sit-carousel-container .slide-sit",function() {
var content = $(this).find(".sit-quote").html();
(".sit-quote-container .sit-quote").html(content).fadeIn("slow");
});
$(document).on("mouseleave",".sit-carousel-container .slide-sit", function(){
$(".sit-quote-container").find(".sit-quote").fadeOut("slow")
});

Show and Hide DIV based on users input

I have an input box for zip code entry's, when a user inputs a zip code I want to show a specific DIV.
It starts with everything hidden except for the input box and go button, then the user enters a zip code and the matching DIV shows (the DIV ID will be the zip code) There maybe hundreds of DIVs and possible inputs.
Here is what I have so far, note it starts showing everything (not what I want) but it kinda works
$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == 60538) {
$("#60538").show("fast"); //Slide Down Effect
$("#60504").hide("fast");
}
else {
$("#60538").hide("fast"); //Slide Up Effect
$("#60504").show("500");
}
});
$("#full_day").change(function() {
$("#60504").hide("500");
$("#60538").show("500");
});
});
LINK to working File http://jsfiddle.net/3XGGn/137/

jsFiddle Demo
Using pure numbers as id's is what was causing the issue. I would suggest you change them to
<div id="zip60538">
Welcome to Montgomery
</div>
<div id="zip60504">
<h1>Welcome to Aurora</h1>
</div>
In the html (as well as in the css and the js as can be seen in the linked fiddle)
This will allow them to be properly referenced in the DOM
edit
jsFiddle Demo
If you had a lot of these to handle, I would probably wrap the html area in a div to localize it and then use an array to store the accepted zip codes, and make use of both of those approaches in the click event
$(document).ready(function(){
var zipCodes = [60538,60504];
$("#buttontest").click(function(){
var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
$("#zipMessage > div").hide("fast");
$("#zip"+zipCodes[zipIndex]).show("fast");
});
});

Start off with all the div's style of display: none;. On your button click simply check that a div exists with that ID, if so, hide all others (use a common class for this) and show the right one:
$("#buttontest").click(function() {
var zip = $("#full_day").val();
if ( $("#" + zip).length ) {
$(".commonClassDiv").hide();
$("#" + zip).show();
}
});

How to create active/inactve thumbnails in HTML/Javascript

I am setting up a "Billboard" for the home page of a site. The billboard will have an active image displayed and there will be thumbnails of the right that are used to change the image on the billboard.
Something like this:
Currently I swap the images like this:
<div id="_bbImage">
<img src="images/bill1.png" class="bbImage" id= "MainBB"/>
</div><!--_bbImage-->
<div id="_bbTab1" class="inactiveTab">
<a href="images/bill2.png" onclick="swap(this); return false;">
<img src="images/bbtab1.png" class="bbTabImg" id="bbTabImg1" />
</a>
</div><!--bbTab1-->
and the JavaScript function looks like this:
function swap(image){document.getElementById("MainBB").src = image.href;}
But now, I would like to have the thumbnail to have a different class when Its selected or "Active" to achive this effect:
I need to accomplish the class switch to active, but I also need to make sure that the previously selected tab gets set back to the "inactive" class again.
I tried something like this:
function inactiveTab(name){document.getElementById(name).className = "inactiveTab";}
function activeTab(name){document.getElementById(name).className = "activeTab";}
function inactiveTabAll(){
inactiveTab("_bbTab1");
inactiveTab("_bbTab2");
inactiveTab("_bbTab3");
inactiveTab("_bbTab4");
inactiveTab("_bbTab5");
inactiveTab("_bbTab6");
}
with:
<div id="_bbTab1" class="inactiveTab">
<a href="images/bill1.png" onclick="swap(this); inactiveTabAll(); activeTab("_bbTab1"); return false;">
<img src="images/bbtab2.png" class="bbTabImg" id="bbTabImg1" />
</a>
</div><!--bbTab1-->
But this doesn't seem to be working, when I click on the thumbnail I just get linked to a blank page with "image/bill2.png" image displayed.
Does anyone know a good way to accomplish this, or can anyone point me in the right directions.
Thanks in advance,
Rob

In my opinion, you could have a look at the following jquery method:
http://api.jquery.com/hover/
It has callback functions, where you can make your content visible / invisible.
Instead of your "inactivateTab" - function, you could use the "hide"-method:
http://api.jquery.com/hide/

the problem is that you are using an href for the image inside the tag.
an tag is originally a link to a given url
replace
href="xx.png" with
href="javascript:swap(this); inactiveTabAll(); activeTab("_bbTab1");"
I don't understand what's the original role of the href in your code, but you don't seem to be using it anyway

Instead of img elements, use divs and put the image into the background (use the background-image style). This allows you to define which image should be displayed where in pure CSS. You can also swap images by adding/removing classes:
.bbTabImg { background-image: url(images/bbtab1-inactive.png); }
.bbTabImg.active { background-image: url(images/bbtab1.png); }
As for inactive, use this jQuery:
$('.active').removeClass('active');
This finds all elements with the active class and turns it off. Now you can set one of them active again and the CSS above will load the correct image.

gallery script only functioning on certain pages

I am using a gallery script with thumbnails on the following post on my site
http://www.lookbookcookbook.com/2012/03/apple-cinnamon-pancakes.html
It works fine, but when you go to the main page (third post down), it stops working. Is it because I have another post with the same script that is interfering?
Any help would be much appreciated, thanks!

Your script uses ids to target the picture to show. Ids should be uniques, only one element can have any given Id.
Your two galleries' img are sharing same Ids : #pic-0, #pic-1, etc. So on click, only the first one found is shown, the img in the first gallery.
It should not be too hard to solve, but a lot of your code must be CMS-generated, so I must know what you can change to help more.
(that's the piece of code handling your gallery:)
function myshowImages(id) {
/* $(".mainPic").hide();
$("#pic-"+id).show();*/
$('.mainPic').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
edit after comments :
So, honnestly your code is a bit of mess, there would be lots of change to achieve something clean.
However, for your immediate needs, you should use two showImage functions :
function myshowImages1(id) {
$('.mainPic1').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
function myshowImages2(id) {
$('.mainPic2').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
And edit your links :
for the first gallery.
for the second one.
Keep in mind that it's ugly and not scalable : if you have three gallery, it'll break.
I'm going to look at your code to see how you could do to have a unique function.
Edit2 :
So, a cleaner function for you to use :
1/ setup : chose a classname for each link/img pair. Per exemple :
<a href="" class="image_1">
<img alt="" height="80" src="(some long path)/lookbookcookbooksaya267b.jpg" title="" width="80">
</a>
the thumb link and the image to show :
<a href="(some long path)/lookbookcookbooksaya267.jpg">
<img alt="" class="image_1" height="470" src="(some long path)/lookbookcookbooksaya267.jpg"></a>
Then, I've seen you have JQuery, so this kind of function :
$(document).ready(function()
{
$(".gallery div div a").on("click",function()
{
var myClass = $(this).attr('class');
var $parentGallery = $(this).parents('.gallery');
$parentGallery.find("div > a > img").css("display","none").find("myClass").fadeIn();
return false;
});
});
First, it binds a click event on all your links which are two div depth in the .gallery element. That's your thumbs.
On click, it fetches the class of the clicked thumb link.
Then it searches for the parent .gallery of this link, hide alls images and show the good one.
I can't really guarantee it'll work out the box because your markup is very complex, but it should.