Menu icon Foundation

Developer | San Diego, CA

My Posts

  • 2
    Replies
  • Javascript Errors after Update

    By Charles Smith

    jquery

    I have no idea when I updated my site that was the cause for the issue, but one of the updates is causing issues with, I assume javascript. The site is www.foodnbeverage.org and we recently noticed that the drop-down menu in the top-bar is not working, t... (continued)

    Last Reply by Taylor Shaw about 2 years ago




  • 11
    Replies
  • Sticky Footer

    By Charles Smith

    I have been looking around and around for an answer to this; I've found many forums where others are asking, but no real straight forward solution. Is there a class or JS that will create the sticky footer like on the Foundation website that works seamle... (continued)

    Last Reply by Douglas Olena over 4 years ago



My Comments

Charles Smith commented on Alrick's post almost 6 years

Try my tutorial... it runs through all the steps http://studiorooster.com/

Good Luck.

Charles Smith commented on Neil Little's post almost 6 years

See if my tutorial helps at http://studiorooster.com/ - it goes through creating a user, granting permissions, and then installing all the different bits and pieces.

Good luck.

Charles Smith commented on Cartucho's post almost 6 years

I wrote a step by step tutorial you may find helpful. It is at http://studiorooster.com/

Charles Smith commented on Charles Smith's post almost 6 years

Here is a solution just in case anyone is interested.

  1. Create a div around your footer. HTML <div id="footer"> <!-- Your footer here --> </div>
  2. Add a little bit of JS - I placed it is a file called sticky-footer.js - make sure you call it right after your jquery.js or it won't load.
 $(window).bind("load", function () {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});

I hope someone finds this helpful as I pretty much tweaked most of the day to get this working :)

Charles Smith commented on Charles Smith's post almost 6 years

MIhai

Good Stuff!! Thanks for posting.

Charles Smith commented on Charles Smith's post almost 6 years

Thank you for the responses. Rafi, I tried the solution a few days ago but unfortunately, my main content hides behind the footer when I do this. Mihai, I will look into compass as I am using Sass.

Thank you.

Charles Smith commented on Charles Smith's post almost 6 years

bump

Charles Smith commented on Charles Smith's post almost 6 years

I tend to use the @import method, but was wondering if the app.css file is overwritten if you make changes to the _settings.scss and ~ compass watch is running in Git? I guess I should just experiment and report back...just adding it in for the conversation as food for thought.

Charles Smith commented on websitemedia's post almost 6 years

Call it Friday or in combination that I've been thinking too hard, but I have the same question, but still need a little clarification. If what I understand .row is 100% width and holds 12 columns and the framework is responsive by nature...I guess what I am trying to wrap my mind around is what is the primary difference for example between the two rows below when they both add up to 12? And why wouldn't you use just the .show .hide classes? Or, is it all about the way the columns stack instead of squeezing to fit? Sorry, light bulb just went off and thought I may have just figured it out...questions stills stands until someone says I am wrong :) Thank you for your time.

<div class="row">
  <div class="small-2 columns">...</div>
  <div class="small-4 columns">...</div>
  <div class="small-6 columns">...</div>
</div>
<div class="row">
  <div class="large-2 columns">...</div>
  <div class="large-4 columns">...</div>
  <div class="large-6 columns">...</div>
</div>

Posts Followed



Following

    No Content

Followers

My Posts





My Comments

You commented on Alrick's post almost 6 years

Try my tutorial... it runs through all the steps http://studiorooster.com/

Good Luck.

You commented on Neil Little's post almost 6 years

See if my tutorial helps at http://studiorooster.com/ - it goes through creating a user, granting permissions, and then installing all the different bits and pieces.

Good luck.

You commented on Cartucho's post almost 6 years

I wrote a step by step tutorial you may find helpful. It is at http://studiorooster.com/

You commented on Charles Smith's post almost 6 years

Here is a solution just in case anyone is interested.

  1. Create a div around your footer. HTML <div id="footer"> <!-- Your footer here --> </div>
  2. Add a little bit of JS - I placed it is a file called sticky-footer.js - make sure you call it right after your jquery.js or it won't load.
 $(window).bind("load", function () {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});

I hope someone finds this helpful as I pretty much tweaked most of the day to get this working :)

You commented on Charles Smith's post almost 6 years

MIhai

Good Stuff!! Thanks for posting.

You commented on Charles Smith's post almost 6 years

Thank you for the responses. Rafi, I tried the solution a few days ago but unfortunately, my main content hides behind the footer when I do this. Mihai, I will look into compass as I am using Sass.

Thank you.

You commented on Charles Smith's post almost 6 years

bump

You commented on Charles Smith's post almost 6 years

I tend to use the @import method, but was wondering if the app.css file is overwritten if you make changes to the _settings.scss and ~ compass watch is running in Git? I guess I should just experiment and report back...just adding it in for the conversation as food for thought.

You commented on websitemedia's post almost 6 years

Call it Friday or in combination that I've been thinking too hard, but I have the same question, but still need a little clarification. If what I understand .row is 100% width and holds 12 columns and the framework is responsive by nature...I guess what I am trying to wrap my mind around is what is the primary difference for example between the two rows below when they both add up to 12? And why wouldn't you use just the .show .hide classes? Or, is it all about the way the columns stack instead of squeezing to fit? Sorry, light bulb just went off and thought I may have just figured it out...questions stills stands until someone says I am wrong :) Thank you for your time.

<div class="row">
  <div class="small-2 columns">...</div>
  <div class="small-4 columns">...</div>
  <div class="small-6 columns">...</div>
</div>
<div class="row">
  <div class="large-2 columns">...</div>
  <div class="large-4 columns">...</div>
  <div class="large-6 columns">...</div>
</div>

Posts Followed



Following

  • No Content

Followers