Consider the following example, as demonstrated here: http://jsfiddle.net/Up38n/
<div contenteditable="true" style="background-color: #ccf;">
<p>This div is editable.</p>
</div>
<div style="background-color: #ccf; width: 2000px;">
<p>This is a wide div that causes scrollbars.</p>
</div>
Click to edit the first paragraph, and then hold down the right arrow key. Initially the text cursor will move to the right as expected. However, when the text cursor hits the end of the paragraph, the whole page will scroll to the right and you will no longer be able to see what you're editing.
Is there a way to prevent this behavior so that the arrow keys don't scroll the page while editing a div?
You can temporarily disable the scroll for the document:
$(document).on('scroll touchmove mousewheel', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
And when done, enable it again:
$(document).unbind('scroll touchmove mousewheel');
Related
I want to implement a simple slide up and slide down mechanism for revealing content on the press of a button. Using the out of the box jquery functions slideUp() and slideDown() squishes the content. I want the slide mechanism to be similar to the one used in twitter (in the timeline when you click on a tweet, more info and options slide down). There the content does not get squished. Instead the bottom border seamlessly moves over the content thus sliding up without squishing. Any pointers on how to implement this?
Edit:
The content to be slided into and out of visibility is inside a div
<div id='container'>
<div id='slider'>
<div> other content </div>
</div>
<div id='button'>
Click to slide
</div>
</div>
I listen to the click event of the 'button' div
$('.button').click(function(){
if($('.slider').is(":visible"))
{
$('.slider').slideUp();
}
else { $('.slider').slideDown(); }
});
This is a basic slider. The contents inside the 'slider' div get squished and distorted when animating.
try this demo
$(function(){
$('#button').click(function(){
if($('#slider').is(":visible"))
{
$('#slider').slideUp();
}
else { $('#slider').slideDown(); }
});
});
I've read other questions and answers about this issue but they didn't work for me, maybe I am missing something or my example is slightly different, I don't know. Anyway, I have a div with some text and a link inside and I would like to create a new div when the user hovers over this first div. The problem is that, when I am over the first div, the second one fades in and out continuously, even if I don't leave the first div with the mouse.
Here is the HTML code:
<div id="content">
<h1>Portfolio</h1>
<div id="web">
<p>Web apps</p>
<a href="#">
First link
</a>
</div>
<div id="commentweb">
<p>The text that I want to show</p>
</div>
</div>
and this is the jQuery:
$(document).ready(function() {
$("#web").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
$("#commentweb").hide();
$("#web").hover(
function () {
$(this).children("a").children("img").attr("src","2.png");
$(this).css("background-color","#ecf5fb");
$(this).css( 'cursor', 'pointer' );
$(this).css('border','1px solid #378ac4');
$(this).children("p").css("opacity","1.0");
$('#commentweb').stop(true, true).fadeIn();
},
function () {
$(this).children("a").children("img").attr("src","1.png");
$(this).children("p").css("opacity","0.5");
$(this).css("background-color","#e8e3e3");
$(this).css('border','1px solid grey');
$('#commentweb').stop(true, true).fadeOut();
}
);
});
What should I do to have the fade in animation start when I am over #web and the fade out animation when I leave that div, without flickering (i.e. constant fadeIn and fadeOut)?
I have added a fiddle to show you the problem: http://jsfiddle.net/mMB3F/
It basically happens when I hover on the text.
This problem occurs because your comment div is inside the div that you are assigning the hover event. Note that the flickring occurs when you enter the mouse pointer in the highlighted area (red) showed in the image below (related to the comment div).
Take a look in this solution: http://jsfiddle.net/davidbuzatto/mMB3F/1/
The comment div has now a absolute positioning. When the mouse enters, the comment div will be showed next to the pointer. Off course, now you will need to change the code to fit your needs. Another way of doing this is to set an div container that encloses the #web div and to put another div next to it, seting them to float. Inside the new div you insert the div with the comment.
Update
My other answer was a little too grandiose, You just have to float your other div
#commentweb {float:left}
http://jsfiddle.net/mMB3F/5/
It needs to be asynchronous, the stop() is what causes it to blink, but you dont need a stop if you just wait for the fade to complete before you assign the event handlers.
http://jsfiddle.net/u7Q9P/1/
use jquery .mouseenter() and .mouseleave() to avoid that.
that way, you dont have to reposition anything in your css.
see my answer here for more detail
i'm trying to make a div drop down when someone hovers over a link. Inside the div is a login form. The following code works only in that if i hover over the link the div does appear. However when i move the mouse from the link down over the div, the div immediately retracts. Please see:
jQuery(document).ready(function() {
jQuery('.slidedown').hide();
jQuery('a.top-link-cart').hover( function(){ // enter animation
jQuery('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
jQuery('.slidedown').mouseout( function() {
setTimeout( function(){
jQuery('.slidedown').stop(true,true).animate( {
height: '0px'}, 600, function(){});}, 200 ); // setTimeout ends here
}); // mouseout ends here
});
});
All i'm trying to achieve is have the div a) stay open if the user mouses from the link to the div b)close if the user moves mouse away from link but not into div and c) close if user moves mouse out of div. I thought the .mouseout function would keep the div open so that i can at least move my mouse over it but it isn't working. Any ideas? I'd be very grateful this has been a headache to me for a week now. Thanks.
You should not use .hover but .mouseover() instead for your first method.
You could wrap your link and the div that does the animation in another div and then apply the hover to the parent div instead of the link. This way you will still validate. For example:
<div class="whatever">
<a class="top-link-cart">Show login form</a>
<div class="slidedown">form html goes here</div>
</div>
and the javascript would be:
jQuery(document).ready(function(){
jQuery('.slidedown').hide();
jQuery('.whatever').hover(function(){//to show
jQuery('.slidedown').show('effect', duration in millisecs);
}, function(){//to hide
jQuery('.slidedown').hide('effect', duration in millisecs);
});
});
this uses the jQueryUI for the animation effects, but you could use the .slideDown() and .slideUp() methods as well if all you need is the div to slide up or down
You need to nest your div.slidedown inside the a.top-link-cart:
<a class="top-link-cart">Show login form
<div class="slidedown">
The login form HTML
</div>
</a>
Ignoring standards (block elements like <div> tags shouldn't really be nested inside inline elements like <a> tags), this will work because when the div.slidedown expands, so does the parent <a>.
That way, the mouseout event won't be triggered until the user's mouse leaves the <a>.
I have a jquery ui draggable div, and the HTML contents do not behave normally because of the draggable.
<div id="popup"> <!-- this popup is draggable -->
This text is not selectable. When I try to select it, the popup div is dragged.
<div style="overflow:auto; height:50px">
Lots of text here, vertical scrollbar appears. But clicking the scrollbars don't work (doesn't scroll the content). Each click (mousedown-mouseup) is considered "dragging".
</div>
</div>
How do I prevent the draggable ui to override the normal browser behavior for HTML elements?
You can disable dragging from the inner <div> like this:
$("#popup div").bind('mousedown mouseup', function(e) {
e.stopPropagation();
});
event.stopPrpagation() stops a click on that inner <div> from bubbling up to the outer <div> that has the drag events bound to it. Since the event will never get there, those drag event handlers won't interfere. You can run this code before or after creating the draggable, it'll work either way.
Try add your div unselectable attribute=off:
<div id="popup" unselectable="off">
...
and css:
[unselectable=off] {
-moz-user-select : all;
-khtml-user-select : all;
user-select : all;
}
I'm not tested in jQuerry.UI, but this is my workaround in extJs and Dojo...
Is there an alternative method or a trick to the hover method which can trigger a function when the cursor moves from one div to another as the user scrolls the page.
I have sort of got it working using some javascript (jQuery) on the hover event of the current post div. However, I've noticed the hover event only triggers when the mouse is actually moved. If the page is scrolled using the keyboard (page) up/down it does not trigger.
(I can note that soup.io for instance has found a way to get this working, but I can't find how they do it)
Unfortunately, it's quite complicated; you can no longer rely on the onMouseOver event - the only event that triggers when a page is scrolled is onScroll. The steps involved:
Go through elements, storing each of their widths, heights and offsets (distance from left/top of screen) in an array.
When the onScroll event is triggered check the last known position of the cursor against all chosen elements (go through the array) - if the cursor resides over one of the elements then call the handler.
Quick (unreliable) prototype: http://pastie.org/507589
Do you have a sample? I'm guessing that the layout of the elements on the page are blocking the mouseover event. My simple example below works as you described it should. With the cursor at the top of the page and using keyboard navigation, the mouseover events are fired.
<html>
<body>
<script>
function log(text)
{
document.getElementById('logger').value += text + "\n";
}
</script>
<div id="div1" style="background: yellow; height: 100px;margin-top: 100px" onmouseover="log('mouseover div1');">
div1
</div>
<textarea id="logger" cols="60" rows="12" style="float:right;"></textarea>
<div id="div2" style="background: red; height: 1000px" onmouseover="log('mouseover div2');">
div2
</div>
</body>
</html>
You're looking for the mousewheel event.
document.getElementById('myDiv').onmousewheel = function() {
alert('You win!');
alert('Seriously! It's just like that');
};
I only tested this in Chrome (webkit)