javascript - Can jquery reposition and resize divs - Stack Overflow

admin管理员组

文章数量:1406951

I have a page with a header, footer, and middle area. The middle is 3 equal columns, each 33% width.

When a column is clicked, I'd like for that column to climb above the 2 other columns and get a width of 100%, and the 2 columns to redistribute to 50-50.

• Is this sort of thing possible (and reliable) with jquery, or is it too much of a hassle?
• Can it be done with animations?
• Any examples

I have a page with a header, footer, and middle area. The middle is 3 equal columns, each 33% width.

When a column is clicked, I'd like for that column to climb above the 2 other columns and get a width of 100%, and the 2 columns to redistribute to 50-50.

• Is this sort of thing possible (and reliable) with jquery, or is it too much of a hassle?
• Can it be done with animations?
• Any examples

• javascript
• jquery
• ajax

Share Improve this question Follow asked Jul 26, 2010 at 14:52 KamoKamo 3,63522 gold badges2020 silver badges2020 bronze badges 2

• 3 equal columns. When 1 is made 100%, wouldn't that throw other 2 to next row ?? What you asked, is definitely answered by GenericTypeTea, but column1 wont climb over other 2. It will throw it others out. You have to set some ratios. – simplyharsh Commented Jul 26, 2010 at 15:00
• @harshh - Have a look at the jsFiddle I provided. Seems to work alright. – djdd87 Commented Jul 26, 2010 at 15:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Yes it can be done:

$("#column1").css("width", "100%");
$("#column2, #column3").css("width", "50%");

And to move the column to the top, you can do something like this:

$(column).parent().prepend(column);

I've put together an example here on jsFiddle for how to do it on the click of the div.

jQuery is probably the most reliable way to do it as it's written to be cross browser patible.

Take a look at the document for the css method here.

http://docs.jquery./Tutorials:Live_Examples_of_jQuery

Check out example B as I think that's what you're looking for. I don't have a lot of experience myself with jQuery so unfortunately this is the best advice I'm going to be able to give you.

本文标签： javascriptCan jquery reposition and resize divsStack Overflow