Develop Reference

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.

Moving image down screen with Javascript

I would like to move my image down the screen from the top left to the bottom left. I call two functions when the body loads:
window.onload = function() {
MoveRight();
MoveDown();
};
I then retreive the width and height of the clients browser window (to ensure the animation stops when it reaches the sides of the window):
document.body.style.height = height;
document.body.style.width = width;
The function "MoveDown()" is this:
function MoveDown(){
for(var i = 0; i < ; i++)
{
document.getElementById("Amanda").style.top=+i;
}
}
For some reason when I load the webpage, the image just sits in the top left. I had hoped the for loop would increment the "top" value by 1px every time, until such time that it was touching the bottom of the window when it would stop.
If it helps, the image position is set to relative with left and top both set to 0px.
If anyone could help it would be great.
*I collect the width as I want the image to move diagonally but figured that if I got moving down figured out I could easily change the code to make it go sideways at the same time.

The reason it's not moving is most likely (depending on browser) because you're not setting the units. Try
document.getElementById("Amanda").style.top=i+"px";
However, you'll find that it jumps straight down rather than animating. The reason is your loop executes all in one go without giving the browser a chance to redraw. There are a number of ways of getting around this, but one simple one would be like this
function MoveDown() {
var i=0;
function step() {
document.getElementById("Amanda").style.top=i+"px";
i++;
if (i<=100) setTimeout(step,10);
}
step();
}

Do you have position: absolute or position: relative (or position: fixed) as styling for your image?
Asking this because top applies only to positioned elements (and by default elements have position: static which is they are not explicitly positioned).
See https://developer.mozilla.org/en-US/docs/Web/CSS/top and https://developer.mozilla.org/en-US/docs/Web/CSS/position
On rereading your question, this loop of yours looks like an endless loop. Consider adding a stop rule for it, or as suggested in the comments - if you do not need some kind of sliding animation, just put css rule for bottom: 0

You'll want to use setTimeout or setInterval (I can never remember) with some interval and a function that increments the top value every time it runs. Then cancel the timeout/interval when the image reaches it's destination!

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();
});

How can I move a background image pattern around?

I've looked around for this but I couldn't find an answer, and I don't have a clue how I would do it. What I am looking for is a JavaScript or jQuery script that will "move" a background image to the right in a div container, so that the pattern will have an "animated" effect.
How would it be possible to do this? I apologize if I have not explained the question in enough detail.

You can use the CSS background-position property to set the position of the background.
Here's a live example that moves the background one pixel to the right every quarter second, resetting when it reaches 100 pixels.
HTML:
<div id="theDiv">This is the div</div>
CSS:
#theDiv {
background-image: url(http://www.gravatar.com/avatar/7b13c109d50df67d5f7d0b1d901d7fb7?s=32&d=identicon&r=PG);
background-repeat: no-repeat;
}
JavaScript:
jQuery(function($) {
var pos = 0;
move();
function move() {
++pos;
if (pos > 100) {
pos = 0;
}
$("#theDiv").css("background-position", pos + "px");
setTimeout(move, 250);
}
});

You cannot use jQuery.animate on a background position, because:
All animated properties should be animated to a single numeric value.
And background-position is not a single numeric value property.
Thus, your best bet is to not use a background image in this case directly. You could re-do your layout so that the image is actually an absolutely positioned <div> (the size of your background image) within another fixed-size <div> container (position: relative; overflow: hidden;). And then to make it "move" -- animate CSS left property on your absolutely positioned <div>.

how to dynamically (re)position an element according to the bottom of the page using JS / Jquery?

the back story: i have a tab section on a page which when navigated through displays sections (divs) of varying height.
the result, is that certain inputs (which are strangely positioned for reasons i can't change) on this page reposition themselves problematically.
the proposed solution: as the page height changes, have these problem inputs repositioned according to the page bottom (from which their appropriate distances are always a constant).
what i'm thinking is that i need some js that does something like,
page height change triggers input position from bottom to = x.
there are two inputs if that's at all relevant. :)
if only there was css for this (i know there is under normal circumstances, but trust me -- not in this case).
thanks for your time & help i've been struggling with this for weeks!

It sounds like you just need to position the inputs absolutely to the bottom of a relatively positioned div. Like -
#form {
position: relative;
}
#inputs {
position: absolute;
bottom: 0;
}
<div id="form">
<div id="inputs">
<input id="weirdinput" />
</div>
</div>
If thats not enough to get you pointed in the right direction you will need to provide some sample code for the crowd to look over.

You could try something like this using the jQuery event for the resizing of a window:
$(window).resize(function() {
var windowHeight = $(window).height();//get new height of window
var desiredHight = windowHeight - 50;
$('input.myclass').css('top', desiredHeight.toString() );
});