Positioning Context Menu - javascript

I'm trying to position a custom context menu with jQuery.
The first time it appears at the right position (mouse coordinates), but then the current position is being summed up with the new position, so that the menu disappears from the screen.
Here is the JavaScript:
<script>
$(function(){
$('#box').hide();
$(document).bind("contextmenu", function(e) {
$("#box").offset({left:e.pageX, top:e.pageY});
$('#box').show();
e.preventDefault();
});
$(document).bind("click", function(e) {
$('#box').hide();
});
$('#box').bind("click", function(e) {
$('#box').hide();
});
});
</script>

Try position: fixed; with position of context menu changes based on following condition -
var windowHeight = $(window).height()/2;
var windowWidth = $(window).width()/2;
if(e.clientY > windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY > windowHeight && e.clientX > windowWidth) {
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("bottom", "auto");
} else {
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("bottom", "auto");
}
http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/

Don't use offset method, try css instead, positioning context menu absolutely:
$("#box").css({left:e.pageX, top:e.pageY});
CSS:
#box {
...
position: absolute;
}
http://jsfiddle.net/smxLk/

The problem is that when you right click then left click elsewhere and then right click again, the position is incorrect.
The root of the problem is that you set the offset before showing the element. It appears that it confuses jQuery if the element is set to display:none and then its offset is changed.
To fix the problem you need to switch the show and the offset lines in your code:
$(document).bind("contextmenu", function(e) {
$("#box").offset({left:e.pageX, top:e.pageY});
$('#box').show();
e.preventDefault();
});
becomes
$(document).bind("contextmenu", function(e) {
$('#box').show();
$("#box").offset({left:e.pageX, top:e.pageY});
e.preventDefault();
});
Demo and
Source

Related

Navbar hide on scroll down, shows on scroll up but keep mobile full page menu

I have a navbar that hides when I scroll down and shows up when I scroll up. That works fine.
But on smaller screens I have a full width menu that expands with a hamburger toggle and when I scroll even then hides. Is there a solution to fix that?
I also wonder if the navbar always could be visible when it's on top of the page.
Thanks on behalf.
My website
// detect scroll top or down
if ($('.smart-scroll').length > 0) { // check if element exists
var last_scroll_top = 0;
$(window).on('scroll', function() {
scroll_top = $(this).scrollTop();
if(scroll_top < last_scroll_top) {
$('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
}
else {
$('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
}
last_scroll_top = scroll_top;
});
}
Found the solution:
// detect scroll top or down
if ($('.smart-scroll').length > 0) { // check if element exists
var last_scroll_top = 0;
$(window).on('scroll', function() {
scroll_top = $(this).scrollTop();
if(scroll_top > last_scroll_top && last_scroll_top > 40) {
$('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
}
else {
$('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
}
last_scroll_top = scroll_top;
});
}
$(document).ready(function(){
$(".navbar").on('shown.bs.collapse', function(){
$('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-no');
});
$(".navbar").on('hidden.bs.collapse', function(){
$('.smart-scroll').removeClass('scrolled-no').addClass('scrolled-down');
});
});

Disable Javascript Parallax Effect on Mobile

Can anyone tell me how to disable my parallax effect on mobile? Thank you for your help in advance!
Here is my code:
$(document).scroll(function() {
var y = $(document).scrollTop(), header = $(".page-nav"); if(y >= 528)
{ header.css({position: "fixed", "top" : "0", "left" : "0"}); } else
{header.css("position", "relative"); } });
function EasyPeasyParallax() {
scrollPos = $(this).scrollTop();
$('.landing-page-hero').css({
'background-position' : '50% ' + (-scrollPos/4)+"px"
});
$('.hero-content').css({
'margin-top': (scrollPos/4)+"px",
'opacity': 1-(scrollPos/250)
});
}
$(document).ready(function(){
$(window).scroll(function() {
EasyPeasyParallax();
});
});
I'd recommend making use of window.matchMedia():
$(document).ready(function(){
var mq = window.matchMedia("(min-width: 600px)"); // Your desired breakpoint
if (mq.matches) {
$(window).scroll(function() {
EasyPeasyParallax(); // Only parallax on devices at least 600px wide
}
});
});
Hope this helps! :)
Grab the viewport width on load. Inside a scroll handler, check to make sure that the width is above mobile, and only call your EasyPeasyParallax() method if the width is greater than 768 (or whatever your breakpoint for mobile is).
var $vpwidth = $( window ).width();
$( window ).scroll(function() {
if ($vpwidth >= 768){
EasyPeasyParallax();
}
});

jquery responsive on resize not working

i want to check (on resize) the window width and then load a special part of a script. when the browser window is < 500px width i want to scroll to the top of the div (when clicking on a menu link) and when the browser window is > 500px i want to scroll to the vertical middle of the div when i click on a menu link. it somehow works but it's slow and buggy.
first i create the "resize" function
then i check the browser width
(function($){
// on load
$(window).resize(function(){
var current_width = $(window).width(); //check width
$('.go').click(function (e) {
if(current_width > 700){ // when min-width 700px than go to center of DIV
e.preventDefault();
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2 // scroll to verticall middle of div
}, 200);
}
else if(current_width < 700){ // when max-width 700px than go to top of DIV
e.preventDefault();
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top + 0 // scroll to top of div
}, 200);
}
});
});
})(jQuery);
when id do it with "document ready" everything works fine ... but "document resize" makes problems.
fiddle here
update - got it working this way:
$(".go").click(function(){
if ($(window).width() < 800) { // if window smaller than 800px
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - 0
}, 200);
}
if ($(window).width() > 800) { // if window bigger than 800px
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2
}, 200);
}
});
It would be better to attach the event handlers like this:
var resizeTimeout; //the timeout prevents triggering the resize event more than once
$(function () {
$(window).resize(function () {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(resize, 500);
});
$('.go').click(function (e) {
});
});
function resize() {
if ($(window).width() > 700) {
} else {
}
}
Maybe a bad idea but you can try something like this in css:
#media screen and (min-width: 480px){
$("body").css({"position":"absolute", "top":"12px", "left":"12px"}); //Set your x and y
}
#media screen and (min-width: 768px){
$("body").css({"position":"absolute", "top":"22px", "left":"22px"}); //Set other stuff
}
No javascript needed :)
PS: NOT tested!

Unable to drop an element on mouseup event

Here is the jQuery code that I have written to drag multiple items at a time. It is draggable now but not droppable.
here is the code
$(document).on('click', function (e) {
var target = e.target;
if (!$(target).hasClass('a')) $('.selected').removeClass('selected');
});
$(document).delegate('.a', 'dblclick', function (e) {
$(this).addClass('selected');
});
$(document).delegate('.selected', 'mousedown', function (e) {
var div = $('<div></div>');
$('.selected').each(function () {
div.append($(this).clone());
});
div.prop('id', 'currentDrag');
$('#currentDrag').css({
left: e.pageX + "px",
top: e.pageY + "px"
});
$('body').append(div);
});
$(document).on('mouseup', function (e) {
var tgt = e.target;
var mPos = {
x: e.pageX,
y: e.pageY
};
$('.drop').each(function () {
var pos = $(this).offset(),
twt = $(this).width(),
tht = $(this).height();
});
if((mPos.x > pos.left) && (mPos.x < (pos.left + twt)) && (mPos.y > targPos.top) && (mPos.y < (pos.top + tht))) {
$(this).append($('#currentDrag').html());
}
$('.drop .selected').removeClass('selected');
$('#currentDrag').remove();
});
$('.drop').on('mouseup', function (e) {
$(tgt).append($('#currentDrag').html());
$('.drop .selected').removeClass('selected');
$('#currentDrag').remove();
});
$(document).on('mousemove', function (e) {
$('#currentDrag').css({
left: e.pageX + "px",
top: e.pageY + "px"
});
});
What is the pronblem with my code and how can I achieve this. here is the fiddle http://jsfiddle.net/mDewr/27/
I would really recommend trying to find a way to make the jQuery UI draggable and droppable libraries work for you. Then the question becomes,
similar to this one: How do I drag multiple elements with JavaScript or jQuery?.
Here's how we can apply one of the answers from that question to your problem. I'm using the jQuery UI multiple draggable plugin, the entire script of which can be found here: jquery.ui.multidraggable-1.8.8.js.
First let's simplify your HTML. By putting our draggable and dropable divs inside of elements, we don't have to apply redundant stylings to each one. Instead we can use the containing element to style
HTML
<div id="parent">
<div id="dragTargets">
<div>123</div>
<div>456</div>
<div>789</div>
</div>
<div id='dropTargets'>
<div></div>
<div></div>
</div>
</div>
Using the plugin we can call multidraggable on each of the drag divs. And droppable anywhere they can be dropped
JavaScript
$("#dragTargets div").multidraggable();
$("#dropTargets div").droppable();
Customize
We can control the appearance with styling. As an example, we'll make anything that can receive drops yellow, anything you're about to drop as red, and anything that has received an element green.
Here's some styling as an example in CSS
.ui-state-highlight { background: green; }
.ui-state-active { background: yellow; }
.ui-state-hover { background: red; }
And we'll control when these classes are applied with JavaScript:
$("#dropTargets div").droppable({
activeClass: "ui-state-active",
hoverClass: "ui-state-hover",
drop: function () {
$(this).addClass("ui-state-highlight")
}
});
Multi-Draggable
You should style the elements that are currently selected. The script will apply the class ui-multidraggable to all the currently selected elements. The following CSS will make it apparent to the user that their choice is selected.
.ui-multidraggable {
background: tan;
}
Check out this demo. Just hold down ctrl to select more than one of the divs and then drag all of them at once.
jsFiddle
There are few errors in you code. You can check errors on browser console.
To check elements over droppable area, you should check the drop area in the each loop, rather than after each loop. When moving mouse, you should better turn off selection to avoid selected text flashing
$(document).on('click', '.a', function (e) {
$(this).removeClass('selected');
});
$(document).on('dblclick', '.a', function (e) {
$(this).toggleClass('selected');
});
$(document).on('mousedown', '.selected', function (e) {
var dragMode = true;
var div = $('<div></div>');
$('.selected').each(function () {
div.append($(this).clone());
});
div.prop('id', 'currentDrag');
$('#currentDrag').css({
left: e.pageX + "px",
top: e.pageY + "px"
});
$('body').append(div);
//disable selection on dropping start
disableSelection();
$(document).on('mousemove.drop', function(e){
onDragging(e, dragMode);
});
$(document).on('mouseup.drop', function(e){
onDragEnd(e, dragMode);
});
});
function onDragEnd(e, dragMode){
if(!dragMode)
return;
var tgt = e.target;
var mPos = {
x: e.pageX,
y: e.pageY
};
$('.drop').each(function () {
var pos = $(this).position(),
twt = $(this).width(),
tht = $(this).height();
if((mPos.x > pos.left) &&
(mPos.x < (pos.left + twt)) &&
(mPos.y > pos.top) &&
(mPos.y < (pos.top + tht))) {
$(this).append($('#currentDrag').html());
}
});
$('.drop .selected').removeClass('selected');
$('#currentDrag').remove();
$('.onDrop').removeClass('onDrop');
//remove listener on docuemnt when drop end
$(document).off('mousemove.drop');
$(document).off('mouseup.drop');
//enable selection
enableSelection();
}
function onDragging(e, dragMode){
if(!dragMode)
return;
var p = $('body').offset();
var mPos = {
x: e.pageX,
y: e.pageY
};
$('#currentDrag').css({
left: mPos.x,
top: mPos.y
});
$('.drop').each(function () {
var pos = $(this).position(),
twt = $(this).width(),
tht = $(this).height();
$(this).toggleClass("onDrop",
(mPos.x > pos.left)
&& (mPos.x < (pos.left + twt))
&& (mPos.y > pos.top)
&& (mPos.y < (pos.top + tht))
);
});
}
function disableSelection(){
$(document).on("selectstart", function(){ return false; });
//firefox
$("body").css("-moz-user-select", "none");
}
function enableSelection(){
$(document).off("selectstart");
//firefox
$("body").css("-moz-user-select", "");
}
I updated your code: http://jsfiddle.net/mDewr/46/, may can help you.
There were several errors, which I'll not list now, but you can compare the old version with the new one.
$(document).on('dblclick', '.a', function (e) {
$(this).toggleClass('selected');
});
$(document).on('mousedown', '.selected', function (e) {
var div = $('<div id="currentDrag"></div>');
$('.selected').each(function () {
div.append($(this).clone(true));
});
var p = $('body').offset();
var l = e.pageX - p.left;
var t = e.pageY - p.top;
console.log(l, ', ', t);
$('body').append(div);
$('#currentDrag').css({
left: l,
top: t
});
});
$(document).on('mouseup', '.selected', function (e) {
$('.d').each(function(index, item){
var $i = $(item);
if (e.pageX >= $i.offset().left &&
e.pageX <= $i.offset().left + $i.width() &&
e.pageY >= $i.offset().top &&
e.pageY <= $i.offset().top + $i.height()) {
console.log('Dropped');
var $cl = $('#currentDrag').find('>*').clone(true);
$i.append($cl);
}
});
$('.selected').removeClass('selected');
$('#currentDrag').remove();
});
$(document).on('mousemove', function (e) {
var p = $('body').offset();
$('#currentDrag').css({
left: e.pageX - p.left,
top: e.pageY - p.top
});
});
http://jsfiddle.net/mDewr/43/
Everything should work perfectly in this version (this is an update).
PS: I've changed to 1.7+ jQuery, but you can easily change it back to <1.7. Also you don't need custom attributes, use css classes instead.

scroll to top button in jquery

i have div.triangle on my page at opacity 0
i want it to fade into opacity .95 once the bottom of the page is hit
then after that, i want it to scroll to the top of $(".container") once $(".triangle") is clicked again
i have this so far, i think i've got most of it right other than the event?
<script type="text/javascript">
$(document).ready(function(){
$(".container").scroll(function(){
var currentPosition = $(document).scrollTop();
var totalHeight = $(document).offsetHeight;
var visibleHeight = $(document).clientHeight;
if (visibleHeight + currentPosition >= totalHeight){
$(".triangle").fadeTo("slow",.95);
}
});
$(".triangle").click(function(){
$(".container").animate({scrollTop:0}, 'slow');
$(".triangle").fadeTo("slow",0);
});
});
</script>
try this:
$(document).ready(function(){
var bottom = ($(window).outerHeight() - $(window).height()) - 50; // 50 pixel to the bottom of the page;
$(window).scroll(function(){
if ($(window).scrollTop() >= bottom ) {
$(".triangle").fadeTo("slow",.95);
} else {
$(".triangle").fadeOut("slow");
}
});
$(".triangle").click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
$(".triangle").fadeOut("slow");
});
});

Categories