We Keep Coding

Popup should display on top of element if no proper space in bottom

I want to display the popup on the top of element if there is no proper space on the top. Currently it hides inside the window as seen in the image below:
I can update the top position but I only want when there is no proper space otherwise it is ok.
Please let me know how to determine if the clicked position in near window edges.
JSFiddle Link :http://jsfiddle.net/g4g4negf/
Code I am using to get the position:
$(document).ready( function() {
$('.clickme').on('click', function(e) {
$('#popup').offset({ top: e.pageY, left: e.pageX}).fadeIn();
});

Check out this JSFiddle
To check if clicked position is near window edge, you have to get window's height ($(window).height()) and scroll position (window.pageYOffset). By adding these two values, you can find the scrolled position of the window. Then compare this sum with e.pageY+$("#popup").height() (this is the sum of the clicked position's height and the popup's height). If the latter is less than the former, it means the popup can be shown. If (e.pageY+$("#popup").height())>($(window).height()+window.pageYOffset) it means the popup will overflow the window's bottom border, then its top offset should be changed to e.pageY-$('#popup').height().
Here is the complete function:
$('.clickme').on('click', function(e) {
var h;
if((e.pageY+$('#popup').height())<($(window).height()+window.pageYOffset)) h=e.pageY;
else h=e.pageY-$('#popup').height();
$('#popup').offset({ top: h, left: e.pageX}).fadeIn();
});

Considering your popup height is 100px, you can try this...
$(document).ready( function() {
var h = window.innerHeight;
$('.clickme').on('click', function(e) {
alert(h + ", " + e.pageY);
if( h - e.pageY < 125) {
$('#popup').offset({ top: h-125, left: e.pageX}).fadeIn();
}
else {
$('#popup').offset({ top: e.pageY, left: e.pageX}).fadeIn();
}
});
});

Unable to getting current element hover is firing on

first here is the JSFiddle I've been working on
http://jsfiddle.net/rastlin80/P53Le/
I've created a new plugin called sopopup
what is does is match an element as a pop-up that will appear around some text when the text is hovered.
it works correctly when the selector for the element that will be hovered is a single element
$('#message').sopopup({ target: $('#ho')});
the pop up appears right above the text, but when the selector has multiple items it always hovers over the first item.
$('#message2').sopopup({ target: $('.meds')});
my problem is in the code for the hover event.
settings.target.hover( //where target are the elements selected such as $('.meds')
function() {
//here is my problem the var this is not the target being hovered
//the var this is refering to the settings it seems
var pos;
var hgt;
if(settings.location === 'top'){
pos = settings.target.position();
//i wanted to do this.position() but that show an error
hgt = settings.pop.height();
settings.pop.css({
position: "absolute",
top: (pos.top - hgt) + "px",
left: pos.left + "px"
});
}
else if( settings.location === 'bottom'){
pos = settings.target.postion();
hgt = settings.target.height();
settings.pop.css({
position: "absolute",
top: (pos.top + hgt) + "px",
left: pos.left + "px"
});
}
settings.pop.show();
}.bind(settings)
I am unable to use the variable this to refer to the item that is currently being hovered over. instead the variable this within the hoverIn function seems to refer to the settings object.
any help appreciated.

This fork of your Fiddle uses a combination of $.each and setting a variable named self to reference the appropriate this (wrapped with jQuery) to achieve what I believe it is you're asking for:
$.each(settings.target, function(){
var self = $(this);
self.hover(function() {
var pos;
var hgt;
if(settings.location === 'top'){
pos = self.position();
[...]

(CSS/jQuery) How resolve the conflict between top and bottom property with jQuery

Someone know how convert a bottom position to top with CSS transition and jQuery?
I need to change the anchor of my image. And i have this problem. There is a conflict between bottom and top.
EDIT : In my scenario, the image has 100% of the width of the screen. And when the window is resized, i have a code in JS whoes get the new position of the image. If my anchor is always "top" for example, in some situations I have this hole who show-up for severals milliseconds and if I set at this moment bottom instead of top it will fix my issue. But I have this "jump" in the animation.
I made this fiddle to understand my issue.
Sorry for my English! Someone have an idea about this? Thank you !

You can get around the jumps by using a class, and removing the inline style as you go, like so:
if ( image.hasClass("bottom") ) {
image.css("bottom", "").animate( { top: "0" } , 1000, function(){
image.removeClass("bottom");
});
} else {
image.css("top", "").animate( { bottom: "0" } , 1000, function(){
image.addClass("bottom");
});
}
and add a css class
.bottom {
bottom: 0;
}
as per http://jsfiddle.net/rZPq3/
edit for cross-browser:
var top = image.position().top + 'px';
var bottom = image.parent().height() - image.height() + 'px';
if (image.hasClass("bottom")) {
image.finish().css({ "bottom": "", "top": top }).animate({ top: "0px" }
, 500, function () { image.removeClass("bottom"); });
} else {
image.finish().css({ "top": "","bottom": bottom }).animate({bottom:"0px"}
, 500, function () { image.addClass("bottom"); });
}
http://jsfiddle.net/wCuuX/

You should stick with one of the properties to avoid conflicts. I changed your fiddle to use top only and using a class to toggle the value instead.
var toggle = $("button#toggle");
var image = $("div img");
toggle.click(function () {
image.toggleClass("toggled");
});
See updated test case on jsFiddle.

How to reposition a relative DIV using left/top?

I have a div with the attribute position: relative;. Now, there are three of these divs. They all get a unique ID etc.
Now if I click a div, I want it to animate to a certain position in the document. Although I cannot determine the left/top values since if I use "top" and "left", it will relatively set the left to its parents position.
Maybe a bit unclear, but here is what I got.
The CSS of the clickable DIV that will move.
div#left_hldr .switch_project {
z-index: 1001;
position: relative;
margin: 10px 0px 0px 0px;
cursor: pointer;
}
// Open project.
$(".switch_project").live('click', function() {
// Get the ID value.
var More_Id = $(this).attr("id");
// Explode the Id.
var Id_Split = More_Id.split("_");
// Get the project ID.
var Project_Id = Id_Split[2];
/*
Replacement of the switch project div.
1 ) Define the current position.
2 ) Define the new position.
3 ) Replace the DIV to the new position.
4 ) Fade the new page in.
5 ) Put the DIV back to its original position.
*/
// Current Position.
var Ori_Left = $(this).offset().left;
var Ori_Top = $(this).offset().top;
// New Position. [ Based on the content_hldr container ]
var New_Top = $("div#content_hldr").offset().top;
var New_Left = $("div#content_hldr").offset().left;
// Define the current div.
var Div_Rep = $(this);
// Hide the More Info tab.
$(Div_Rep).children(".more_info").fadeOut("fast");
// Fade content out.
$("div#content_hldr").fadeOut("fast");
// Replace the div.
$(Div_Rep).animate({
top: New_Top,
left: New_Left
}, "slow", function() {
// Load Home page in.
$("div#content_hldr").load("content/content.projects.php?id=" + Project_Id, function() {
// Re-define Cufon.
Cufon.replace('h2');
});
// Fade in the content.
$("div#content_hldr").fadeIn("fast", function() {
// Hide the replaced div.
$(Div_Rep).hide();
// Replace it back to its position.
$(Div_Rep).css({
top: Ori_Top,
left: Ori_Left
});
// Show the More Info tab again.
$(Div_Rep).children(".more_info").show();
// Fade back in.
$(Div_Rep).fadeIn("medium");
});
});
});

...it will relatively set the left to its parents position.
Actually, no. If you use left and top with a position: relative element, they'll offset it from where it otherwise would be if it weren't positioned (e.g., in the static flow), while continuing to reserve its space in the static flow. A subtle but important distinction (and hugely useful for drag-and-drop).
If you want to animate it to the top left of the document, you can figure out its offset (via offset), and then provide those as negative numbers for left and top, since of course if it's at (say) [100,50], then positioning it at [-100,-50] compared to its default position will...put it at [0,0].
Like this:
$("selector_for_your_divs").click(function() {
var pos, $this;
$this = $(this);
pos = $this.offset();
$this.animate({
left: "-" + pos.left + "px",
top: "-" + pos.top + "px"
});
});
Live example
Similarly, if you want to move it to be where another element is, simply subtract its position from the other element's position — that gives you the delta to apply:
$("selector_for_your_divs").click(function() {
var mypos, otherpos, $this;
// Move to the target element
$this = $(this);
pos = $this.offset();
otherpos = $('selector_for_other_element').offset();
pos.left = otherpos.left - pos.left;
pos.top = otherpos.top - pos.top;
$this.animate({
left: pos.left + "px",
top: pos.top + "px"
});
});
Live example

attaching div to a specific element for showing with javascript

Clicking on the image should show div near it (.show() in jQuery).
But how can i attach div to that image? Is it done with pure css, or javascript?
I tried several "position:absolute", but can't attach it near image.
How it should be done?

It's pretty straightforward, you need to compute the .css({top:___,left:___}) such that the underlines are filled with computations based on the clicked image's .position().top and .position().left.

something like this:
$(document).ready(function() {
$('#someim').click(function() {
showDiv($(this), $('#somediv'));
});
});
function showDiv(sender, object) {
var pos = $(sender).offset();
var width = $(sender).width();
$(object).css({ "left": (pos.left + width) + "px", "top": pos.top + "px" });
$(object).show();
}
<img id="someim" width="250" height="61" alt="Stack Overflow" src="http://sstatic.net/so/img/logo.png">
<div id="somediv" style="display:none; margin-left:10px; color:Red">sd</div>