I'm using the showDiv function below to display a DIV popup menu at the cursor position but I can't figure out how to tweak it so that the menu doesn't disappear off the bottom or right-hand edge of the viewable area, is it possible to compensate for this before displaying the DIV?
var posx;
var posy;
function getMouse(e){
posx = 0;
posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY){
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY){
posx = e.clientX;
posy = e.clientY;
}
}
function showDiv(id){
var obj = document.getElementById(id);
obj.style.left=posx+'px';
obj.style.top=posy+'px';
obj.style.display='block';
}
...
<body onMouseMove="getMouse(event)">
function showDiv(id){
var obj = document.getElementById(id),
screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) - (obj.clientWidth || obj.offsetWidth),
screenHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - (obj.clientHeight || obj.offsetHeight);
obj.style.left = Math.min(posx, screenWidth) + 'px';
obj.style.top = Math.min(posy, screenHeight) + 'px';
obj.style.display = 'block';
}
This should keep the div within the view-able area.
You just check to see if the width plus the position etc are more or less than the values of the view-able area.
We also add on the scroll left and scroll top values so our calculations don't mistakenly think it's visible; you can remove that if it's not needed in your case though.
function showDiv(id, posX, posY) {
var obj = document.getElementById(id),
objWidth = obj.offsetWidth,
objHeight = obj.offsetHeight,
docX = window.pageXOffset || document.documentElement.scrollLeft,
docY = window.pageYOffset || document.documentElement.scrollTop,
winWidth = document.documentElement.clientWidth,
winHeight = document.documentElement.clientHeight;
posX += docX;
posY += docY;
if (posX < docX) {
posX = docX;
} else if (posX + objWidth > winWidth + docX) {
posX = docX + (winWidth - objWidth);
}
if (posY < docY) {
posY = docY;
} else if (posY + objHeight > winHeight + docY) {
posY = docY + (winHeight - objHeight);
}
obj.style.top = posY + 'px';
obj.style.left = posX + 'px';
obj.style.display = 'block';
}
Related
I'm creating an windown look like template for web but I have a problem with the resizer, the resizer in the bottom right works perfectly but trying to create the top right resizer don't work and I don't know why I have tried everything but it doesn't work.
Here's the github https://github.com/alhazacod/windowsxphtmltemplate
The JavaScript code:
dragru.onmousedown = function(event) {
let shiftLeft = event.clientX - wwindow.getBoundingClientRect().left;
let shiftTop = event.clientY - wwindow.getBoundingClientRect().top;
let shiftBottom = - event.clientY + wwindow.getBoundingClientRect().bottom;
function resize(w, h, pageY){
wwindow.style.top = pageY - shiftTop + 'px';
if(w>200){
wwindow.style.width = w + 'px';
}
if(h>200){
console.log(wwindow.getBoundingClientRect().bottom - event.pageY);
wwindow.style.height = (wwindow.getBoundingClientRect().bottom - event.pageY) + 'px';
}
//wwindow.style.top = pageY - shiftTop + 'px';
}
function onMouseMove(event){
shiftLeft = event.clientX - wwindow.getBoundingClientRect().left;
shiftBottom = -event.clientY + wwindow.getBoundingClientRect().bottom;
//if(event.pageY < windowh && event.pageY > 1 && event.pageX < windoww && event.pageX > 1){
resize(shiftLeft, shiftBottom, event.pageY);
//}
/*else{
document.removeEventListener('mousemove', onMouseMove);
wwindow.onmouseup = null;
}*/
}
document.addEventListener('mousemove', onMouseMove);
wwindow.onmouseup = function(){
document.removeEventListener('mousemove', onMouseMove);
wwindow.onmouseup = null;
};
};
I'm a beginner when it comes to pure Javascript. I would like to create an effect such as this one created with jquery:
var mouseX = 0, mouseY = 0, limitX, limitY, containerWidth;
$(document).ready(function() {
//Declaring the container size variable when we dom is ready
//Grabbing the size of an element gives a number no longer a percentage
containerWidth = $(".container").width();
containerHeight = $(".container").height();
$("#debug").html('Container Width = ' + containerWidth + '<br/>Container Height = ' + containerHeight);
// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
// limitX is now the difference between the #container's width (=80%) and 15px
limitX = containerWidth-15;
limitY = containerHeight-15;
var loop = setInterval(function(){
// change 12 to alter damping higher is slower
xp += (mouseX - xp) / 6;
yp += (mouseY - yp) / 6;
follower.css({left:xp, top:yp});
}, 15);
//Since changing the window size affects the width, we need to redefine the container size variable so that's it's current
$(window).resize(function() {
//this makes limiX change based on container width
limitX = $(".container").width()-15;
$("#debug").html('Container Width = ' + containerWidth + '<br/>Container Height = ' + containerHeight);
}).resize();
$(document).on('mousemove', function (e) {
mouseX = Math.min(e.pageX, limitX);
mouseY = Math.min(e.pageY, limitY);
});
});
link to user's fiddle : http://jsfiddle.net/alexchopjian/5QfYL/5/,
but using pure Javascript. Is it possible?
I will be very grateful for any clues as how to get at this.
This is not the exact copy but it is a starting point:
var mouseX = 0, mouseY = 0, limitX, limitY, containerWidth;
window.onload = function(e) {
var containerObjStyle = window.getComputedStyle(document.querySelectorAll(".container")[0]);
containerWidth = parseFloat(containerObjStyle.width).toFixed(0);
containerHeight = parseFloat(containerObjStyle.height).toFixed(0);
document.getElementById('debug').innerHTML = 'Container Width = ' + containerWidth + '<br/>Container Height = ' + containerHeight;
var follower = document.getElementById("follower");
var xp = 0, yp = 0;
limitX = containerWidth-15;
limitY = containerHeight-15;
var loop = setInterval(function(){
xp = (mouseX == limitX) ? limitX : mouseX -7;
xp = (xp < 0) ? 0 : xp;
yp = (mouseY == limitY) ? limitY : mouseY -7;
yp = (yp < 0) ? 0 : yp;
follower.style.left = xp + 'px';
follower.style.top = yp + 'px';
}, 15);
window.onresize = function(e) {
limitX = parseFloat(window.getComputedStyle(document.querySelectorAll(".container")[0]).width).toFixed(0);
document.getElementById("debug")[0].innerHTML='Container Width = ' + containerWidth + '<br/>Container Height = ' + containerHeight;
}
document.onmousemove = function(e) {
mouseX = Math.min(e.pageX, limitX);
mouseY = Math.min(e.pageY, limitY);
}
};
#follower{
position : relative;
background-color : yellow;
width:15px;
height:15px;
border-radius:50px;
}
.container {
width:80%;
height:150px;
position:absolute;
top:0;
left:0;
overflow:hidden;
border:1px solid #000000;
}
<p id="debug"></p>
<div class="container">
<div id="follower"></div>
</div>
Full code can be viewed on JSBin - http://jsbin.com/ecuraQEg/1/edit
I'm working on an experimental website designer (a wysiwyg editor) and I'm having a bit of trouble.
I want to be able to manipulate divs that have been drawn/appended, via changing it's position, background color, border, padding, etc:
Say I drew 3 divs with the following background color red, green, and blue.
When I click on the red div I want it to display all it's properties, height, width, top, left, background, etc: I already have width and height down, but I can't seem to figure out how to grab the other styles.
Any help is greatly appreciated.
DIVs width/height are grabbed by the following:
canvas.onmousemove = function(e) {
if ($('select#tools option:selected').val() !== 'select') return;
$('#canvas div').on('mousemove', function() {
// Detects/Shows div size on specified element.
$('#elm-width').val($(this).width().toString() + 'px');
$('#elm-height').val($(this).height().toString() + 'px');
});
document.getSelection().removeAllRanges();
$('#canvas div.rect').draggable();
code.val(preview.html());
coder.val(preview.html());
};
DIVs are drawn using the following JQuery/Javascript:
setMousePosition = function(e) {
if ($('select#tools option:selected').val() !== 'div') return;
var ev = e || window.event; //Moz || IE
if (ev.pageX) { //Moz
mouse.y = ev.pageY + window.pageYOffset;
mouse.x = ev.pageX + window.pageXOffset;
} else if (ev.clientX) { //IE
mouse.y = ev.clientY + document.body.scrollTop;
mouse.x = ev.clientX + document.body.scrollLeft;
}
};
var mouse = {
x: 0,
y: 0,
startX: 0,
startY: 0
};
var element = null;
// Mouse Event Handlers
canvas.onmousemove = function(e) {
if ($('select#tools option:selected').val() !== 'div') return;
setMousePosition();
if (element !== null) {
element.style.position = $('select#position option:selected').val();
element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
element.style.margin = $('#elm-margin').val();
element.style.padding = $('#elm-padding').val();
element.style.color = $('#elm-color').val();
element.style.border = $('#elm-border').val();
element.style.borderRadius = $('#elm-border-radius').val();
element.style.MozBorderRadius = $('#elm-border-radius').val();
element.style.background = $('#elm-bgcolor').val();
element.style.boxShadow = $('#elm-boxshadow').val();
element.style.textShadow = $('#elm-txtshadow').val();
element.style.overflow = 'auto';
$('#elm-top').val(element.style.top);
$('#elm-left').val(element.style.left);
$('#elm-width').val(element.style.width);
$('#elm-height').val(element.style.height);
}
};
canvas.onmousedown = function(e) {
if ($('select#tools option:selected').val() !== 'div') return;
if (element !== null) {
element = null;
canvas.style.cursor = "default";
console.log("finsihed.");
} else {
console.log("begun.");
mouse.startY = mouse.y;
mouse.startX = mouse.x;
element = document.createElement('div');
element.className = 'rect';
element.style.top = mouse.y + 'px';
element.style.left = mouse.x + 'px';
canvas.appendChild(element);
element.appendChild(document.createTextNode($('#insidediv').val()));
canvas.style.cursor = "crosshair";
}
};
canvas.onmouseup = function(e) {
if ($('select#tools option:selected').val() !== 'div') return;
element = null;
canvas.style.cursor = "default";
console.log("finsihed.");
code.val(preview.html());
coder.val(preview.html());
$('.select-tool').trigger('click');
};
Using jQuery, you can get the value of any css property using $(element).css('property-name');
Here's a quick example using that, as well as using .offset().top and .offset().left as alternative for getting those values. (These are also jQuery methods):
http://jsfiddle.net/sx8B3/
I've created a simple code to drag and drop div element but not work well.
When you drag the div element quickly to any direction top, left, right, down, the mouse cursor will leave the div element, Although I'm still press on the button .
HTML
<div id="box"></div>
CSS
div#box {
background-color:yellowgreen;
width:150px; height:100px;
border:1px solid #ffff66;
position:relative;
}
JavaScript
var elem = document.getElementById('box');
var PositionX = 0;
var PositionY = 0;
var MouseX = 0
var MouseY = 0;
var mouseDown = false;
elem.onmousedown = function(e) {
PositionX = elem.offsetLeft;
PositionY = elem.offsetTop;
MouseX = e.clientX;
MouseY = e.clientY;
mouseDown = true;
};
elem.onmousemove = function(e) {
if (mouseDown) {
elem.style.left = PositionX + e.clientX - MouseX + "px";
elem.style.top = PositionY + e.clientY - MouseY + "px";
}
};
elem.onmouseover = function(e) {
elem.style.cursor = 'move';
};
elem.onmouseup = function(e) {
mouseDown = false;
};
You can see online
Try changing this one line:
elem.onmousemove = function(e) {
to:
document.onmousemove = function(e) {
try this hope it would have your work done :
var elem= document.getElementbyId('<%=box.ClientID%>');
elem.onmousemove= function(e) {
if (mouseDown) {
elem.style.left = PositionX + e.clientX - MouseX + "px";
elem.style.top = PositionY + e.clientY - MouseY + "px";
}
};
I am trying to create an item preview(quickview) using javascript that changes it's orientation depending on the mouse position. I would like to have a functionality similar to the one existing in stackoverflow:
When an item is at the bottom of the page the preview window should change it's orientation(when the page is scrolled or browser window is resized). Currently it is shown below or above the cursor but it is not related to the actual cursor position(not related to the screen or browser window size). I am new to javascript and would appreciate any help.
Here is the code I am using as a starting point:
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body && document.body.scrollTop) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
var divHeight = d.style.height.replace(/px/, "");
divHeight = parseInt(divHeight);
if (cY < divHeight * 3 ) {
d.style.left = (cX+50) + "px";
d.style.top = (cY-10) + "px";
}
else {
cY = cY - divHeight;
d.style.left = (cX+50) + "px";
d.style.top = (cY-10) + "px";
}
}