Develop Reference

Table with hide/show div moving wrong div

I have a PHP script that gets data from a database and displays it in a 2 column table. I have a hide/show for each of the results, which extends down, pushing any options below it down too when clicked.
However the results in the column on the other-side also move down.
How do I make it so only the column with the clicked hide/show opens and moves down?
Below is the code I am using to show the hide/show; I thought by adding a .closest('td') may help, but all it does is open the corresponding left or right hide/show div!
$(document).ready(function(){
$(".reveal-arrow").click(function(){
$(this).parents('.template-container').find('.reveal-container').slideToggle();
$(this).toggleClass('flip');
});
});
Update: I have made a simplified fiddle of whats happening here: https://jsfiddle.net/r1bf4odx/18/
As you can see if you click the down arrow on BOX1 it 1 opens down, however BOX 2 also moves down. How do I stop Box 2 moving and stay where it is! Thanks again!
Please bear in mind that I am getting many results from a database!

The issue is that you are using a table, and the default alignment for a table is baseline / middle (see here (SO) for more info).
You can add
td { vertical-align: top; }
to fix the moving boxes
Updated fiddle: https://jsfiddle.net/r1bf4odx/21/

drag and drop Event Via VBA

Respected Expert,
I just want execute drag and drop Event Via VBA excel.
Please refer the below image, Basically I required to drag the clientcategory into Row Area .The HTML code for the same is available in the below image.
In the below image HTML code of Row Area is available.
Also I have Identified that when the clientcategory has been dragged in Row Area , The codes are upgraded in tbody with the clientcategory table.Please find the below image for the same.
I have managed to get the object of clientcategory and Row Area with the help of below code.
Set Dimensions = HTMLdoc1.document.getElementsByTagName("table")(73).getElementsByTagName("table")(1)
Set Dimensions1 = Dimensions.getElementsByTagName("tr")(6).getElementsByTagName("td")(0)
Set Drop = HTMLdoc1.document.getElementsByTagName("table")(77)'-->For row Area

Basic JavaScript Issue: Targeting a Specific Div in DOM and Changing Properties

I am not great with JavaScript, and I am thinking this is a fairly easy answer.
Link to project:
http://dl.dropbox.com/u/4132989/example02/example02/index.html
What I'm trying to do:
Make the draggable cell turn red, and the text turn white, when it's dropped to it's correct location.
When I drag the green or orange cell to their correct locations, I have inserted this as a test to make sure I am able to target only when the drag is correct.
document.body.style.background="red"
If you look at the code, on drop, the border changes on the cell from solid, to dotted. What I am trying to do is be able to change any property on drop. I want to make the background of the cell red on drop and I'd like the text to turn white. I tried this:
REDIPS.drag.style.background="red"
However, this did not work and it made everything non-draggable.
To download the code use this link:
http://dl.dropbox.com/u/4132989/example02.zip
Thanks in advance for any help.
*Oh, the change I made is in the file redips-drag-min.js

You're close, but the object you really want to change is rd.target_cell, the cell that just received the drop action. Add the following inside the if (rd.target_cell.className ... conditional (line 31 of script.js):
rd.target_cell.style.background= 'red';

jquery show hide

look I have this question, how can i do something like this (look at images)
I think it's possible to do with jQuery or ajax, but i don't know how..
i have page something like this :
when i click on 1st green cube slides up one #div container at the bottom of page :
when i click on red 1st cude #div container at the bottom of page slides down :
but when i click for example (on image 2) at the green cube #div container at the bottom slides down and up with new information abou title 2.
I hope so you will help me with this..
And one more thing, when i click o green cube it color chancing to red, and when i click on red cube it's changes back to green.

I don't know if this is exactly what you need, but I did a quick solution in this fiddle:
http://jsfiddle.net/8Z66Y/3/
If you click in the squares the bottom bar slides up and down, the only thing that is missing is the text, you could do that using the data attribute in every div and setting it to the bar innerHTML.
If the example is in the right track tell me and I'll add the data if you need it, but I don't know if you need to retrieve the data from somewhere else

You just have to write in the second green's jquery code that hide first green's bar, and do the opposite for the first green's jquery code.
like:
$("first").click(function(){
$("second").hide();
$("first").toggle();
});
$("second").click(function(){
$("first").hide();
$("second").toggle();
});

How to keep div focus when the mouse enters a child node

So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!

Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.

I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...

1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.