Develop Reference

CSS - Setting the top/left properties of a rotated element

Consider I have a relative/absolute positioned div with a transform: rotate property set on it. How does changing the top/left properties of this div affects its position on the screen? In a small demo that I created, it looks like when trying to move that div, by changing its top/left properties, it won't move as expected. For example, in the demo below, i have a relative positioned div, which is rotated by 45deg, and initially positioned at (300px, 300px). When trying to move this div by (5px, 5px), the div will actually move backwards... Why it that?
Here is the demo - Demo (Click the red square in order to move it by 5px in each direction)
Thanks!

The problem is that position attempts to include things like margin, position, etc. (Perhaps it uses rotate as well to calculate position). Therefore, instead of position, use +=number. For example:
$(document).ready(function() {
$('.redSquare').on('click', function() {
$('.redSquare').css('top', "+=5");
$('.redSquare').css('left', "+=5");
});
});
This works as expected.
http://jsfiddle.net/KyD7x/

Updated your code for the expected behavior. Please refer this Pen
$(document).ready(function() {
$('.redSquare').on('click', function() {
$('.redSquare').css('top', parseInt($('.redSquare').css('top')) + 5 + 'px');
$('.redSquare').css('left', parseInt($('.redSquare').css('left')) + 5 + 'px');
});
});

How does Google Doodle work?

How does Google Doodle work?
When i search for it, i found following
Animated Gif
Animated Jpeg Frame. Sprite image will have all frames and this frame is animated using javascript.
Canvas
Which one is correct?

First they enclose the <img> tag JPEG with all the animation frames inside a <div> tag that has a fixed height of 182 pixels and which hides overflow. This creates a fixed window so to speak, which masks all but current animation frame. The image is animated using JavaScript, which changes the top property for the absolutely positioned image to slide it up a fixed interval with the setTimeout() function.
Here is some code of example by Google from one of reference:
<div style="height:182px;position:relative;width:468px;overflow:hidden">
<img border="0" src="source.jpg" id="filmstrip" style="position: absolute; height: 2912px; top: -0px; display: block; ">
</div>
Jquery:
<script>
function naiveAnimation(id) {
var img = document.getElementById(id);
var offset = 0;
var animate = function() {
//slide the image correct frame of animation given by offset
img.style.top = -offset + "px";
//calculate offset to next frame
offset = Math.floor(offset + 182);
//if we are not yet on the last frame...
if(offset < 2912) {
//call me again in half a second
window.setTimeout(animate, 500);
} else {
//at last frame, so all done!
}
};
//start the animation
animate();
}
naiveAnimation('filmstrip');
</script>

I would go for the Animated JPEG and Canvas, although APNG may work too. I haven't seen a 256-bit color image on a doodle. Maybe even a webm. Some doodles have sound and some are interactive, so I think they use whatever they see suitable for their purposes.

What's the technique behind animation on a web page?

Although we can achieve fantastic animations through various Javascript libraries such as jQuery. I am wondering what's the technique behind the animation?
I can think of using CSS to format the page element.
But how can we place an element on arbitrary position of the page? I mean, not by lines. Is it true that we can think of the client area within the browser window as the Paint canvas?
I am totally new to frontend Web development, I hope I made myself clear. And thank you for answering this junior question.

The jQuery way - and the only cross-browser way - to animate is to set some CSS properties, wait a little, update those properties, wait a little, update those properties...
e.style.position = "absolute";
time_start = Date.now();
time_end = time_start + 10000;
(function tick(){
now = Date.now() - time_start;
if(now > time_end) now = time_end;
e.style.top = now * speed + top_start;
if(now < time_end) setTimeout(tick, 13);
}();
The CSS properties you are interested in are:
position: absolute lets you position the element to an arbitrary location.
display: block or display: inline-block lets an element to have a width and height
top, left, bottom, right define the element position if its position is absolute or relative. left takes precedence over right and top takes precedence over bottom.
width and height define the element's size.
opacity can be animated to fade an element in or out.
padding, border-width, margin and their respective components can all be animated.
You can also animate colors: border-color, color, background.

How to add images one on another image using javascript

I have small requirement: I need add image over(up) the another image through javascript. Please give me the suggestion!
function sampleImage()
{
document.getElementById('img1').innerHTML='<img src="C:\Users\rajasekhark\Desktop\assets\images\Cock.png" />';
}

You need to enclose the two images in a <div> and then use the following CSS attributes:
div {
position: relative;
}
​#img2 {
position: absolute;
top: 100px;
left: 100px;
}
See http://jsfiddle.net/C8hh4/
The second image must be a sibling of the first, it cannot be a descendent because that's not legal HTML. The <div> needs to have relative position otherwise #img2's absolute position will be calculated relative to the closest ancestor that doesn't have the default static position.
The value for top should be half of the difference between the outer image's height and the inner image's height, and likewise for the left / width.
If your content is static, calculate those values by hand. If it's dynamic, use JS to set the style:
var img1 = $('#img1')[0];
var img2 = $('#img2')[0];
var top = 0.5 * (img1.height - img2.height);
var left = 0.5 * (img1.width - img2.width);
$(img2).css({top: top, left: left});

You could use relative positioning.
Stack the images on top of each other and set position:relative;top:VALUE;
Value should be -HalfHeightOfBackgroundImage-HalfHeightOfForegroundImage.
Another approach whould be wrapping the foreground image in a div and setting the the background image as the background-image.

Why javascript? Of course, you could use a canvas and paint them over each other, but I would recommend simple CSS:
<img
style="padding: 20px 7px, background: url('/some/frame.png')"
src="/cock.jpg"
width="50px" height="40px"
/>
You might use a class for that, the inline style is just shorter.

You should do (I saw jquery tag):
$("#img1 img").first().prop("src", "C:\Users\rajasekhark\Desktop\assets\images\Cock.png");
And an advice: DO NOT use full path to your local disk ...

The jQuery option would be
$("#img1").prop("src","blahblah.jpg");
Although I don't really understand your question.
If you mean that you need to change the image on hover then perhaps this will help...
$("#img1").hover(
function () {
$(this).prop("src","newImage.jpg");
},
function () {
$(this).prop("src","originalImage.jpg");
});
EDIT:
OK...
What you need is a div with the green flashcard as the background image. And place the cock image in that div but set to display:none;
Then on hover just show the image of the cock.
$("#containerDiv").hover(
function () {
$(this).find("img").show();
},
function () {
$(this).find("img").hide();
});

Scrolling div within bounds

I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?

You change the z-index using css:
div.class {
z-index: 60;
}

You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.

You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}