Right Click - Getting the menu appears next to the Cursor - javascript

I have script below, in which when I do right click on the cursor, a menu will appear. A problem is a menu appears elsewhere instead of next to the cursor.
What I am missing here. Please take a look.
Thanks.
menu.show = function (e) {
if (menu.visible) {
menu.close();
} else {
var pos = $(this).offset();
pos.top = e.pageX - this.offsetLeft;
pos.left = e.pageY - this.offsetTop;
panel.css({ width: '100%', height: $(document).height(), 'background-color': 'transparent' }).show();
menu.data('trigger', $(this));
menu.css(pos).fadeIn('fast');
menu.visible = true;
}
return false;
};
I also try this, but it doesn't work, either.
menu.show = function (e) {
if (menu.visible) {
menu.close();
} else {
var pos = $(this).offset();
top = e.pageX;
left = e.pageY;
panel.css({ width: '100%', height: $(document).height(), 'background-color': 'transparent' }).show();
menu.data('trigger', $(this));
menu.css(pos).fadeIn('fast');
menu.visible = true;
}
return false;
};

Related

Position an image depending on its size

JSFiddle Demo
For the above JSFiddle demo, I need to position the last image so that it is centered, compared to the first three images.
How do I do this?
position()
window.onresize = function(event) {
position();
};
function position(){
var id = document.getElementById( "imageDisplay" );
console.log( window.innerWidth );
if( window.innerWidth > 400 ) {
console.log( "left" );
id.style.left = "200px";
id.style.bottom = 0;
id.style.top = "20px";
} else if( window.innerWidth <= 250 ) {
console.log( "left" );
id.style.left = "200px";
id.style.top = "20px";
id.style.right = 0;
}
}
Like this? Inside the position function you can write the conditions, refer the if else if condition, which checks the window size and determines the position of the element! When the document loads the position() function is ran once, to determine the initial position.
JSFiddle Demo
Javascript:
position()
window.onresize = function(event) {
position();
};
function position(){
var id = document.getElementById("img");
console.log(window.innerWidth);
if(window.innerWidth >800){
console.log("left");
id.style.left=0;
id.style.bottom=0;
id.style.top="";
}else if(window.innerWidth >600){
console.log("left");
id.style.left=0;
id.style.top=0;
id.style.right="";
}else if(window.innerWidth < 600){
console.log("right");
id.style.right=0;
id.style.top=0;
id.style.left="";
}
}
Using jquery I think you would be able to do it.
$(window).load( function() {
//find height only after all elements have loaded
var widthOfImage = $('#image').width();
//condition for image
if(widthOfImage < 200) {
$('#image').css({
'position': 'absolute',
'top': 0,
'left': 0
});
} else {
$('#image').css({
'position': 'relative',
'top': 100,
'left': 100
});
}
});

Resize Angular Material Bottom Sheet, when dragged from the bottom

I am using Angular Material Bottom Sheet, but I want it in such a way, that it should get adjusted, when the user drags it up and down from the bottom.
I have used one plugin to resize the bottom sheet, but the bottom sheet is getting dragged up and down without resizing, it's bottom is not fixed.
Here's the working code in plunkar.
resizer.js:
angular.module('mc.resizer', []).directive('resizer', function($document) {
return function($scope, $element, $attrs) {
$element.on('mousedown', function(event) {
event.preventDefault();
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
});
function mousemove(event) {
if ($attrs.resizer == 'vertical') {
// Handle vertical resizer
var x = event.pageX;
if ($attrs.resizerMax && x > $attrs.resizerMax) {
x = parseInt($attrs.resizerMax);
}
$element.css({
left: x + 'px'
});
$($attrs.resizerLeft).css({
width: x + 'px'
});
$($attrs.resizerRight).css({
left: (x + parseInt($attrs.resizerWidth)) + 'px'
});
} else {
// Handle horizontal resizer
var y = window.innerHeight - event.pageY;
if((window.innerHeight-100 > y)&&(y>100)){
$element.css({
bottom: y + 'px'
});
$($attrs.resizerTop).css({
bottom: (y + parseInt($attrs.resizerHeight)) + 'px'
});
$($attrs.resizerBottom).css({
height: y + 'px'
});
}
}
}
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
};
});

Hover not right when element moves

I have a dynamic div, and I want to know when the mouse is hover this div. I tryed with .is( ':hover' ) but doesn't work.
jsFiddle demo
In the demo I have made a moving div and if I doesn't move the mouse the log is never called, but if I put manually the mouse hover the box it write always the logs.
Never writes the log in the console.
Always writes the log in the console, even the box is gone.
It's a bug or I have made a mistake? How can I detect the hover properly?
You should be tracking the mouse movement with the mousemove() event and check the last known position of the mouse on the movement of the div.
Example:
HTML & CSS:
.red-box {
display : inline-block;
position : absolute;
width : 50px;
height : 50px;
top : 10px;
left : 0px;
background-color : red;
}
#wrapper {
height: 100vh;
width: 100vw;
}
<div id="wrapper">
<div class="red-box"></div>
</div>
JavaScript:
var posX = 0;
var step = 10;
var maxX = 200;
var mouseX = -1;
var mouseY = -1;
var entered = false;
var $box = $('.red-box');
setInterval(function () {
posX += step;
if (posX >= maxX)
posX = 0;
$box.css("left", posX);
var top = $box.offset().top;
if (mouseX >= posX && mouseX <= (posX + $box.width()) && mouseY >= top && mouseY <= (top + $box.height())) {
console.log("mouse entered");
entered = true;
} else if (entered) {
console.log("mouse left");
entered = false;
}
}, 500);
$("#wrapper").on("mousemove", function (e) {
mouseX = e.pageX - $(this).position().left;
mouseY = e.pageY - $(this).position().top;
}).on("mouseleave", function()
{
mouseX = -1;
mouseY = -1;
});
FIDDLE
Edit: Added a new mouseleave() event to the wrapper.

How can i scroll the page with img tag [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to scroll the page vertically without using the scrollbar.
instead i want to use 2 image tags for scrolling the page.
this was the code i tried for the scroll but it didnt look good:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
div.mousescroll {
overflow: hidden;
}
div.mousescroll:hover {
overflow-y: scroll;
}
</style>
<script language="javascript" type="text/javascript">
$(function() {
$(".wrapper1").scroll(function left() {
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function right() {
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
});
});
</script>
<div id="first" class="wrapper1 ">
<div id="first2" class=" div1 ">
</div>
<br />
</div>
<br />
<div id="second" class="wrapper2 mousescroll">
<div id="second2" style=" overflow-x:scroll" class="div2">
<table>
...............
</table>
</div>
</div>
imagine that the width of this table is 2000px and instead of scrollbar i wanna use two image tags that can do the scroll job.
can anyone help me with this?
$(window).load(function () {
(function ($) {
jQuery.fn.extend({
slimScroll: function (o) {
var ops = o;
//do it for every element that matches selector
this.each(function () {
var isOverPanel,
isOverBar,
isDragg,
queueHide,
barHeight,
divS = "<div></div>",
minBarHeight = 30,
wheelStep = 30,
o = ops || {},
cwidth = o.width || "auto",
cheight = o.height || "250px",
size = o.size || "7px",
color = o.color || "#000",
position = o.position || "right",
opacity = o.opacity || 0.4,
alwaysVisible = o.alwaysVisible === true;
//used in event handlers and for better minification
var me = $(this);
//wrap content
var wrapper = $(divS)
.css({
position: "relative",
overflow: "hidden",
width: cwidth,
height: cheight,
})
.attr({ class: "slimScrollDiv" });
//update style for the div
me.css({
overflow: "hidden",
width: cwidth,
height: cheight,
});
//create scrollbar rail
var rail = $(divS).css({
width: "15px",
height: "100%",
position: "absolute",
top: 0,
});
//create scrollbar
var bar = $(divS)
.attr({
class: "slimScrollBar ",
style: "border-radius: " + size,
})
.css({
background: color,
width: size,
position: "absolute",
top: 0,
opacity: opacity,
display: alwaysVisible ? "block" : "none",
BorderRadius: size,
MozBorderRadius: size,
WebkitBorderRadius: size,
zIndex: 99,
});
//set position
var posCss = position == "right" ? { right: "1px" } : { left: "1px" };
rail.css(posCss);
bar.css(posCss);
//wrap it
me.wrap(wrapper);
//append to parent div
me.parent().append(bar);
me.parent().append(rail);
//make it draggable
bar.draggable({
axis: "y",
containment: "parent",
start: function () {
isDragg = true;
},
stop: function () {
isDragg = false;
hideBar();
},
drag: function (e) {
//scroll content
scrollContent(0, $(this).position().top, false);
},
});
//on rail over
rail.hover(
function () {
showBar();
},
function () {
hideBar();
}
);
//on bar over
bar.hover(
function () {
isOverBar = true;
},
function () {
isOverBar = false;
}
);
//show on parent mouseover
me.hover(
function () {
isOverPanel = true;
showBar();
hideBar();
},
function () {
isOverPanel = false;
hideBar();
}
);
var _onWheel = function (e) {
//use mouse wheel only when mouse is over
if (!isOverPanel) {
return;
}
var e = e || window.event;
var delta = 0;
if (e.wheelDelta) {
delta = -e.wheelDelta / 120;
}
if (e.detail) {
delta = e.detail / 3;
}
//scroll content
scrollContent(0, delta, true);
//stop window scroll
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
};
var scrollContent = function (x, y, isWheel) {
var delta = y;
if (isWheel) {
//move bar with mouse wheel
delta = bar.position().top + y * wheelStep;
//move bar, make sure it doesn't go out
delta = Math.max(delta, 0);
var maxTop = me.outerHeight() - bar.outerHeight();
delta = Math.min(delta, maxTop);
//scroll the scrollbar
bar.css({ top: delta + "px" });
}
//calculate actual scroll amount
percentScroll =
parseInt(bar.position().top) /
(me.outerHeight() - bar.outerHeight());
delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
//scroll content
me.scrollTop(delta);
//ensure bar is visible
showBar();
};
var attachWheel = function () {
if (window.addEventListener) {
this.addEventListener("DOMMouseScroll", _onWheel, false);
this.addEventListener("mousewheel", _onWheel, false);
} else {
document.attachEvent("onmousewheel", _onWheel);
}
};
//attach scroll events
attachWheel();
var getBarHeight = function () {
//calculate scrollbar height and make sure it is not too small
barHeight = Math.max(
(me.outerHeight() / me[0].scrollHeight) * me.outerHeight(),
minBarHeight
);
bar.css({ height: barHeight + "px" });
};
//set up initial height
getBarHeight();
var showBar = function () {
//recalculate bar height
getBarHeight();
clearTimeout(queueHide);
//show only when required
if (barHeight >= me.outerHeight()) {
return;
}
bar.fadeIn("fast");
};
var hideBar = function () {
//only hide when options allow it
if (!alwaysVisible) {
queueHide = setTimeout(function () {
if (!isOverBar && !isDragg) {
bar.fadeOut("slow");
}
}, 1000);
}
};
});
//maintain chainability
return this;
},
});
jQuery.fn.extend({
slimscroll: jQuery.fn.slimScroll,
});
})(jQuery);
//invalid name call
$("#Id").slimscroll({
color: "#aaa",
size: "6px",
width: "392px",
height: "525px",
});
});

mousedown div containment to parent(latest)

My inner div is suppose to move around with the mouse cursor on mousemove but i want it to stop at the if statement if it is dragging with the isDragging variable so it will drag smoothly but it seems to not stop any suggestion and help would be appreciated
update: jsFiddle
var yellow = $('#yellow');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();
var isDragging = false;
var red = $('#red');
$('#red').hide();
yellow.on('mousedown', function(event) {
$('#red').show();
});
yellow.on('mouseup', function(event) {
$('#red').hide();
});
yellow.on('mousemove', function (e) {
if(e.pageX > offset.left + ($(red).width() / 2) && e.pageX < offsetWidth - ($(red).width() / 2)
&& e.pageY > offset.top + ($(red).height() / 2) && e.pageY < offsetHeight - ($(red).height() / 2) && !isDragging ){
red.css("left", e.pageX - $(red).width() / 2 );
red.css("top", e.pageY - $(red).height() / 2);
}
$('#red').draggable(
{'containment':'#yellow',
start:function(event, ui) {
isDragging = true;
},
drag:function(event, ui) {
isDragging = true;
},stop:function(event, ui) {
isDragging = false;
}
});
});
<div id="yellow">
<div id="red"></div>
</div>
#yellow {
position: absolute;
width: 250px;
height: 250px;
background-color: Yellow;
}
#red {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
z-index: 100;
}
I can't say i am proud of this solution but it seems to get the stuff done:
http://jsfiddle.net/pPn3v/42/
var yellow = $('#yellow');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();
var red = $('#red');
yellow.on('mousemove', function (e) {
if(e.pageX+red.width() < offsetWidth
&& e.pageY+red.height() < offsetHeight){
red.css("left", e.pageX);
red.css("top", e.pageY);
}
});
red.on('mousemove', function (e) {
if(e.pageX+red.width() < offsetWidth
&& e.pageY+red.height() < offsetHeight){
red.css("left", e.pageX);
red.css("top", e.pageY);
}
});

Categories

Resources