The nth-child css property counts html elements with display property set to none. How can I change it?
I have a simple gallery using an unordered list.
<h1>Projects</h1>
<hr>
<!-- Projects gallery as unordered list -->
<ul class="gallery">
<li class="item residential">
<img src="Projects/01-HighTorEast-EarlShilton/01-thumbnail.jpg" width="212" height="119" alt="High Tor East, Earl Shilton">
<h2><a class="info" href="Projects/01-HighTorEast-EarlShilton/info.php">High Tor East, Earl Shilton</a></h2>
<h3><a class="cat" href="residential">Residential</a></h3>
</li>
<li class="item modernisation">
<img src="Projects/02-Hollycroft-Hinckley/02-thumbnail.jpg" width="212" height="119" alt="Hollycroft, Hinckley">
<h2><a class="info" href="Projects/02-Hollycroft-Hinckley/info.php">Hollycroft, Hinckley</a></h2>
<h3><a class="cat" href="modernisation">Modernisation & Domestic Extensions</a></h3>
</li>
<li class="item residential">
<img src="Projects/03-SpaLane-Hinckley/03-thumbnail.jpg" width="212" height="119" alt="Spa Lane, Hinckley">
<h2><a class="info" href="Projects/03-SpaLane-Hinckley/info.php">Spa Lane, Hinckley</a></h2>
<h3><a class="cat" href="residential">Residential</a></h3>
</li>
<li class="item residential">
<img src="Projects/04-Farnhambridge-Rothley/04-thumbnail.jpg" width="212" height="119" alt="Farnhambridge Farm, Rothley">
<h2><a class="info" href="Projects/04-Farnhambridge-Rothley/info.php">Farnhambridge Farm, Rothley</a></h2>
<h3><a class="cat" href="residential">Residential</a></h3>
</li>
<li class="item modernisation">
<img src="Projects/05-NetherfieldClose-BroughtanAstley/05-thumbnail.jpg" width="212" height="119" alt="Netherfield Close, Broughtan Astley">
<h2><a class="info" href="Projects/05-NetherfieldClose-BroughtanAstley/info.php">Netherfield Close, Broughtan Astley</a></h2>
<h3><a class="cat" href="modernisation">Modernisation & Domestic Extensions</a></h3>
</li>
<li class="item modernisation">
<img src="Projects/06-Bridlepath-Elmesthorpe/06-thumbnail.jpg" width="212" height="119" alt="Bridlepath, Elmesthorpe">
<h2><a class="info" href="Projects/06-Bridlepath-Elmesthorpe/info.php">Bridlepath, Elmesthorpe</a></h2>
<h3><a class="cat" href="modernisation">Modernisation & Domestic Extensions</a></h3>
</li>
<li class="item residential">
<img src="Projects/07-Bridlepath-Elmesthorpe/07-thumbnail.jpg" width="212" height="119" alt="Bridlepath, Elmesthorpe">
<h2><a class="info" href="Projects/07-Bridlepath-Elmesthorpe/info.php">Bridlepath, Elmesthorpe</a></h2>
<h3><a class="cat" href="residential">Residential</a></h3>
</li>
<li class="item feasibility">
<img src="Projects/08-GrangeCroft-Ullesthorpe/08-thumbnail.jpg" width="212" height="119" alt="Grange Croft, Ullesthorpe">
<h2><a class="info" href="Projects/08-GrangeCroft-Ullesthorpe/info.php">Grange Croft, Ullesthorpe</a></h2>
<h3><a class="cat" href="feasibility">Feasibility layouts</a></h3>
</li>
<li class="item master">
<img src="Projects/09-RailwayInn-Sileby/09-thumbnail.jpg" width="212" height="119" alt="The Railway Inn, Sileby">
<h2><a class="info" href="Projects/09-RailwayInn-Sileby/info.php">The Railway Inn, Sileby</a></h2>
<h3><a class="cat" href="master">Master planning</a></h3>
</li>
</ul>
</section>
than in my css, I set the right margin value to zero for every four .item child classes. I did this to keep four elements on one line in my page and without removing the margin I could only match three.
ul.gallery { clear:both; list-style:none; margin:0; padding:0; width:940px; }
.gallery a:hover { text-decoration:underline; }
li.item { display:inline; margin:30px 20px 30px 0px; padding:0px; height:178px; width:220px; float:left; background:#ededed url('../Images/featuredline.png') repeat-x 0% 100%; overflow:hidden; }
li.item:nth-child(4n+4) { margin:30px 0px 30px 0px; }
Then I wrote a little jQuery code to sort the items by category. Therefore, if someone clicks on the "live" link, it will hide items with different categories.
$('.cat').bind('click', function(e) {
var cat = $(this).attr('href');
$('.item').each(function () {
var itemClass = $(this).attr('class');
if (itemClass != 'item '+cat) {
$(this).css({"display":"none"});
};
});
e.preventDefault();
My problem: When I sort gallery items using the above jQuery script, it seems that the .item: nth-child property still counts items that have their display property set to none. I have no idea how to bite him. I need the css.item: nth-child property to only read the visible items after running the jQuery plugin.
the site is available here http://www.damianwojtczak.com/avd2/projects.php
source to share
One solution is to change the nth-child
css selector to the class and use jQuery to switch the class.
li.item.marginClass { margin:30px 0px 30px 0px; }
JS:
$(function(){
var $items=$('li.item');
function toggleMargin(}{
$items.removeClass('marginClass').filter(':visible').addClass(function(index){
return index % 4 ===0 && index !=0 ? 'marginClass' : '';
});
}
/* call for page loaded items*/
toggleMargin(};
$('.cat').bind('click', function (e) {
/* filtering code here*/
/* adjust class*/
toggleMargin(};
})
});
source to share
When you hide your node, set the attribute flag "isHidden" $(this).attr('isHidden')
, when you show your node, remove this flag .removeAttr('isHidden')
, then you can update the selector
li.item:not([isHidden]):nth-child(4n+4) { margin:30px 0px 30px 0px; }
If you don't want to use an additional attribute, you can add it as a class name, as in Tomalak's answer .
source to share
CSS
instead
li.item:nth-child(4n+4) { margin:30px 0px 30px 0px; }
using
li.item.split { margin:30px 0px 30px 0px; }
JQuery
reorderColumns = function(ev) {
$('li.item').removeClass('split');
$('li.item:visible:nth-child(4n+4)').addClass('split');
ev.preventDefault();
};
$('.cat').on('click',reorderColumns);
source to share