Problem:
The first time you visit my projects page and filter the results everything works fine. But for some reason in Chrome whenever I filter the second time all images disappear (it sets the opacity is set to 0).
I cant seem to figure out where it’s doing this and the fact that it only happens in Chrome makes it that much more confusing.
Here is the jquery codeJquery:
if (jQuery().quicksand) {
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: false,
by: function(a) {
return a.text();
}
};
$.extend(options, customOptions);
$data = jQuery(this);
arr = $data.get();
arr.sort(function(a, b) {
var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
} else {
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
}
});
return $(arr);
};
})(jQuery);
jQuery(function() {
var read_button = function(class_names) {
var r = {
selected: false,
type: 0
};
for (var i=0; i < class_names.length; i++) {
if (class_names[i].indexOf('selected-') == 0) {
r.selected = true;
}
if (class_names[i].indexOf('segment-') == 0) {
r.segment = class_names[i].split('-')[1];
}
};
return r;
};
var determine_sort = function($buttons) {
var $selected = $buttons.parent().filter('[class*="selected"]');
return $selected.find('a').attr('data-value');
};
var determine_kind = function($buttons) {
var $selected = $buttons.parent().filter('[class*="selected"]');
return $selected.find('a').attr('data-value');
};
var $preferences = {
duration: 500,
adjustHeight: 'auto'
}
var $list = jQuery('#items');
var $data = $list.clone();
var $controls = jQuery('.selector');
$controls.each(function(i) {
var $control = jQuery(this);
var $buttons = $control.find('a');
$buttons.bind('click', function(e) {
var $button = jQuery(this);
var $button_container = $button.parent();
var button_properties = read_button($button_container.attr('class').split(' '));
var selected = button_properties.selected;
var button_segment = button_properties.segment;
if (!selected) {
$buttons.parent().removeClass();
$button_container.addClass('selected');
var sorting_type = determine_sort($controls.eq(1).find('a'));
var sorting_kind = determine_kind($controls.eq(0).find('a'));
if (sorting_kind == 'all') {
var $filtered_data = $data.find('li');
} else {
var $filtered_data = $data.find('li.' + sorting_kind);
}
var $sorted_data = $filtered_data.sorted({
by: function(v) {
return $(v).find('strong').text().toLowerCase();
}
});
$list.quicksand($sorted_data, $preferences, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });
}
e.preventDefault();
});
});
});
}
HTML
Below is the html i’m using on my page. I’ve looked at it over and over and everything seems fine.
<ul class="selector">
<li><a data-value="all" href="#">All</a></li>
<li><a data-value="web" href="#">Web</a></li>
<li><a data-value="print" href="#">Print</a></li>
<li><a data-value="uni" href="#">University Projects</a></li>
</ul>
<div class="clear"> </div>
<ul id="items" class="glow gallery">
<!-- Villas on great bay -->
<li data-id="id1" class="web">
<a class="group" href="#thevillas"><img src="images/projects/thevillas/thumb.jpg" alt="Website: The Villas on Great Bay" /></a>
<p>The Villas on Great Bay<br /><span>Beachfront Villa Web Page, 2010</span></p>
</li>
<!-- GEDsxm -->
<li data-id="id2" class="web">
<a class="group" href="#GEDsxm"><img src="images/projects/gedsxm/thumb.jpg" alt="Website: GEDsxm.com" /></a>
<p>GED SXM<br /><span>Academic Online training Site, 2009</span></p>
</li>
<!-- Weightlifting -->
<li data-id="id3" class="print uni">
<a rel="weightlifting" class="group" title="Logo Design for the new Weightlifting club at FSU" id="single_image" href="images/projects/weightlifting/1.jpg"><img src="images/projects/weightlifting/thumb.jpg" alt="Logo for FSU Weightlifting Club" /></a>
<a rel="weightlifting" style="display:none" class="group" title="Logo Design for the new Weightlifting club at FSU" id="single_image" href="images/projects/weightlifting/2.jpg"></a>
<p>FSU Weightlifting<br /><span>Logo Design, 2009</span></p>
</li>
<!-- Sintelligence Logo -->
<li data-id="id11" class="print">
<a class="group" title="Sintelligence Logo" href="images/projects/sintel/1.jpg"><img src="images/projects/sintel/thumb.jpg" alt="Sintelligence Logo" /></a>
<p>Sintelligenceo<br /><span>Logo Design, 2006</span></p>
</li>
<!-- Egyptian Night -->
<li data-id="id4" class="print uni">
<a class="group" title="Poster for TCC's International Student Services" href="images/projects/egypt/1.jpg"><img src="images/projects/egypt/thumb.jpg" alt="An Egyptian Night Poster" /></a>
<p>TCC's Intl. Student Services<br /><span>An Egyptian Night Poster, 2009</span></p>
</li>
<!-- ISS Magazine Ad -->
<li data-id="id5" class="print uni">
<a class="group" title="ISS Magazine Add" href="images/projects/isoad/1.jpg"><img src="images/projects/isoad/thumb.jpg" alt="ISS Magazine Ad" /></a>
<p>TCC's Intl. Student Services<br /><span>Featured Magazine Ad, 2009</span></p>
</li>
<!-- Alacarte ad 1 -->
<li data-id="id6" class="print">
<a class="group" title="Kitchens Alacarte Newspaper Add" href="images/projects/alacarte/ad1/1.jpg"><img src="images/projects/alacarte/ad1/thumb.jpg" alt="Alacarte Newspaper Ad" /></a>
<p>Kitchens Alacarte<br /><span>Newspaper Ad, 2010</span></p>
</li>
<!-- Alacarte ad 2 -->
<li data-id="id7" class="print">
<a class="group" title="Kitchens Alacarte Newspaper Add v2" href="images/projects/alacarte/ad2/1.jpg"><img src="images/projects/alacarte/ad2/thumb.jpg" alt="Alacarte Newspaper Ad" /></a>
<p>Kitchens Alacarte<br /><span>Newspaper Ad, 2010</span></p>
</li>
<!-- FPSI -->
<li data-id="id8" class="print uni">
<a class="group" title="Florida Public Safety Institute Logo Drafts" href="images/projects/fpsi/1.jpg"><img src="images/projects/fpsi/thumb.jpg" alt="FPSI Logo Drafts" /></a>
<p>Florida Public Safety Institute<br /><span>Logo Drafts, 2009</span></p>
</li>
<!-- Helicopter -->
<li data-id="id9" class="print">
<a rel="heli" class="group" title="Leeward Islands Helicopters Post Card Front" id="single_image" href="images/projects/helicopter/1.jpg"><img src="images/projects/helicopter/thumb.jpg" alt="Leeward Islands Helicopters Post Card Front" /></a>
<a rel="heli" style="display:none" class="group" title="Leeward Island Helicopters Post Card Back" id="single_image" href="images/projects/helicopter/2.jpg"></a>
<p>Leeward Islands Helicopters<br /><span>Post Cards, 2009</span></p>
</li>
<!-- ISS Logo -->
<li data-id="id10" class="print uni">
<a class="group" title="International Student Services Logo" href="images/projects/iss/1.jpg"><img src="images/projects/iss/thumb.jpg" alt="ISS Logo" /></a>
<p>International Student Services Logo<br /><span>Logo Design, 2010</span></p>
</li>
<!-- VDL Poster -->
<li data-id="id12" class="print">
<a class="group" title="Superbowl Party Poster" href="images/projects/vdl/1.jpg"><img src="images/projects/vdl/thumb.jpg" alt="Superbowl Party Poster" /></a>
<p>Superbowl Party Poster<br /><span>Logo Design, 2009</span></p>
</li>
</li>
</ul>
Updated:
I thought it might help adding that if i’ve never visited the site before it works fine the first time in chrome. But after refresh images disappear again.
Figured it out! Turns out it had nothing to do with quicksand but rather a bit a jquery code i was running to fade in images when the page was loaded. 🙂