Menu icon Foundation

Designer | Minneapolis, MN

My Posts



My Comments

Brian Larson commented on Brian Larson's post almost 6 years

Thanks again Guy. Still no dice here. All the needed scripts are indeed being loaded and I also tried loading jQuery from Google's CDN making sure it's the right version (2.1.0). I have think feeling that there's something in my app.js file that works in Foundation 5.0.3 but something about 5.1.1 doesn't like it. Pasted it below. Should some stuff be combined? I also noticed that in the Sass/Compass template for 5.1.1 the "$(document).foundation();" call is in app.js instead of index.html at the end. Here's my potentially wonky app.js:

 // Foundation JavaScript
// Documentation can be found at: http://foundation.zurb.com/docs
 $(document).foundation();


// Top bar
$(document).foundation(
  'topbar', {
    sticky_class : 'sticky',
    custom_back_text: false,
    back_text: '',
    is_hover: true,
    mobile_show_parent_link: false,
    scrolltop : false
  }
);


// Home page slider
$(document).foundation('orbit');


// Interchange initial page load fix ()
$(document).on("replace", function() {
  $('#slider').foundation('orbit');
  setTimeout(function() {$(document).resize();}, 500);
});


// syncHeight
// https://github.com/ginader/syncHeight
$(window).load(function(){
  $('.latest-post-tweet .panel').syncHeight();
  $('.product-category .product-series .product .panel').syncHeight();
});


// Backstretch
// http://srobbin.com/jquery-plugins/backstretch)
$("body").backstretch("http://subdomain.domain.dev/wp-content/themes/mytheme/img/main-ice-bg.jpg");


// Smooth scrolling
// http://css-tricks.com/snippets/jquery/smooth-scrolling/
$(function() {
  //$('a[href*=#]:not([href=#])').click(function() {
  $('a.scroll').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 750);
        return false;
      }
    }
  });
});



Brian Larson commented on Brian Larson's post almost 6 years

Now I see what dist folder you're talking about. I checked out the master.zip (https://github.com/zurb/foundation-compass-template/archive/master.zip) and see that it's bower_components/jquery/dist/jquery.min.js. Had to run bower update again for that folder to appear. Hrmm... still having the same issue though. Made sure the call to the new dist/ folder for jQuery was updated in the HTML as well.

Brian Larson commented on Brian Larson's post almost 6 years

Thanks Guy! Looks to me like jQuery is still in bower_components/jquery/. By dist folder do you mean the one in bower_components/lodash/?

Killed .sass-cache using 'compass clean' but still orbit or top bar won't initialize.

Still seeing no errors at all in Web Inspector. Bizarre.

Brian Larson commented on Marlon Gichie's post almost 6 years

I'm dealing with this as well. I can't find the forum thread that I got this from last night (weird you can't see all of your followed threads in the forum) but I think this is a jQuery version of what you're using (not sure if it's any better). I'm with you on this solution being too "hacky".

/*Interchange initial page load fix*/
$(document).on("replace", function() {
  $('#slider').foundation('orbit');
  setTimeout(function() {$(document).resize();}, 500);
});

Brian Larson commented on Brian Larson's post almost 6 years

Finally found the solution. No idea why I didn't look here in the first place. The hiding happens in bower_components/foundation/scss/foundation/components/_orbit.scss file with the code snippet below. I made the customization by overriding this in my _custom.scss file. Could of course be done with regular CSS as well by ditching the SASS nesting. Bummer this isn't in _settings.scss. Hope this helps someone else out there!

.touch {
      .orbit-container {
        .orbit-prev,
        .orbit-next { display: none; }
      }

      .orbit-bullets { display: none; }
    }

Brian Larson commented on Brian Larson's post almost 6 years

Anyone think that using CSS background images for bullets may do the trick. I thought it was maybe a user agent thing but that didn't seem to be the case.

Errr... just noticed that this not anything buggy. They're hidden on iOS in the Orbit example as well. Any ideas on how to force 'em to show. It's weird that it's not based in media queries but specific to device (eg sized down desktop browser window vs. iPhone).

Brian Larson commented on Peter Bonnell's post almost 6 years

Just chiming in to say I'm interested in a v5 sink as well!

Posts Followed



  • 1
    Reply
  • Orbit cuts off image

    By Marlon Gichie

    I'm trying to initialize Orbit on content that was added after the page is loaded (via ajax). The slider works fine, but the images are cut-off. The width seems normal but the images appear to be about 20px height. Not sure what the problem is, but i'v... (continued)

    Last Reply by Brian Larson almost 6 years ago








Following

    No Content

Followers

My Posts

My Comments

You commented on Brian Larson's post almost 6 years

Thanks again Guy. Still no dice here. All the needed scripts are indeed being loaded and I also tried loading jQuery from Google's CDN making sure it's the right version (2.1.0). I have think feeling that there's something in my app.js file that works in Foundation 5.0.3 but something about 5.1.1 doesn't like it. Pasted it below. Should some stuff be combined? I also noticed that in the Sass/Compass template for 5.1.1 the "$(document).foundation();" call is in app.js instead of index.html at the end. Here's my potentially wonky app.js:

 // Foundation JavaScript
// Documentation can be found at: http://foundation.zurb.com/docs
 $(document).foundation();


// Top bar
$(document).foundation(
  'topbar', {
    sticky_class : 'sticky',
    custom_back_text: false,
    back_text: '',
    is_hover: true,
    mobile_show_parent_link: false,
    scrolltop : false
  }
);


// Home page slider
$(document).foundation('orbit');


// Interchange initial page load fix ()
$(document).on("replace", function() {
  $('#slider').foundation('orbit');
  setTimeout(function() {$(document).resize();}, 500);
});


// syncHeight
// https://github.com/ginader/syncHeight
$(window).load(function(){
  $('.latest-post-tweet .panel').syncHeight();
  $('.product-category .product-series .product .panel').syncHeight();
});


// Backstretch
// http://srobbin.com/jquery-plugins/backstretch)
$("body").backstretch("http://subdomain.domain.dev/wp-content/themes/mytheme/img/main-ice-bg.jpg");


// Smooth scrolling
// http://css-tricks.com/snippets/jquery/smooth-scrolling/
$(function() {
  //$('a[href*=#]:not([href=#])').click(function() {
  $('a.scroll').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 750);
        return false;
      }
    }
  });
});



You commented on Brian Larson's post almost 6 years

Now I see what dist folder you're talking about. I checked out the master.zip (https://github.com/zurb/foundation-compass-template/archive/master.zip) and see that it's bower_components/jquery/dist/jquery.min.js. Had to run bower update again for that folder to appear. Hrmm... still having the same issue though. Made sure the call to the new dist/ folder for jQuery was updated in the HTML as well.

You commented on Brian Larson's post almost 6 years

Thanks Guy! Looks to me like jQuery is still in bower_components/jquery/. By dist folder do you mean the one in bower_components/lodash/?

Killed .sass-cache using 'compass clean' but still orbit or top bar won't initialize.

Still seeing no errors at all in Web Inspector. Bizarre.

You commented on Marlon Gichie's post almost 6 years

I'm dealing with this as well. I can't find the forum thread that I got this from last night (weird you can't see all of your followed threads in the forum) but I think this is a jQuery version of what you're using (not sure if it's any better). I'm with you on this solution being too "hacky".

/*Interchange initial page load fix*/
$(document).on("replace", function() {
  $('#slider').foundation('orbit');
  setTimeout(function() {$(document).resize();}, 500);
});

You commented on Brian Larson's post almost 6 years

Finally found the solution. No idea why I didn't look here in the first place. The hiding happens in bower_components/foundation/scss/foundation/components/_orbit.scss file with the code snippet below. I made the customization by overriding this in my _custom.scss file. Could of course be done with regular CSS as well by ditching the SASS nesting. Bummer this isn't in _settings.scss. Hope this helps someone else out there!

.touch {
      .orbit-container {
        .orbit-prev,
        .orbit-next { display: none; }
      }

      .orbit-bullets { display: none; }
    }

You commented on Brian Larson's post almost 6 years

Anyone think that using CSS background images for bullets may do the trick. I thought it was maybe a user agent thing but that didn't seem to be the case.

Errr... just noticed that this not anything buggy. They're hidden on iOS in the Orbit example as well. Any ideas on how to force 'em to show. It's weird that it's not based in media queries but specific to device (eg sized down desktop browser window vs. iPhone).

You commented on Peter Bonnell's post almost 6 years

Just chiming in to say I'm interested in a v5 sink as well!

Posts Followed

Following

  • No Content

Followers

  • No Content