Develop Reference

Scroll up a div instead of scrolling down

Weyoo, I have a div that appears when i right click, but the problem is it scrolls down like in this image:
But i would rather to scroll up like this:
Here's the code:
$("#Menu-File").finish().toggle(100).
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
Thanks in advance and sorry for my awful Paint mechanics.

Actually i have found the solution,
$("#Menu-File").finish().slideToggle(
css({
bottom: "calc(100% - " + event.pageY + "px)",
left: event.pageX + "px"
});

jquery offset left property not working

I have this line:
$("#"+genId).css({"border":"2px solid black", "background-color":"white", "position":"fixed", "z-index": "10000000000", "top": (pos.top + h + 10)},"left", pos.left + w + 10);
When I remove the left part at the end it works, but when I add the left part the element disappears.
Not sure what is happening:
Full Function:
function showPopUp(element){
var pos = element.offset();
var h = element.height();
var w = element.width();
var newDiv = document.createElement('div');
var genId = ("a" + (new Date).getTime() + Math.floor(Math.random() * 20));
newDiv.id = genId;
document.getElementsByTagName('body')[0].appendChild(newDiv);
$("#"+genId).css({"border":"2px solid black", "background-color":"white", "position":"fixed", "z-index": "10000000000", "top": (pos.top + h + 10), "left": (pos.left + w + 10)});
$("#"+genId).append("<p> Tag:" + element.prop("tagName") + " || Em: "+ getEm(element) + "em || Px: " + getPixel(element) + "</p><p>Font Family: " + getFontFam(element) + "</p>");
}
EDIT
Fixed typo in code from copying from file
... "top": (pos.top + h + 10), "left": (pos.left + w + 10)});

You're using css() method wrong. It can't look like that. css() method takes only one argument like that(a string or an array). So this:
$("#" + genId).css({
"border": "2px solid black",
"background-color": "white",
"position": "fixed",
"z-index": "10000000000",
"top": (pos.top + h + 10)
}, "left", pos.left + w + 10);
Should look like this:
$("#" + genId).css({
"border": "2px solid black",
"background-color": "white",
"position": "fixed",
"z-index": "10000000000",
"top": (pos.top + h + 10),
"left": (pos.left + w + 10)
});
Please read the documentation from here and you will understand.
It's like .css( propertyName )
So you can either have this:
.css('display', 'block')
Or this:
.css({'display': 'block', 'color': '#f00'})

Not sure if this is the best fix but it worked for me.
I used the margin-left property instead of the left property and it is working now.

Get Position of Element in Javascript

I am trying to get the position of an element dropped onto the canvas using the following code.
var x = $(".partitiondrop").position();
alert("Top position: " + x.top + "\nLeft position: " + x.left);
The above works fine. I would like to know if I can get the Right and Bottom positions in the same way so that I can have the area bound by the element as I need to check which elements fall inside this element.

var $partitiondrop = $(".partitiondrop");
var position = $partitiondrop.position();
position.bottom = position.top + $partitiondrop.height();
position.right = position.left + $partitiondrop.width();
alert("Top position: " + position.top + "\nLeft position: " + position.left + "\nBottom position: " + position.bottom + "\nRight position: " + position.right);

U can always add width to x.left position and add height to x.top position.

To get the position of any element by its ID you can do the following
var elementID; //Already obtained via attr(id) method or so
var $element = $("#" + elementID);
var position = $element.position();
position.bottom = position.top + $element.height();
position.right = position.left + $element.width();
var top_position=position.top;
var left_position=position.left;
var bottom_position=position.bottom;
var right_position=position.right;

In Jquery, it can be done using the following code
var p = $( "elementId" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );

Right Position:
$(window).width() - ($('.partitiondrop').offset().left + $('.partitiondrop').width());
Bottom Position:
$(window).height() - $('.partitiondrop').offset().top;

Draggable element on scalable container mouse floats away from helper on creation

I am trying to drag a div on a scalable element and when I drag it, the mouse seems to float away from helper on creation. Could anyone help me out with this?
Here is a jsfiddle and my code is below of what I've tried.
$("div.text").draggable({
zIndex: 3000,
appendTo: 'body',
helper: function (e, ue) {
return $(this).css({
'transform': 'scale(' + percent + ')',
'-moz-transform': 'scale(' + percent + ')',
'-webkit-transform': 'scale(' + percent + ')',
'-ms-transform': 'scale(' + percent + ')'
}).appendTo('body');
}
});
I've also tried this which helps in some during the high percent, but still is off as you scale the container smaller.
return $(this).css({
'transform': 'scale(' + percent + ')',
'-moz-transform': 'scale(' + percent + ')',
'-webkit-transform': 'scale(' + percent + ')',
'-ms-transform': 'scale(' + percent + ')'
}).appendTo('body').offset({ top: e.pageY, left: e.pageX });

You are having an issue with setting the element position based on the mouse position instead of based on the position of the element relative to the mouse position. That, combined with the element scaling down on dragStart are causing it to jump to where your cursor is in the center and then above your cursor since it scales up. You could use getBoundingClientRect() to determine the actual position of the element and then set it manually with JS.
var containerBox = $(this)[0].getBoundingClientRect();
var docBox = document.body.getBoundingClientRect();
startTop = containerBox.top - docBox.top;
startLeft = containerBox.left - docBox.left;
$(this).css({
position: 'fixed',
top: startTop + 'px',
left: startLeft + 'px',
height: containerBox.height + 'px',
width: containerBox.width + 'px'
});
I didn't try it with your fiddle but it will most likely solve your issues. Also you should use jquery UI resizable widget as well if you are looking for resizability, instead of rewriting it yourself. Also, why is it that you are scaling the element after it is dragged and not before?

Change thickbox popup size dynamically

I'm using ThickBox to open popup in my page. In popup there is a tab on click on which i need to change the size of ThickBox popup window. How can i do that ?
Thanks in advance.

This is the code they use
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
so you can use the same with a slight change (assuming you use a modern version of jQuery)..
$('#yourbutton').click(function() {
var TB_WIDTH = 100,
TB_HEIGHT = 100; // set the new width and height dimensions here..
$("#TB_window").animate({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
});
Demo at http://jsfiddle.net/gaby/rrH8q/

Attach a click event handler to said tab that changes the TB_Window dimensions and margins to center it again, e.g.
$("#tab").click(function() {
$("#TB_window").css("height", newHeight);
$("#TB_window").css("width", newWidth);
$("#TB_window").css("margin-top", ($(window).height()-newHeight)/2 );
$("#TB_window").css("margin-left", ($(window).width()-newWidth)/2);
});

A little correction in Gaby aka G. Petrioli's answer so that popup should set the margins also correctly :
var TB_WIDTH = 500, TB_HEIGHT = 400;
// set the new width and height dimensions here..
$("#TB_window").animate({marginLeft: '"'+parseInt((($vitjs(window).width()-TB_WIDTH) / 2),10)
+ 'px"', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px',marginTop:'"'+parseInt((($vitjs(window).height()-TB_HEIGHT) / 2),10) +
'px"'});

I did something like this.
This needs to be re-launched if the wiewport is resized while the popup is open.
function tb_position() {
if(TB_WIDTH > $(window).width())
{
$("#TB_window").css({marginLeft: 0, width: '100%', left: 0, top:0, height:'100%'});
$("#TB_ajaxContent, #TB_iframeContent").css({width: '100%'});
$("#TB_closeWindowButton").css({fontSize: '24px', marginRight: '5px'});
}
else
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
}

You have to enclose this inside a setTimeout so that this will be done after the thickbox is opened, not when the button is click. Usually, it happens in between of "Clicking of button" and "opening of thickbox".
var TB_WIDTH = jQuery(window).width() > 400 ? 400 : jQuery(window).width(),
TB_HEIGHT = 400; // set the new width and height dimensions here..
setTimeout(function() {
jQuery("#TB_window").css({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
}, 0);