0

I'm attempting to shove as much content in as little space as possible as I can and I've come up with the following layout. rather then tell you about it, I've drew up a picture to explain it, after all, a picture is worth a thousand words: https://i.stack.imgur.com/zhNcb.png

Now I've come up with this which is somewhat close to what I want, close enough that I'm tired of fiddling with it and just want to get it functional: http://jsfiddle.net/7D9XW/ html:

<div id="spacer">
<div id="wrapper">
<div id="item1" class="menuitem">text123341</div>
<div id="item2" class="menuitem">text223</div>
<div id="item3" class="menuitem">text32341</div>
</div>
<div id="content">
<div id="container1"><div id="text1">Lorem ipsum dolor sit amet</div></div>
<div id="container2"><div id="text2">consectetur adipiscing elit</div></div>
<div id="container3"><div id="text3">Vestibulum pellentesque rutrum tellus Vestibulum pellentesque rutrum tellus Vestibulum pellentesque rutrum tellus</div></div>
</div>
</div>

css:

#spacer
{
 margin-top: 5%;
 margin-left: 5%;
 margin-right: 5%;
 width: 90%;
 display: inline-block;
 vertical-align: top;
 height: auto;
 background: transparent;
 z-index: -1;
}
#wrapper
{
 display: table;
 width: 100%;
 border-spacing: 1px 0px;
 border-collapse: collapse;
}
#spacer .menuitem
{
 display: table-cell;
 height: 1em;
 padding: 1px;
}
#content
{
 clear: both;
 position: relative;
}
#container1
{
 display: block;
 vertical-align: top;
 height: 0px;
 overflow: visible;
 width: 100%;
}
#text1
{
 display: block;
 background: blue;
}
#item1
{
 background: blue;
}
#container2
{
 display: block;
 vertical-align: top;
 height: 0px;
 overflow: hidden;
 width: 100%;
}
#text2
{
 display: block;
 background: green;
}
#item2
{
 background: green;
}
#container3
{
 display: block;
 vertical-align: top;
 height: 0px;
 overflow: hidden;
 width: 100%;
}
#text3
{
 display: block;
 background: red;
}
#item3
{
 background: red;
}

I did some searching before I got this far and read that jquery would let me swap elements. However, what I did not read before I put this work into it was that it would only let me swap consecutive elements. I need to swap non-consecutive elements dynamically, preferably not having to rewrite the code every time I change the number of elements I need to swap. Not only do I need to swap those table cells (the ones containing text[randomnumbers]) I also need to swap the style of the content (overflow:visible makes it visible. overflow:hidden makes it..well, hidden.) How would I swap non-consecutive elements dynamically with jquery? and, as a bonus question, what could I do to make what I have closer to my original vision for the page (as seen in the image I linked earlier)?

Thanks.

Hemerson Varela
  • 24,034
  • 16
  • 68
  • 69
user2472522
  • 3
  • 4
  • What code are you using to swap elements, and what makes you think it only allows consecutive elements? – Barmar Jun 11 '13 at 20:32
  • im looking at the first response in [link]http://stackoverflow.com/questions/698301/is-there-a-native-jquery-function-to-switch-elements. It seems to me that would mess up events though, so the code offered in another solution is what I would use: // clone element1 and put the clone before element2 $('element1').clone().before('element2').end(); // replace the original element1 with element2 // leaving the element1 clone in it's place $('element1').replaceWith('element2'); However, the responses say it only works if their consecutive. – user2472522 Jun 11 '13 at 20:46
  • The answers that use `replaceWith()` don't require the elements to be adjacent, and event handlers are retained. – Barmar Jun 11 '13 at 21:08
  • Good to know. How about the super bonus question (getting the stuff to overlap eachother slightly and swapping the contents position and z-level to make sort of a stacked paper/folder effect), how might I achieve that in css styling and in function? – user2472522 Jun 11 '13 at 21:34

1 Answers1

0

Okay first off all please learn CSS and HTML best practices, I understand you might be new put It's always good to know something quit well before going a next step, I've did this kind of stuff myself used to jump higher and higher and then I felt ;)

Anyway the best and sexiest way would for example be to use jQuery UI (see tab section)

and the other way could be this http://jsbin.com/awerep/1/edit this is you're jsfiddle code just a little improved and added the tab functionality.

Kreshnik Hasanaj
  • 4,815
  • 1
  • 15
  • 18
  • I understand my html and css is quite a mess. I had a hell of a time getting shit to line up and work a bit, and my troubleshooting method basically boiled down to:did it work. no->add position relative and display:inline-block to random elements->return to step one. Also thanks for the code, but the idea was to get the tabs to change places in addition to changing the currently visible content, – user2472522 Jun 11 '13 at 21:31
  • Heh, my CSS layout foo is also kind of poor, I often use the same development technique. – Barmar Jun 11 '13 at 21:38
  • @kreshnikhasanaj Theres an issue with the styling. If you check out the live example, the menu items are each on their own line, they should be inline with each other automatically expanding to each take up the entire line equally. – user2472522 Jun 12 '13 at 14:20