Develop Reference

HTML/css/Javascript cloud slide

So, I am trying to create an effect similar to the clouds on this website: http://www.poweredwebsite.com/index-v.php
How exactly would I do this using either html, css, or javascript?

You could use a repeating background image and animate the x position with jQuery:
The HTML could be whatever you want:
<div class="banner">
<!-- etc. -->
</div>
And the CSS:
.banner {
height: 200px;
width: 800px;
background: url(path/to/image);
}
And some jQuery:
function animateBanner() {
jQuery('.banner').css({
backgroundPositionX: '0'
}).animate({
backgroundPositionX: '-400px'
}, 5000, 'linear', animateBanner);
}
animateBanner();
Here's a demo: http://jsfiddle.net/tLEBa/

Taking what Brandon suggested and advancing it step further, I came up with a possible working solution utilizing jquery's animate function:
function animate() {
$( ".banner" ).animate({ "left": "+=400px" }, 3000, "linear",
function() {$(this).css({ "left": "-=400px" });
animate();
} );
}
animate();
please see the following snippet:
jsfiddle
The suggested solution uses two images, positioned side by side horizontally.
Both images x coordinate is interpolated linearly to achieve wrap effect.
Notice that you will need a seamless image for a good match.

How to set the screen height and width by %(percentage) in javascript

i am using one plugin for slider. That slider contains H & W is mentioned by pixel. I want that in %
$("#section4").awShowcase(
{
content_width: 1000,
content_height: 300,
}
});
They are mentioned by like this. how to change this by % - Percentage.
I want that for responsive model

Try to use:
$("#section4").awShowcase({
content_width: '50%',
content_height: '50%',
//} // Remove this
});
Also, you're having redundant } in your code.

$("#section4").awShowcase(
{
content_width: 100%,
content_height: 30%,
}
});
Is this what you looking for?

animate width of rectangle from center in raphael.js

I have a question about the .animate() Api in Raphael.js
There is a rectangle which I would like animate the width and height.
r.animate({ width: 50, height: 50 }, 1000, "bounce");
But I want to expand it from the center of that rectangle, not the left-top. Does anyone of you know how to do it?
FIDDLE

There is a better way to do this without calculation. If you know how much bigger you want to make your object, then you should animate the scaling.
Here is the DEMO
r.click(function() { r.animate({ transform:'s2' }, 500); });
Note that transform:'s2' means scale it 2x. Hope this helped ;)
EDIT if you want to have this animation works conterminously, just write transform:'...s2' instead.

You can use x and y to move the retangle and simulate it growing from center.
r.click(function() { r.animate({ width: 100, height: 100, x: 75, y:75 }, 500); });
Here is a FIDDLE

jQuery: Image fading to another image

I have the following code in jQuery:
if (klick = true) $(this).fadeOut('fast', function(){
$(this).attr("src", "../img/daniel_effects.png").fadeIn();
});
The changing of the image now works so:
- Image1 fade-out
- No image is displayed
- Image2 fade-in
How can I fix this, that the images fading together, without a lil time with no image between them?
Here's the site where you can see what I mean:
http://anthraxbeats.com/pages/biography.html
When you're hovering on a image, theres a short empty space before the image loads in.
How can I fix it?

Use two different images. Have them cover the same space by setting their css properties "position: absolute". Fade the first one out while setting the other one to false. You may need a proper container with position: relative as position: absolute may cause them to behave...unexpectedly.
#container{
position: relative;
width: 100px;
height: 100px;
}
.img1, .img2{
position: absolute;
width: 100%;
}

Adding [queue: false] to the animation will allow for multiple animations at the same time
var $theOtherThing = $(this).attr("src", "../img/daniel_effects.png");
if(klick === true){
$(this).animate({
"opacity": "0"
}, {
duration: 200,
queue: false
});
$theOtherThing.animate({
"opacity": "1"
}, {
duration: 200,
queue: false
});

You can try preloading your image outside of the click handler. Something like this should work:
(new Image()).src = "../img/daniel_effects.png";

Possible to toggle/animate between two sizes using jQuery?

Basically I have a small div that is initially styled to 60x60. I have created click event that animates the expansion of the div:
$("#myDiv").click(function () {
$(this).animate(
{
width: "350px",
height: "300px"
}, 500);
}
I would like to reverse this animation if someone clicks the div again. Is there anyway to toggle between the original size and the expanded size (still using the animate function) with each click?
I found the toggleClass function but I don't think this will work with animiate.
You can see a basic fiddle here: http://jsfiddle.net/NS9Qp/

$("#myDiv").toggle(function() {
$(this).stop().animate({
width: "350px",
height: "300px"
}, 500);
}, function() {
$(this).stop().animate({
width: "60px",
height: "60px"
}, 500);
});
Example.
The jQuery toggle() function allows you to define two or more functions to cycle through on each mouse click. In this case, the first one (triggered on the first click) expands the div and the second one (triggered on the second click) resets it. On the third click, it starts back at the first one, and so on.
More about toggle() here.

just to be different :
var size=[];
$("#cornerBox").click(function(){
$(this).width() >= 350 ? size=[60, 60] : size=[350, 300];
$(this).stop().animate({ width: size[0], height: size[1] },500);
});
Fiddle: http://jsfiddle.net/NS9Qp/1/

I ended up using jQuery UI's animated toggleClass effect: http://jqueryui.com/demos/toggleClass/
super simple code:
$('h2').click(function() {
$(this).next().toggleClass("hidden", 1000);
});

Do not hardcode css styles (in my example I used inline css for myDiv element, put this in css files).
<div id="myDiv" style="background:red; width: 60px; height: 60px;"></div>
<script type="text/javascript">
var div = $('#myDiv');
div
.attr('defWidth', div.width())
.attr('defHeight', div.height())
.toggle(function() {
$(this).stop().animate({width: "350px", height: "300px"}, 500);
}, function() {
$(this).stop().animate({width: $(this).attr('defWidth'), height: $(this).attr('defHeight')}, 500);
}
);
</script>

What I do for cases like this, is store a transformation array.
var transforms = { 'height0': 60, 'width0': 60, 'height1': 300, 'width1': 350};
Then, store a toggle between 0 or 1, and use the corresponding values for the animation.
EDIT: combine this with the previous example of toggle, and you've got yourself a solid working solution!