I really like the Google+ style hovercard. When you hover over a profile picture, it pops up a little box, similar to the "established users" hovercards here on Stack Overflow.
I know how to do the CSS, but the JavaScript is what I need help with.
I have a code here that is somewhat like it: http://jsfiddle.net/NathanJohnson/AhVQN/ But, it doesn't work that good. The mouse offset does not work correctly.
Could someone help me with getting this working properly? Thanks in advance.
You can change the mouse offset in this section:
var pos = {
// or you could position it relative to the mouse
top: (e.clientY + 2) + 'px',
left: (e.clientX + 2) + 'px'
};
Change the e.clientY + 2 to e.clientY + 1 and the hovercard will be closer to the cursor.
Related
I want to implement the following in HTML/JavaScript but don't really know where to start or even if there is already an existing function in one toolkit for this:
I have one image (e.g. a png) which is visible and a second image of the same size which is not visible. However, if I move the mouse pointer over the first image, the corresponding part from the second image shall be shown around the mouse cursor. So for example, if I move the mouse at position 100,100 on the first image, the section from 50,50 to 150,150 of the second image should be overlaid on the first image at position 50,50 to 150,150. I hope this is understandable.
Does anyone know, if there is already a library which contains this functionality? I've already searched for this on the internet but found nothing. However, I do not really know what keywords to search for. So if someone knows a keyword to search for, I would be appreciate hints as well.
Alternatively, Can you give me a cue how could I grep the part of the second image and display it at the mouse position? I was thinking that canvas might be used but I am not sure how to.
Thank you very much and best regards
Tobias
This can be done with Vanilla JS or JQuery. Basic idea behind it is to wrap the image in a container with position:relative and listen to mouse movement on it. A second <div> with position:absolute will receive the coordinates of the mouse pointer with its background position set to match the current mouse offset.
The posted code is just to give an idea how this would look like and needs to be extended to properly handle the edges of the image.
$(".hover-container").on("mousemove", function (e) {
var parentOffset = $(this).parent().offset();
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
var picHeight = $('.hover-image').height();
var picWidth = $('.hover-image').height();
$('.hover-image')
.css("left", relX - 50 + "px")
.css("top", relY - 50 + "px")
.css("background-position", (picWidth-relX-50) + "px "
+ (picHeight-relY-50) + "px")
});
.hover-container {
position: relative;
}
.hover-image {
position: absolute;
width: 100px;
height: 100px;
background: url(https://i.imgur.com/Hp5pUVA.jpg);
background-position: 0 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="hover-container">
<img class="hover-over" src="https://i.imgur.com/j0yhQez.jpg"/>
<div class="hover-image"></div>
</div>
trying to make an img hit the left side of my screen and return to the right. going right to left is super easy but i cant seem to find the left side of my screen for a reference point. using screen.width
is there a way to get the left side of the screen? ive tried (screen.width-screen.width) and just guessing screen.width-1920
this is my code for right to left.
if(parseInt(el.style.left) > (screen.availWidth - 100))el.style.left = 0;
if(parseInt(el.style.top) > (screen.height))el.style.top = 0;
el.style.left = parseInt(el.style.left) + rn1 + 'px';
el.style.top = parseInt(el.style.top) + rn2 + 'px';
If your page is taking the full width of the viewport, then what is stoppng you from using float: left/right to play with the image alignment.
If anyone cares it wasnt working because it wasnt giving a true px back. once i added + 'px' to the end of the if statement, was working like a charm
I have a JavaScript function that when a user does a mouse-over a thumbnail, a larger preview of the image pops up. The JavaScript calculates the top and left offset position to either display the preview on the right or left of the screen, depending on the screen size.
The function works when the object passed is an image.
My goal is to use the same function as a template, and have it work but instead that using a thumbnail for the hover event, just use a link. So the user does a mouse over the link, and the image preview pops up.
My problem is that the offset left position is not being calculated when using IE8 or IE11, Firefox and Chrome work fine.
The image is always being displayed on the right size of the screen. But this only happens on IE. I guess, I am not sure, but perhaps IE treats the and tag differently to calculate offset?
Here is a copy of the jquery function:
function linkOverShow(a, strSKU) {
$("#pUpImg").attr("src", "/images/items/" + strSKU + ".jpg");
var offset = $(a).offset();
if (offset.left - 350 < 0) {
$('#pUp').css('top', (offset.top - 125)).css('left', (offset.left + 100));
} else {
$('#pUp').css('top', (offset.top - 125)).css('left', (offset.left - 350));
}
$("#pUp").show();
}
On IE, the code only goes to the line:
$('#pUp').css('top', (offset.top - 125)).css('left', (offset.left + 100));
I am hoping to fins someone in this forum that can offer some ideas as to why this is happening, and possibly offer some recommendations to try to solve the issue.
I hope also I am asking this question correctly.
Any help is greatly appreciated.
Thank you much.
I've been working on a project and I've noticed some inconsistency in bootstrap's behavior that I would like to solve.
When a popover (or tooltip, whatever, they're basically the same) is nearing the edge of the screen - if it's a right-sided one, when nearing the edge - it will contract so as not to go offscreen (it only works up to a point, but that's usually enough).
This doesn't happen when the placement is to the left.
i.e.:
right placement:
Normal width:
Close to the edge:
left placement:
Normal width:
close to the edge:
These images are from a small DEMO I wrote to illustrate the problem.
I've messed around with the source code, so far to no avail. I can't seem to place my finger on what exactly causes this behavior in the first place.
Any ideas?
p.s.
I'm using Bootstrap 3.1.1. The new 3.2 does not solve the issue (and I would like to avoid upgrading at this point).
Major Update!
After some digging, I figured out that this has nothing to do with bootstrap - it's simple css - it seems that when you position an element absolutely and push it to the sides it will try and stay withing the screen.
I never knew about this behavior, and it happens automatically - but only to the the direction you're pushing - i.e. a div pushed from the left will contract when reaching the right edge of the screen and vice versa.
It just so happens that popovers are only positioned with the left assignment - which is why we're seeing the inconsistend behavior - when it's pushed to the right it contracts but not the other direction.
So the solution is to assign right instead - sounds simple?
Not so much. I took the source code and manipulated it a bit, adding these lines (somewhere arond line 250 in the jsfiddle):
if (placement == 'left' && offset.left < 0) {
var right = ( $(window).width() + 10 ) - ( offset.left + actualWidth );
offset.left = 0;
$tip.offset(offset);
$tip.css({ 'right': right });
}
Seems reasonable, right? If the offset to the left is less than 0 (i.e., it goes offscreen) then calculate the window width and remove from that the left offset and the width of the popover (actualWidth) itself and you get the distance from the right.
Then, make sure to reset the offset left and apply the right positioning. But... it only sorta works - which is to say it only works the second time around.
Check it out for yourself! Hover once, and it's misplaced, pull the mouse to the side and try again and suddenly it's positioned correctly. What the hell?
edit
Ok this seems to come up a lot, so I'll make it clear:
I know about auto placement. I don't want it. I want to control where the popover goes, letting it decide automatically is not a solution to the problem, it's merely avoiding it
Ok, I've gotten a little closer.
Once you assign the right in css, the actualWidth and actualHeight will change, so you need to update those variables. Around line 253 in your jsfiddle:
if (placement == 'left' && offset.left < 0) {
var right = ( $(window).width() + 10) - ( offset.left + actualWidth );
offset.left = 0;
$tip.offset(offset);
$tip.css({ 'right': right });
actualWidth = $tip[0].offsetWidth;
actualHeight = $tip[0].offsetHeight;
}
This works the first time you hover, but every time after that, it sets the top to be too high, so you can't read the top of the tooltip.
UPDATE:
It appears that having the right value set is messing up the positioning in the applyPlacement function. To fix this, clear the right value before setting the initial actualWidth and actualHeight (around line 225):
$tip.css({ 'right': '' });
// check to see if placing tip in new offset caused the tip to resize itself
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
I believe this has a lot to do with the browser/client that accesses the webpage. For instance, in order to display the tip's on the proper side (not bunched up or illegible off the the left or right), determine the offsetLeft & offsetTop of the object element with javascript and place it accordingly. You could have different pages for different resolutions.
CSS example for a screen width from 400-720 pixels:
#media screen and (min-width:400px) and (max-width:721px)
some pseudo code:
if (this.offsetLeft < 200) //if there's not enough room to display the tip
tip.offsetLeft += 200;
I think you've basically got it, it's working fine for me.
Just add in the minimum width detection so that it doesn't go too small.
if (/bottom|top/.test(placement)) {
var delta = 0
if (offset.left < 0) {
delta = offset.left * -2
offset.left = 0
$tip.offset(offset)
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
}
this.replaceArrow(delta - width + actualWidth, actualWidth, 'left');
} else {
if (placement == 'left' && offset.left < 0) {
var right = ( $(window).width() + 10) - ( offset.left + actualWidth );
offset.left = 0;
$tip.offset(offset);
$tip.css({ 'right': right });
}
this.replaceArrow(actualHeight - height, actualHeight, 'top');
}
I wasn't sure what to make of the title for this problem, as it is quite complicated. To demonstrate, I've created a fiddle:
http://jsfiddle.net/2W5Jd/
Basically, I'm making a website containing different sections with different background colors. The designer thought it would be a good idea to change the color of the logo when you scroll down to another section, as if the section is "masking" the logo (see fiddle, it's hard to explain).
The problem however, as you can see in the fiddle, is that when you scroll fast enough, the logo stops resizing. Does anyone have any idea how to work around this?
As posting a link to jsfiddle.net must be accompanied by code, here's the js (I've simplified it a bit from the actual website version):
var $logo = $("#logo");
$(window).scroll(function(){
scrollTop = $(document).scrollTop();
$logo.css("top", scrollTop + "px");
if ( scrollTop + 180 >= 600 ) {
$logo.find(".second").css("height", (scrollTop + 180) - 600 + "px");
}
});
add an else clause to your if
else {
$logo.find(".second").css("height", (scrollTop + 180) - 600 + "px");
}
see update fiddle: http://jsfiddle.net/hbrunar/2W5Jd/1/
if you don't need to do anything else in the if part, then skip it completely:
http://jsfiddle.net/hbrunar/2W5Jd/2/