I have a grid of large images for products. I'm looking to have a tooltip appear when you rollover the image. Though the tooltip will need to stay visible because there will be content and links inside of it. The tooltip will be positioned partly on top of its respective large product image. How do I determine to hide the tooltip when the user is not over the tooltip and the product image and show the tooltip when the user is over the tooltip and image?
Is there a jQuery plugin that handles this already?
Any help is appreciated! Thanks!
Hey I had an issue like this once. Though not exactly what you need this is what I ended up using.
var over_picker = false; //var to store state of over or not over
$('.list_picker').live('mouseover mouseout', function(event){
if (event.type == 'mouseover') {
over_picker=true;
console.log('inside');
}else{
over_picker=false;
console.log('outside');
}
});
$('body').live('click', function(){
if(! over_picker) $('.list_picker').hide();
});
I hope this can be of some help.
As already suggested in another thread, the native design of the tooltip rely on different assumptions, so the behaviour you need (a sticky tooltip that allows the user to click its content) is not officially supported.
Anyway looking at this link you can see it's possibile to achieve what you need using jQuery Tools:
http://jquerytools.org/demos/tooltip/any-html.html
Here is a standalone demo
http://jquerytools.org/demos/tooltip/any-html.htm
Related
What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.
I am trying to put a photo view/slideshow on my webpage and I am not getting the results I am looking for. I have created a Fiddle HERE to show you what I am trying to do. What I want it to do is when you click a thumbnail it switches the thumbnail into the main photo spot and the main photo into the thumbnail spot. It works at first but after you start clicking the other thumbnails it starts not switching the correct photo into the main slot. Also if you reclick the thumbnail you just clicked it does nothing. Here is my jquery code but take a look at my fiddle and you will be able to see what I am trying to do.
$('.thumb1').click(function() {
$('.thumb1, .main').fadeIn().toggleClass('thumb1 main');
});
$('.thumb2').click(function() {
$('.thumb2, .main').fadeIn().toggleClass('thumb2 main');
});
$('.thumb3').click(function() {
$('.thumb3, .main').fadeIn().toggleClass('thumb3 main');
});
$('.thumb4').click(function() {
$('.thumb4, .main').fadeIn().toggleClass('thumb4 main');
});
I changed your classes similarly to how Joao did, but my JavaScript is a little different
$('.thumb').click(function () {
var newHTML = this.innerHTML;
this.innerHTML = $('.main')[0].innerHTML
$('.main').html(newHTML);
});
Instead of just changing the src, you will also keep all other attributes of the images, such as the alt attribute, which you should add to your images for accessibility purposes.
I didn't implement the idea of not having clicking the same one do nothing, because then if they want to look at the image they just looked at they can't.
JSFiddle: http://jsfiddle.net/howderek/RfKh4/6/
I was looking at your code, and I wouldn't recommend switching around classes between elements like that since it might throw out a couple of bugs like yours. I played around with your code and simplified a little bit:
$('.thumb').click(function () {
var previousSrc = $('.main').children().attr('src');
$('.main').children().attr('src', $(this).children().attr('src'));
$(this).children().attr('src', previousSrc);
});
Here's the updated fiddle: http://jsfiddle.net/RfKh4/5/
Basically what I did was save the previous src attribute of the .main div image inside previousSrc and then I change the div's image to the one in the thumbnail. And finally change the thumbnail's image to the one that was on the .main div. Hope it helps you!
I'm making a site that makes use of the iosSlider plugin. I have a few sliders inside of a jquery accordion so some of them start out "display:none" when the page first loads. As a result the sliders inside the accordions are not getting the proper screen width. When you open one of the hidden accordions the slider inside is tiny.
I was curious if there was a better method to solving this issue then the one I am currently using. Right now I am simply destroying the slider and recalling it but this looks ugly and I'm sure there is probably a better approach to solving this.
Any input would be great, thanks
Current code:
$(".acheader").click(function(e) {
//e.preventDefault();
e.stopPropagation();
acords.slideUp();
$(".menuarrow").attr('src','/themes/images/arrow_down.png');
var image = $(this).find(".menuarrow");
if(image.attr('src') === "/themes/images/arrow_down.png"){
image.attr('src','/themes/images/arrow_up.png');
}
if ($(this).next().is(":hidden")) {
$(this).siblings(".accontent").slideToggle(100);
$('.iosSlider2').iosSlider('destroy');
$('.iosSlider2').iosSlider({
snapToChildren: true,
desktopClickDrag: true,
keyboardControls: true,
navNextSelector: $('.next'),
navPrevSelector: $('.prev'),
onSlideChange: slideChange2
});
}
else image.attr('src','/themes/images/arrow_down.png');
});
EDIT: this is for a mobile site so there are no static widths I can refer to. The sliders parents inherit their widths from their parents.. etc.
Taking a look at the iosSlider docs, under public methods, it looks like there is an update command which should resize it. Use $('.iosSlider2').iosSlider('update'); instead of destroying. Does that help?
I have set up my page so that when the user hovers over an image a text shows up and some bubbles. There are eleven images of fish and each one has its own text and bubble. I made sure that there is no overlap in the divs containing the fish, but when one hovers over a particular image the text of some of the other images show up too. This is too distracting since the user would want to see one text at a time. How can I solve this issue? Here is the link to the page: http://arabic001.com/colors
I'm curious myself as to what the common solution is to this problem.
When I run across this situation I use hoverIntent plugin for jquery.
if you went this route, you would change each .mouseOver(),.mouseOut() to the following:
from this
$('#fishBlue').mouseover(function() {
$('#bubblesBlue').toggle('slow');
$('#textBlue').toggle('slow');
});
$('#fishBlue').mouseout(function() {
$('#bubblesBlue').hide('slow');
$('#textBlue').toggle('slow');
});
to this
$('#fishBlue').hoverIntent(function() {
$('#bubblesBlue').toggle('slow');
$('#textBlue').toggle('slow');
});
}, function() {
$('#bubblesBlue').hide('slow');
$('#textBlue').toggle('slow')
});
note
that the hoverIntent plugin requires at least jquery 1.5.1
other tip
I would abstract things a bit more, why rewrite the same thing for each fish.
perhaps use classes
$('.fish').hoverIntent(function() {
$(this).next('.bubble').toggle('slow');
$(this).next('.text').toggle('slow');
});
}, function() {
$(this).next('.bubble').hide('slow');
$(this).next('.text').toggle('slow')
});
I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?
Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});
In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.