Changing the position of div - javascript

take a look at this Fiddle (Which tells everything).
i just wanna position the .app accoring to the a position . I have defined the hyperlinks in fiddle as to where .app should appear and given id to each hyperlinks but as these id will not be there in my websites. Since i have to find the position of hyperlinks and accordingly position the .app so that it does not makes the body show a scrollbar as in this case .... can anyone position the .app accordingly ?
$('a').mouseover(function(){
$('.app').css({
top : $(this).position().top + $(this).height() + 5,
left : $(this).position().left + $(this).width()/2
}).show();
}).mouseout(function(){
$('.app').hide();
});

you can find solution for this. It's not perfect and it hasn't covered every cases, but just issue with "appear top", but it's easy fixed the rest ....
$('a').mouseover(function(){
$('.app').css({
top : (( $(this).position().top + $('.app').height() + 5)>$(window).height())?
$(this).position().top - $(this).height() -$('.app').height() - 5:
$(this).position().top + $(this).height() + 5,
left : $(this).position().left + $(this).width()/2
}).show();
}).mouseout(function(){
$('.app').hide();
});

$('a').mouseover(function () {
$('.app').css({
top: (($(this).position().top + $('.app').height() + 5) > $(window).height()) ? $(this).position().top - $(this).height() - $('.app').height() - 5 : $(this).position().top + $(this).height() + 5,
left: (($(this).position().left + $(this).width() / 2 + $('.app').width()) > $(window).height()) ? $(this).position().left - $(this).width()/2 - $('.app').width()/2 : $(this).position().left + $(this).width()/2
}).show();
}).mouseout(function () {
$('.app').hide();
});
This code did the work !
http://jsfiddle.net/DT7Us/2/ -DEMO

Related

Centering Special Javascript Popup, How?

I have this javascript code, lib.js. It manages my every java popup in my site. How ever it is not set to be appear absolutely centered in page, I have tried several css codes for its div. But it did not work. I also tried the famous /2 code but it didnt work or I might have added it to wrong place.
Below is my lib.js:
var currentTime = new Date();
var topP = 0;
$(document, window).keypress(function(e){
if (e.keyCode == 27){
$(".yekbox").fadeOut();
$("#yekbox_overlay").hide();
}
});
$(document).ready(function() {
$(".showme").unbind().hover(
function(e) {
$(".tooltip").remove();
this.t = $(this).next(".description").html();
$(this).append( '<div class="tooltip">' + this.t + '</div>' );
},
function() {
//this.title = this.t;
$(".tooltip").remove();
}
).mousemove(
function(e) {
$(".tooltip").css({
"top" : e.pageY + 20,
"left" : e.pageX + 20
});
}
);
topP = $(this).scrollTop();
//$(".yekbox").css("top", $(window).height()-250 + "px");
//$(".yekbox").css("left", $(window).width()-(440*2) + "px");
$("#yekbox_overlay").css("height", $(window).height());
$(window, document).resize(function(){
topP = $(this).scrollTop();
$(".yekbox").css("marginTop", topP-250 + "px");
if ($(window).width() > 900 ) $(".yekbox").css("left", $(window).width()-(440*2) + "px");
$(".yekbox").css("marginLeft", "auto");
$(".yekbox").css("marginRight", "auto");
$("#yekbox_overlay").css("height", $(window).height());
});
$(window).scroll(function () {
topP = $(this).scrollTop();
$(".yekbox:visible").css("marginTop", topP-250 + "px");
$("#yekbox_overlay:visible").css("height", $(window).height());
});
$(window).bind("scroll",function () {
topP = $(this).scrollTop();
$(".yekbox:visible").css("marginTop", topP-250 + "px");
$("#yekbox_overlay:visible").css("height", $(window).height());
});
$("#yekbox_overlay").click(function(){
$(".yekbox").fadeOut();
$(this).hide();
return false;
});
The JS and HTML code above doesn't help in anything.
In general, if you want a block to be centered to the parent, it should have
A fixed width
margin: auto
If you want a block absolutely centered (position absolute or fixed)
$('#mypopup').css('left', ($(window).width() - $('#mypopup').width()) / 2)

JQuery animate background positions in multiple divs on scroll

I have multiple divs on my page where I want to animate their background position onScroll, so here is what I have got for now
/* animate background possition on scroll */
$(window).scroll(function() {
var y = $(this).scrollTop();
if(y < $(".page-separator").offset().top && ( $(".page-separator").offset().top ) < ( y + $(window).height() ) ){
$(this).css('background-position', '0% ' + parseInt(-y / 10) + 'px');
}
});
But it doesn't work. I think it is because $(this)is not currently visible $(".page-separator") , can you please help me to fix it?
So I have modified my code here but I am stacked again, I can't pass parameter into .each jquery function
$(window).scroll(function() {
var y = $(window).scrollTop();
$(".page-separator").each(function(y){
//$(".page-separator").css('background-position', '0% ' + parseInt(-y / 10) + 'px');
if( y < $(this).offset().top && ( $(this).offset().top ) < ( y + $(window).height() ) ){
$(this).css('background-position', '0% ' + parseInt(-y / 10) + 'px');
}console.log(y);
});
});
when I see console.log(y) it only shows 0 1 2 nothing more, not the top position
To change the background-position of the visible .page-separator elements, you'd do :
$(window).on('scroll', function() {
var y = $(window).scrollTop();
$(".page-separator").filter(function() {
return $(this).offset().top < (y + $(window).height()) &&
$(this).offset().top + $(this).height() > y;
}).css('background-position', '0px ' + parseInt(-y / 10) + 'px');
});
FIDDLE
$(this) == $(window) in this case. You should add one class (ex: 'animate') for all divs, and use it as selector (ex: $('.animate'))

Animating the centering of a div

How do I animate this movement so when I call the function later the item will animate? I usually use $(this).animate but not sure how to wrap this in it, since I'm calculating its position. Thanks.
jQuery.fn.center = function ()
{
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
Instead of using this.css you can use this.animate as you mentioned.
Example
this.animate({
top : Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px"
},800,function(){ });
Demo
To animate, you'll need to use animate on the left/top values, but first set the position to absolute using css().
// can't easily animate change of css "position"
// so we just set it directly
elt.css('position', 'absolute');
// animate the position
elt.animate({
left: x,
top: y
});
I created a fiddle for this, here: http://jsfiddle.net/lingo/CkRUd/2/
In the fiddle I've also tidied some things up to make sure the plugin is more robust.

Javascript drag from mouse position?

I have a script which allows a user to drag a div around the screen on iOS, and as it is now, when you start to drag a div, it makes the dragable point the center. Is it possible to make this point wherever the user touches?
The code looks like this:
xPos = drag.offsetWidth / 2;
yPos = drag.offsetHeight / 2;
drag.addEventListener("touchmove", function() {
event.preventDefault();
$(this).css({
"left" : event.targetTouches[0].pageX - xPos + "px",
"top" : event.targetTouches[0].pageY - yPos + "px",
"z-index" : "1000"
});
$("div").not(this).css("z-index", "1");
$("div[id]").each(function() {
var id = $(this).attr("id");
localStorage.setItem(id + "-z","1");
});
});
Is there anyway I can make it so that the offset is however far away the user's finger is away from the box's edge?
I thought the following might work but it doesn't seem to, all it does is cause it to jitter:
$(this).css({
"left" : event.targetTouches[0].pageX - parseInt($(this).css("left"), 10) + "px",
"top" : event.targetTouches[0].pageY - parseInt($(this).css("top"), 10) + "px",
});
Figured it out. After testing, the following only produced the number of pixels from the left or top of the parent.
event.targetTouches[0].pageX - $(this).offset().left
The trick was to subtract that FROM event.targetTouches[0].pageX, which is the number of pixels that the finger is from the edge of the screen.
So, the completed code would look like this:
drag.addEventListener("touchstart", function() {
left = event.targetTouches[0].pageX - $(this).offset().left;
top = event.targetTouches[0].pageY - $(this).offset().top;
});
drag.addEventListener("touchmove", function() {
$(this).css({
"left" : event.targetTouches[0].pageX - left + "px",
"top" : event.targetTouches[0].pageY - top + "px",
});
});

Trying to make a div appear in the centre of a scrollable page - bug in my code?

Just as a preface to make sure I am clear, I don't want the div to appear dead centre in the middle of the page, I want it in the middle of the viewable window. So if you imagine a long page and the user has scrolled down to near the bottom and clicks the button the div will appear in the centre of the screen near the bottom of the page.
here is my code, which doesn't work in chrome:
function centerdiv() {
var scrolledX, scrolledY;
scrolledX = document.body.scrollLeft;
scrolledY = document.body.scrolltop;
var centerX, centerY;
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
var leftoffset = scrolledX + (centerX - 100) / 2;
var topoffset = scrolledY + (centerY - 100) / 2;
$('.current div[name="popup"]').css({'top' : topoffset + 'px', 'left':
leftoffset + 'px'});}
$(function() {
$("html").ajaxStart(function() {
centerdiv();
$(".current div[name=popup]").show();
});
$("html").ajaxComplete(function() {
$(".current div[name=popup]").hide();
});
});
Note, this is for an iphone mobile website and the ajaxstart function attaching to the html is crucial as it doesn't work on the iphone any other way on my website.
You forget to set position to absolute, or fixed
$('.current div[name="popup"]').css({'top' : topoffset + 'px', 'left':
leftoffset + 'px', 'position':'absolute' });}
Here is my solution that works fine:
var winH = $(window).height();
var winW = $(window).width();
$(this).css('top', winH/2 - $(this).height()/2);
$(this).css('left', winW/2 - $(this).width()/2);
$(this).show();
$(this) must refer to the DIV element you want to show in the center.
wh = $(window).height();
dh = $("#div").height();
$("#div").css("top",(wh - dh)/ 2 + $(window).scrollTop() + 'px');
Edit:
Not the same for width, it's actually:
ww = $(width).width();
dw = $("#div").width();
$("#div").css("left",(ww - dw)/ 2 + 'px');
But it really depends if you have a fixed viewport or not, there are many ways to center it...
Good Luck!
If you don't have horizontal scrolling you can do it partially with straight CSS
div{
left: 50%;
margin-left: -[box_width / 2]px;
}

Categories