I've got a popup div showing on rightclick (I know this breaks expected functionality but Google Docs does it so why not?) However the element I'm showing my popup on has a "title" attribute set which appears over the top of my div. I still want the tooltip to work but not when the popup is there.
What's the best way to stop the tooltip showing while the popup is open/openning?
Edit: I am using jQuery
With jquery you could bind the hover function to also set the title attribute to blank onmouseover and then reset it on mouse out.
$("element#id").hover(
function() {
$(this).attr("title","");
$("div#popout").show();
},
function() {
$("div#popout").hide();
$(this).attr("title",originalTitle);
}
);
Here is another example of how it can be done by using data for value storage and prop for value assigning
$('[title]').on({
mouseenter : function()
{
$(this).data('title', this.title).prop('title', '');
},
mouseleave: function()
{
$(this).prop('title', $(this).data('title'));
}
});
I think setting to blank space and when the popup closes, setting again the proper text. I think this is the easiest way to stop it.
For me, I didn't care what the content of the title tag was. I just did:
$('a').hover(function() {
$(this).attr('title', '');
});
Which stopped the title tag from showing.
Related
I would like to make a overlay when the uses make hover event on a link.
This part ok, the overlay created and everything fine.
But I also would like to remove this overlay, when user click (or hover) for it, and this part create a strange bug.
I try clicking for the overlay and its dosen't close, nothing happening, but if you paste script to the chrome console, this working fine.
Js, first part, add script:
var overlay = jQuery('<div class="overlay"> </div>');
$("#link-'.$myqlVideoID.'").hover(function() {
$("#hover-").attr("src","http://youtube.com/embed/'.$myqlVideoID.'?autoplay=1");
$(".drop-target").css("background-color","#070707");
$(".drop-target").css("padding","11px");
$(".drop-target").css("margin-bottom","16px");
$(".drop-target").show().fadeIn("3000");
overlay.appendTo(document.body)
});
And the second part, remove overlay:
$(document).ready(function() {
$(".overlay").click(function() {
$("#hover-").removeAttr("src");
$(".drop-target").hide().fadeOut("3000");
$(".overlay").remove();
console.log("clicked");
});
});
My site is where you can see the bug:
http://neocsatblog.mblx.hu/search/
Just search something and scroll down to "Cimkék"
Try delegating the event on the overlay by writing the following:
$(document).on('click', '.overlay', function () {
//The rest of your code
}) ;
And same for the rest of your event handlers.
The reason for this is that the element overlay is being added dynamically, and the script doesn't know about it at the moment when it's being instantiated.
I've added colorbox to a site that contains product attributes. When a user has selected the attributes and closed the popup I either want to change the background colour of the button used to open the popup, or display a marker so that they know they have chosen the options for that product out of the grid layout.
I have got a close event firing ok on colorbox. I tested it with alert("closed"), so i know that it is activating correctly.
So i added:
$(document).bind('cbox_closed', function(){
document.getElementById('.inline').style.backgroundColor = "#f3f3f3";
});
but it didn't change the background colour of the "inline" class.
What am i doing wrong?
If i decide to go with a check mark that is hidden with display:none; what is the process for overriding the display:none; css?
Thanks
There are a couple problems I see here:
A. You're incorrectly accessing a class name "by id". Switch to jQuery CSS selector and css() method to change the BG color:
$(document).bind('cbox_closed', function(){
$('.inline').css({backgroundColor: "#f3f3f3"});
});
B. You may want to add your event listener directly in the colorbox options in the constructor, rather than on the document, which ought to perform better, and will kill the listener when the colorbox is destroyed (no memory leaks):
$('#my_colorbox').colorbox({
// options
onClosed: function() {
$('.inline').css({backgroundColor: "#f3f3f3"});
}
});
You can't access the class with document.getElementById(). Use document.querySelectorAll('.inline') instead.
or use jquery way
$('.inline').css('backgroundColor', '#f3f3f3');
Use
$(document).bind('cbox_closed', function(){
document.querySelectorAll('.inline').style.backgroundColor = "#f3f3f3";
});
I have an issue with jQuery's .hover() method. I have a few paragraphs inside a tags which I use as a menubar. What I intend to do is, if I hover one of these menulinks, a new element gets displayed over the menulink which contains links to submenu links. The problem is, that the .hover() stops working immediately.
I did a simple FIDDLE to show my problem.
Any help is much appreciated.
Edit: Worth to say is, that I also want the sublinks to be clicked, so the hover must be still working then. It only stops when I leave the red div.
What about this?
$('p').hover(function() { $('div').fadeIn(); }, function() { });
$('div').hover(function() { }, function() { $('div').fadeOut(); });
Demo fiddle: http://jsfiddle.net/lparcerisa/1urs0wfr/2/
I am using a script from this discussion: https://wordpress.stackexchange.com/a/14711/14649
It works great, but when I select a different radio input, the original box doesn't toggle off (bad), but the new box does appear (good). This happens for any additional boxes I add.
jQuery is not my thing, and I have been researching around with no luck! Here is my code:
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#feature_box').hide();
$('#standard_lead').hide();
// one box
$('#value_feature_box').is(':checked') ? $("#feature_box").show() : $("#feature_box").hide();
$('#value_feature_box').click(function() {
$("#feature_box").toggle(this.checked);
});
// second box
$('#value_standard_lead').is(':checked') ? $("#standard_lead").show() : $("#standard_lead").hide();
$('#value_standard_lead').click(function() {
$("#standard_lead").toggle(this.checked);
});
});
</script>
Thanks for taking a look!
The reason why the other box doesn't disappear is because you didn't tell it to!
$('#value_feature_box').click(function() {
$("#feature_box").toggle(this.checked);
});
This says to toggle the visibility of #feature_box, when you click on #value_feature_box. If #value_feature_box is not a checkbox, then change the inner code to $("#feature_box").toggle();. If you want something to disappear as well, then tell it to:
$('#value_feature_box').click(function() {
$("#feature_box").toggle();
$("#standard_lead").toggle();
});
The value on the inside of the toggle() parentheses is telling it to either appear or disappear(true or false).
You are toggling only one box on click - you need to toggle both, see this jsFiddle:
http://jsfiddle.net/Gr8Jq/
With this (and similar for the other box):
$('#value_feature_box').click(function() {
$("#feature_box").toggle(this.checked);
});
you are basically saying - when clicked (so this.checked will always be true), toggle the element. From the docs:
http://api.jquery.com/toggle/
you are using the version of toggle that has showOrHide parameter and always passing true, so always showing and only the box that was clicked on.
I'm having a problem with an image viewer I'm creating. Like the image below, the 'window' is where the image is shown and 'paging' is where the user can change the image. I've used this Jquery script to make the 'paging' fade in whenever the window is hovered over - It's hidden to start with. Although when the user hovers onto 'paging', it flickers. (Like shows then hides, etc.)
I suppose it's because the mouse isn't hovering over the 'window' anymore. Can anyone suggest how I can make 'paging' remain showing? Thanks for the help! :)
$(".window").hover(function() {
$(".paging").fadeIn('fast');
}, function() {
$(".paging").fadeOut('fast');
});
You can use .stop() here and include both in your .hover() selector, like this:
$(".window, .paging").hover(function() {
$(".paging").stop(true, true).fadeIn('fast');
}, function() {
$(".paging").stop(true, true).fadeOut('fast');
});
This way, when you leave to enter the child or back to the parent it stops the fade out and brings it right back, resulting in no visible action to the user.
You could try using mouseover and mouseout instead. I'm not sure that mouseout would react the same way hover does.
In fact, when you pass your mouse over the paging there is a magical thing that happens which is called "event bubbling": the "hover" event is passed to the container which is the parent of the "hovered" object, and so on until the "document" object.
So to solve your problem, you need to stop bubling, you can do it with "return false":
$(".paging").hover(function() {
return false;
}, function() {
return false;
});
(It's possible that in recent version of jquery you can replace the argument function(){return false;} by just false.)