0

I have an iframe binded to mousemove.

That means this iframe follows the mouse cursor everywhere it goes.

But i need to hide/disable/make it invisible when it passes over a link.

I need to hide/disable the iframe when passing over a link otherwise the link become unclickable (since the iframe is over it).

It have to be general links, so i cant use an id, it must be related to general link tag

THE ANSWER: http://jsfiddle.net/ZPA5g/

I will hide the form in links, inputs, and images or whatever elements i need.

Read the comments on both answers to check its differences. Both works.

Lucas Matos
  • 1,112
  • 5
  • 25
  • 42
  • 1
    Could you tell us what your overall goal is? Sometimes it's best to rethink a whole solution. – idrumgood May 31 '12 at 20:05
  • @idrumgood, this the actual situation http://jsfiddle.net/YQ5zS/ as you can see theres a problem occuring. The form will still be shown when over form elements like input texts box, check box, etc.. So i cant use forms. Try to write something inside the input text box... If you replace `'a'` for `'input'` it will work in input elements. Im wondering if theres a way to instance both elements on the same code like `$('a','input').live...` but that does not work. – Lucas Matos May 31 '12 at 23:02
  • well, i just figure out the right way to use multiple selectors. =D `$('a, input').live...` Everything is PERFECT now.. You can check it here http://jsfiddle.net/ZPA5g/ – Lucas Matos May 31 '12 at 23:14

2 Answers2

1

Your code:

$(document).bind('mousemove', function(e){
$('#tail').css({
   left:  e.pageX - 20,
   top:   e.pageY - 18
});
});

Try this:

$(document).bind('mousemove', function(e){
$('#tail').css({
   left:  e.pageX - 20,
   top:   e.pageY - 20
});
});

+2px space over the cursor is enough.

Pethical
  • 1,472
  • 11
  • 18
  • ok but that does not answer my question. I need to hide/disable the iframe when passing over a link otherwise the link become unclickable (since the iframe is over it). – Lucas Matos May 31 '12 at 19:52
  • No, you don't need to hide the iframe. – Pethical May 31 '12 at 19:55
  • see, i need the iframe following the cursor, and the cursor MUST be inside the iframe. When the cursor moves over a link, the iframe must stay out of the link, hidden, disabled, invisible, or whatever, so i can actually click the link. – Lucas Matos May 31 '12 at 20:04
  • Ok. If must be inside the iframe, you can elevate the link: a{ z-index:10000; position:relative; } – Pethical May 31 '12 at 20:07
  • i could definitly use your solution BUT it makes my links to stay over my menus, if you can find a way to force my menu to stay at top, or a way to for the links to stay at back, i would appreciate that... that a look at this: http://jsfiddle.net/uMWaL/ my links are now infering my menus. Maybe using csss layers.. i tried but without success. thanks! – Lucas Matos May 31 '12 at 21:09
  • delete `a{z-index...`, and put `iframe{z-index:-1;}`. :D – Pethical May 31 '12 at 21:12
  • lol, good job man, i removed `a{z-index...` and added `z-index:-1;` at the css `tail {}`, because `iframe{}` was affecting all my iframes. its perfect now.. i will still try the @timbadu answer to see how it performs, but at the moment, i will accept yours. thanks! – Lucas Matos May 31 '12 at 21:25
  • this answer works in part, because it will only shows the iframe in a clear page area, so it will not be shown inside divs, even if the div doesnt have any links inside. So the iframe will be mostly shows on the clear side areas of page, usually outside the main website content div (left and right). It surelly can be used in others situations, like displaying side ads. Thank you. – Lucas Matos May 31 '12 at 22:31
1

Could this be fixed by using the .on() function?

http://api.jquery.com/on/

OK.

$('a').live("hover", function() {
  $('#tail').hide();
});

or.

$('a').live("mouseenter", function() {
  $('#tail').hide();
});
$('a').live("mouseout", function() {
  $('#tail').show();
});
Timbadu
  • 1,533
  • 1
  • 10
  • 16
  • (Or .live() if you're JQuery pre-1.7) – Timbadu May 31 '12 at 19:54
  • maybe, i dont know, im new into that jquery thing. Can someone try it pls? – Lucas Matos May 31 '12 at 20:00
  • This answer is exactly what i was looking for. Clean and simple jquery solution; It will show the iframe everywhere in the page, even inside divs. Except over links. Exactly what i was looking for. If you want to show the iframe only at clear page side areas, to display ads for exemple, use the @Pethical solution. THank you. – Lucas Matos May 31 '12 at 22:35
  • Theres a problem occuring. Just figured it out, sorry. The form will still be shown when over form elements like input texts box, check box, etc.. So i cant use forms. Anyway to fix that? Try to write something inside the input text box... http://jsfiddle.net/YQ5zS/ – Lucas Matos May 31 '12 at 22:50
  • i just figure out the right way to use multiple selectors. =D `$('a, input').live...` Everything is PERFECT now.. You can check it here jsfiddle.net/ZPA5g – Lucas Matos Jun 01 '12 at 00:13