On mouse hover show a div like jQuery Tooltip - javascript

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
)}

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

How to change focus onmousedown with jQuery?

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

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/

Reveal/Collapse Text

The result in jsfiddle may not work, but it does in my documents.
http://jsfiddle.net/hXzrA/
What is working is that my text is hidden, and when I click on Read More..., it reveals more of the text in the paragraph. If I click on Read More... again it collapses the text in the paragraph back to the normal state.
What I having been trying to figure out is:
a mouse over the Read More.... link. Kinda like a Blue color highlight so that people know it's mouseover.
When the text is revealed, Read More... text should disappear and at the bottom of the now revealed text, should be Collapse text... (same blue highlight on mouseover). The Collapse should restore the text back to it's collapse state.
How do I achieve this in:
$(document).ready(function(){
var open = false;
$('.reveal').click(function() {
if (open) {
$(this).animate({height:'20px'});
}
else {
$(this).animate({height:'100%'});
}
open = !open;
});
});
Also, if you are able to get the text to implode/explode on reveal/hide, that would be so great too. I have been trying and trying, but couldn't get it to do that.
Take a look how simplified it could be at this fiddle: http://jsfiddle.net/syEM3/
Javascript:
$('.reveal').click(function() {
$(this).next().slideToggle();
});
EDIT:
For the effect of reveal / collapse:
$('.reveal').click(function() {
$(this).slideUp(100).next().slideToggle();
$(".collapse").slideDown(100);
});
$('.collapse').click(function() {
$(this).slideUp(100).prev().slideToggle();
$(".reveal").slideDown(100);
});
You can not animate to 100%, you need to calculate element's original height first than manipulate the height.
Here is working jsFiddle.
var orgHeight = parseInt($('.reveal').css('height'));
$('.reveal').css('height','20px');
$('.reveal').click(function() {
var target = parseInt($(this).css('height'));
if (target != orgHeight) {
$(this).animate({'height':orgHeight+'px'},500);
}else{
$(this).animate({'height':'20px'},500);
}
});
For hover effect, just use CSS:
.readmore:hover, .readless:hover {
text-shadow: 2px 2px 3px blue;
}
As for the separate links, I think it's easier just to put them in your markup:
<a class="readmore">Click Here to READ MORE...</a>
TEXT TEXT TEXT
<a class="readless">Collapse Text...</a>
Then just .show/.hide .readmore/.readless as appropriate based on open.
http://jsfiddle.net/ExplosionPIlls/hXzrA/4/
stick a :hover on your selector and then put the rule for the hover. That should be in your css, not the jquery function.
wrap a span around your "Read More" text with a class and in the jquery, on the click function above you can do something like:
$('spanClass').hide();
and just the opposite:
$('spanClass').show();

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).

Categories