Develop Reference

Best approach in sliding image and appending some room for content

I'm working with a jquery and I have this image that is the main problem. I googled it but came up with nothing. Here is my content for example.
And when the guy(in the picture above) is being click I want it to slide to the left side and will looked like this. Please see image below.
So what I'm thinking is
1. using addClass and removeClass using jquery or
2. just use jquery .slide or toggle function?
If there's a solution as such how could it be done? Since I only know is using addClass tho. And also what I'm planning is when the image exceeds 800px then the girl(in the image) will be send to back of the guy image.

What you are trying to do is create a mask around the guy. The scope of this question is beyond masking. Most methods of masking don't have large browser support at this moment so posting more on this would be disingenuous. But worth googling otherwise you can use the transform property to move the picture to the left. But you won't get the results you are looking for..
But there is the option of masking the picture in Photoshop and saving it as a PNG. And then utilizing the translate CSS method to move the image to left. This is your best option. But the details of either of these methods are out of scope for this question.

Cut this guy from image and put in another div at needed position. Put blue box between those two images and use slide function. You can cut the guy from his head i think.

Basically you need to have an html structure like this:
<div id='container'>
<div id='couple'></div>
<div id='mask'></div>
</div>
Initially in your css:
#mask {
display: none;
}
And, of course, you have to align horizzontally this two div.
Your jquery will have a behavior like this:
$('#couple').on('click', slide);
var slide = function() {
$target = $('#container');
$mask = $('#mask');
$mask.fadeIn();
$target.animate({
left: "+=50"
}, 500, function() {
/* callback on end*/
});
}
For complete documentation of animate check api jquery.

fade in images with javascript

Without using jquery, is it possible to simultaneously fadein and replace another image?
I've created a map with intricate polygonal areas that onmouseover and onmouseout, replaces imageA with imageB as seen in the following function. However, the transition is too abrupt upon replacing the image. It would be awesome if I can simply add a couple lines of code below the "if (aa==0) {...}" to do this. Unfortunately, my rudimentary knowledge of javascript prevents me from doing so.
aa=0;
function replaceImage()
{
if (aa==0)
{
aa=1;
document.getElementById('imageA').src="img/imageB.png";
}
else
{
aa=0;
document.getElementById('imageA').src="img/imageA.png";
}
}
Thanks so much!

yes, you can play around with loops and adjust the opacity of image to fade in and out. You might wanna look at this link if you are willing to user css3. http://css3.bradshawenterprises.com/cfimg/

not the expected 'effect' when using jquery show/hide

I'm having an unexpected effect and some other bugs when trying to use show/hide with mouseover and mouseout.
What I was trying to do is have a box (div) and when you would mouse over it, another box would appear and slide to the right.
Here's the fiddle for it
http://jsfiddle.net/XtXGR/
Now there's two problems with it. One is the flickering and the other is that it appears by growing from the top-left corner and what I want it to do is appear from the left.
Any help would be greatly be appreciated. Thanks
I think I know what causes the flickering from the similar questions but I still need help with the other issue. Thanks!
Oh also just so you know the context in which this will be used is on a page with a table of items and each item would be the object in the fiddle link I posted above.

The main issue is that moving over a different child element of the container will trigger a mouseout and mouseover combination, which is why you see the element expanding and collapsing. IE circumvented this with the mouseenter and mouseleave events, which act exactly like the CSS :hover.
Speaking of which, the jQuery hover function has this feature too. You should use that instead of mouseover and mouseout.
According to the show API, you should use the slide effect to get what you want.
Your final code should look like this: http://jsfiddle.net/XtXGR/28/

A couple things:
If you want to do a fadein/out this would be better:
$(document).ready(function(){
$("div.item_container").hover(function() {
$("div.item_body").fadeIn(500);
}, function() {
$("div.item_body").fadeOut(500);
});
});
​
Also, you should probably float the div .item_body to the left..
Demo: http://jsfiddle.net/lucuma/XtXGR/33/

How about using CSS3 transitions instead?
See this: http://jsfiddle.net/EVDj6/2/

Something like this? Using slide will give you the slide from default left effect.
$(document).ready(function(){
$("div.item_container").on('hover',function(){
$("div.item_body").toggle('slide',500);
});
});​
http://jsfiddle.net/XtXGR/25/

There were many issues in your code. The href's were invalid and the floating of the elements was not 100% correct. One of the main issues was that you had display:none in your CSS. Bring that dispay:none out and of the CSS and put it inline on the item you want to show/hide. When its default state is "hide" then you need to bring the display:none inline.
Look at this fiddle to get a better idea of how to go about this with a bit more valid syntax:
http://jsfiddle.net/fH3EC/1/

I made something fast, you can go crazy with it :) The animation is pretty smooth, I hope it's useful for you.
http://jsfiddle.net/XtXGR/50/

div with rounded forms

I'm trying to create a web design and there are a bit strange forms, something like this:
when the user hover on 1 section the background should change only for it:
the same for the second and third one:
Hope I'm clear...
I have no idea what technology should I use in order to achieve this affect. Can anyone please help?

Could use absolutely positioned pngs with image replacement on hover, then throw a rectangular div inside there

There are two ways:
use SVG to draw the shapes, with a fallback for older versions of IE.
Use background images. on normal shaped divs.

I would go with three separate images, each with the whole background and one "selected" area - on hovering a div just replace the background to the one having that div as "selected".
Quick example for the JS code:
function ReplaceBg(oDiv, num) {
oDiv.parentNode.style.backgroundImage = "url(images/background_" + num + ".png)";
}
function RestoreBg(oDiv) {
oDiv.parentNode.style.backgroundImage = "url(images/background.png)";
}
And the HTML:
<div style="background-image: url(images/background.png);">
<div onmouseover="ReplaceBg(this, 1);" onmouseout="RestoreBg(this);">First</div>
<div onmouseover="ReplaceBg(this, 2);" onmouseout="RestoreBg(this);">Second</div>
<div onmouseover="ReplaceBg(this, 3);" onmouseout="RestoreBg(this);">Third</div>
</div>
Hope the idea is clear enough..

There is a CSS3 syntax boreder-radius and you can do this with it, but you had do the work here , I mean you had set the random pixels and look for the one which suits best. For example here it is -- http://jsfiddle.net/divinemamgai/Ld7He/
OR
Maybe you should keep the main background image as white for images 1 and 3 and for image 2 use png
based background-image and change it on mouseover using Jquery and don't forget to keep the highest z-index for image 2.
Hope this helps you.

May this help http://jsfiddle.net/JeaffreyGilbert/G3VG7/

Change the jquery show()/hide() animation?

By default if you specify a speed jquery adds a weird looking animation where it expands from the left end corner. I want it to just slide down. Is there a way to do that without importing something else like jquery UI ?
I'm looking something in the lines of :
$("test").show('slow', {animation:'slide'})
If there's no way, then what would be the lightest solution to do this?
Thanks

There are the slideDown, slideUp, and slideToggle functions native to jquery 1.3+, and they work quite nicely...
https://api.jquery.com/category/effects/
You can use slideDown just like this:
$("test").slideDown("slow");
And if you want to combine effects and really go nuts I'd take a look at the animate function which allows you to specify a number of CSS properties to shape tween or morph into. Pretty fancy stuff, that.

Use slidedown():
$("test").slideDown("slow");

You can also use a fadeIn/FadeOut Combo, too....
$('.test').bind('click', function(){
$('.div1').fadeIn(500);
$('.div2').fadeOut(500);
$('.div3').fadeOut(500);
return false;
});