Let's say we have a setup like this:
.col:nth-child(2n+1) {
background: red;
}
/* Style the div's for testing */
div.row {
width: 100%;
border: 1px solid blue;
}
div.col {
padding: 12px 0;
width: 100%;
}
<div class="row"><!-- The .col's in this row are dynamically generated -->
<div class="col 1"></div>
<div class="col 2"></div>
<div class="col 3"></div>
<div class="col 4"></div>
<div class="col 5"></div>
</div>
<div class="row">
<div class="col 1"></div>
<div class="col 2"></div>
<div class="col 3"></div>
<div class="col 4"></div>
</div>
Here's a working Fiddle: https://jsfiddle.net/1L4rodh4/
Now... the Nth selector is working as it should. The problem is that I want to get the elements styled consistently. so that it appears to be seamless between the 2 .row's. The .col's in the first .row are dynamically generated and could end up being even or odd.
Please ask me for clarification if I wasn't clear. I couldn't find any information about this elsewhere. This is something that seems so simple, yet it seems to be impossible.
Is there a better way of doing this, or am I stuck?
I understand I could use JS to get the number of "col"'s in the first "row" and change the selector in the second row. That just seems way too hack-ish for this though.
EDIT: I will accept a JS solution.
The following is a working example of how this can be done with a simple plain JS script, based on the code in the selected answer below.
var cols = document.querySelectorAll('.table.js-fix .tr');
for (var i = 0; i < cols.length; i++) {
cols[i].classList.add(i % 2 == 0 ? 'even' : 'odd');
}
.table.js-fix .tr:nth-child(2n + 1), /* :nth-child fallback */
.table.js-fix .tr.even {
background: red;
}
.table.js-fix .tr.odd {
background: #fff;
}
/* Style for testing */
.table {
width: 100%;
border: 1px solid blue;
}
.tr {
padding: 12px 0;
width: 100%;
}
<div class="row"><!-- The .tr in this row is just used as a thead -->
<div class="col">
<div class="table">
<div class="tr">Section Title</div>
</div>
</div>
</div>
<div class="row"><!-- The .tr's in this row are dynamically generated -->
<div class="col">
<div class="table js-fix">
<div class="tr"></div>
<div class="tr"></div>
<div class="tr"></div>
</div>
</div>
</div>
<div class="row"><!-- There will always be 5 .tr's in this row -->
<div class="col">
<div class="table js-fix">
<div class="tr"></div>
<div class="tr"></div>
<div class="tr"></div>
<div class="tr"></div>
<div class="tr"></div>
</div>
</div>
</div>
JSFiddle with the above example: https://jsfiddle.net/n12h70j6/
You can do that with CSS.
See this or this.
.col:first-child:nth-last-child(even) ~ .col:nth-child(2n + 1),
.col:first-child:nth-last-child(even){
background-color: red;
}
.col:first-child:nth-last-child(odd) ~ .col:nth-child(2n + 2){
background-color: red;
}
This checks if the number of children are even or odd and styles them appropriately.
Update: Inspite of what it might look like. This will not work for cases when a parent with odd number of children directly follows another parent with odd number of children (which was the whole point). However I am leaving this here for someone else to get ideas running in their heads.
Since it is still an answer, CSS alone cannot do this, so one must resort to javascript / jQuery.
This could be one way to do this with plain JS
var cols = document.querySelectorAll('.col');
for(var i = 0; i < cols.length; i++)
cols[i].classList.add(i % 2 == 0 ? 'some-class' : 'alternate-class');
No, there is no CSS-only way of doing this.
The reason is that CSS rules can only be qualified based on directly preceding children, or ancestors. In you case, you want to qualify the second group based on what is inside the previous sibling (the first <div> group).
The only way to handle this is by means of something like adding a class to the first <div> that indicates whether it has an even or odd number of children.
Related
How can i select the third div from bottom (i.e in this case, the div with "4")
<div class='elem'>1</div>
<div class='elem'>2</div>
<div class='elem'>3</div>
<div class='elem'>4</div>
<div class='elem'>5</div>
<div class='elem'>6</div>
I tried this but it selected last three divs.
$('div:gt(-3)').css('background':'red');
Kindly know that, i may not know the total divs(it's dynamic), but i only need to select the third div from bottom.
You can use the eq() method by specifying a value of -3, which will hover over the third element from the bottom.
$('div:eq(-3)').css('background', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='elem'>1</div>
<div class='elem'>2</div>
<div class='elem'>3</div>
<div class='elem'>4</div>
<div class='elem'>5</div>
<div class='elem'>6</div>
If all you're trying to do is apply styling to that element:
/* a simple reset so all elements have similar
and consistent defaults: */
*,
::before,
::after {
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5;
margin: 0;
padding: 0;
}
/* purely for aesthetics in order to visually
separate each of the 'demo' blocks; using
CSS logical properties to define margins: */
.demo {
border: 1px solid #000;
margin-block: 1em;
margin-inline: 0.5em;
}
/* to visually distinguish the selected elements: */
.elem:nth-last-child(3) {
background-color: #f00;
color: #fff;
}
<div class="demo">
<div class="elem">1</div>
<div class="elem">2</div>
<div class="elem">3</div>
<div class="elem">4</div>
<div class="elem">5</div>
<div class="elem">6</div>
<div class="elem">7</div>
<div class="elem">8</div>
<div class="elem">9</div>
<div class="elem">10</div>
</div>
<div class="demo">
<div class="elem">1</div>
<div class="elem">2</div>
<div class="elem">3</div>
</div>
<div class="demo">
<div class="elem">1</div>
</div>
If you instead need to use JavaScript, then I'd suggest the following:
// defining an Arrow function, passing two arguments:
// selector: a String, CSS selector with which to select the elements,
// index: a Number, the 1-based index of the element starting from
// the end. The last element would be index 1, the
// penultimate element index 2:
const nthLastChild = (selector, index) => {
// here we return an Array literal, which takes the spread operator and
// converts the iterable NodeList returned from document.querySelectorAll()
// and converts it into an Array:
return [...document.querySelectorAll(
// the template-literal we use to construct the CSS selector, we use a
// template-literal in order to interpolate the JavaScript variables
// into the String:
`${selector}:nth-last-child( ${Math.abs(index)} )`
)];
}
// because we return an Array, we can here use Array.prototype.forEach()
// - along with other Array methods - to perform operations on the returned
// elements:
nthLastChild('.elem', '-3').forEach(
(el) => {
el.style.color = '#fff';
el.style.fontWeight = 'bold';
el.style.background = 'linear-gradient(90deg, #f90, #fff)';
});
*,
::before,
::after {
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5;
margin: 0;
padding: 0;
}
.demo {
border: 1px solid #000;
margin-block: 1em;
margin-inline: 0.5em;
}
<div class="demo">
<div class="elem">1</div>
<div class="elem">2</div>
<div class="elem">3</div>
<div class="elem">4</div>
<div class="elem">5</div>
<div class="elem">6</div>
<div class="elem">7</div>
<div class="elem">8</div>
<div class="elem">9</div>
<div class="elem">10</div>
</div>
<div class="demo">
<div class="elem">1</div>
<div class="elem">2</div>
<div class="elem">3</div>
<div class="elem">4</div>
</div>
<div class="demo">
<div class="elem">1</div>
<div class="elem">2</div>
<div class="elem">3</div>
</div>
<div class="demo">
<div class="elem">1</div>
</div>
References:
CSS:
:nth-last-child().
JavaScript:
Arrow functions.
Array.prototype.forEach().
document.querySelectorAll().
Spread (...) syntax.
Template literals.
const elements = document.querySelectorAll(".elem");
const lastThird = elements[elements.length - 3];
You can simply use $('body div')[$('body div').length-3]; as a selector. This selects all the <div>s and then selects the third from the bottom.
const allElem = [...document.querySelectorAll(".elem")];
allElem[allElem.length - 3].style.background = "red";
<div class="elem">1</div>
<div class="elem">2</div>
<div class="elem">3</div>
<div class="elem">4</div>
<div class="elem">5</div>
<div class="elem">6</div>
<div class="elem">7</div>
<div class="elem">8</div>
<div class="elem">9</div>
<div class="elem">10</div>
The best way to your problem will be to use nth-last-child() CSS property. add the following code in your CSS file.
.elem:nth-last-child(3){
background: red;
}
Is there anyway to find the elements that are overflowing outside of the div?
So you can edit them somehow, using JQuery for example?
I am trying to make it with an HTML table at the moment.
Check the javascript code to verify element is overflowing. This operation on large elements may be expensive.
const p = document.querySelector('.parent');
console.log('Overflow ' + (p.offsetHeight < p.scrollHeight));
.parent{
height: 50px;
border: 1px solid;
}
.child {
height: 20
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
i want to hover over one div and use jquery to find the nearest div by the name and to show that div.
<div class="entry">
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="somethingelse"></div>
<div class="footer"></div>
</div>
all the .footer classes will be hidden but i want to make it so that when i over over the .body class, only the nearest .footer class shows. [ meaning : if i hover over the first .body class, only the first .footer will be shown. ]
my current code isn't working and i'm starting to wonder if it's something wrong with it.
current jquery code :
$('.footer').hide();
$('.body').hover(function(){
$(this).closest('.footer').find('.footer').show();
});
While the problem is the same as this question, the reason is slightly different.
When you use .closest(".class") it's the equivalent of .parents().filter(".class").first() (or .last(), I don't recall exactly which way parents() works as that's what closest is for).
ie it goes up the tree
So $(".body").closest(".entry") would give you an element for your HTML.
In this case, you want siblings, but more specifically the next one. There's a jquery method .next() which looks like it's correct, but as detailed in the link above, this only gives the very next one (in your HTML this would be the date div) even if a filter is applied - so $(this).next(".footer") would give an empty set (as it's not .date).
The work around is:
$(this).nextAll(".footer").first()
Once you get this working, your will find that your hover does not work as expected as the footers are not hiding again - as you're using .hover rather than mouseenter mouseout, you just need to move the .hide() call inside the second event handler, giving:
// startup
$(".footer").hide();
// event
$(".body").hover(function() {
$(this).nextAll(".footer").first().show();
}, function() {
$(".footer").hide();
});
div > div { width: 100px; height: 10px }
.body { border: 1px solid red; }
.date { border: 1px solid blue; }
.footer { border: 1px solid green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="somethingelse"></div>
<div class="footer"></div>
</div>
$(this).closest('.footer')
You should start to use console.log() sometimes to check elements you would like to get. This does not find anything so nothing further to search and to show.
If you possibly can separate bodies and footers into containers you can do smth like
this.
Try to make use of nextUntil(".footer").next(); as below
$('.body').hover(function() {
$(this).nextUntil(".footer").next().show();
}, function() {
$(".footer").hide();
});
body {
font: 13px Verdana;
}
.footer {
display: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="somethingelse">somethingelse</div>
<div class="footer">footer</div>
</div>
IF your html is gonna keep those triads layout, you don't need jQuery for it.
Just use CSS to select the second div after the .body on hover
div{width:100px; height:100px; background-color:lime; margin:10px; float:left}
.body{background:yellow; clear:left;}
.footer{display:none;}
.body:hover + div + div{
display:block;
background:red;
}
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="somethingelse"></div>
<div class="footer"></div>
The answer by freedomn-m offered a good explanation and good solution in case you want the nearest NEXT .footer, which seems to be the case from your example HTML.
However, if you want your request strictly, so you want exact NEAREST .footer, then his solution will not work for you. And I don't think there is a jQuery built-in functionality that can give you that, so you'll have to do it manually. Get the list of the children of the parent (don't use the siblings as they don't include the current element) and go through the list to calculate the distance from your current element using the indexes and then select the .footer that is really the nearest.
$('.body').hover(function() {
var children = $(this).parent().children();
var index = children.index(this);
var closest = children.length;
var footer = -1;
children.each(function(i, child) {
if (i !== index && $(child).hasClass("footer")) {
var distance = Math.abs(index - i);
if (distance < closest) {
closest = distance;
footer = i;
}
}
});
if (footer > -1)
children.eq(footer).show();
}, function() {
$(".footer").hide();
});
body {
font: 13px Verdana;
}
.footer {
display: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="somethingelse">somethingelse</div>
<div class="footer">footer</div>
</div>
If you don't care much about the performance, you can shorten the code a bit by selecting the list of .footer instead of the children of the parent, and then let jQuery give you the index of each of them. Not very efficient, but shorter code:
$('.body').hover(function() {
var index = $(this).index();
var closest = 9999;
var footer;
$(this).siblings(".footer").each(function(i, sibling) {
var distance = Math.abs(index - $(sibling).index());
if (distance < closest) {
closest = distance;
footer = sibling;
}
});
if (footer !== undefined)
$(footer).show();
}, function() {
$(".footer").hide();
});
body {
font: 13px Verdana;
}
.footer {
display: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="somethingelse">somethingelse</div>
<div class="footer">footer</div>
</div>
Inspired by freedomn-m's comment, we can also use the .prevAll() and .nextAll() methods to get the previous and next .footer siblings. These two methords return the siblings ordered by the closest, so we simply pick the first one of each list, subtract their indexes from our element's index (to find the distance), compare them together, and return the closest. This solution is also less efficient than the first one, but you may find the code easier to read:
$('.body').hover(function() {
var me = $(this);
var prev = me.prevAll(".footer").first();
var next = me.nextAll(".footer").first();
if (prev.length == 0)
next.show();
else if (next.length == 0)
prev.show();
else {
index = me.index();
if (Math.abs(prev.index() - index) < Math.abs(next.index() - index))
prev.show();
else
next.show();
}
}, function() {
$(".footer").hide();
});
body {
font: 13px Verdana;
}
.footer {
display: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="somethingelse">somethingelse</div>
<div class="footer">footer</div>
</div>
<div class="wrap">
</div>
my css
.wrap{
overflow-x:hidden;
}
should I do like this in js?
document.getElementById("whatever").className = "";
where to get the id in this case? since I use .wrap not #wrap.
I think you're looking for the DOM function getElementByClassName().
For example, if you run var x = document.getElementByClassName('wrap') in your case, x will be a list of all dom elements which have the class 'wrap' .
source: w3schools
Your question is a bit confusing, but to give you an easy example, have a look at this:
var divs = document.getElementsByClassName('wrap');
for (var i=0; i<divs.length; i++) {
divs[i].addEventListener('click', removemyclass);
}
function removemyclass () {
this.className = '';
}
.wrap {
height:50px;
width: 100%;
border: 2px solid #aaa;
}
<div class="wrap">
</div>
<div class="wrap">
</div>
<div class="wrap">
</div>
<div class="wrap">
</div>
<div class="wrap">
</div>
<div class="wrap">
</div>
<div class="wrap">
</div>
This will find the one ( this ) element you are clicking on and remove its class Name, so that it doesn't have a border anymore, but you can still find it in your console as an element in the DOM
Hitting a wall with this one, hope someone can lend a hand. I have a wrapper div containing many fixed-width "content" divs. It's like a table, except that the number of items "per row" aren't fixed, so that whenever the screen size is wide, more items fit onto the screen. Pretty basic.
Also, each of these "content" divs has an adjacent "details" div that is hidden by default ("style=display:none"), and an adjacent "separator" div that is empty, containing only the style "clear:both;".
Each content/details/separator div has a unique number in its ID, so that I can tell they are related (e.g., content123, details1234, separator1234)
Now, when one of these content divs is clicked, I want to reveal its "details" div below it. That part, I've got working partially, by wrapping an anchor tag around the content div, which fires an onClick javascript event, which in turns runs a jQuery statement to make visible the details and separator divs jQuery(".details1234").css("display","block");"
But you can imagine my problem. Once that "separator" div is reveled, it pushes down (clears) any "content" divs that appears to the right of it, ugly. My thought, what I have been wrestling with for hours, is to reveal the "separator" div of the content div, that is the last one appearing in the "row" that was clicked. That way, a new "row" will be opened up by the separator, so that when the "content" div is revealed it appears below the clicked item in the new row. To do that, I need to figure out the elementID of the last content div in the "row", and I was thinking about using the Y-coord of the mouse click event, plus the X-coord = to the right-most edge of the wrapper div minus half the width of the fixed-width content div. Something like that. But I am smashed into a wall and can't figure it out.
Can anyone help me do that? Or offer a different solution?
If sample code would help let me know, I could whip up an example, but it may take some screen space in this post.
Thanks everyone.. going nuts with this.
EDIT: the sample code below is based on my site. When a cell is clicked, you can see its "details" div appear below it, but unfortunately the other divs in the "row" get pushed down. that is the effect I'm trying to avoid. When a cell is clicked, I want the "details" to appear below it, but also the other divs to stay in their positions above the other cell's details, basically I want to keep the "row" intact. In the code, you can see my fruitless experiments using a "separator" div, because my assumption is that if I can insert that after the last div in the row, then the "details" div will become the next row, followed then by the next row of cells. Hope I explained it OK. Thanksgiving feast causing blood to divert from brain ;)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentcell{
border: 2px solid blue;
padding: 4px;
float: left;
width: 200px;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
width:450px;
display:none;
float:left;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
//now highlight the clicked div and reveal its content div
var contentHI = "#content"+contentid;
var detailsON = "#details"+contentid;
var separatorON = "#separator"+contentid;
$(contentHI).css("border","2px solid green");
//$(separatorON).css("display","block");
$(detailsON).css("display","block");
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01">
<div id="content01" class="contentcell">cell01</div>
<div id="details01" class="details">here are details about cell01</div>
<div id="separator01" class="separator"> </div>
</div>
<div id="contentwrapper02">
<div id="content02" class="contentcell">cell02</div>
<div id="details02" class="details">here are details about cell02</div>
<div id="separator02" class="separator"></div>
</div>
<div id="contentwrapper03">
<div id="content03" class="contentcell">cell03</div>
<div id="details03" class="details">here are details about cell03</div>
<div id="separator03" class="separator"></div>
</div>
<div id="contentwrapper04">
<div id="content04" class="contentcell">cell04</div>
<div id="details04" class="details">here are details about cell04</div>
<div id="separator04" class="separator"></div>
</div>
<div id="contentwrapper05">
<div id="content05" class="contentcell">cell05</div>
<div id="details05" class="details">here are details about cell05</div>
<div id="separator05" class="separator"></div>
</div>
<div id="contentwrapper06">
<div id="content06" class="contentcell">cell06</div>
<div id="details06" class="details">here are details about cell06</div>
<div id="separator06" class="separator"></div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>
User ,
if you give as regular position be default , it pushes the other contents definetly down as they come in squence.
Change the hidden divs position to absolute so that it will go out of sequence and you can position at anywhere on the page by top and left property.
get the offset of the div you want next to...
http://api.jquery.com/offset/
it will have top and left property , use those property's and position next to them.
let me know if you need anything else.
give a bigger z-index for the hidden divs.
What about showing the details div with position: absolute, on top of everything else? (See here, the code's a little messy but you get the idea).
I partially figured it out, but the logic may be very clunky. I basically walk left by 100px from the width of the container div until I find a content div. Plus it doesn't work in IE8, because IE is not getting the same results from jQuery's offset() or position() as firefox, it always reports "19". So in IE, I can never get a Y-coordinate value. I'm too sleepy now to work on this anymore today. If someone can lend a hand or tell me how to improve the javascript that would be cool.
Here is the working code for Firefox (I changed javascript and css of the detail divs, compared to original question):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentcell{
border: 2px solid blue;
padding: 4px;
float: left;
width: 200px;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
display:none;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
//now highlight the clicked div and reveal its content div
//first, figure out which separator to display.
//1.get the y-pos from the clicked element, this gives y-coord of the row
contentClicked = "#content"+contentid;
var clickedoffset = $(contentClicked).offset();
var ypos = clickedoffset.top;
var wrapperwidth = $("#overallwrapper").width();
for (var xpos=wrapperwidth; xpos>0; xpos-=100){
var elematpos = document.elementFromPoint(xpos, ypos);
var elematposid = elematpos.id;
if (elematposid.substring(0,7) == "content") {
var lastcontentdivID = elematposid.substring(7);
break;
}
}
$(contentClicked).css("border","2px solid green");
var detailsON = "#details"+contentid;
$(detailsON).css("display","block");
var lastidonscreen = "#content"+lastcontentdivID;
$(detailsON).insertAfter(lastidonscreen);
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01">
<div id="content01" class="contentcell">cell01</div>
<div id="separator01" class="separator"> </div>
<div id="details01" class="details">here are details about cell01</div>
</div>
<div id="contentwrapper02">
<div id="content02" class="contentcell">cell02</div>
<div id="separator02" class="separator"></div>
<div id="details02" class="details">here are details about cell02</div>
</div>
<div id="contentwrapper03">
<div id="content03" class="contentcell">cell03</div>
<div id="separator03" class="separator"></div>
<div id="details03" class="details">here are details about cell03</div>
</div>
<div id="contentwrapper04">
<div id="content04" class="contentcell">cell04</div>
<div id="separator04" class="separator"></div>
<div id="details04" class="details">here are details about cell04</div>
</div>
<div id="contentwrapper05">
<div id="content05" class="contentcell">cell05</div>
<div id="separator05" class="separator"></div>
<div id="details05" class="details">here are details about cell05</div>
</div>
<div id="contentwrapper06">
<div id="content06" class="contentcell">cell06</div>
<div id="separator06" class="separator"></div>
<div id="details06" class="details">here are details about cell06</div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>
EDIT:
Blasted IE. I just can't trust it to determine screen coordinates. I got it working though, but only for Firefox. again IE is trying to drive me insane by not handling insertAfter properly. arrgh! here is the final code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentwrapper{
}
.contentcell{
padding: 4px;
float: left;
width: 200px;
height: 100px;
border: 2px solid blue;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
display:none;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
var contentClicked = "#content"+contentid;
var thisypos = $(contentClicked).offset().top;
var nextdivid = contentClicked;
var countid = contentid;
do
{
var prevdivid = nextdivid;
var nextcontentid = (countid * 1) + 1;
var nextcontentid = '' + nextcontentid;
if ( nextcontentid.length < 2)
{ nextcontentid = "0" + nextcontentid; }
nextdivid = "#content" + nextcontentid;
if ( $(nextdivid).length ) {
var nextypos = $(nextdivid).offset().top;
countid++;
} else {
break;
}
}
while (thisypos == nextypos);
$(contentClicked).css("border","2px solid green");
var detailsON = "#details"+contentid;
$(detailsON).css("display","block");
$(detailsON).insertAfter(prevdivid);
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01" class="contentwrapper">
<div id="content01" class="contentcell">cell01</div>
<div id="separator01" class="separator"> </div>
<div id="details01" class="details">here are details about cell01</div>
</div>
<div id="contentwrapper02" class="contentwrapper">
<div id="content02" class="contentcell">cell02</div>
<div id="separator02" class="separator"></div>
<div id="details02" class="details">here are details about cell02</div>
</div>
<div id="contentwrapper03" class="contentwrapper">
<div id="content03" class="contentcell">cell03</div>
<div id="separator03" class="separator"></div>
<div id="details03" class="details">here are details about cell03</div>
</div>
<div id="contentwrapper04" class="contentwrapper">
<div id="content04" class="contentcell">cell04</div>
<div id="separator04" class="separator"></div>
<div id="details04" class="details">here are details about cell04</div>
</div>
<div id="contentwrapper05" class="contentwrapper">
<div id="content05" class="contentcell">cell05</div>
<div id="separator05" class="separator"></div>
<div id="details05" class="details">here are details about cell05</div>
</div>
<div id="contentwrapper06" class="contentwrapper">
<div id="content06" class="contentcell">cell06</div>
<div id="separator06" class="separator"></div>
<div id="details06" class="details">here are details about cell06</div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>