jQuery position element from the mouse point (and more) - javascript

I'm writing a jQuery plugin for adding context menus to elements.
Now, I need to fix the position of the context menu. If there is not enough space to show the entire context menu from the mouse bottom, then it should show from the mouse top.
I tried some things but not works like I want.
Here is the code on jsFinddle: http://jsfiddle.net/evandroprogram/pRPQq/
Thank you.

Here you go mate, I've forked and updated your fiddle here
http://jsfiddle.net/joevallender/j5Vy9/
The code change is this
var screenBottom = $(window).scrollTop() + $(window).height();
var menuHeight = _contextMenu.height();
var menuBottom = menuHeight + options.positionY;
if(menuBottom > screenBottom) {
_contextMenu.css({
top: "-=" + menuHeight
})
}
Placed just after you set _contextMenu.css()
EDIT Just tested again and that isn't pixel perfect but it does work and should give you a decent clue if you want to tweak it :)

Related

Stick the bar always to footer even while animating

Recently here, I asked a question to stick a bar element always to bottom-left of the container. It seems not possible using just css. So, I ended up using javascript. Here is the Working Fiddle
Giving highlights of the previous question:
Stick the bar element to bottom-left of the container
The bar should be in bottom-left, even the container is scrolled vertically or horizontally.
The bar should come over the horizontal scrollbar, if the horizontal scrollbar is present.
The above fiddle works fine and obeys all above cases, even when the window is resized.
Now, I have the same situation but the container will get resized because of animation button click but not window resize.
Since, I am animating for one second, I am calling the same code present in the window resize function while I clicked on the animating button. But doing so is somehow breaking and isn't following the above rules/requirements.
Here is the Fiddle. (not working)
Please help.
PS: Here is the link to previous question. (if someone wants brief understanding)
Again, I solved it. I was making things complicated. Where there was need of only bottom property, I was using top and resetting it. Lots of unneccessary action in the code.
Here is the code, which is working fine.
$(function () {
$('.content').width($('body').width() - 50);
});
var stickToBottom = function (parent) {
var bar = parent.querySelector('.bar');
var top = bar.offsetTop;
parent.addEventListener('scroll', function (e) {
var el = e.currentTarget;
bar.style.bottom = -el.scrollTop + "px";
bar.style.left = el.scrollLeft + "px";
});
}
var parent = document.querySelector('.parent');
stickToBottom(parent);
$('.clickme').click(function () {
$(this).toggleClass('active');
});
Thanks to rlemon for giving a idea in javascript chat room.
Working Fiddle

How to move absolutely position elements depending on screen size in Jquery

Hi I am building a magnetic poetry game where you drag words together to form some phrases. I am Using jqueryui draggable and droppable with absolute positioned divs.
http://test-magnets.meteor.com/
I am also trying to make the game responsive as much as possible. I have a bank of words to the right of the fridge that have a class "not-in-play" once you drop on the fridge that class is removed. So when the screen size is smaller i just want to move the magnets that have the class "not-in-play".
i was thinking something like this
$(document).ready(function() {
var screenwidth = $(window).width()
if (screenwidth <= 800) {
$('magnet.not-in-play').each(function(){
var currentPosLeft = parseInt($(this).css('left'));
$(this).css('left', (currentPosLeft - 1000) + 'px');
});
}
});
I can get an alert to fire inside the if block but any css i try is not working. It works in the console fine hence my confusion. Any suggestions would be greatly appreciated. Thanks
this seems to work fine in a fiddle
http://jsfiddle.net/ff0ynexc/
just not in my app
-John
Using -= will not work (you're setting the properties directly), instead do something like
var currentPosLeft = parseInt($('.magnet.not-in-play').css('left'));
$('.magnet.not-in-play').css('left', (currentPosLeft - 600) + 'px');
(You'll probably have to do that in a loop)

JQuery animated banner

So I previously asked a question about how to create a banner like the one shown here and I got a really good answer to start me off. I have been working on it since and I'm having a lot of problems getting the animation to slide back to it's original position.
Here is my animation: http://jsfiddle.net/43nCF/ (don't click the green block first)
Issue: After the first time you toggle a block, clicking another block will not move it to the left.
I also have some other minor issues which I would be grateful if someone helped me with.
How do I get the width and the moving of the blocks to animate simultaneously like in the banner animation I am trying to replicate?
How do I get the block to slide back to the original position instead of just kind of 'transporting' there?
I am only beginner at jQuery so any help would be amazing.Thanks.
As for the positioning problem: you need to drop the left declaration in your second function.
Regarding making the animation act simultanous: animate both the right and the width property for each element, in one call:
function() {
var position = $.data(this, 'position');
var ind = $(this).index();
//moves image back to original position
$('#container div').each(
function() {
$(this).animate({
right: "",
width: 100
});
});
});
Working example here.
I see you have a response.
In case this version is of any help to you:
http://jsfiddle.net/vCbcz/
Instead of altering the divs other than the one being affected, I wrapped them all in a #slider div and adjusted that one's left margin to push it to the left.
$('#slider').animate({
marginLeft: '-' + ind * 105 + 'px'
});
and back
$('#slider').animate({
marginLeft: 0 + 'px'
});
There is a much easier way altogether of doing this. By using jQuery's scrollTo plugin, this can be done in a mere few lines of code, without using indices, calculations, or anything of that nature.
Live Demo http://jsfiddle.net/Jaybles/WEzny/

fixed div on bottom of page that stops in given place

I have fixed div on bottom of my page that works well. I wonder if there is some simple way to make it "stop" on some place in page when user srolls down to it. I want it to remain fixed on bottom, until user scrolls down to some defined place on page and than stick it to the page and scroll like the rest of content. Any suggestions?
I tried setting something up on jsfiddle. While I was writing it up, I see that others have posted their alternatives. In case mine helps in any way: http://jsfiddle.net/PnUmM/1/
I set the position to relative in the CSS, calculate where it is on document load to keep the info aside and then set it to fixed.
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('#sticky_for_a_while').offset();
sticky_offset = original_position_offset.top;
$('#sticky_for_a_while').css('position', 'fixed');
});
$(window).scroll(function () {
var sticky_height = $('#sticky_for_a_while').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll + window_height) > sticky_offset) {
$('#sticky_for_a_while').css('position', 'relative');
}
if((where_scroll + window_height) < (sticky_offset + sticky_height)) {
$('#sticky_for_a_while').css('position', 'fixed');
}
});
I made this up for you: http://jsfiddle.net/XCYFG/1/.
$(document).ready(function() {
window._div1 = $('#div1'); //selector is expensive
window._window = $(window);
$(window).scroll(function(e) {
_div1.css("top",
Math.min(_window.height(),
window.scrollY + 100)
+ _window.height() - _div1.height() - 110);
}).scroll();
});
I have a plugin that does the opposite - it's in the flow of the webpage, and when the user scrolls past it, it gets fixed to the viewport. What it actually does though is apply a css class to the element, so you should be able to use it as is.
You can find the plugin here:
https://github.com/hanssonlarsson/jquery-fixedscroll
Then I would suggest you have your element in the flow of your webpage:
<div id="sometimesFixed">content</div>
With css:
#sometimesFixed {
position: fixed;
bottom: 0;
}
#sometimesFixed.scroll {
position: static;
}
And apply the plugin like so, in your JavaScript:
$('#sometimesFixed').fixedscroll({className: 'scroll'});
There is also a more general plugin, very new, called jquery-waypoints. The idea is to bind any code to "waypoints", points on the webpage where, when the user scrolls past them, some code is executed.
https://github.com/imakewebthings/jquery-waypoints
It's probably more optimized and a better fit than my plugin, but YMMV!

How do I make a <div> move up and down when I'm scrolling the page?

How can I make a div element move up and down the page when the user is scrolling the page? (where that element is always visible)
You want to apply the fixed property to the position style of the element.
position: fixed;
What browser are you working with? Not all browsers support the fixed property. Read more about who supports it, who doesn't and some work around here
http://webreflection.blogspot.com/2009/09/css-position-fixed-solution.html
Just for a more animated and cute solution:
$(window).scroll(function(){
$("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
And a pen for those who want to see: http://codepen.io/think123/full/mAxlb, and fork: http://codepen.io/think123/pen/mAxlb
Update: and a non-animated jQuery solution:
$(window).scroll(function(){
$("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
});
using position:fixed alone is just fine when you don't have a header or logo at the top of your page. This solution will take into account the how far the window has scrolled, and moves the div when you scrolled past your header. It will then lock it back into place when you get to the top again.
if($(window).scrollTop() > Height_of_Header){
//begin to scroll
$("#div").css("position","fixed");
$("#div").css("top",0);
}
else{
//lock it back into place
$("#div").css("position","relative");
}
Here is the Jquery Code
$(document).ready(function () {
var el = $('#Container');
var originalelpos = el.offset().top; // take it where it originally is on the page
//run on scroll
$(window).scroll(function () {
var el = $('#Container'); // important! (local)
var elpos = el.offset().top; // take current situation
var windowpos = $(window).scrollTop();
var finaldestination = windowpos + originalelpos;
el.stop().animate({ 'top': finaldestination }, 1000);
});
});
Just add position: fixed; in your div style.
I have checked and Its working fine in my code.
You might want to check out Remy Sharp's recent article on fixed floating elements at jQuery for Designers, which has a nice video and writeup on how to apply this effect in client script

Categories