var transform = ['scale(' + scale + ')'];
$.merge(transform, ['rotate(' + rotate + 'deg)']);
$(this).css(-moz-transform, transform.join(' '));
this block of code executes when an event is generated , the new scaling and rotation is added to css element,but whenever the same event is generated again the css element resets itself to the original size and position .The transformation is carried out after resetting during the second time.I want to eliminate the resetting of the element to original size and position.How can i make the change permanent in the first time when event is fired ,and build on it when the event is fired the second time?
Please help thanks in advance
There's nothing wrong with this code, but keep in mind you're setting scale and rotate in absolute terms, not relative to its 'initial' state.
So each time this code executes, the -moz-transform property of your element is being overwritten. If you want to rotate and scale it based on it's current state, you'll have to keep track of your scale and rotate values and adjust them as necessary. e.g., if this code is in a loop, you can do rotate=rotate+5; or something like that.
You can also request these properties from the CSS using ($this).css('-moz-transform'), parse that to get the values you want, and update scale and rotate accordingly.
Related
The very basic approach to move SVG image to another place is
elementToMove.animate({svgTransform: 'translate(100, -30)'}, 1000, "swing", function(){ console.log('Done!'); } );
But this is somehow fake, when I will check this with
elementToMove.getBoundingClientRect()
The result X,Y coordinates will be the same as before (as it would never move).
I need to track position of moved (translated?) elements, but I don't really know how to make it.
The only way I can imagine is to make separate class for moved elements and make some autocalculated position fields whenever move method would be called, but this is terrible idea as I already made a lot of code.
My first idea was to see if there's some sort of background-position-x property in CSS, but apparently not. See:
Is background-position-x (background-position-y) a standard W3C CSS property?
Is it possible with javascript to somehow change x position of a background, but leave the y as whatever it was before?
I have three elements, each one using sprites for backgrounds. The hover state will change for each of them, but I would like to know if I can use JS to change the clicked state by changing only the X background position. Each element's background inside the sprite has a corresponding state for clicked, and the new X value of the position will be the same for all three elements. However, their Y values are different, and I need to leave each Y value as whatever it currently is.
I could just create a line of jQuery for each element, and give the specific new X and Y coordinates, without too much work, but it's still extra code and a mere work around for my innitial idea.
Hopefully this is clear enough.
You can do background-position: Xpx Ypx, so you can adjust JUST the X value and leave the Y value alone.
You can also do this in pure CSS, just by using :hover and :active pseudo classes.
There actually IS a background-position-x and background-position-y, however it isn't supported in FireFox :/
I am working on this image hover zoom part using jquery . The codes works fine , as the bigger image is showed on mouseenter and hides on mouseleave. since, the image showed on hover can have dynamic width and height(it depends on the image size..) i want to decrease the image width and height to 75% of the actual width and height.. even that is fine and it works..
now the problem i am facing is, whn mouse enters for second time, the image is reduced again.. third time it gets smaller than the second time... so eachtime mouse enters, image gets smaller and smaller...(which i think is obivous since each time mouseenters it reduces the image by 75%...) i have tried lots of things like creating a global variable, and checkin it.. if (first time) thn (reduce) else (reduce from the original image ).
BUT cannot make it work.. here is my code....
http://jsfiddle.net/ugnNU/11/
hoping for some advice. your help will be appreciated.
Thanks.
I tried to update your code as little as possible. Here is an example of how to do what I think you are trying to do. http://jsfiddle.net/ugnNU/12/
There are many many ways to get there, I chose this one because it came close to what you already had.
I added this:
var childImage = $(this).children("div.tooltip");
if (childImage.attr('saveWidth') == ""){
//we haven't saved it's height yet
childImage.attr('saveWidth', childImage.width());
childImage.attr('saveHeight', childImage.height());
}
var hoverImgWidth = childImage.attr('saveWidth');
var finalHoverImagewidth = hoverImgWidth * 0.75;
var hoverImgHeight = childImage.attr('saveHeight');
var finalHoverImageWidth = hoverImgHeight * 0.75;
Basically it just checks to see if we have already saved the 'tooltip' image height inside an attribute. If we have, it just uses that value. But if not, we save the height or width inside that attribute and then uses it.
I'm also only selecting ("div.tooltip") once and saving it in childImage. The reason for this is that each time you do this $(selector) jQuery has to go find that element. If you do this alot, it can impact performance. So it's good practice to just save your selector in a local variable.
http://jsfiddle.net/ugnNU/13/
It does not use a custom attribute. It just undoes in mouseleave, what you did in mouseenter
each time you call this code
var hoverImgWidth = $(this).children("div.tooltip").width();
var finalHoverImagewidth = hoverImgWidth * 0.75;
The width value of div.tooltip gets multiplied with 0.75.
The next time the code is executed this gets the current width (the lowered value) and lowers that again.
You could set the size back again when you hide it, but my advice would be to calculate the values on document ready and only show and hide the image with the mouseenter and mouseleave events.
So, I have scoured the internet to find help on this...
I have a bar graph where the bars/values are sorted left to right with the largest value on the left. Based on user interaction, the bar graphs/values may change and, for instance, the middle bar may need to move 1 or more spots to the left. This has to be done on the fly, without removing the DOM element because I need to animate the left to right movements... this is for user appeal, something that is very important to the project.
So, I guess my question is, since you can't resort DOM elements and animate them at the same time, how can you track the movement. I've toyed with the idea of creating an initial index of the graph as the page loads and updating the index as changes are made. Logically, I have a hard time with this. Also, if one were to do that, whats the best way to index, using the data attribute? Isn't this only HTML5 and possibly unsupported in older browsers, or does jQuery keep a cache that has nothing to do with HTML5?
I'm fairly new to javascript/jQuery. I would say I've been using it for 2 years but I've ever really only done small jQuery animations and validation. Would really love some input form the community!
Thank you!
You're right, you can't animate elements by sorting.
The knack is to position the bars within the graph space with CSS properties, eg. left or margin-left.
Then you have something that, when changed in the right way, will give an animated effect.
All you need to do is to loop through each bar in turn, calculate its new CSS left/margin-left property and use jQuery's .animate() to cause it to slide into its new position.
Assuming that the bars to be positioned with margin-left and that the height of the bars also needs to be changed, then the general form of the jQuery will be :
$(".bars").each(function(i, bar) {
var $bar = $(bar);
var marginLeft = ........;//expression that calculates or fetches the new margin-left property for bar i
var height = ........;//expression that calculates or fetches the new height property for bar i
$bar.animate({
'margin-left': marginLeft,
'height': height
);
})
There's no need to sort anything or to use the data attribute.
I'm placing a div, by using another div id as a reference on the page (to make sure that it appears where I want it to). The code is as follows:-
$('#' + contentDiv).offset({top:($('#' + placementID).offset().top), left: ($('#' + placementID).offset().left)});
The problem is, that though the placementID offset figures are the same each time. Whenever I call this again, it seems to double and put a new left offset that is the the same amount on-top of the previous offset.
E.g. I call a function on a click and say, place this div next to this placement div please. It does it. User then exits and then does another click and the same function is used to place another div next to the same placement div. It does it, but instead of placing it in the same position as last time, seems to reference the position of last time as the 0 point and adds the left amount to that. Meaning the div is placed double distance away now.
Please note; I have consoled out the placement box top and left dimensions and it hasn't changed after each time.
Not sure what's going on.
If someone runs into this, I've managed to solve the problem very simply... by using css instead of offset. I.e.
$('#contentDiv').css({top:placeTop,left:placeLeft});
Im guessing that when you change the offset of $('#' + contentDiv) it affects the offset of your $('#' + placementID) that you subsequently call.
Say you have 3 placement Id's #1,#2 and #3.
With offsets #1: 0,0 #2: 0,100 and #3: 0,200.
Then you set #contentDiv's offest to #1's offset.
Now, #contentDiv's offset is 0,100. This makes your placement offsets #1: 0,100 #2: 0,200 and #3: 0,300 respectively now. Which is probably what is throwing you off.
According to
http://bugs.jqueryui.com/ticket/6868
The element must be visible before calling .position().
after changing my code to show the element before calling offet() it worked like a charm.
Reset your properties before setting the desired offset-value with (e. g.)
$(this).css('top', '').offset({top: desiredTopOffset});