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.

CSS and HTML boxes smallest on top but not in order

Right, this is slightly hard to explain but what I'm after is as follows:
I have a database of posts that will go into an HTML page. Obviously all these posts will be different sizes so the boxes containing them will be different sizes too.
What I'm after is a way to make these boxes all appear to fit nicely in with each other, as in the picture below for example. If the first post is a small one then it will begin a line of small boxes for example. And they won't necessarily all be the same height either. In the picture each post is numbered to show where it comes in the array of posts.
See the illustration I made here:
Is this possible? I'm assuming I'll need some Javascript in there probably, and JQuery is preferable.
Thanks for any and all help.

As you're willing to go with a Javascript solution, I've found that the jQuery Masonry plugin works really well for doing a "best fit" of differently shaped rectangles.
You set it up with markup like:
<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
You then float: left your .items, and attach the Masonry handler to the #container:
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
...
});
});
There's also a no-jQuery version if you're not already using jQuery at all

Make a jquery tooltip dynamic

How can make a dynamic jQuery tooltip with .mousemove, as that when mouse enter on words Tooltip1 Or Tooltip2 Or Tooltip3 show contents same tooltip.
Here is a sample of my html: http://jsfiddle.net/JGx52/4/
<ul>
<li class="style">
<div class="tooltip" style="bottom: 406px; left: 565px; opacity: 0.9; display: none; ">
Simple or Rich A simple call such as $("img[title]").tooltip(); will enable tooltips by taking advantage of the element's title attribute. If you want complex tooltips with images, tables, forms and links that's possible by placing the tooltip element manually next to the trigger element. Configure design, timing and positioning Use CSS to create rounded borders, arrows, gradients or shadows. Big or small, high or low. Use the configuration to tweak pre and post-delays and positioning to your personal needs. Fading, sliding, dynamic Tooltip comes with two built-in effects: toggle, and fade and one separate effect, slide, and you can easily build your own effects. The dynamic plugin will dynamically change the tooltip's position so that it always stays in the viewport. File size: 1.10 Kb This tool has all the features and configuration options you'll possibly need, such as effect and a plugin framework, scripting API and an event model. A smaller codebase is easier to control and results in snappier behaviour. Without gzipping the size is 3.5 Kb.
</div>
ToolTip1</li>
<li class="style">
<div class="tooltip">
jQuery Lint (edge)
</div>
ToolTip2</li>
<li class="style">
<div class="tooltip">
Please read the documentation. For updates please follow our blog, tweets or become a fan.
</div>
ToolTip3</li>
</ul>

i think this is what you are looking for http://jsfiddle.net/jalbertbowdenii/QGTTN/10/

I'm not entirely sure how you want this presented, but with the provided CSS and markup, this works:
$('a.tool_tip').hover(function() {
$(this).prev('.tooltip').show();
}, function() {
$(this).prev('.tooltip').hide();
});

Mouseover/hover effect slow on IE8

I have noticed a weird performance thing in IE8 when using mouseover events on a table with many rows (100 in this example). I have tried a lot of different approaches but I can't seem to find any way to get it as fast as I like/need.
If I switch classes on each event the performance goes down in all IE versions, and If I use direct manipulation of the CSS through javascript IE6 and IE7 speeds up alot, but IE8 still performs lousy.
Any ideas ? I would really like to know what it is that makes the mouseover event to perform so sluggish compared to all the other browsers.
If this only happened to IE6 I could understand and let it pass, but when the newest version of the browser is the slowest one, there is only going to be more and more users with a bad experience.
Example using JQuery hover: http://thedungheap.net/research/
EDIT: I have now updated the example so that it is easy to see the difference between having 10 rows and 200. This is in the same document, so this cannot be a problem with the whole DOM size, i guess

The :hover IS very slow on IE8, no matter how you intend to implement it. In fact, the javascript onmouseover, onmouseout events provides way faster methods for creating a hover effect, than CSS does
Fastest example on IE8:
<table>
<tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#FFFFFF'">
<td>foo bar</td>
</tr>
</table>
Slower example:
<style type="text/css">
tr.S1 {background-color:#000000}
tr.S2 {background-color:#FFFFFF}
</style>
<table>
<tr class="S1" onmouseover="this.className='S2'" onmouseout="this.className='S1'">
<td>foo bar</td>
</tr>
</table>
VERY slow example: JSFiddle
<style type="text/css">
tr.S {background-color:#000000}
tr.S:hover {background-color:#FFFFFF}
</style>
<table>
<tr class="S">
<td>foo bar</td>
</tr>
</table>

Btw for all browsers you can use :hover selector using css only. And only for IE6 you can add your fastest soluton.

Try using event bubbling. Add the hover event to the table only, and then look at the target element.
$(function() {
$('table').hover(function(e) {
$(e.originalTarget.parentNode).css('backgroundColor', '#ffc000');
}, function(e) {
$(e.originalTarget.parentNode).css('backgroundColor', '#fff');
});
});

Have you tried to see what happens if you only have one per row? Curious if it is the number of elements in the DOM [or in each row] could affect performance. Otherwise, it could be an issue with the way ie8 traverses tags in the selector engine. Not really an answer, but something to try.
No IE8 or I'd try it myself.

Seems fast enough to me, without actually looking at metrics.
You could try mouseover/mouseout instead of toggling. You could also try event delegation, which often helps with this many elements in the dom.
$("tr").mouseover(function() {
$(this).css('backgroundColor', '#ffc000');
})
.mouseout(function() {
$(this).css('backgroundColor', '#fff');
});

I have faced this issue and implemented the following workaround
var viewTable = jQuery("table.MyTable");
var temDiv = jQuery("<div class=\"HighlightClass\" style=\"display:none\"></div>").appendTo("body");
var highlightColor = temDiv.css("background-color");
viewTable.mouseover(function(eventObj){
jQuery(eventObj.target).parents("tr:first").css("background-color", highlightColor);
}).mouseout(function(eventObj){
jQuery(eventObj.target).parents("tr:first").css("background-color","");
});
I hope this could be useful for you.

Sorry to post on an answer this old but I think it is relevant and this page is well ranked by google so...
Wow, I just spent a great amount of time on this problem, I tried to use Javascript, but it was still slow.
This is a solution if you use background images :
This was a real issue for me, because the project I had this problem on was the hover effect on Left and Right buttons / arrows that I use to animate tabs left and right, the tabs would go under the buttons, a tab slideshow if I may say and when the cursor entered the button area the normal image would disappear, the image below would be visible for a few millisecs and then, the hover image would eventually display, ugly.
The real solution was to use image sprites, that way there is absolutely no lag even in pure css. The idea is to have a single image with all the differents images states insides (normal / hover / selected / inactive / etc), you set the image as background-image, and you just adjust the background-position value for the hover effect and others.
If you want to know better about css sprites : http://css-tricks.com/css-sprites/

jQuery animation

I'm having some minor problems with some animations I'm trying to set up. I have a couple divs stacked on top of each other kind of like this.
<div id="div1">
Stuff...
</div>
<div id="div2">
More Stuff...
</div>
Each of these divs has a drop shadow applied to it via jQuery plugin (jquery.dropshadow.js).
The problem occurs when I expand one of the divs using some kind of animation. The shadow does not update with the size of the div. I can redraw the shadow in the callback of the animation but still looks pretty joggy.
Is there a way that I can update the status of my shadows periodically throughout the course of the animation or can anyone recommend a better drop shadow library that would fix the problem? It doesn't have to be jQuery plugin.

I think the only way to do this (at least with that particular drop shadow plugin) would be targeting both the element you want and all the drop-shadow "phantom" elements, in your animation. So, for example:
<style type="text/css">
#div1 { width: 50px; }
</style>
<div id="div1">
<p>Here is a lot of stuff. Stuff stuff stuff.</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#div1").dropShadow();
$("#div1").click(function() {
$("#div1, #div1 + .dropShadow .dropShadow").animate({ width: "400px" }, 1500);
});
});
</script>
This is based on the structure of the rendered code that the drop-shadow plugin produces... all the fuzzy copies of your original element get a class of .dropShadow and get grouped into a container element which also has a class of .dropShadow and gets stuck into the document right after the original element (thus the + selector).
As long as you apply whatever animation you're doing to all of these shadow elements, they all get animated (however, it is a bit jerky from all that processing... uffda).

I would suggest using CSS for your drop shadows, and not JS.
I have dealt with this exact problem in the past and I have completely stopped using JS for drop shadows. I have never seen animations with JS shadows look as smooth as pure CSS. Also, using too much JS to alter the page elements can cause performance issues.

Try to apply the same animation effects to the shadow element(s).
I don't know the exact technique used in jquery.dropshadow.js, but I suspect it creates copies of your shadow casting elements and styles them to achieve shadow like appearance. It is possible that these copies are siblings of their source elements, thus don't "follow" animation (as child elements would).

Ok, I still don't know how you animate, but I give you another example:
$('#foo').slideToggle().ready(function(){
$('#foo').dropShadow(options);
});
So, instead of slideToggle, just use whatever animation thingy you got.
Hope that helps.