I have a little div stored in $tip which I want to display at the user's click position, when they hit a certain link.
This is what I'm doing, it's part of a plugin where $this is a dynamically created known object:
$this.children('.menu').children('.details').bind('click', function(e){
$tip = $('#resizetip');
tiptext = "some text for my sweet little tip";
$tip.css('top',e.clientY);
$tip.css('left',e.clientX);
$tip.html(tiptext);
$tip.show();
});
The tip shows up where expected, just fine in Chrome and FF but I don't know why it's not working in IE8 and even in IE9. I tried console.log($tip.html()); and it gave the expected output, so I know it's there somewhere. I tried to output the coordinates, and it was fine.
Then I tried $('#resizetip').show(); explicitly from the console, and it worked! It showed up, exactly where it should be. But why doesn't it work in the code? I tried adding another line of $tip.show(); just in case for some inexplicable reason the first one couldn't be fired, but that didn't help.
Edit
I've added an edit to the code to show where e is coming from, but I know that's not the problem because when I output e.clientX to console, the output is fine.
This is definitely a problem of "e" not being available. Check out this site for an explanation of this problem across browsers: http://www.quirksmode.org/js/events_properties.html
Basically you have to check if "e" exists and if not assign it with window.event:
function doSomething(e) {
if (!e) var e = window.event;
....
}
Most likely you need something similar to:
if (!e){
var e = window.event
}
near the top of your function. e may not be defined for IE, so you'll need to revert to window.event. You can read more here
clientX documentation for IE
Set some units and use pageX and pageY instead
$tip.css({
'top', e.pageY+ "px",
'left',e.pageX + "px"
);
Related
Please see the code below (very stripped back and not my full function). I've also got a fiddle that you can test it at: https://jsfiddle.net/glenn2223/uk7e7rwe/1/
var
hov = $("<div class=\"over\">I'm Over You</div>"),
box = $("<div>Result: WAITING</div>")
$("body").append(hov).append(box);
$("#MeHover").on('mouseleave', function(){
var d = new Date();
box.text("Result: " + hov.is(":hover").toString().toUpperCase() );
});
We have a div and div.over overlaps it slightly. When you move from div to div.over I want the function to return true.
In my full function: this stops it from hiding the div.over element.
Opening it in Chrome it works as expected. However, it's not in pretty much everything else (Tested in: Edge, IE11 and Firefox).
Okay so we've found out why it doesn't work the :hover was removed from .is() a while back.
Rather than changing this question to suit my findings I will ask another (saves confusion).
My New Question: Keep jQuery Appended Element Open When Hovering It
I can't understand why this function doesn't work properly on Edge.
function contactos(thi)
{
var contactos = document.getElementById('contactos');
window.scrollTo(0, contactos.offsetTop - 160 );
}
And this is the html
Contatos
I just tested window.scrollTo() on Edge and it works as expected.
The only thing that comes to mind is, maybe contactos doesn't exist or it doesn't have an offsetTop property. To debug it:
Go to Edge
Open developer tools (press F12)
In the Console tab, write document.getElementById('contactos')
If it prints something other that undefined, it exists.
Write document.getElementById('contactos').offsetTop
If it prints something other that undefined, it exists.
If you successfully reach the last point, it's because there is an problem somewhere else in the code. You might have to debug further.
Edit: You don't have an element with an id "contactos". You can do one of three things:
Since you're passing this to your function (function contactos(element)), you can just window.scrollTo(0, element.offsetTop - 160 );
Or, you first set var contactos = element, and keep the rest.
Or, better, set an id in the html element, like so: Contatos
Here's a snippet. Try making it a button.
function contactos(element)
{
window.scrollTo(0, element.offsetTop + 160);
}
<button onclick="contactos(this)">Contactos</button>
<!-- gibberish -->
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<p>Text added just to see movement</p>
So I got a little codepen. Everything works so far except a little thing. I got a <h1> and an <input>. When I type something in the text input, its value should get passed to the <h1> in realtime.
I tried to do that with a keyup function:
$('input[name=titleInput]').keyup(function(){
$('#title').text(this.value);
});
Something happens, but not what I want.When I type something in the text input, then delete it (with backspace) and re-enter something, only the first character gets passed to the title.Try it out on my codepen. Maybe it's just a stupid mistake of mine, but to me this behaviour is pretty weird.Thanks for your help in advance!EDIT:I am using text-fill-color, which may causes the problem.EDIT 2:A friend of mine tested it. It worked for her. She's using Chrome and the same version as me (58.0.3029.110 (official build) (64-Bit)).
Chrome does not update the content correctly. Such kind of bugs can always happen if you use vendor prefixed css properties, so you should avoid those.
You could hide the container before update, and then show it again with a timeout. This will trigger an update, but would also result in flickering.
$('input[name=titleInput]').keyup(function(){
$('.clipped').hide()
$('#title').text(this.value);
setTimeout(function() {
$('.clipped').show();
})
});
EDIT An alternative might be to use background-clip on the text and provide the inverted image yourself, but I right now don't have time to test that.
EDIT2 Based on the test of #TobiasGlaus the following code does solve the problem without flickering:
$('input[name=titleInput]').keyup(function(){
$('.clipped').hide().show(0)
$('#title').text(this.value);
});
This seems to be different to $('.clipped').hide().show() most likely it starts an animation with duration 0 and uses requestAnimationFrame which also triggers a redraw. To not relay on this jQuery behaviour, the code should be written as:
$('input[name=titleInput]').keyup(function(){
if( window.requestAnimationFrame ) {
$('.clipped').hide();
}
$('#title').text(this.value);
if( window.requestAnimationFrame ) {
window.requestAnimationFrame(function() {
$('.clipped').show();
})
}
});
i'd use the following lines:
$('input[name=titleInput]').bind('keypress paste', function() {
setTimeout(function() {
var value = $('input[name=titleInput]').val();
$('#title').text(value);
}, 0)
});
This will listen to the paste / keypress events, and will update the value on change.
I'm working on a HTML5 friendly drag and drop system and I've encountered another mystery that seems to make no sense...
The system is working in Edge - it's when I'm emulating IE8 that I encounter this latest problem.
I have a set of '.draggable' divs that get the following listener attached:
$(document).ready(function() {
$('#reset-button').click(resetDraggables);
if (!dragAndDropSupported()) {
var $draggables = $('.draggable');
$draggables.each( function (index) {
$(this).mousedown( jQueryStartDrag );
});
}
}
The draggables can be sent back to their original locations by hitting a 'reset' button. That all works fine.
The problem is - any divs that get sent back to their origins are no longer draggable. Even if I re-attach the listener in the reset function, it does not fire. Once again, this issue is only happening when I'm emulating IE8 and I don't remove the listener anywhere in my code.
function resetDraggables() {
if ( !$('#reset-button').hasClass('inactive') ) {
var $dropTargets = $('.drop-target');
$dropTargets.each(function (index) {
var draggableId = $(this).attr('data-contains');
var $originDraggable = $('#' + draggableId);
if ($originDraggable.attr('id')!=undefined) {
var $droppedDraggable = $(this).find('.draggable');
$droppedDraggable.remove();
$originDraggable.removeClass('inactive').addClass('draggable').attr('draggable', 'true').css('filter', 'alpha(opacity=100)').hide().fadeIn('fast');
$('#' + draggableId).mousedown( jQueryStartDrag );
$(this).removeClass('occupied').attr('data-contains', '');
$('#reset-button').addClass('inactive');
}
});
}
}
I've realised it's the $droppedDraggable.remove() line that's causing the problem. I'm not sure why a line to remove ONE object would remove the listener from another. The $droppedDraggable object was cloned from the other; Is that causing the issue?
Any ideas what might be going on?
OK, so I replaced the jQuery remove() lines with...
var droppedDraggable = document.getElementById('dropped-' + draggableId);
droppedDraggable.outerHTML = "";
...and that has done the trick. I'm guessing there must have been some hidden association made between the objects when one was cloned from the other and remove()ing one removed the mousedown listener from the other.
If anyone has a better theory, feel free to let me know, but this seems to have solved the problem.
Edit
I've just realised the above fixed the problem in IE8, but not in 9. Great! If anyone has any pointers on how NOT to include a bunch of browser-specific work arounds in my code, I'd be very keen to hear them. Thanks.
I have the following weird issue with the "loading gif" that I want to display in my search bar when the user hits enter. The code works on mozilla and ie 7 on the localhost but only on mozilla on my cpanel...
Do you have any clue?? Sorry if this looks obvious :)
here is the code, the path is dynamic but of course correct:
$('#searchField').focus(function(){
$(this).keypress(function(event) {
if ( event.which == 13 ) {
$(this).css('background-image', 'url("/dvt/public/images/ajaxLoader.gif")');
}
});
});
thanks a lot
Put this to get your event :
if (!event)
var event = window.event;
var code = event.which || event.keyCode;
It's different in IE and firefox
As far as your image, it seems to me that the URL to the image would be /images/ajaxLoader.gif as /dvt/public seems like a doc root path. With the image on your server, what URL do you put in the browser view it? Also, you can pull the double quotes out of the url() in the CSS.
For the event and keycode, change the name of your event parameter (try e for starters) to avoid collision with the global namespace, then use e.which, per the jQueryfn.keypress docs.