How to change focus onmousedown with jQuery? - javascript

I have the following situation:
There are two DIV elements that are positioned absolute at the same position and with the same dimensions.
The div element a has a z-index of 10, the div element b a z-index of 20.
Div element a is draggable, but div element b is not draggable.
Now I would like to change the focus after a mousedown element. If the user presses the mouse button on div element b, the focus should be on div element a so that it could be dragged away without having to stop pressing the mouse button.
Is that possible and how can I realise it?
My first approach does not work:
<style type="text/css">
#elementa{position:absolute;top:0;left:0;width:50px;height:50px;z-index: 10;}
#elementb{position:absolute;top:0;left:0;width:50px;height:50px;z-index: 20;}
</style>
<div id="elementa"></div>
<div id="elementb"></div>
$('#elementb').mousedown (function(){
$('#elementb').unbind("mousemove");
$('#elementb').blur();
$('#elementb').css({'display': 'none'});
$( '#elementa').focus();
});

I guess all you need is to show some temporary div over some hidden gems behind.
and when user clicks on it show the gem and make it draggable as well.
This is what i did with this. may be this could help.
This one works like charm...
A will instantly become draggable...
find my code here
var b = $("#b");
$(".containerTest").on("mousedown", function(evnt){
b.css({'display': 'none'});
});
https://jsfiddle.net/Peripona/7kpge52e/

$( '#elementb').mousedown (function(){
$(this).mousemove(function(){
$( document ).trigger("mousemove");
});
$( document ).mousemove(function(e){
console.log(e.clientX,e.clientY);
$( '#elementa').css({"left":e.clientX,"top":e.clientY});
});
});
DEMO

Related

Display a Div like a ToolTip - Div Needs to be Positioned Next to Click Element

linkThis should be simple as I have it 95% done and working. The issue I am having is the popover will pop right next to where you click on the element vs. just next to it. So if I click on the "L" in the example below - the popover covers the "nk 1". I want it to be right next to the 1 and also respect the height location of it too. As clicking on the top, middle, or bottom of the element changes the positioning also.
Here is a Fiddle to show it in action - https://jsfiddle.net/pfcsc93t/2/
<div class="popover-link"><a link that toggles div display>Link 1</a></div>
<div class="popover-link"><a link that toggles div display>Link 2</a></div>
<div class="popover-link"><a link that toggles div display>Link 3</a></div>
etc...
Popover that has dynamic content feed based on clicked link - only one exist at a time:
<div id="popover">popover content</div>
Current jQuery:
$( ".popover-link").click( function(event) {
$("#popover").removeClass('hide').css( {position:"absolute", top:event.pageY, left: event.pageX});
});
Instead of using the mouse x and y position, you'll want to get the offset of the clicked element:
$( ".popover-link a").click( function(event) {
var pos = $(this).offset();
$("#popover").removeClass('hide').offset({ top:pos.top, left:pos.left + $(this).width()});
});
Note that the click is attached to the anchor element ( selector .popover-link a), otherwise this would point to the div and use its width instead of the anchor/text width.
Fiddle

On mouse hover show a div like jQuery Tooltip

Let consider fallowing scenario
<p>jhony</p>
<p>ram</p>
<p>lilly</p>
<div id="about"></div>
<script>
$(function() {
$('p').hover(function() {
$('#about').show();
}, function() {
$('#about').hide();
});
});
Know on mouse hover on the p tag a div will showed,But it is taking always a fixed/absolute position,But I want to show it with respect to hovering element.
Example:
If I place mouse on 'jhony' then about div should be shown left to it,
If I place mouse on 'ram' then about div should be shown left to it,
If I place mouse on 'lilly' then about div should be shown left to it.
Finally it should work like jQuery Tooltip.
Why u use jQuery for it? U can use only css
p:hover span{display : block}
or if you want use jQuery/js you must calculate height from top of window to your p and set it for your div:
$(function() {
$('p').hover(function() { $('#about').css('top',this.offset().top
)}

Dragging a div out from underneath multiple other divs

I have been trying to create a test case for a webapplication we are making and I am quite close to a solution, but the final part has me stumped...
We need to be able to drag divs around (no problem there), but some of the divs need to be locked in place (again, no problem).
The problem arises when a draggable div is stuck underneath a non draggable div. I have fixed this somewhat, but it only works if there is only ONE non draggable div on top of the draggable one.The moment it overlaps with another non draggable div, it won't work. Which is weird, as I am correctly accessing the draggable div.
my HTML:
<body>
<div id="div1" class="draggable"></div>
<div id="div2" class="locked"></div>
<div id="div3" class="locked"></div>
</body>
And here is my javascript:
<script>
$(document).ready(function () {
$(document).mousemove(function (e) {
window.mouseXPos = e.pageX;
window.mouseYPos = e.pageY;
});
});
$(function () {
$(".draggable").draggable();
});
$('.locked').ready(function () {
$('.locked').mousedown(function (e) {
var layer = e.target;
$("#data").html($("#data").html() + " " + layer.id);
$(layer).addClass("hide");
var lowerLayer = document.elementFromPoint(window.mouseXPos, window.mouseYPos);
if ($(lowerLayer).hasClass("locked")) {
$(lowerLayer).mousedown();
}
else if ($(lowerLayer).hasClass("draggable")) {
$("#data").html($("#data").html() + " " + lowerLayer.id);
$(lowerLayer).trigger(e);
}
$(layer).removeClass("hide");
});
});
</script>
Okay, so the idea is this, I use jquery to set everything with the class "draggable" to be able to be dragged. The body gets a mousemove event to store the current mouse position. While all the elements with the "locked" class, will fire a mousedown event. In this event, I hide the element I am clicking on by adding a class called "hide" (which contains only a display: none).
At this point, the element underneath the clicked element is visible. Using the elementFromPoint combined with my stored mouse positions, I grab the lower element.
By then checking if it is "locked" or "draggable" I can determine what this element should do. If it's locked, I force it to execute a mousedown event. If it's draggable, I use the .trigger(e) to start dragging.
I then remove the "hide" class again, so that the element does not stay hidden.
Using the div called data, I can see that the function does indeed reach the draggable div. However, if both locked divs are on top of it, it will not start dragging. If there is only one locked div on top, I can then start dragging the draggable div.
In my opinion, this should work without any problems. I mean, it works with only 1 overlapping div, and even with 2 (or more), I am still triggering the code in the else if statement.
What am I missing/overlooking?
-Ferdy
I rewrote your script slightly differently and it seems to work. The problem might be that you're using e.target, but i'm not really sure. Here's what i did:
$(".draggable").draggable();
$(".locked").mousedown(function(e) {
var layer = $(this);
layer.addClass("hide");
var lowerLayer = $(document.elementFromPoint(e.pageX, e.pageY));
if (lowerLayer.hasClass("draggable") || lowerLayer.hasClass("locked"))
lowerLayer.trigger(e);
layer.removeClass("hide");
});
http://jsfiddle.net/AXycq/

Fast moving mouse never triggers mouseleave event

When mousing over certain buttons on my site, I'd like for tooltips to appear that instruct users. Basically, whenever a button with the 'has_tooltip' class is moused over, a tooltip is attached.
$('.has_tooltip').live({
mouseenter : function(e) {
if($('#tooltip_container').length > 0){
$('#tooltip_container').remove();
}
var $t = $(this), text = $t.attr('rel'), left = e.pageX-25, top = e.pageY-25;
if($t.attr('rev') === '1') {
text += ' <span class="tooltip_warning">You must be logged in to make use of this.</span>'
}
$tooltip = $('<div id="tooltip_container">'+text+'</div>');
$('body').prepend($tooltip);
$tooltip.css({
left: left+'px',
top: top+'px'
});
},
});
And when a user's cursor leaves the newly created tooltip box, it should disappear
$('#tooltip_container').live({
mouseleave : function(e){
$(this).remove();
}
});
However, a fast moving mouse over a button with the 'has_tooltip' class adds the tooltip, but moves too quickly for the mouseleave event to trigger.
Anyone have some tips on how I can fix this?
'If the mouse does not enter the tooltip (the tooltip appears below the mouse), the browser may not trigger the mouseleave event. You may want to add an additional selector. Try this:
$('#tooltip_container','.has_tooltip').live({
mouseleave : function(e){
$('#tooltip_container').remove();
}
});
I would highly recommend removing the HTML from your tooltip method though... try creating an empty div and add the tooltip text and positioning when you go to show it -- try to add as little to the DOM as possible (create a hidden div for most of the tooltip HTML and only change the actual text content of it as necessary).
Ideally, your mouseenter should simply replace the tooltip text and show the div with correct positioning. The mouseleave event should just hide() the tooltip div (not remove it from the DOM just to be created and added again later).

Always scroll a div element and not page itself

I have a page layout with an inner <div id="content"> element which contains the important stuff on the page. The important part about the design is:
#content {
height: 300px;
width: 500px;
overflow: scroll;
}
Now when the containing text is larger than 300px, I need to be able to scroll it. Is it possible to scroll the <div>, even when the mouse is not hovering the element (arrow keys should also work)?
Note that I don’t want to disable the ‘global’ scrolling: There should be two scrollbars on the page, the global scrollbar and the scrollbar for the <div>.
The only thing that changes is that the inner <div> should always scroll unless it can’t be moved anymore (in which case the page should start scrolling).
Is this possible to achieve somehow?
Edit
I think the problem was a bit confusing, so I’ll append a sequence of how I would like it to work. (Khez already supplied a proof-of-concept.)
The first image is how the page looks when opened.
Now, the mouse sits in the indicated position and scrolls and what should happen is that
First the inner div scrolls its content (Fig. 2)
The inner div has finished scrolling (Fig. 3)
The body element scrolls so that the div itself gets moved. (Fig. 4)
Hope it is a bit clearer now.
(Image thanks to gomockingbird.com)
I don't think that is possible to achieve without scripting it, which could be messy, considering the numerous events which scroll an element (click, scrollwheel, down arrow, space bar).
An option could be using the jQuery scroll plugin. I know it has the availability to create scrollbars on an div. The only thing you need to add yourself is the logic to catch the events when keyboard buttons are pressed. Just check out the keycodes for the arrow keys and make the div scroll down.
The plugin can be found here.
You can use it like this;
<script type="text/javascript">
// append scrollbar to all DOM nodes with class css-scrollbar
$(function(){
$('.css-scrollbar').scrollbar();
})
</script>
here is a solution that might work: (fiddle: http://jsfiddle.net/maniator/9sb2a/)
var last_scroll = -1;
$(window).scroll(function(e){
if($('#content').scrollTop());
var scroll = $('#view').data('scroll');
if(scroll == undefined){
$('#content').data('scroll', 5);
scroll = $('#content').data('scroll');
}
else {
$('#content').data('scroll', scroll + 5);
scroll = $('#view').data('scroll');
}
/*
console.log({
'window scroll':$('window').scrollTop(),
'scroll var': scroll,
'view scroll':$('#view').scrollTop(),
'view height':$('#view').height(),
'ls': last_scroll
});
//*/
if(last_scroll != $('#content').scrollTop()){ //check for new scroll
last_scroll = $('#content').scrollTop()
$('#content').scrollTop($('#content').scrollTop() + scroll);
$(this).scrollTop(0);
//console.log(e, 'scrolling');
}
})
It is a bit buggy but it is a start :-)
The only way I believe you can achieve this is through the use of frames.
Frames - W3Schools Reference
If you just want to have a fixed positioned "div" and scroll only it, maybe you could use a trick like:
http://jsfiddle.net/3cpvT/
Scrolling with mouse wheel and all kinds of keys works as expected. Only thing is that the scrollbar is on the document body only.
I found a solution... Not perfect... http://jsfiddle.net/fGjUD/6/.
CSS:
body.noscroll {
position: fixed;
overflow-y: scroll;
width: 100%;
}
JS (jQuery):
if ($("body").height() > $(window).height()) {
var top;
$('#scrolldiv').mouseenter(function() {
top = $(window).scrollTop();
$('body').addClass('noscroll').css({top: -top + 'px'});
}).mouseleave(function() {
$('body').removeClass('noscroll');
$(window).scrollTop(top);
});
}
The text wrapping problem can be solved putting the whole content in fixed-width div. There is another bug for IE browser. If the page has center-aligned backgrond, it will move left-right on mouseenter on #scrolldiv

Categories