I successfully created a div that the user can "rotate". It works perfectly, except that rotating on the X direction cancels/resets the existing rotation in Y direction and vise versa. Also the div is a draggable object from jQuery. How can I fix this so that transformations are not reset?
<script>
var degreesY = 0;
function rotateLeft() {
var degreesuseY = degreesY + 10;
document.getElementById("Notes").style["transform"]= "rotateY(" + degreesuseY + "deg)";
}
var degreesX = 0;
function rotateUp() {
var degreesuseX = degreesX + 10;
document.getElementById("Notes").style["transform"]= "rotateX(" + degreesuseX + "deg)";
}
</script>
<div id="draggable">
<div class="LeftRotate" onclick="rotateLeft();degreesY=degreesY+10"></div>
<div class="UpRotate" onclick="rotateUp();degreesX=degreesX+10"></div>
</div>
The problem is that when you set the transform property, you're rewriting the current value and erasing what you have so far. Try changing your code to work instead with a single rotate() function and set the transform property as follows:
var degreesX = 0;
var degreesY = 0;
function rotate(xAxis) { //Make xAxis a boolean
if (xAxis) {
degreesX+=10;
} else {
degreesY+=10;
}
document.getElementById("Notes").style["transform"] = "rotate(" + degreesX + "deg " + degreesY + "deg)";
}
I put a simple example (using jQuery) in this jsFiddle.
You could avoid using xAxis, if you want, by having the function determine whether the element clicked has class UpRotate or LeftRotate.
Related
I have a 5*5 grid, what i want to do is to imitate drawing action than when i press(with my finger, it is suppose to be a mobile app) on a square it changes its background color.
this part i have managed to do and it works fine.
what I would like to do now is that when I move the finger over the screen it will change the color of each of the squares my finger is pressing(enters its surface) just like drawing.
i know that there is a touchenter event but i don't understand how can i use it
i read some tutorials and articles and everywhere it says that the touchenter event dosen't bubbles...
how can I get the id of the element that i am touchmove over?
https://jsfiddle.net/uLfm5szz/2/
any help will be more than great!
html
<div id="demo"></div>
css
.b{
width: 50px;
height: 50px;
display: inline-block;
border: red 1px solid;
}
js
createLoop();
$('.b').bind('touchmove',StartDragSelect);
function createLoop(){
var length = 30;
var text = "";
var demo = $("#demo")
for (i = 0; i < length; i++) {
var rowElement = $('<div class="a"></div>');
demo.append(rowElement);
for(var x = 0; x < length; x++){
createGridItem(rowElement,i,x);
}
}
}
function createGridItem(rootElement, i, x){
var pix = 10;
var currItem = $('<div class="b" id="a'+i+x+'" style="top:' + i*pix +'px; left: ' + x*pix +'px; background-position-x: -' + x*pix +'px ; background-position-y:-' + i*pix +'px";"></div>');
$(rootElement).append(currItem);
}
function StartDragSelect(obj)
{
obj = obj.currentTarget;
$(obj).css({"background-color":"blue"});
}
how can i check if i am above the element? which parameter should i
use to check it?
Here is a function to get the position of an element(a gridview cell for you). With the x and y coordinates, you can add the height and width to them to calculate if your current touch position is above the element.
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
To use this function you can do like this
var y = getPosition(document.getElementById('cell1')).y;
var x = getPosition(document.getElementById('cell1')).x;
Take a look at https://api.jquerymobile.com/swipe/
This is a jQuery lib for doing that.
I want to change the padding on my header so that it effectively is lowered onto the page. I have the following code which runs and does nothing:
function openPage() {
var i, el = document.getElementById('headbar');
for(i=0;i<30;i++) {
el.style.paddingTop = el.style.paddingTop + 1;
}
}
However, while trying to figure out why it wasn't working in the console I figured out that maybe it is because the padding must be written in pixels because the following works and changes the padding in the console:
document.getElementById('headbar').style.paddingTop='100px';
is there any way I could do this without Jquery and without having to make a substring and reconcatonating?
Try appending px to the variable
var fontSize = parseInt(el.style.paddingTop, 10);
el.style.paddingTop = ( (!isNaN(fontSize) : fontSize : 0) + 1) + 'px';
Pretty simple just do this:
for(i=0;i<30;i++) {
var px = (el.style.paddingTop + 1) + "px";
el.style.paddingTop = px;
}
Here I tried to make simple zoom in and out functions on button click.
HTML
<input type="button" value ="-" onClick="zoom(0.9)"/>
<input type="button" value ="+" onClick="zoom(1.1)"/>
<div id="thediv">
<img id="pic" src="http://cdn1.iconfinder.com/data/icons/VistaICO_Toolbar-Icons/256/Zoom-in.png"/>
</div>
SCRIPT
var zoomLevel = 100;
var maxZoomLevel = 105;
var minZoomLevel = 95;
function zoom(zm) {
var img=document.getElementById("pic");
if(zm > 1){
if(zoomLevel < maxZoomLevel){
zoomLevel++;
}else{
return;
}
}else if(zm < 1){
if(zoomLevel > minZoomLevel){
zoomLevel--;
}else{
return;
}
}
wid = img.width;
ht = img.height;
img.style.width = (wid*zm)+"px";
img.style.height = (ht*zm)+"px";
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
But the problem is, whenever I click the zoom-in function the image moves to the top corner of the page. I tried to solve this but no solution was effective.
Here is the BIN I am working on which may be useful to find my mistake.
And also another question: Is there a way to apply mousewheel to this function?
UPDATE
The problem of zoom has been changed. But now the mousewheel also done here but the problem is we can't give the maximum value for the mousewheel.
UPDATED BIN
img.style.marginLeft = -(img.width/2) + "px"; // you have negation sign here
img.style.marginTop = -(img.height/2) + "px"; // you have negation sign here
Change it TO :
img.style.marginLeft = (img.width/2) + "px";
img.style.marginTop = (img.height/2) + "px";
JS BIN LINK
Judging by your marginLeft and marginTop calculation, I guess that you want to zoom in and out of the image while preserving the center point.
So try this:
http://jsbin.com/itekek/4
Preserved an initial width and height value, and slightly modified the zoom limit value.
Edit:
http://jsbin.com/itekek/46
Added mouse wheel support.
See this : http://jsbin.com/itekek/14/edit
You have unstripped zoom plus Mousewheel here..
Update: To get elements by class name use function below:
function findElementByClass(matchClass) {
var elems = document.getElementsByTagName('*'),i;
for (i in elems) {
if ((" " + elems[i].className + " ").indexOf(" " + matchClass + " ") > -1) {
return elems[i];
}
}
return null;
}
See sample
I'd like to be able to mark an image where a user clicks, store the coordinates, and then be able to recreate the marks at a later time. I've got the storing part down but I'm having trouble getting the mark image to show up on the image.
I found a similar question here using absolute positioning, but I'd like the coordinates to be relative to the image.
Looks like jQuery position will give me the position relative to the parent, but from there how would I create and position the mark image relative to the parent? Any help would be greatly appreciated. Thanks
<div id="container">
<img id="imgtoclick"></img>
</div>
$(document).ready(function() {
$("#imgtoclick").click(function(e) {
e.preventDefault();
var left = this.position.left;
var top = this.position.top;
//how to create mark image relative to parent
var img = $('<img>');
})
});
Following #Blenders post but in case your images are nested within positioned elements, you will need to get the coordinates recursively:
var myImg = ...
var getAbsoluteOffset = function (el) {
var x=0, y=0;
while (el) {
x += el.offsetLeft;
y += el.offsetTop;
el = el.offsetParent;
};
return {x:x,y:y};
}
myImg.onclick = function(evt) {
var offset, x, y;
offset = getAbsoluteOffset(this);
var x = evt.pageX - offset.x;
var y = evt.pageY - offset.y;
alert('x: ' + x + '\ny: ' + y);
};
This should do what you want:
$('img').click(function(event) {
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
alert('X: ' + x + '\nY:' + y);
});
You would follow these steps:
Give #container this style
container
{
position: relative;
}
Give the image that will show the mark this style
mark
{
position: absolute;
left: //left from jQuery
top: //top from jQuery position
}
I have written a function that positions a tooltip just above a textbox.
The function takes two arguments:
textBoxId - The ID of the textbox above which the tooltip will appear.
Example: "#textBoxA"
toolTipId - The ID of the tooltip which will appear above the textbox.
Example: "#toolTipA"
function positionTooltip(textBoxId, toolTipId){
var hoverElementOffsetLeft = $(textBoxId).offset().left;
var hoverElementOffsetWidth = $(textBoxId)[0].offsetWidth;
var toolTipElementOffsetLeft = $(toolTipId).offset().left;
var toolTipElementOffsetWidth = $(toolTipId)[0].offsetWidth;
// calcluate the x coordinate of the center of the hover element.
var hoverElementCenterX =
hoverElementOffsetLeft + (hoverElementOffsetWidth / 2);
// calculate half the width of the toolTipElement
var toolTipElementHalfWidth = toolTipElementOffsetWidth / 2;
var toolTipElementLeft = hoverElementCenterX - toolTipElementHalfWidth;
$(toolTipId)[0].style.left = toolTipElementLeft + "px";
var toolTipElementHeight = $(toolTipId)[0].offsetHeight;
var hoverElementOffsetTop = $(textBoxId).offset().top;
var toolTipYCoord = hoverElementOffsetTop - toolTipElementHeight;
toolTipYCoord = toolTipYCoord - 10;
$(toolTipId)[0].style.top = toolTipYCoord + "px";
$(toolTipId).hide();
$(textBoxId).hover(
function(){ $(toolTipId + ':hidden').fadeIn(); },
function(){ $(toolTipId + ':visible').fadeOut(); }
);
$(textBoxId).focus (
function(){ $(toolTipId + ':hidden').fadeIn(); }
);
$(textBoxId).blur (
function(){ $(toolTipId+ ':visible').fadeOut(); }
);
}
The function works fine upon initial page load:
However, after the user resizes the window the tooltips move to locations that no longer display above their associated textbox.
I've tried writing some code to fix the problem by calling the positionTooltip() function when the window is resized but for some reason the tooltips do not get repositioned as they did when the page loaded:
var _resize_timer = null;
$(window).resize(function() {
if (_resize_timer) {clearTimeout(_resize_timer);}
_resize_timer = setTimeout(function(){
positionTooltip('#textBoxA', ('#toolTipA'));
}, 1000);
});
I'm really at a loss here as to why it doesn't reposition the tooltip correctly as it did when the page was initially loaded after a resize.
Your logic for calculating the position of the tooltip only fires initially when you call positionTooltip. You want to call it to recalculate position before the fadeIn call.
i don't understand why you use a setTimeout() to launch your function. Try
$(function(){
// all your code onDocumentReady
...
...
$(window).resize(function() {
positionTooltip('#textBoxA', ('#toolTipA'));
});
});
That worked like a charm for me, the only drawback is that sometimes it dosen't get the proper X,Y position, apparently not it's compensating with object's padding/margin values, i did a dirty fix by adding those values manually before they are set like:
toolTipElementLeft = toolTipElementLeft + 40;
$(toolTipId)[0].style.left = toolTipElementLeft + "px";
and
toolTipYCoord = toolTipYCoord + 25;
$(toolTipId)[0].style.top = toolTipYCoord + "px";