Google plus popup box when hovering over thumbnail? - javascript

I'm trying to figure out how to create a popup box with user profile details on mouseover like you see on google plus. When hovering over a thumbnail a popup appears with the option to add that person into your circle.
It seems kinda simple to do with jQuery but I've been unable to find a simple solution. Most of the plugins I've come across are too complicated and require a lot of tweaking. Any help on how to do this would be greatly appreciated!
Hover Effect Screenshot

You'll want to try something like this. It doesn't handle all the cases you'll need (you need the hover to stay active when user enters the popup); but you can work some of those out I hope.
Here's the basic jQuery code:
jQuery(function($) {
function getMyContent($img) {
// do your fancy ajax calls or append your control links and such here
return $('<p />').append($img.clone()).append('Here is my fancy hoverbox');
}
$('#content img').mouseenter(function(e) {
var $this = $(this), off = $this.offset();
var pos = {
// or you could position it relative to the mouse
top: (e.clientY + 2) + 'px',
left: (e.clientX + 2) + 'px'
};
$('#hoverbox').css(pos)
.append(getMyContent($this))
.fadeTo('slow', .95);
}).mouseleave(function(e) {
$('#hoverbox').fadeOut('slow', function() { $(this).html(''); });
});
});
UPDATE: Here is one that handles the hover events on the popup for you (yeah, I'm still messing around with it; why?)

The simplest solution would be to add a hidden div to the element that wraps around your profile photo.
<div class="profile-popup" style="display: none;">
<!-- Popup info goes here -->
</div>
Go ahead and style the div with CSS however you want it to appear, say with absolute positioning at the bottom right corner for the "pop out" effect. Then register a mouseOver event in jQuery that shows the div:
$().ready( function() {
$('.profile-pic-wrapper').mouseenter( function() {
$('.profile-popup', this).show( //pass in some animation options here );
});
$('.profile-pic-wrapper').mouseleave( function() {
$('.profile-popup', this).hide( //pass in some animation options here );
});
});
This is just a basic idea (and that code may need to be tweaked a bit). You'll have to add some additional logic to keep the popup open when the user mouses into it, but this should get you started.
The more elegant solution would be to pass JSON data to your jQuery script and have it generate the popup div dynamically on hover, but that is a bit more advanced.

Related

Show/Hide JQuery Slider Navigation Based On First & Last Slide

I am seeking help in showing and hiding the directional nav arrows on a self-made JQuery Slider. The slider shows 2-3 images at a time depending on the viewport. I want to be able to hide the next(right) arrow when the last slide has appeared in full view and hide the previous(left) arrow whenever the first slide is back to the first item in view.
Trying to find a way to know the positions of the first and last slide because the number of list elements will change and not be a set number.
$(document).on( 'click', '.control-right', function() {
var itemWidth = $(this).parent().children('.module-slider').children('.slider-list').children('.slider-item').outerWidth() + 20;
var leftIndent = parseInt($(this).parent().children('.module-slider').children('.slider-list').css('left')) - itemWidth;
$(this).parent().children('.module-slider').children('.slider-list').animate({left: leftIndent}, 400);
});
$(document).on( 'click', '.control-left', function() {
var itemWidth = $(this).parent().children('.module-slider').children('.slider-list').children('.slider-item').outerWidth() + 20;
var leftIndent = parseInt($(this).parent().children('.module-slider').children('.slider-list').css('left')) + itemWidth;
$(this).parent().children('.module-slider').children('.slider-list').animate({left: leftIndent}, 400);
});
The markup template is as follows
<div class="module">
<div class="slider-control control-left"></div>
<div class="slider-control control-right"></div>
<div class="module-slider">
<ul class="slider-list">
<li class="slider-item"></li>
</ul>
</div>
</div>
I see two ways of doing this. Because I do not know your slider code I will suggest something.
If you want to detect the position of an element you can use JQuery's position() method
That way you can detect the position of an element and have something happen. But besides that what I would do if I made a slider would be to give the current slider a class like ".active" and then in my javascript I would use conditionals to check for the element with the class of ".active" meaning it is shown.
Something like this:
if( $(".element").hasClass("active") ){
//do something
}
Again those are only suggestions, you can go about in whatever way suits your needs.

Javascript Scroll by one pixel on load of a div

I am using a mixture of jQueryTools overlay (lightbox type thing) and a scroll-bar called Perfect Scrollbar. The problem I have is that when the overlay is loaded the scroll-bar doesn't show until you scroll within that box. I need to be able to make it clearer so that everyone knows it is a scroll-able content box. One way this could be possible is to make the content box scroll up one pixel when the overlay is opened. I have found the following code
$(".scroll-content").load(function() {
window.scrollBy(0,-1);
}
which I have been told should work but no matter what I can't get it to scroll at all.. Is there something i'm doing wrong?
Since you have the scroll bar method bind to an element that is initially in a 'hide' status, in fact .BigSuperBlock .block_overlay is hidden by display:none; in Css, the plugin can not properly calculate the height of the overlay container.
So, when you call the function that show-up the 'overlay' container, you have to call the method on the scroll-content class:
$('.scroll-content').perfectScrollbar('update');
You can find the documentation of this in the author's page.
To make it works, you have to call the plugin 'update' method, again, in the jQueryTools modal function, as a callback.
$(".block_overlay").overlay({
onLoad: function(event) {
$('.scroll-content').perfectScrollbar('update');
// here you update the perfectScrollbar plugin
},
onClose: function(event) {
// other custom code
}
});
Try with this:
jQuery("container").animate({ scrollTop: 50 }, 800);
Give that you want to make clear that there is a scrollbar, you can have it on all the time if you change the perfect-scrollbar.css
.ps-container .ps-scrollbar-x-rail {
...
opacity: 0.6;
}
.ps-container .ps-scrollbar-y-rail {
...
opacity: 0.6;
}

random div position on load + draggable

I tried to create a code showing a draggable div on a random position.
Page background picture is set to fit the size, this is the only thing almost quite working also with the fullscreen window function showing on clicking the links in the div.
I guess I'm wrong on something (some syntax probably..) but can't find where it fails.
I show the lines on shrib, please open it: SHRIB notepad, i'm sure this would be easy to spot the mistakes for some of your fresh eyes:
thanks for your help!
J.
Your each function needs to be inside your document ready function.
<script type="text/javascript">
$(document).ready(function() {
$(".draggable").draggable();
$('.draggable').each(function(i,el){
var tLeft = Math.floor(Math.random()*500),
tTop = Math.floor(Math.random()*500);
$(el).css({position:'absolute', left: tLeft, top: tTop});
});
});
</script>

fixed div while scrolling which moves other elements in a menu

I have some menu items on the right hand side of my website that are: -
Basket Summary
Best Sellers
Quick Links
etc
I want the basket summary to follow down the page as the page is scrolled, I know how to this using position: fixed, but I need it to also move the other elements out of the way otherwise it will just overlap them.
I was looking at this: jsfiddle which would do the job and works but obviously thats only on button click, I would need to adapt this to scroll via jQuery.
I have read many tutorials for floated fixed divs but they are all for one div and don't have any other divs to interact with.
Any ideas if possible and/or how to do it?
Code from js fiddle as follows: -
$(function() {
$('.upButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertBefore($parent.prev());
});
$('.downButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertAfter($parent.next());
});
});
Is this what you're looking for?: http://jsfiddle.net/cmontgomery/YVh4q/
essentially, whenever the window scrolls check to see if your section is in the visible area and if not, adjust accordingly:
$(window).scroll(function () {
var mover = $("#sidebar .quick-links");
if($(window).scrollTop() === 0) {
//console.log("to top");
mover.prependTo("#sidebar");
} else if(!isFullyInViewableArea(mover)) {
var parent = mover.closest('.section');
if(isBelowViewableArea(mover)) {
//console.log("moving up");
parent.insertBefore(parent.prev());
} else {
//console.log("moving down");
parent.insertAfter(parent.next());
}
}
});
I must admit, this solution is not the best user experience, i.e. it jumps instead of scrolling smoothly. If it were me I would put the movable section as the last item in the right column and move that down the page with absolute positioning so it follows the top of the view-able area exactly.
Use this
Drag & Drop is best.
Greetings.

How to resolve mouse hover on overlapping images in jQuery?

This question seems somewhat related to
How do I check if the mouse is over an element in jQuery?
jQuery check hover status before start trigger
but still not quite. Here's the thing: I'm writing a small gallery and at some point the user clicks on a thumbnail. The large version of the image shows as an inside of a full-screen . So far, so good. When the mouse hovers over that I show three images: close, left, right, intended to navigate through an album; when the mouse leaves the image or the navigation images, the three navigation images fade.
These three navigation images partially overlap with the main image, e.g. the close image is a circle in the upper left corner. And that's the tricky part.
The mouseleave triggers whenever the mouse moves from the main image off the side, or from the main image onto one of the three small overlapping images. The mouseenter triggers for each of the small overlapping images as expected.
However, this creates a funky blinking effect because on mouseleave of the main image I hide() the three small images, which immediately triggers a mouseenter for the main image because of the overlap and the mouse still being on top of the main image.
To avoid that, I tried to determine if, upon mouseleave of the main image, the mouse has moved onto one of the small overlapping images. For that, I used this code:
main_img.mouseleave(function() {
if (!hoverButtons()) {
doHideButtons();
}
});
function hoverButtons() {
return (close_img.is(":hover")) || (left_img.is(":hover")) || (right_img.is(":hover"));
}
This works great on Safari and Chrome, but not on FF and IE where the images still blink. Further noodling around posts, it seems that ":hover" is the problem here as it is not a proper selector expression but rather a CSS pseudo class?
I tried to work with switches that I flip on/off as I mouseenter/mouseleave the various images, but that doesn't work either because the events seem to trigger in different orders.
How do I go about this? Thanks!
EDIT: I might have to clarify: before the navigation buttons are shown, I set their respective left and top attributes in order to place them in dependence of the main image's position. That means I need to do some work before I can call .show() on a jQuery selector. I tried to add a new function .placeShow() but that didn't quite work with respect to selectors like $(".nav-button:hidden").placeShow().
You can try with this:
$("#main, #small").mouseenter(function() {
$("#small:hidden").show();
}).mouseleave(function(e) {
if(e.target.id != 'main' || e.target.id != 'small') {
$('#small').hide();
}
});
DEMO
Here is what I ended up doing. There are four images I use in my slide show: the main image, and then left, right, close button images.
main_img = $("<img ... class='main-photo slide-show'/>");
close_img = $("<img ... class='nav-button slide-show'/>");
left_img = $("<img ... class='nav-button slide-show'/>");
right_img = $("<img ... class='nav-button slide-show'/>");
The classes here are essentially empty, but help me to select based on above answers. The main image then shows without navigation buttons, and I attach these event handler functions:
$(".slide-show").mouseenter(function() {
$(".photo-nav:hidden").placeShow();
});
$(".slide-show").mouseleave(function() {
$(".photo-nav").hide();
});
where the placeShow() moves the navigation buttons into their respective places. This function is defined as follows:
$.fn.placeShow = function() {
var pos = main_img.position();
var left = pos.left;
var top = pos.top;
var width = main_img.width();
var height = main_img.height();
close_img.css({ "left":"" + (left-15) + "px", "top":"" + (top-15) + "px" }).show();
left_img.css({ "left":"" + (left+(width/2)-36) + "px" , "top": "" + (top+height-15) + "px" }).show();
right_img.css({ "left":"" + (left+(width/2)+3) + "px", "top":"" + (top+height-15) + "px" }).show();
}
This worked so far on Safari, IE, FF, Chrome (well, the versions I've got here...)
Let me know what you think, if I can trim this code more, or if there are alternative solutions that would be more elegant/fast. The final result of all this is on my website now.
Jens

Categories

Resources