I'm experiencing a strange issue while using the jQuery version 1.11.3 .fadeOut() method.
It's used to briefly display a percentage when the user changes the zoom level of an image using the mouse wheel. It more or less works as expected, except that moving the mouse seems to halt the fade in mid-progress until the mousemove event is complete. Examples depicting the relevant portions of my code are shown below.
var value = 50;
$('#outer').bind('mousemove', function(e) {
//Do something
console.log('bind outer');
});
$('#inner').bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(e) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
$('#number').replaceWith("<span id='number' class='number'>" + Math.round(value) + "%</span>");
$('#number').delay(300).fadeOut("slow");
//Do something
console.log(value);
});
#outer {
height: 300px;
width: 300px;
border: 1px solid red;
}
#inner {
height: 150px;
width: 300px;
border: 1px solid green;
}
#number {
border: 1px solid blue;
}
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="outer">
<div id="inner">
<span id="number">50</span>
</div>
</div>
Per the usual disclaimer that seems to be required these days, yes I have searched for answers. I also know that the jQuery .bind() method has been depreciated but it's not an issue because I may eventually port this code to pure JavaScript for better processing speed and and to eliminate the dependency on jQuery.
Update: It looks like this may be a browser issue. I tested it in Firefox 41.0, Chrome 45.0, Opera 32.0, Safari 5.1.7, and the issue seems to be specific to Firefox. I also tested it in Internet Explorer 8 (for XP users), but that is an entirely different animal.
Related
I have two questions:
I have an assignment, where I populate a square grid with a lot of small square divs (think pixels). They should not have any margins - and they don't, as long as there are no more of them than 51 in a row. Then suddenly they get margins, and overflow my grid (a wrapper div). I've reset all the margins in the css to 0, and even used a negative margin, and it still happens. Why is that?
Second thing is some inconsistency when calling a JS function on a button click. It goes like this: when I use jQuery to bind that function to a button (the on() function), it works in JSfiddle, but IT DOES NOT WORK in the browser (I use chromium). I have to use onclick in the button's html tags for it to work. Again, why is that?
Here's the code parts I think could be the problem:
function reset() {
var new_size = prompt('Enter a new amount of squares in a row');
populate(new_size);
}
$('#reset').on('click', function () {
reset();
})
This should make the reset work on the button, and it does work in jsfiddle, but not in the browser.
This works for the browser:
<input id="reset" onclick='reset();' type="submit" value="Reset">
Here's some css:
* {
margin-bottom: -4px;
}
.wrapper {
width: 960px;
height: 960px;
margin: 0px auto;
border-style: solid;
border-width: 1px;
}
.square {
border-style: none;
border-width: 1px;
display: inline-block;
background-color: white;
}
When I tried to reset margins to 0, it didn't work either, I had to use negative one.
Thanks.
Hi try this: putting a non-breaking-space ( ) in the divs.... so they are not empty.
$('.wrapper').append("<div class='square'> </div>");
It works...
I am not sure why... I think is a rendering problem in some browsers like IE...
How can i preserve appearance of the dragged A element when using 'draggable' html5 attribute. On some browsers (Safari & Chrome) when dragging anchor, dragged helper is replaced with browser native implementation of dragged element as seen on the screenshots:
When dragging DIV
When dragging A
HTML
<div class="draggable">Draggable DIV</div>
Draggable A
CSS
$('.draggable').attr('draggable', true);
Here is the quick JSBin i assembled to demonstrate this issue http://jsbin.com/pihayeceza/1/edit
Thanks
I'm able to preserve the appearance of the dragged element by using DataTransfer.setDragImage. If I add the following code to the JavaScript in your jsbin instance, it work for me on Firefox, Chrome and Safari:
$('a.draggable').on('dragstart', function (ev) {
var dt = ev.originalEvent.dataTransfer;
// In IE browsers, setDragImage does not exist. However, the issue we are
// trying to fix does not happen in these broswers. So if setDragImage is not
// available, then just don't do anything.
if (dt.setDragImage)
dt.setDragImage(ev.target, 0, 0);
});
The dataTransfer field of the event has a DataTransfer object associated with the drag operation. You have to fetch it from the original DOM Event rather than from the jQuery Event wrapper, so ev.originalEvent.dataTransfer.
For IE browsers, setDragImage is not present but the problem reported in the question does not occur in the first place so if setDragImage is absent, we just don't call it.
A bin with the updated code.
This problem happens because the default behavior of dragging a link with an href attribute is to create an image containing the url to be used as the drag placeholder. You can fix this by removing the href attribute, however, to get around that without having to remove the href attribute you can use mousedown/up event handlers to remove the attribute and then re-add it, leaving the anchors clickable*.
$('.draggable').attr('draggable', true).on('mousedown', function () {
if ($(this).is('a')) {
$(this).data('href', this.href);
$(this).removeAttr('href');
}
}).on('mouseup', function () {
if ($(this).is('a')) {
$(this).attr('href', $(this).data('href'));
}
}).on('click', function () {
console.log(this.href);
});
.draggable {
margin: 10px;
display: block;
width: 200px;
background: #fafafa;
color: #333;
text-decoration: none;
height: 40px;
border: 1px solid #eaeaea;
line-height: 40px;
text-align: center;
cursor: move;
border-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="draggable">Draggable DIV</div>
Draggable A
*Note: stack snippets doesn't let you follow the link.
Wrap your anchor tags with a div and set draggable="false" on the anchor tag.
<div class="draggable">
Draggable A
</div>
You will need additional styling to prevent the button/link from looking blue and underlined.
.draggable a {
color: inherit;
text-decoration: inherit;
}
modified your jsbin here
http://jsbin.com/rebayif/edit
I'm facing an issue with the scrollTo function when the body has an dir=rtl attribute. here is a jsfiddle for my case.
HTML:
window.scrollTo(-200, 0);
<html>
<head>
</head>
<body dir="rtl">
<div width="100%" style="width: 3000px; height:200px; overflow: hidden">
<div style="width: 1000px; height: 100px; border: 2px solid black; display: inline-block"></div>
<div style="width: 1000px; height: 100px; border: 2px solid red; display: inline-block"></div>
</div>
<script type="text/javascript">
window.scrollTo(-200, 0);
</script>
</body>
</html>
So if I pass a positive value for the xpos parameter, it works on IE (sort of) naturally, it scrolls from the right side of the screen for an amount of 200px. but on chrome and firefox it doesn't work, I have to pass a negative value for the scrolling to work as expected.
My question, is how I can handle this case in my code, should I do browser sniffing? or is there a better way? some feature I can test if its supported?
as othree explains in his jQuery rtl scroll type plugin there are 3 main implementations for horizontal scrolling when dir is set to rtl: WebKit, Firefox/Opera and IE
the difference between these implementations is as follows:
because you can't use jQuery I've modified othree code in this plunker and it works fine in chrome, firefox and IE11
This snippet worked for me on IE and Chrome
http://jsfiddle.net/05w4tr0g/4/
var m = -1;
var pos = window.pageXOffset;
window.scrollTo(0,0);
window.scrollTo(1, 0);
if (-1 == window.pageXOffset) m = 1;
window.scrollTo(pos, 0);
window.scrollTo(m*200, 0);
Hope that helps. The idea is that that the pageXOffset is with IE and Chrome always negative if there was scrolling. The snippet will cause a little flicker because of the test scroll to x=0 and x=-1.
You could store the m value on a page load and reuse it in a wrapper function for scrollTo (or scrollBy for that matter). You could also overload the two methods and keep it all in the window context.
I have a situation where javascript code causes DOM/style changes that in turn should cause the page to render differently due to a change in the element that is under the mouse. A simple example is:
<style type="text/css">
#one {
position: relative;
}
#two {
background-color: green;
display: none;
}
#one:hover #two {
display: block;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$('#one').on('click', function() {
$('#one').css('left', '100px');
});
});
</script>
<div id="one">One
<div id="two">Foo</div>
</div>
See http://jsfiddle.net/Lq7Ac/1/ - when you click "One" the elements move so that the ":hover" styling should no longer be applied, but they don't actually get updated until you move the mouse after the click.
Is there something I can do in the "click" binding to recalculate/re-render immediately?
Update: This appears to only affect chrome on linux. So possibly a bug in chrome. Still, if anyone has ideas about working around this it would be great to hear them.
Could try doing it with css classes, instead of the :hover selector.
http://jsfiddle.net/4tfYN/
I'm developing a web application where users can learn Spanish by putting words together like pieces of a puzzle. I've created some JavaScript to make the puzzle pieces "draggable" (I know there is a new D&D API with HTML5, but the way I did it even works on browsers that don't support that).
Anyway, everything works perfectly in IE (even my old IE7) and Firefox, but I ran into an interesting snag with Google Chrome: each piece could only be dragged once; then they became "locked" (unable to move).
So my question is, is there something that needs to be done differently for this to be compatible with Chrome? I was thinking of maybe having the "drop" script refresh the browser every time the user drops a piece, but that would probably be a pain for users with slow connections... anyway I'm sure there's something I'm overlooking, but I'm not sure what it could be. Here's my code:
<html>
<head>
<title> Making Sense out o Spanish </title>
<style>
#div1, #div2{
position: absolute;
left: 100px; top: 100px;
width: 80px; height: 60px;
background-color: yellow;
}
#div3, #div4{
position: absolute;
left: 200px; top: 200px;
width: 80px; height: 60px;
background-color: green;
}
</style>
<script>
var activePiece = "nothing";
function move(id,x,y){
if (activePiece == id){
var element = document.getElementById(id);
element.style.left = x-40 + "px";
element.style.top = y-30 + "px";
}
}
function go(id){
activePiece = id;
var element = document.getElementById(id);
element.style.zIndex = "1";
}
function stop(id){
activePiece = "nothing";
var element = document.getElementById(id);
element.style.zIndex = "-1";
}
</script>
</head>
<body bgcolor="blue" onmousemove="update(event.clientX,event.clientY);">
<div id="div1" onmousedown="go('div1');" onmouseup="stop('div1');" onmousemove="move('div1',event.clientX,event.clientY);">Quiero</div>
<div id="div2" onmousedown="go('div2');" onmouseup="stop('div2');" onmousemove="move('div2',event.clientX,event.clientY);">Necesito</div>
<div id="div3" onmousedown="go('div3');" onmouseup="stop('div3');" onmousemove="move('div3',event.clientX,event.clientY);">bailar</div>
<div id="div4" onmousedown="go('div4');" onmouseup="stop('div4');" onmousemove="move('div4',event.clientX,event.clientY);">trabajar</div>
</body>
</html>
I spent some time looking into this, and it seems the "short answer is, the event listener is the solution. I found this site:
JavaScript mouse events tutorial
And they have a demo that works exactly like mine, EXCEPT that they added the event functions in the script instead of the individual div elements. I haven't had the chance to do try it in my code yet, but their demo works fine in Chrome as well as Firefox and IE.