I have a link which I am going to use as notification when a user has some new notification I am going to notify the user by showing a tooltip(twitter bootstrap tooltip). What I want to achieve is, that tooltip should remain visible till the user clicks the link. once the user clicks the link, the tooltip should destroy.
this is what I have till now, http://jsfiddle.net/testtracker/QsYPv/
HTML
<p>Notification.</p>
JavaScript
$('p a').tooltip({placement: 'bottom'}).tooltip('show');
What's happening there is, tooltip stays visible till you hover it, and takes its default behaviour (show on hover) once you hover it.
I hope I have given proper info and cleared what I want to do.
Here is the solution http://jsfiddle.net/testtracker/QsYPv/8/
Added the option "trigger"
$('p a').tooltip({placement: 'bottom',trigger: 'manual'}).tooltip('show');
then, with this line
$('p a').on('click',function(){$(this).tooltip('destroy');});
destroy tooltip on click.
You can add a variable to trigger off the mouseleave event to re-show the tooltip, and then as you said in your comment, just destroy the tooltip when clicked, so it doesn't show when you mouseover again:
var clickedNotify = false;
$('p a').tooltip({placement: 'bottom'}).tooltip('show');
$('p a').mouseleave(function() { if (!clickedNotify) { $('p a').tooltip({placement: 'bottom'}).tooltip('show'); } });
$('p a').click(function() { clickedNotify = true; $(this).tooltip('destroy'); });
This way, the tooltip is always shown, even after a mouseleave, until the link is clicked. After the link is clicked, the tooltip is destroyed, and still won't generate javascript errors on the page on mouseleave.
Related
On a website I have 4 clickable buttons (service buttons) on the homepage. They all respond individually to a css hover effect (background-color change) when the user hovers over one of the buttons. So far so god, this is what i want.
CSS:
.service-button:hover {
background: #F7AA06;
color: #1F213F;
}
The FIRST of the four buttons is the most important service. Therefore I want to highlight this button by having it "active" with the hover effect (background-color) when a user first enters the page. If the user hovers over one of the other buttons, the first button should "lose" it's hover-status and return to standard bg-color (white).
My temporary solution so far is to give the first button it's highlighted color with the nth:first-child selector from css. This kind a works as it sets the correct background-color to the first button. The problem is that the button does not change back to standard color if users hovers over on of the other buttons.
Is it possible to accomplish this from just css, or do I need to use jQuery?
https://imgur.com/Jutg3RS
NEW fix! I actually got it working with some jQuery. Guess it's not the cleanest solution, but it does the job! Could/should it be resolved in a better way..?
jQuery(document).ready(function($){
// Add hover class to first button
$('.service-button.totalentreprise').addClass('bg-orange');
$('.service-button').hover(
function() {
// Remove hover class from first button
$('.service-button.totalentreprise').removeClass('bg-orange');
// Add hover class to any button
$( this ).addClass('bg-orange');
}, function() {
$( this ).removeClass('bg-orange');
}
);
});
try these
window.addEventListener('load', function(){
$(".service-button").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"#F7AA06":"transparent")
});
})
So I'm building a small "UberMenu" feature for my main menu, and it works almost as I want, except that I want the UberMenu container to hide if the mouse is not over either
1) the UberMenu button, or
2) the UberMenu container
Right now, if you hover over the UberMenu button, the container shows up, and if you enter the UberMenu container, and then proceed to hover over another menu item, it hides.
This is what I want, however if I hover the UberMenu button, and then immediately hover over another menu item, the container remains open.
I've tried over a dozen different snippets, but I haven't found a solution.
I guess I need some if / else statement added to the code?
Can someone give me some guidance here? Much appreciated! :-)
This is the code I used:
//When mouse hovers UberMenu button, Show Container
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
// If mouse hovers either the content area or the navbararea, hide UberMenu container again
$(".block-type-content, .navbararea").mouseenter(function() {
$(".uber-menu-frame").hide(800);
});
I found a solution on my own by adding a timer, I'm not sure how solid this piece of code is, but it does the trick as far as I can tell!
For anyone interested:
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
var myTimer = false;
$(".uber-menu-test ,.uber-menu-frame").hover(function(){
//mouse enter
clearTimeout(myTimer);
},function(){
//mouse leav
myTimer = setTimeout(function(){
$(".uber-menu-frame").fadeOut(800);
},100)
});
Hope it helps,
$(".uber-menu-test").mouseenter(function(){
$(".uber-menu-frame").show(800);
}).mouseleave(function(){
$(".uber-menu-frame").hide(800);
});
i have div-1 and div-2. when a user clicks on div-1 div-2 is shown. This operates using jquery as a toggle function so when a user re-clicks div-1, then div 2 is hidden again. now i want to add a statement to my jquery that says if the user clicks to another area of the page so an area which is not div-1 then to also hide div-2. can someone please show me how i might do this as i am brand new to jquery and javascript.
thanks
<script type="text/javascript">
$('.notifications').click(function() {
$('.drop_down_column2').toggle();
return false;
});
</script>
It's pretty straightforward:
$('body').click(function() {
$('.drop_down_column2').hide();
});
Because you are returning false from your .notifications click handler, jQuery will prevent propagation of the event up to the body. So in essence, any time you click anywhere, except .notifications, your div will hide.
I'm doing a site for a kiosk, so the site goes like a photoslide in-between each div.
I put a layover/mask on the first page, and the layover/mask is removed on a mouse click function at the moment. (As a side note this is for the purpose of hiding the address bar on the first screen for the kiosk as the first page/div is an a tag)
$("#item1").append('<div id="pageLayover"></div>');
$(document).click(function(){
$("#pageLayover").remove();
});
Everytime you click your mouse to remove the layover then you need to click another time then the first a tag page will slide to the second page.
Is there any way I can have one click only not two to remove layover/mask and to let first page to slide to the second page at the same time?
Here is my code on jsFiddle Any code/links/examples would be great help.
Thanks in advance!
Your question is very confusing, but maybe this is the answer you're looking for:
To make the click on the layover in fact two clicks, you can simply trigger the click event of the first panel:
$('#pageLayover').live('click', function(e) { // <-- updated!
$("#pageLayover").remove(); // remove our layover from the DOM
$panels.eq(0).click(); // <-- trigger click event of 1st element of $panels
});
This does not check if the click occurred on the panel though.
You can solve the problem with the multiple layovers with this:
$('#wrapper').scrollTo($(this).attr('href'), 800,{
onAfter: function(id){
if ($('#pageLayover').length == 0) { // <--- new
$("#item1").append('<div id="pageLayover"></div>');
} // <--- new
I would like to show a <div> that displays "Saved!" every time the user clicks the save button.
I have here some jQuery code but it works only once. The second time I click the button the div won't show up.
$("#loading").html("Saved!").fadeOut(4000);
Possibly because it is hidden. Try:
$("#loading").html("Saved!").show().fadeOut(4000);
Or
$("#loading").html("Saved!").fadeIn(200).fadeOut(4000);
That is because the div is still "faded out"
try this...
$("#loading").html("Saved!").fadeOut(4000, function(){
$("#loading").empty();
$("#loading").show();
});
It empties the #loading div and then re-displays it and readies it for the next click.
You need to bind a click event to a a div.
$(document).ready(function() {
$('#element').click(function() {
$('#para').html("Saved!").fadeOut(4000);
});
});