I'm currently working on a recommend box for my tumblr. I have a slight issue though. On my blog I have a recommend box that floats on the left of the blog div, #cage. When you click yes, it redirects to a recommend link. When you hit no, I JUST want the div to fade out. For me, once I click no, it fades out fine, but then the #cage div moves over to the left and replaces the space that #recommend was in. Is there any way to just simply fade out the div, then once it's faded out, replace it with an INVISIBLE div, (the same size as #recommed) to it just fades out & the content doesn't move? Thanks. Here's what I have so far, hopefully someone can help.
<div id="recommend">
<img id="Recommend" src="http://i56.tinypic.com/2z7nz9e.png" usemap="#Recommend" border="0" width="200" height="200" alt="" />
<map id="Recommend" name="Recommend">
<area shape="rect" coords="78,113,142,163" href="http://www.tumblr.com/directory/recommend/entertainment/epicjamess" alt="Yes" title="Yes" />
<div id="no"><area shape="rect" coords="144,113,195,163" href="#" alt="No" title="No" /></div>
</map>
</div>
<script>
$("#no").click(function () {
$("#reccommend").fadeOut("fast");
});
}
</script>
Instead of fading, change the opacity:
$("#reccommend").animate({opacity: 0}, 200);
The second argument is the duration of the animation in milliseconds.
U could try
$("#reccommend").animate({opacity: 0}, fast );
But keep in mind, opacity is not supported by all browsers.
Opacity also causes issues with text in IE... Maybe try this:
<script>
$("#no").click(function () {
//wrap it in a div with an id
$("#reccommend").wrap('<div id="reccomend-wrap" />');
//set width of the wrapper to match width of #reccomend, and float it
$("#reccommend-wrap").width($("#reccomend").width()).css("float","left");
//now fade the #recommend out
$("#reccommend").fadeOut("fast");
});
}
</script>
EDIT: To prevent jumpiness it might actually be best to have #reccomend-wrap have the same CSS as #reccomend in your CSS file, rather than adding the float property on the fly..
Related
I have an html page with simple, static image like this : Image
I need a way that putting mouse (hover) on any object, for example - "BED" to get a tooltip that - "There is bed".
I know how hover works at pure html, with blocks or any teg, but I need a way of doing/tracking the user cursor, and when it enters in specific zone, to show the hint. Probably some JS required. How can I setup this unknown geometric forms with their coordinates to achieve my goal?
No JS script needed :)
You can use image maps .. they are old but should work as you expected.. you can run it and see title when you hover over kitchen and bad
I used this webpage to 'generate' rectangles and area over the image or hotsports..
<img src="https://www.edrawsoft.com/symbols/simple-home-floorplan.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="This is bad" title="This is bad" href="" coords="520,132,451,48" shape="rect">
<area target="" alt="This is kitchen" title="This is kitchen" href="" coords="343,204,254,55" shape="rect">
</map>
In addition of the prev answer you can also add this jQuery to your page. It makes the tooltip show more prominent and also quicker:
$( function() {
$( document ).tooltip();
} );
This native jQuery function uses the 'title' attribute! Don't forget to add these like this:
<img title='This is a test!!' src='test.png'>
At this current iteration, I have it where if a user clicks on an image thumbnail, the thumbnail image displays in a different div (the main div) and in doing so, it rewrites the main div img src attr with the thumbnail img attr minus the "-thumbnail". This part is good, or at least I believe it is.
With that said, after the user clicks on a thumbnail and the main div img appears, it lingers...and what I mean by lingers is that for example, if a user closes the div and re-opens it or another div just like it, the last image shows (stays) when it shouldn't in the main div. Instead, it should be showing the first thumbnail img in the main div...
Any suggestions is appreciated and below is what I currently have (or at least a portion of it). There is a lot more, but below is the main stuff that's giving me troubles...
The HTML part is within a div class called "t_1". I have 24 of these..."t_1", "t_2", "t_3" respectively. And within this class, I have what is posted below in all using the same div classes. The only difference is the folder names in the img tag.
So, when a user clicks on that thumbnail and that thumbnail image gets rewritten so that it can be displayed in the main div "t_main_screenshot", all is good...but then, if the user clicks out of the "t_1" etc. divs, and opens up another "t_2", that last image thumbnail that was clicked previously shows in the main div (t_main_screenshot) instead of the first image thumbnail for what should be in "t_2"...
Hopefully this is a bit better in clarity...It's kind of hard to explain.
HTML:
<div class="t_main_screenshot">
<img src="_framework/images/slides/simplicity/2.png" alt="" title="" />
</div>
<div class="t_thumbnail_wrapper">
<div class="t_thumbnail active">
<img src="_framework/images/slides/simplicity/2-thumbnail.png" alt="" title="" />
</div>
<div class="t_thumbnail">
<img src="_framework/images/slides/simplicity/4-thumbnail.png" alt="" title="" />
</div>
<div class="t_thumbnail">
<img src="_framework/images/slides/simplicity/6-thumbnail.png" alt="" title="" />
</div>
</div>
JS/JQuery:
$('.t_thumbnail').click(function() {
$('.t_thumbnail').removeClass('active');
$(this).addClass('active');
var thumbNail = $(this).find('img').attr('src');
$('.t_main_screenshot img').fadeOut(0, function() {
$(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', '');
});
});
Try this code :
$('.t_thumbnail').click(function() {
$('.t_thumbnail').removeClass('active');
$(this).addClass('active');
var thumbNail = $(this).find('img').attr('src');
$(this).parent().parent().siblings().find('.t_main_screenshot').children('img').fadeOut(0, function() {
$(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', '');
});
});
As you are updating directly on .t_main_screenshot class. So it will update all places, in this case in all your modals .t_1, .t_2, ...etc.
$('a.screenshots_1').click(function() {
$('.t_main_screenshot img').find('img').attr('src' , "");
});
This will help you to initialize the main screenshot on modal screenshot icon click.
Is this too complicated to achieve? Hopefully my question or title makes sense. Essentially I have two divs - one is and the other is . I have 12 images inside of each div that I thought I attached IDs to. I'm still much of a noob to web coding so perhaps I'm labeling them wrong. But here's my goal, whenever you hover over artwork1, the opacity of artwork1 and button1 should change simultaneously. And the effect needs to be achieved the other way as well (ie hover:button1 should change the opacity of artwork1). Below is my code to explain my case further:
<html>
<body>
<div id="buttons">
<img src="..." class="spaced"(to spaced the buttons)>
<img src="..." class="spaced">
<div id="artwork">
<img src="..." class="mainbuttons & greydout"
<img src="..." class="mainbuttons & greydout">
The 'mainbuttons' class is for spacing between the 12 images. And the greydout class is to alter the hover effect already in place - going from opacity 0.3 to 1.
I've tried to research some javascript as I'm thinking that's the most proper solution. My javascript I've tried to use is as follows:
$(document).ready(function() {
$("#button1").mouseenter(function(){
$("#artwork1").addClass("opac_art");
});
$("#button1").mouseleave(function(){
$("#artwork1").removeClass("opac_art");
$("#artwork1").addClass("greydout")
});
});
One more thing to consider is that I have multiple scripts running for various functions:
1) a redirect script that will redirect mobile viewers to the mobile site;
2) a respond script that reformats the viewport to whatever the viewer's resolution browser size is set to.
I have the jQuery loaded up at the top of the document, but could there be conflict with the other scripts running on the html page?
I've even tried going the CSS route and I can barely get the divs to interact with each other. The closest I've come is when I hover in the button div, I can alter artwork 1, but not as specific as I'm aiming for. I hope all this makes sense, and thanks in advance for reading all this and trying to help me through this huge roadblock to getting my site up.
Try something like this.
Add a class to your buttons (galleryButtons) and to your images in the other div.
First of you do not really need the wrapping with the a tag
Add classes to your button elements and artwork.
<div id="buttons">
<img id="gbutton1" class="galleryButtons" src="button.png" />
<img id="gbutton2" class="galleryButtons" src="button.png" />
<div id="artwork">
<img id="artwork1" class="artworkImage" src="art1.jpg" />
<img id="artwork2" class="artworkImage" src="art2.jpg" />
$(document).ready(function () {
var intID;
$(".galleryButtons").hover(function (e) {
console.log(e.target.id);
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#artwork" + intID).addClass("opac_art");
}, function () {
$("#artwork" + intID).removeClass("opac_art").addClass("greydout");
});
$(".artworkImage").hover(function (e) {
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#gbutton" + intID).addClass("opac_art");
}, function () {
$("#gbutton" + intID).removeClass("opac_art").addClass("greydout");
});
});
All for you in a fiddle: http://jsfiddle.net/djwave28/et6tD/4/
It can be made simpler with selecting smarter, but I wanted you to see the relation in the element better. When you hover over an element, the element that causes the event is send to the function. This event contains information. Like e.target.id will hold the id of that element.
http://www.w3schools.com/jsref/dom_obj_event.asp
From what I'm understanding of your question, you could do something like this:
$(document).ready(function()
{
$("#one").hover(function()
{
// Changes the opacity of the first image
// as well as the corresponding link from
// 1 to 0.3.
$("#artone").css({ "opacity": "0.3" });
$(this).css({ "opacity": "0.3" });
});
$("#two").hover(function()
{
$("#arttwo").css({ "opacity": "0.3" });
$(this).css({ "opacity": "0.3" });
});
});
And the HTML would look something like this:
<div id="links">
Link one
Link two
</div>
<div id="artwork">
<img src="" id="artone" class="spaced">
<img src="" id="arttwo" class="spaced">
</div>
Couple extra things -
Make sure you actually link jQuery into your page's header, I didn't see it above:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
That's from Google's CDN, but you can do it locally, of course.
<img src="#" class="mainbuttons & greydout">
When listing classes for an element, you don't add an ampersand (&), you just leave them with a space in between.
<img src="#" class="mainbuttons greydout">
So I am designing a website, and I want to be able to have each companies logo via an Image called via XHTML 1.0 Transitional fade in upon mouseover and fade out when no longer mousing over. I have jQuery installed and what not, I just don't know the code to this for each image or one image alone. I don't know JavaScript and or jQuery.
Thank you very much for future answers (and possible explanations),
Aaron Brewer
You need a container for each image, otherwise there will be no element to trigger the mouse over when the image has faded out.
HTML
<div class="img-container">
<img src="a.jpg" alt="a" />
</div>
<div class="img-container">
<img src="b.jpg" alt="b" />
</div>
<div class="img-container">
<img src="c.jpg" alt="c" />
</div>
jQuery
$('.img-container').each(function() {
// Get a reference to the image.
var img = $(this).find('img');
// Hide by default.
img.hide();
$(this).hover(function() {
img.stop().fadeIn(500);
}, function() {
img.stop().fadeOut(500);
});
});
perhaps this little live demo will get you in the right direction as it uses both CSS3 and jquery to do the fading, so if one fails, the other can take over. http://jsfiddle.net/robx/jrnFj/2/
Hi I would like to slide an element out when the mouse goes over and then slide it back and hide when the mouse goes out..I have this code, but I have problem when the mouse leave the element before the first mouseenter function is completed..The .entry_extend div stay visible. I tried to the hover function, but is the same problem..Please help..Thanks.
jQuery("document").ready(function(){
jQuery(".fire").mouseenter(function(){
jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);
});
jQuery(".fire").mouseleave(function(){
jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
});
});
<div id="craft" class="fire">
<div class="entry_main">
<a href="" title="">
<img src="" alt="" />
</a>
</div>
<div id="entry_ex_craft" class="entry_extend">
original shisha pipe collection
</div>
</div>
Please Help:)
You are trying to implement a "hover". This works:
jQuery(".fire").hover(
function(){jQuery('.entry_extend', this).stop(true, true).show(500);}
,
function(){jQuery('.entry_extend', this).stop(true, true).hide(500);}
);
Mind you, it isn't a good idea to have the DIV you are sliding in and out within the DIV you are hovering on, since HIDING the DIV alters the boundaries of the DIV containing it. You can end up with some "trembling" activity sometimes because of this.
try combining mouseover+mouseenter and mouseout+mouseleave using binding.. see here:
jQuery("document").ready(function(){
jQuery(".fire").bind('mouseover mousenter',function(){
jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);
});
jQuery(".fire").bind('mouseout mouseleave',function(){
jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
});
});