Menu icon Foundation

Coder | Jersey City, NJ

I'm a front-end guy. Excelling in CSS3 and HTML5 and building my JS chops. I've worked on the views for all sorts of app stacks: LAMP, Rails, Python, Node JS/Angular & .NET. I work with PHP daily on Wordpress theme and plugin customizations and consider myself an above average PHP coder as it relates to Wordpress actions and filters.

My Posts

No Content

My Comments

Chris Matthias commented on Asif's post almost 6 years

@Karl - you can have default content for interchange with HTML content, but not with IMGs, apparently. I guess they were worried about overusage of interchange and loading two times the amount of images if there was a default image.

Chris Matthias commented on Natasha Smith's post almost 6 years

Hi Natasha-- the pages you still are having issues with are the same issue as before with Zepto. If you load those pages and look in your console you'll see that your code is looking for zepto.js but it's not on your site so you can follow the same directions I made above about replacing the zepto/jquery bit with just reference to jquery or you can get zepto.js from the foundation library and make sure it's uploaded to /js/vendor/ on your site.

Chris Matthias commented on Asif's post almost 6 years

As far as ajax content and Google indexing is concerned-- Google can index certain ajax content like Disqus because Disqus follow's the ajax content guidelines that Google outlines for indexing content.

As outlined at https://developers.google.com/webmasters/ajax-crawling/ -- If your ajax application uses an ajax URL structure like mysite.com/#!contact-page then google will send a request for mysite.com/?_escaped_fragment_=contact-page and it's up to your server to server the right content for that ajax URL when that URL parameter is present.

So, when google visits a page with Disqus on it-- It probably sees that it's an IFRAME and checks, the URL, converts the hashbang in the URL to a _escaped_fragment_ param and indexes that content.

I don't think it's going to work the same way with Interchange. You'll have to keep in mind that your base markup before interchange is triggered is what Google will index. So, make sure all your important content is in the base markup and you only accentuate the experience for the larger viewports. I think that's your best bet.

Chris Matthias commented on Charlie Schliesser's post almost 6 years

Did you try creating a new branch (if using git) or a test folder with your current setup and running foundation update --libsass?

Chris Matthias commented on Brian's post almost 6 years

You might have a path issue. Have you used GIT, Ruby successfully from your windows machine before? Did you install GIT from that URL? Usually on Windows it loads a program called GIT Bash which is a command line tool with some added linux functionality-- you could try your commands in GIT Bash. I would try installing bower and grunt like in the Docs from GIT Bash too.

If all else fails, I'd just reinstall Rails (which includes Ruby) and GIT by using http://railsinstaller.org/ -- it installs a few major dev programs for Windows pretty easily. After that you just need to install Node.js first and make sure the command "npm install" can be found in GIT Bash and then run the commands in the Foundation DOCS to install bower and grunt.

Chris Matthias commented on Natasha Smith's post almost 6 years

I should also add that you can use Zepto and I don't want the Zurbists to hate me for suggesting removing Zepto-- but that's what I've been doing with Foundation 4 and I suggest it especially to people just getting their feet wet with this framework.

Your main problem right now is that zepto.js is not being found on your server.. it should be in "js/vendor/" with your jquery.js file. You could fix your problem by just adding the zepto.js file to that directory too.

zepto.js should have come with your original download package.

Chris Matthias commented on Natasha Smith's post almost 6 years

Thank you for linking to examples and providing code-- the first thing I notice at http://foundation4.angelicdesign.co.uk/4-topbar.html is there are javascript errors. I use Chrome when coding and the first thing I do when something isn't working is hit CTRL-Shift-J or Cmd-Shift-J on the Mac. That will bring up the javascript console and if I see things in red I know something's up.

If you have some errors early in your javascript it will sometimes affect other javscript functions and plugins on your site as well so always check there first.

So, it looks like we're not loading jQuery and/or Zepto is missing as well.

Zepto is a lighter equivalent of jQuery and Foundation 4 gives you the option to use Zepto and since not every JS plugin you use on a site is compatible with Zepto, it can load jQuery as a fallback. Personally-- I thought adding Zepto into Foundation 4 was a mistake and it looks like they removed it in Foundation 5 so I suggest you remove it in Foundation 4, too.

To remove Zepto and just reference jQuery instead (since we all love jQuery) replace this code:

   <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>

With this:

<script src="js/vendor/jquery.js"></script> 

Most of your Foundaton javascript should work after that. The reason your top bar is screwy is because some of the functionality (showing/hiding) is done with CSS and some things like being sticky are done with the JS and your JS wasn't working. Lemme know how it goes.

Chris Matthias commented on Paul Sneddon's post almost 6 years

Which element are you setting your bg image on, BODY or HTML? You might want to try to make sure that both HTML and BODY elements are transparent and then set your BG on the BODY or HTML el.

html, body {
  background: transparent;
}
body {
  background: url('myimage.jpg') no-repeat;
}

Also-- be sure to make sure that if you are using a separate CSS file and Foundation CSS is reference in the page separately, that your custom CSS file is referenced AFTER Foundation's CSS file so that it's easier to override the Foundation CSS. This way, if you have two CSS rules and both have the same specificity, your custom CSS will override it simply because it was referenced in the DOM after the Foundation CSS.

It would be helpful if you linked to a demo of what you're experiencing-- I'm taking a shot in the dark based on limited information.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Asif's post almost 6 years

@Karl - you can have default content for interchange with HTML content, but not with IMGs, apparently. I guess they were worried about overusage of interchange and loading two times the amount of images if there was a default image.

You commented on Natasha Smith's post almost 6 years

Hi Natasha-- the pages you still are having issues with are the same issue as before with Zepto. If you load those pages and look in your console you'll see that your code is looking for zepto.js but it's not on your site so you can follow the same directions I made above about replacing the zepto/jquery bit with just reference to jquery or you can get zepto.js from the foundation library and make sure it's uploaded to /js/vendor/ on your site.

You commented on Asif's post almost 6 years

As far as ajax content and Google indexing is concerned-- Google can index certain ajax content like Disqus because Disqus follow's the ajax content guidelines that Google outlines for indexing content.

As outlined at https://developers.google.com/webmasters/ajax-crawling/ -- If your ajax application uses an ajax URL structure like mysite.com/#!contact-page then google will send a request for mysite.com/?_escaped_fragment_=contact-page and it's up to your server to server the right content for that ajax URL when that URL parameter is present.

So, when google visits a page with Disqus on it-- It probably sees that it's an IFRAME and checks, the URL, converts the hashbang in the URL to a _escaped_fragment_ param and indexes that content.

I don't think it's going to work the same way with Interchange. You'll have to keep in mind that your base markup before interchange is triggered is what Google will index. So, make sure all your important content is in the base markup and you only accentuate the experience for the larger viewports. I think that's your best bet.

You commented on Charlie Schliesser's post almost 6 years

Did you try creating a new branch (if using git) or a test folder with your current setup and running foundation update --libsass?

You commented on Brian's post almost 6 years

You might have a path issue. Have you used GIT, Ruby successfully from your windows machine before? Did you install GIT from that URL? Usually on Windows it loads a program called GIT Bash which is a command line tool with some added linux functionality-- you could try your commands in GIT Bash. I would try installing bower and grunt like in the Docs from GIT Bash too.

If all else fails, I'd just reinstall Rails (which includes Ruby) and GIT by using http://railsinstaller.org/ -- it installs a few major dev programs for Windows pretty easily. After that you just need to install Node.js first and make sure the command "npm install" can be found in GIT Bash and then run the commands in the Foundation DOCS to install bower and grunt.

You commented on Natasha Smith's post almost 6 years

I should also add that you can use Zepto and I don't want the Zurbists to hate me for suggesting removing Zepto-- but that's what I've been doing with Foundation 4 and I suggest it especially to people just getting their feet wet with this framework.

Your main problem right now is that zepto.js is not being found on your server.. it should be in "js/vendor/" with your jquery.js file. You could fix your problem by just adding the zepto.js file to that directory too.

zepto.js should have come with your original download package.

You commented on Natasha Smith's post almost 6 years

Thank you for linking to examples and providing code-- the first thing I notice at http://foundation4.angelicdesign.co.uk/4-topbar.html is there are javascript errors. I use Chrome when coding and the first thing I do when something isn't working is hit CTRL-Shift-J or Cmd-Shift-J on the Mac. That will bring up the javascript console and if I see things in red I know something's up.

If you have some errors early in your javascript it will sometimes affect other javscript functions and plugins on your site as well so always check there first.

So, it looks like we're not loading jQuery and/or Zepto is missing as well.

Zepto is a lighter equivalent of jQuery and Foundation 4 gives you the option to use Zepto and since not every JS plugin you use on a site is compatible with Zepto, it can load jQuery as a fallback. Personally-- I thought adding Zepto into Foundation 4 was a mistake and it looks like they removed it in Foundation 5 so I suggest you remove it in Foundation 4, too.

To remove Zepto and just reference jQuery instead (since we all love jQuery) replace this code:

   <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>

With this:

<script src="js/vendor/jquery.js"></script> 

Most of your Foundaton javascript should work after that. The reason your top bar is screwy is because some of the functionality (showing/hiding) is done with CSS and some things like being sticky are done with the JS and your JS wasn't working. Lemme know how it goes.

You commented on Paul Sneddon's post almost 6 years

Which element are you setting your bg image on, BODY or HTML? You might want to try to make sure that both HTML and BODY elements are transparent and then set your BG on the BODY or HTML el.

html, body {
  background: transparent;
}
body {
  background: url('myimage.jpg') no-repeat;
}

Also-- be sure to make sure that if you are using a separate CSS file and Foundation CSS is reference in the page separately, that your custom CSS file is referenced AFTER Foundation's CSS file so that it's easier to override the Foundation CSS. This way, if you have two CSS rules and both have the same specificity, your custom CSS will override it simply because it was referenced in the DOM after the Foundation CSS.

It would be helpful if you linked to a demo of what you're experiencing-- I'm taking a shot in the dark based on limited information.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content