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();
}
});
});

Apple timeline style scrolling on mouseover

I would like to build a slider like Apple did: http://www.apple.com/30-years/
I have no idea how to scroll on mouseover like on the link above. I know I have to decrease the translateX value by X, but what is X? :)
// scroll animation
function scrollAnimation(){
$('ul').css({
'transform' : 'translateX(-' +mouseX+ 'px)'
});
scrollAnimation();
}
I would like to scroll the images continuosly, with a speed what depends from the mouse's position.
Here is my full code: http://jsfiddle.net/M8cnV/light/
I'm new here, so I appreciate any comments about my code.

Here's what I came up with:
http://jsfiddle.net/5nTpS/
I added some new variables to keep track of how far from the left or right edge the cursor is, which direction to scroll and how fast to scroll:
var scrollSpeed = 0;
var hotEdgeWidth = 200;
var animationSign = "-";
And modified your mousemove function so that it works out if the cursor is close enough to the left or right of the container that you want the images to scroll, which direction you want them to scroll in, and how fast you want them to scroll:
$(container).mousemove(function(e) {
if(e.pageX > $(this).width() - hotEdgeWidth){
scrollSpeed = hotEdgeWidth - ($(this).width() - e.pageX);
animationSign = "-";
}
else if(e.pageX < hotEdgeWidth){
scrollSpeed = hotEdgeWidth - e.pageX;
animationSign = "+";
}
else{
scrollSpeed = 0;
}
scrollAnimation();
}).mouseout(function(e){
scrollSpeed = 0;
});
Then, change scrollAnimation to use the .animate function, and add a complete function to call the scrollAnimation function again once the animation has finished. It only animates if no animation is already happening to prevent a feedback loop happening:
function scrollAnimation(){
if (!$('li').is(':animated')){
$( "li" ).animate({
"left": animationSign + "="+scrollSpeed+"px"
},
500,
function(){
scrollAnimation();
});
}
}

How can I make a DOM element's height resizable?

I have a widget in my ui that resides in a fixed location on the right bottom corner of my browser.
I want the user to be able to click on the header portion of the widget and be able to drag it upwards and effectively increase the height of the widget. The widgets bottom, left, and right properties would be unchanged but top should be able to change to allow up to the max height of the widget as defined by it's css max-height.
Are there any examples of something like this out there? I know jQueryUI has the resizable behavior but unfortunately I cannot use jQueryUI on this project. We are however using jQuery.
Any tips or ideas or jsfiddle exaples are greatly appreciated. Just something to get me going in the right direction. I looked a CSS3 resizable and it puts that standard resizing icon in the right bottom corner, like this textarea.

Perhaps this plugin can help?
http://dev.iceburg.net/jquery/jqDnR/

It is possible to do this with just jQuery. Off the top of my head, you could probably do something like this:
<div id="widget">
<h3 id="widget-header">Header</h3>
some content
</div>
<script language="javascript" type="text/javascript">
var clientY = 0;
var offset = null;
var changeSize = false;
$(function () {
$("#widget-header")
.mousedown(function (event) {
clientY = event.pageY;
offset = $("#widget").offset();
changeSize = true;
})
.mousemove(function (event) {
if (changeSize) {
// get the changes
var difY = event.pageY - clientY;
offset.top += difY;
// animate the changes
$("#widget").offset({ top: offset.top, left: offset.left });
$("#widget").height($("#widget").height() - difY);
// update the new positions
clientY = event.pageY;
}
})
.mouseup(function (event) { changeSize = false; })
.mouseout(function(event) { changeSize = false; });
});
</script>

How to drag a DIV so its width and height are negative values?

I'm a bit stumped here. I am developing a feedback utility that will allow the user to "draw" boxes on a web page to highlight problem areas. Right now I have an overlay DIV that fills the screen and jQuery allows you to draw red outlined DIVs by clicking and dragging.
Here is the JS:
{
var $feedbackOverlay = jQuery('#feedbackOverlay');
var $original = { top: 0, left:0 };
$feedbackOverlay.bind('mousedown', function (e)
{
jQuery('<div id="currentHighlight"></div>')
.css('width', '1px')
.css('height', '1px')
.css('border', 'solid 3px #ff0000')
.css('border-radius', '5px')
.css('position', 'absolute')
.css('left', e.pageX)
.css('top', e.pageY)
.css('z-index', '8000001')
.appendTo('body');
$original = { top: e.pageY, left: e.pageX };
});
$feedbackOverlay.bind('mousemove', function (e)
{
var $currentHighlight = jQuery('#currentHighlight');
if ($currentHighlight.length > 0)
{
var $pos = { top: e.pageY, left: e.pageX };
if($pos.top < $original.top) $currentHighlight.css('top', $pos.top);
if ($pos.left < $original.left) $currentHighlight.css('left', $pos.left);
$currentHighlight.height(Math.abs($pos.top - $original.top));
$currentHighlight.width(Math.abs($pos.left - $original.left));
}
});
$feedbackOverlay.bind('mouseup', function (e)
{
var $currentHighlight = jQuery('#currentHighlight');
$currentHighlight.removeAttr('id');
});
var $feedbackInstructions = jQuery('#feedbackInstructions');
$feedbackInstructions.fadeIn(1000, function ()
{
setTimeout(function ()
{
$feedbackInstructions.fadeOut(1000);
}, 3000);
});
$feedbackOverlay.height(jQuery(document).height());
});
Here is a jsFiddle for the above:
http://jsfiddle.net/Chevex/RSYTq/
The problem is that I can't drag the boxes up or left. The first click puts the top left corner where the mouse clicked. After that subsequent dragging will change the width of the box. Letting go of the mouse completes the box and you may then start drawing another one. If you try to drag the DIV left or up while drawing it's width will remain at 0 but won't go negative.

Here you can find working solution: http://jsfiddle.net/RSYTq/34/

Something like this will get you closer to what you want: http://jsfiddle.net/RSYTq/18/
Doesn't quite handle move up and to the left and then switching to moving down and to the right quite right yet but it gives you the idea.

There's no such thing a a negative width - these are not coorindinates. You need to reposition and recalculate the corner positions relative to the corner that's not being moved.

Sounds like you need to check if the click origin (x,y) is > than the current mouse position, and then swap which one you use for the CSS top-left.

You would need to track the original start point somewhere (variables, data attributes on #currentHighlight, wherever you want), and check for width or height < 0. When so, set the #currentHighlight left/top CSS to be offset by original + (e.pageX - $currentHighlight.position().left) (for example). Then set the #currentHighlight width/height to the same difference (but positive: (e.pageX - $currentHighlight.position().left) * -1).

jQuery - How to get browser window to scroll horizontal when div is clicked?

I have picture of an arrow in a div. This div is fixed in the bottom right corner of very wide page.
How can I use jQuery to scroll the window right 600px each time the div is clicked? (And is it possible to detect when the page can no longer scroll right, and hide the arrow?)
Cheers.

Try something like this:
var distance = 600;
$("div").click(function() {
$("html:not(:animated), body:not(:animated)").animate(
{scrollLeft: "+="+distance}, 400
);
});
jsfiddle here: http://jsfiddle.net/juXLu/2/
[edit]
And here's detecting if you're at the end of the document http://jsfiddle.net/lukemartin/juXLu/5/
var distance = 600,
docWidth = $(document).width(),
scrollPos;
// click handler
$("div").click(function() {
// animate
$("html:not(:animated), body:not(:animated)").animate(
// amount to scroll
{scrollLeft: "+=" + distance},
// scroll speed (ms)
400,
// callback function
function(){
// check our scroll position
scrollPos = $(window).width() + $(window).scrollLeft();
// if it equals the doc width, we're at the end
if(docWidth === scrollPos) {
$("div").text("End of the line");
}
}
);
});

Use the jquery method scrollLeft
$(document).ready(function(){
$(window).scrollLeft((Number($(window).scrollLeft())+600)+'px');
});
Something like that :)

You could user the Scrollto plugin,
http://plugins.jquery.com/project/ScrollTo
It is really easy to use, just use the documentation. Then you could create a placeholder to determine whether or not its to the end of the page. Just stick the placeholder at the very end, and calculate the distance.