Hiding jQueryUI tooltip when clicking on target="_blank" link - javascript

I'm using jQuery to show tooltips on every link on my page that has a 'details' attribute
$(function() {
$tooltip = $(document).tooltip({
show: false,
track: true,
items: "a[data-details]",
content: function() {
return $( this ).data('details');
}
});
});
This works very well. However, when the user clicks one of those links, the URL is opened in a new tab (using target="_blank"). The problem is that the tooltip is still open when the user gets back on the first tab.
Here's what I tried so far:
$('a[data-details]').on('click mousedown mouseup', function() { // this might be overkill
$(document).tooltip("close"); // Doesn't work at all
$('div[class^="ui-tooltip"]').remove(); // removes the tooltip onclick, but gets it back opened when returning on the tab
});
Is there a way to keep the tooltips closed when the new page is opened?
Thank you for your help.
Here's a fiddle illustrating the problem: https://jsfiddle.net/su4v757a/
Note: I'm using jQuery 1.12.4 with jQueryUI 1.12.1

This is probably a bug.
As far as I can tell this must be a bug.
And you could let them know over at https://bugs.jqueryui.com/report/10?P=tooltip
I notice that the .tooltip("close") doesn't work in the fiddle. However the tooltip listens to the "mouseleave"-event to close, and we can force that by $('a[data-details]').trigger("mouseleave");
If you try this out you will see that it do close, but pops up again:
$('a[data-details]').on('click mousedown mouseup', function() { // this might be overkill
$(this).trigger("mouseleave");
});
Hover and click the "me":
Coming back to the page notice that the tooltip has closed and come back again:
Workaround - possible solution
Since .hide()-ing an element triggers the "mouseleave"-event you could do something funky like hiding the link on click, and showing it just a moment later.
$('a[data-details]').click(function() {
var $this = $(this);
$this.hide();
setTimeout(function() {
$this.show()
}, 1);
});
Setting the timeout to 1 ms would not create any flickering of the link, making the hide/show unnoticeable for the user.
Works in Chrome. Try it here: https://jsfiddle.net/cyx6528e/1/
Good luck!

tooltip usually works on hover functionality, can you provide js fiddle for your problem

Related

Disabling "Save image" (for noobs)

I know disabling right-click on images won't stop technical-minded people from downloading images. Using them as CSS backgrounds is not an option.
Ideally, I'd like to ONLY remove image-saving options and not the whole context menu. I have found 3 solutions. What do people recommend and why? Is there any specific part of the include file in which I should put this?
Many thanks :)
#1
$("body").on("contextmenu", "img", function(e) {
return false;
});
#2
$('img').bind('contextmenu', function(e) {
return false;
});
121 upvotes, src: Disabling right click on images using jquery
#3
$(document).ready(function() {
$("img").on("contextmenu", function() {
return false;
});
});
76 upvotes, src: How to prevent Right Click option using jquery
(2) uses a deprecated method: bind, so I won't recommend it.
(1) and (3) will do the same thing, the only difference is that in (3) the listener is added after the page is fully loaded.
There is no way to disable particular menu items from the default context menu. You may however write your own context menu for "img" elements which doesn't include save options, but I suspect for your purpose its not worth the trouble.

NivoSlider - Disable Right Click

I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>
You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});
You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery

Make toggle link only effect box in the same parent

So I currently have two toggle boxes set up and there will be more soon, I'd like to keep the JS pretty simple and not have a new script for each area, but whenever I attempt to toggle in one place it applies the function to both other the toggle-content boxes I have set up.
In order to see both areas, open the first one and close it before opening the second so a product is added to the Recently Viewed box
http://www.coreytegeler.com/bolivares/shop/pablo-ribbed-winter-skully/
http://www.coreytegeler.com/bolivares/shop/salvador-crewneck-sweater-copy/
Here's what I have in place now:
$(window).load(function(){
$('.toggle-link').click(function(e){
$('.toggle-content').slideToggle();
e.preventDefault();
});
$(".toggle-link div").click(function()
{
$(".toggle-link div").toggle();
});
});
I tried using $(this).find('.toggle-content').slideToggle(); but still no luck.
I know this is a pretty easy fix but just can't figure it out.
Any help would be great!
$(document).ready(function(){
$('.toggle-link').click(function(e){
$(this).closest("ul").children('.toggle-content').slideToggle();
$(this).children('div').toggle();
});
});

Ajax Load in jquery when hit a link from the menu

I'm new to Jquery and Ajax and have tried to solve a problem for over 1h now.
You can see the page here: http://smartcreations.se/test/test.html (If you click in the green area it have the effect I want it to have.)
Almost everything works as I want except i can't use the menu at the top to have the boxes to aminate and load the content as it does when you click on the green div.
So what I want from you guys is some input on how I can solve this, another point of view.
$(window).load(function(){
$(".box").click(function(){
$(this).animate({
top: '-50%'
}, 500, function() {
$(this).css('top', '150%');
$(this).appendTo('#container');
$(".loadinghere").load($(this).attr('name'));
});
$(this).next().animate({
top: '50%'
}, 500);
});
});
This is the closest I get, but the links not works at all.
You can just fake the click on the box by using e. g.
$("#box1").click();
but I would do it completely different:
About me!
Portraits
Weddings
Action
<script type='text/javascript'>
$(document).load(function(){
$("a.show").on("click", function(e){
e.preventDefault();
var click=$(this);
var link=click.attr("href")+"#box";
$("#box").after("<div id='box2' />").load(link, function(){
$(this).animate({
// your effect and stuff
});
// Rename the new box and throw out the old one
// Make sure, it is not visible
$("#box").remove();
$("#box2").attr("id","box");
});
});
});
</script>
The idea is, to use full html and extract just the html out of #box and insert it on your current page. You can also use the newer history api or anchors for this. The main advantage is, that you can still use your page if JS is turned of. (Miss)using name or other html attributes for this is a really bad practice. If you need to, use the data attribute.
(The code is untested and the quick and dirty way just to give you an idea.)

simulating a click on a <a>-element in javascript

for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
As you can see in the demo, in the bottom right corner there is an little arrow button that toggles a thumbnail bar. There is no option in the config files to automatically blend this in when opening the site.
So i guess i have to simulate a click on that button (the button is the tray-button, see HTML). I tried something like this:
<script>
$(function() {
$('#tray-button').click();
});
</script>
However, this doesnt seem to work in any browsers i tested.
Any idea?
$('#tray-arrow').click(function() {
// prepare an action here, maybe say goodbye.
//
// if #tray-arrow is button or link <a href=...>
// you can allow or disallow going to the link:
// return true; // accept action
// return false; // disallow
});
$('#tray-arrow').trigger('click'); // this is a simulation of click
Try this
$("#tray-arrow").live("click", function () {
// do something
});
I assume that you want to popup the thumbnail bar #thump-tray on page load.
Here's a way to do it:
locate the file supersized.shutter.js and find this code:
// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
return false;
}, function() {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
return false;
});
After it, add:
$(vars.tray_button).click();
Dont forget in your page (demo.html in the plugin), to change
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
to
<script type="text/javascript" src="theme/supersized.shutter.js"></script>
instead of using
$(function(){
//jquery magic magic
});
you culd try this witch will work your jquery magic after the full page is loaded (images etc)
$(window).load(function () {
// jquery magic
});
and to simulate a click you culd use // shuld be the same as $('#tray-arrow').click();
$('#tray-arrow').trigger('click',function(){ })
example:
$(window).load(function () {
$('#tray-arrow').trigger('click',function(){
alert('just been clicked!');
})
});
try
<script>
$(function() {
$('#tray-arrow').click();
});
</script>
Make sure that this code is after your carousel is initialized.
This looks like it's a problem of timing the trigger. The plugin also loads on document load, so maybe when you try to bind the event listener the element is not created yet.
Maybe you need to add the listener in something like the theme._init function
http://buildinternet.com/project/supersized/docs.html#theme-init
or somewhere similar.
A problem might be that your plugin detects whether the click has been initiated by a user (real mouse click), or through code (by using $('#id').click() method). If so, it's natural that you can't get any result from clicking the anchor element through code.
Check the source code of your plugin.

Categories

Resources