Develop Reference

How would I make my Bootstrap navbar "collapse"?

I am trying to replicate the scrolling effect from here: http://www.altisliferpg.com/
I have a feeling that they are using a heavily modified version of Bootstrap Navbar, which I have taken from here: http://www.enjin.com/forums/page/1/m/10826/viewthread/8514993-boot-strap-30-navbar-full-module and have changed it to fit into my specific case.
How would I make it so when you scroll down the page, the bar on the top gets "smaller" and scrolls along with the page as you scroll? Thanks

You can use css transitions for the height, font size and whatever else you want changed. Then simply set a scroll listener, which adds a class to the header so the size changes. Quick (and very ugly) example. jsFiddle
$(window).scroll(function () {
if ($(this).scrollTop()) {
$('#header').addClass('small');
}
else {
$('#header').removeClass('small');
}
});

Maybe you should detect the scroll event of the window, after that, set the position of the navbar to fixed and then, perform the animation. Here's an example of the javascript part and a link see it in action:
$(function(){
var performingDownAnimation = false,
performingUpAnimation = false;
var performScroll = function(){
if($("body").scrollTop() > 0) {
if(performingUpAnimation) {
$('#logo').stop();
performingUpAnimation = false;
}
if(!performingDownAnimation){
$('#navbar').addClass('navbar-fixed');
$('#logo').animate({ 'font-size': "12px" }, 1000, function(){
performingDownAnimation = false;
});
performingDownAnimation = true;
}
}else if($("body").scrollTop() == 0){
if(performingDownAnimation) {
$('#logo').stop();
performingDownAnimation = false;
}
if(!performingUpAnimation){
$('#navbar').removeClass('navbar-fixed');
$('#logo').animate({ 'font-size': "48px" }, 1000, function(){
performingUpAnimation = false;
});
performingUpAnimation = true;
}
}
}
$(document).on('scroll', performScroll);
});
On scroll event and position fixed
I edited my response for adding support for the "up" direction too. About using bootstrap for the animation, I have no idea how to do it, and I think it can't be done, because bootstrap is based mainly on applying CSS classes to different elements. CSS classes are discrete, but you are asking for animating something numerical, as the font-size property is. As much, you could create an animation that looks "staggered".

bx slider set number of images in slider

I want to set it so there's 3 text/images on the slider and it also works well with gallery with numbers not divisible by 3. If there's 5 images shows 3 in the first and 2 on the second.
I have a demo here:
http://jsfiddle.net/vgJ9X/1/
Here's the javascript I'm using
// declare global
var slider_array = new Array();
jQuery(document).ready(function($){
// launch bxslider
$('.bxslider').each(function(i){
slider_array[i] = $(this).bxSlider({controls:false,
});
});
// bind controls on custom controls, and run functions on every slider
$('.bxslider-controls a').bind('click', function(e) {
e.preventDefault();
if($(this).hasClass('pull-left')) {
$.each(slider_array, function(i,elem){
elem.goToPrevSlide();
});
} else if($(this).hasClass('pull-right')) {
$.each(slider_array, function(i,elem){
elem.goToNextSlide();
});
}
});
});

In order to have more than one slides in the viewport you have to specify a width in bxSlider options (for example 1/3 of the viewport), so bxSlider operates in carousel mode, and maximum number of slides that can be shown on the viewport. That makes bxSlider not very responsive, unless you update it via javascript (using reloadSlider method).
Look at Public Methods on http://bxslider.com/options for further reference
// declare global
var slider_array = new Array();
jQuery(document).ready(function($){
// launch bxslider
$('.bxslider').each(function(i){
slider_array[i] = $(this).bxSlider({controls:false, maxSlides:3, slideWidth:330 });
});
// bind controls on custom controls, and run functions on every slider
$('.bxslider-controls a').bind('click', function(e) {
e.preventDefault();
if($(this).hasClass('pull-left')) {
$.each(slider_array, function(i,elem){
elem.goToPrevSlide();
});
} else if($(this).hasClass('pull-right')) {
$.each(slider_array, function(i,elem){
elem.goToNextSlide();
});
}
});
});

Progressively loading slide: Some images don't load or only load partially and quit

I'm progressively loading my images using Slick.js and I noticed that some of the images are either partially loading or not loading at all.
For example, on this site, there are two galleries: Architecture and Design (in the nav). When the user clicks on either one, they are presented with a list of the images within that gallery. The problem happens when I switch from one gallery to another. So if I'm looking at an image in Architecture and I click on Design > x.jpg, the new image either doesn't load at all or partially loads and quits.
Here is a screenshot. It only loads that small strip and quits. Also, it seems that that exact amount gets loaded anytime I face this problem. No more, no less.
Below is what I'm using to switch galleries.
$('#main').on('click','.change_gallery',function() {
$('.side-nav').removeClass('active');
$('.side-nav').hide(0);
$('.side-nav').css('z-index', 1);
var mygroup = $(this).data('group'); // gets the group name
var position = $(this).attr('rel'); // gets the index
if (mygroup == cgallery && (typeof cgallery != 'undefined')) {
var position = $(this).attr('rel');
$('.slider').slick('slickGoTo', position, false);
} else {
$('.slider').fadeTo(500,0, function () {
// Destroy previous slider
if (typeof cgallery != 'undefined') {
$('.slider').slick('unslick');
}
$('.slider').html('');
if (mygroup=="Design") {
$('.slider').html($("#image-containerb").html());
} else {
$('.slider').html($("#image-container").html());
}
// Load images
$('.myslide').each(function() {
// Add landscape and portrait classes to style accordingly
var $this = $(this);
var iwidth = $this.data('iwidth');
var iheight = $this.data('iheight');
if ($this.data('iwidth') > $this.data('iheight')) {
$this.addClass('landscape');
} else {
$this.addClass('portrait');
}
var header_height = $('.site-header').height();
var footer_height = $('.site-footer').height();
var cheight = window.innerHeight - header_height - footer_height - (6*16);
$this.css('height', cheight);
$this.css('max-height', cheight);
});
$('.slider').fadeTo(500,1);
var $slider = $('.slider').slick({
fade: true,
focusOnSelect: true,
speed: slider_speed,
cssEase: 'ease',
lazyLoad: 'progressive',
adaptiveHeight: true,
autoplay: true,
autoplaySpeed: 3000,
});
$('.slider').slick('slickGoTo',position,true);
$slider.find('.slick-slide').on('click', function() {
$slider.slick('slickNext');
});
$('.slick-prev').show();
$('.slick-next').show();
var header_height = $('.site-header').height();
var landscapeH = window.innerHeight - (header_height+64+44);
$('.portrait, .slick-slide').css('max-height', landscapeH);
cgallery = mygroup;
});
} // end else
});
Initially, I thought it was because the large image needed time to load, so I tried placing my mouse over the partially loaded strip of the image (to prevent autoplay from moving onto the next image), however, it just ended up never loading.
What could be causing this?

I ended up changing adaptiveHeight:true to adaptiveHeight:false and it seemed to take care of it.

If it doesn't matter which image is loaded first you can do
$('#yourclass').slick('slickGoTo', 2);
it will jump to the next image which will be loaded fine.

Bad masonry element: null - using wordpress

I am writing a wordpress plugin in php. In that plugin I output pictures with a little text and want to do that with masonry.
When I initialize masonry in HTML, it seems to work, but the pictures overlap:
<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
Therefore I am trying to use "Imagesloaded" (by the same developer?).
But as I see it, before I can use ImagesLoaded I need to get Masonry up and running with javascript. When I initialize Masonry in my plugin_scripts.js I get an error on the frontend:
plugin_scripts.js:
jQuery(function() {
alert("hallo");
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
});
Console Error in Frontend:
Bad masonry element: null
masonry.min.js?ver=3.1.2:1
q masonry.min.js?ver=3.1.2:1
d masonry.min.js?ver=3.1.2:1
(anonymous function) schnoogle_scripts_frontend.js?ver=3.9.2:10
j jquery.js?ver=1.11.0:2
k.fireWith jquery.js?ver=1.11.0:2
n.extend.ready jquery.js?ver=1.11.0:2
K jquery.js?ver=1.11.0:2
Can you help?

window.onload = function(){
//call masonry
}
You should load html before call masonry so query selector can find query

It looks like Masonry can't find your container for some reason. I assume you've tried the obvious, such as making sure #container is actually on the page.
If you're using jQuery (which you are), you can use jQuery's selector engine.
var $container = $('#container');
// initialize
$container.masonry({
columnWidth: 200,
itemSelector: '.item'
});
Ensure this is within a document.ready call, so that you're doing it after the rest of the page is ready.

if using vanilla js in WordPress, if you enqueue a script it's everywhere. to solve this I query to see if the element is on the page for initializing Masonry.
var masonry_element = document.querySelector( '.masonry' );
if( typeof( masonry_element ) != 'undefined' && masonry_element != null ){
var msnry = new Masonry( '.masonry', { ... } );
}

Smooth jScrollPane scrollbar length adjustment with dynamic content

Some of my webpages contain several text elements that expand and collapse with a jQuery "accordion" effect:
function show_panel(num) {
jQuery('div.panel').hide();
jQuery('#a' + num).slideToggle("slow");
}
function hide_panel(num) {
jQuery('div.panel').show();
jQuery('#a' + num).slideToggle("slow");
}
This causes the window size to change so jScrollPane has to be reinitialized, which will also change the length of the scrollbar. To achieve a smooth length adjustment of the scrollbar, I set the "autoReinitialise" option to "true" and the "autoReinitialiseDelay" to "40" ms:
$(document).ready(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function () {
if (!isResizing) {
isResizing = true;
var container = $('#content');
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css({
'width': 1,
'height': 1
});
// Now make it the size of the window...
container.css({
'width': win.width(),
'height': win.height()
});
isResizing = false;
container.jScrollPane({
showArrows: false,
autoReinitialise: true,
autoReinitialiseDelay: 40
});
}
}).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#content').width() != win.width()) {
win.trigger('resize');
}
});
The effect is ok, but on the cost of a very high CPU usage which makes my fan go wild.
This is a jsfiddle which shows the settings and the effect: http://jsfiddle.net/VVxVz/
Here's an example page (in fact it's an iframe within the webpage shown): http://www.sicily-cottage.net/zagaraenausfluege.htm
Is there a possibility to achieve the same "smooth" transition of the scrollbar length without using the "autoReinitialise" option, maybe with an additional script, some modification of the jscrollpane.js, or simply a css animation of the scrollbar and then calling the reinitialise manually?
I'm absolutely useless at javascript so any help would be greatly appreciated.

There is no need to initialise jScrollPane on your content everytime window is resized. You should do it only once - on $(document).ready(). Also, there is no need in using autoReinitialize if your content is staic. You should reinitialise jScrollPane to update scrollbar size only when you slideUp/slideDown one of your container or on window.resize. So, code become less and more beautiful :)
function togglePanel(num) {
var jsp = $('#content').data('jsp');
jQuery('#a' + num).slideToggle({
"duration": "slow",
"step": function(){
jsp.reinitialise();
}
});
return false;
}
$(document).ready(function () {
var container = $('#content').jScrollPane({
showArrows: false,
autoReinitialise: false
});
var jsp = container.data('jsp');
$(window).on('resize', function(){
jsp.reinitialise();
});
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if (container.width() != $(window).width()) {
jsp.reinitialise();
}
});