JQuery Visibility Div CSS quirk

[thunderousity]

I have a JQuery Script (vers 1.10.2) which shows or hides chunks of rows from a php based list.

 

This works by showing or hiding a specific number of css related div elements by clicking the 'Show More' or 'Show Less' text at the bottom of the visible list.

 

It works fine apart from when the Group Heading for a new group in the list appears and puts the incrementing div elements out of sync.

 

Group Heading:

echo "<div><h3 class='listrow'>Between ".$min." and ".$max." seconds.</h3></div>"

 

Hmm - Just remove the div element in the group heading I hear you say.

 

When I remove the div element from the sub heading part of the echo, all the sub headings appear at once but the rows work as they should do. i.e. show or hide upon a click.

 

How can I fix this?

 

Code below

 

CSS:

<style>.myDiv div{ display:none;}#MoreRows {color:green; cursor:pointer;}#MoreRows:hover {color:black;}#LessRows {color:red; cursor:pointer;}#LessRows:hover {color:black;}</style>

 

JavaScript:

 

$(document).ready(function () { $('.myDiv div:lt(41)').show(); $('#LessRows').hide(); var items = 50000; var minimum = 40; var shown = 40; $('#MoreRows').click(function () { $('#LessRows').show(); shown = $('.myDiv div:visible').size()+40; if(shown< items) {$('.myDiv div:lt('+shown+')').show();} else {$('.myDiv div:lt('+items+')').show(); $('#MoreRows').hide(); } }); $('#LessRows').click(function () { shown = $('.myDiv div:visible').size(); if(shown> 40) { calco = $('.myDiv div:visible').size()-40; $('.myDiv div').not(':lt('+calco+')').hide(); $('#MoreRows').show();} else {$('#LessRows').hide(); $('#MoreRows').show(); } });});

 

PHP

 

<div class="content"><div class="listrow"><div class="myDiv"><?php$min = 0;$increment = 1;$max = $min - $increment;$rowclass = 0;while ($row_rs3 = mysql_fetch_assoc($rs3)){ if ($row_rs3['Seconds'] > $max) { while ($max < $row_rs3['Seconds']) $max += $increment; $min = $max - $increment; echo "<div><h3 class='listrow'>Between ".$min." and ".$max." seconds.</h3></div>"; } echo "<div class= row" . $rowclass . "><div class='alignleft'><a title=" . $row_rs3['Seconds'] . " specifications href=specifications.php?SpeedID=" . $row_rs3['ItemID'] . ">" .$row_rs3['Item'] . "</a></div><div class='alignright'> Speed - <b>" . $row_rs3['Seconds'] . "</b> seconds</div><div style='clear: both;'></div></div>"; $rowclass = 1 - $rowclass;}?></div><div id="MoreRows">More Rows</div><div id="LessRows">Less Rows</div> </div> </div>

[justsomeguy]

Do you have an example online that shows the problems?

[thunderousity]

http://www.autosnout.com/Cars-0-60mph-Listnew.php

 

Try this. Works fine until you select 'More Rows' a few times and an additional subheading (Between 3 and 4 Seconds) appears. This knocks the increments out of synch as the sub heading adds another div.

 

Removing the div for the sub-heading behaves like this;

 

http://www.autosnout.com/Cars-0-60mph-Listnew2.php

[justsomeguy]

I haven't figured out why yet, but the reason why the more and less links show in the same row as the last entry is because of a CSS problem on that last entry, not a problem with the more/less row. If I use Firebug to look at the various divs, the last visible div inside the myDiv container does not have a height, which pushes the other 2 divs higher up. That last div needs to have the same height as the others, so I'll look into why that happens.

[justsomeguy]

Try adding this after the myDiv div, before the more and less divs:

 

<br style="clear: both;" />

 

If it doesn't work when you put it after the myDiv div, then add it as the last element inside myDiv.

[dsonesuk]

after previous click of more, it end with <div style="clear: both; display: block;"></div> to prevent the more/less links merging with previous floated left/right div containers, but the third click shows <div style="clear: both"></div> and because it comes under

 

.myDiv div {

display: none;

}

 

its not active to prevent the merging, i don't if it is because of the new header div being added that is causing a miscalculation in adding display: block; to clear: both; div container to prevent this.

[thunderousity]

Try adding this after the myDiv div, before the more and less divs:

 

<br style="clear: both;" />

 

If it doesn't work when you put it after the myDiv div, then add it as the last element inside myDiv.

I tried adding the code you suggested in various places but nothing seemed to work.

 

Could I not use jquery to check for an odd number using some sort of if statement.

 

The script would need to check whether the number of divs that are to be shown is odd. If it is odd then subtract 1.

 

I think this would fix it but I'm unsure how to check for odd numbers and at what point. i.e. On Click

[justsomeguy]

Subtract 1 from what? I don't see specific jQuery code that is causing the last visible div to not have a height. Maybe you can add code to ensure that the height gets set for every visible div.

[dsonesuk]

Add

.alignright + div {    display: block !important;}

to css

since the outer parent (row0 ,row1) is hidden with display: none, you don't need to hide its children (alignleft, alignright, last clear: both and there last div sibling element which the above css is targeting) as well.

Edited October 23, 2013 by dsonesuk

[thunderousity]

Subtract 1 from what? I don't see specific jQuery code that is causing the last visible div to not have a height. Maybe you can add code to ensure that the height gets set for every visible div.

 

Maybe if I'd have read your signature I would have known it was a CSS issue and not a JS issue. I've just been using Bluefish to edit my website and just using the Source in Chrome to debug. Working blind it seems.

 

Saw a mention of Firebug in this thread when looking back through the posts and also the mention of debuggers in your signature and had a look at the built in Chrome debugger.

 

Cheers justsomeguy - this should help loads.