Menu icon Foundation

My Posts

  • 4
    Replies
  • Input checkbox + accordion tab

    By Shmoo

    Just trying to accomplish something here that isn't very common I guess. I have two fdn. columns in side a HTML form, left side the regular stuff everybody needs to fill out but on the right side I have other fields, those fields hold extra (optional) ... (continued)

    Last Reply by Bob Sawyer over 4 years ago

  • 4
    Replies
  • Clearing Caption not showing up

    By Shmoo

    clearingcaption

    I've installed everything like the Docs told me and it's working nicely but the only thing that doesn't work are the captions, those will not show up for some reason. If I look at the source there is a inline css display none at the caption paragraph a... (continued)

    Last Reply by Martin Eberle about 5 years ago

  • 2
    Replies
  • Tabs: one list item is reload url btn

    By Shmoo

    tabs

    Developers, I like the way Tabs.js works, very easy to customize and create vertical, horizontal and even include accordions inside each tab-section but I've got one little thing I would like to tackle. I've added one extra list item ( 3rd btn ) th... (continued)

    Last Reply by Shmoo over 5 years ago

  • 2
    Replies
  • Reveal - External webpage in modal

    By Shmoo

    reveal

    Can somebody write a step-by-step instruction about how to fire a simpel external webpage like Google.com inside a modal window? I followed the Zurb's DOCS but it's not working at all. This is what I've done. ** Edit code is in the first replay.

    Last Reply by Yanik Turgeon over 5 years ago

  • 7
    Replies
  • jQuery must load in footer?

    By Shmoo

    jquerywordpressjs

    I've got a question, Is there a solution to make Foundation work while loading jQuery in the head section of the document and the Foundation.js in the footer ? I'm working on this WordPress / BuddyPress project and jQuery has to be included in the h... (continued)

    Last Reply by Shmoo over 5 years ago

My Comments

Shmoo commented on Shmoo's post over 4 years

Got it working...

Just add HTML ID's to the url tag ( a href ) of the fdn. accordion + checkbox inside the accordion content you want to automatically be selected or checked when opening or closing the accordion tab.

// Checkout page
$(document).ready( function () {

  $("#select_extra_fields").click(function() {

    var checkBox = $("#ship-to-different-address-checkbox");

    checkBox.trigger('click');

  });

});

Helpful 1
Shmoo commented on Shmoo's post over 4 years

I thought jQuery would do the trick, I'm not very familiar with Javascript so I think I have to Google a little bit on this subject to get some tutorials.

Thanks anyway..

Helpful 0
Shmoo commented on Shmoo's post over 5 years

Thank you.

Helpful 0
Shmoo commented on Shmoo's post over 5 years

Thank you,

That works perfectly!

Helpful 1
Shmoo commented on Shmoo's post over 5 years

This is the HTML code.

- inside the content.
<a href="http://google.com" data-reveal-id="myModal" data-reveal-ajax="true">Click</a>

....

- bottom of the page.

<div id="myModal" class="reveal-modal" data-reveal></div>
...load foundation.js
...load reveal.js
</body>
</html>

Helpful 0
Shmoo commented on Shmoo's post over 5 years

Okay thanks!

Helpful 0
Shmoo commented on Shmoo's post over 5 years

Yeah I guess that's the reason why this isn't working..

I've just downloaded a custom version of Foundation 5 without all the Javascript plugins en while looking inside the foundation.js Core file I see lots of Javascript that I really don't like to include in my website but for some reason I simply have to eat it to make all other features work.

Something like:

Bummer, I really hoped Foundation was for me but it's not!

Thanks everybody for trying to help me.

Helpful 0
Shmoo commented on Shmoo's post over 5 years

The Docs says you don't have to, it's foundation.min.js to load all Javascript plugins or load only them individually.
I like the individually option because most JS isn't needed at all pages and foundation core is packed with a lots of stuff I don't need, like the media queries meta tags in the head section.

"Then either load each plugin individually, or include foundation.min.js, which automatically loads the Foundation Core and all JavaScript plugins."

http://foundation.zurb.com/docs/javascript.html

If i'm not mistaken jQuery 2.0.3 is also included inside foundation.min.js

Helpful 0
Shmoo commented on Shmoo's post over 5 years

Sorry for the late reaction but I keep getting this error in the console.

" ReferenceError: Can't find variable: Foundation " - at line 5 of foundation.tab.js

Line 5 of that file looks like this:

   Foundation.libs.tab = {

This is what I did.

<head>
.... modernizr.js
.... Google's jQuery.2.0.3.min.js 
</head>

....

.... foundation.tab.js
<script>
(function ($) {
  $(document).foundation();
});
</script>
</body>
</html>

Changing the $ to jQuery doesn't help.

I don't like to load all JS functions-/features together in the footer because I only need the tabs feature on a single page and I can easily include the foundation.tab.js when this page is viewed.

Helpful 0

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Shmoo's post over 4 years

Got it working...

Just add HTML ID's to the url tag ( a href ) of the fdn. accordion + checkbox inside the accordion content you want to automatically be selected or checked when opening or closing the accordion tab.

// Checkout page
$(document).ready( function () {

  $("#select_extra_fields").click(function() {

    var checkBox = $("#ship-to-different-address-checkbox");

    checkBox.trigger('click');

  });

});

Helpful 1
You commented on Shmoo's post over 4 years

I thought jQuery would do the trick, I'm not very familiar with Javascript so I think I have to Google a little bit on this subject to get some tutorials.

Thanks anyway..

Helpful 0
You commented on Shmoo's post over 5 years

Thank you.

Helpful 0
You commented on Shmoo's post over 5 years

Thank you,

That works perfectly!

Helpful 1
You commented on Shmoo's post over 5 years

This is the HTML code.

- inside the content.
<a href="http://google.com" data-reveal-id="myModal" data-reveal-ajax="true">Click</a>

....

- bottom of the page.

<div id="myModal" class="reveal-modal" data-reveal></div>
...load foundation.js
...load reveal.js
</body>
</html>

Helpful 0
You commented on Shmoo's post over 5 years

Okay thanks!

Helpful 0
You commented on Shmoo's post over 5 years

Yeah I guess that's the reason why this isn't working..

I've just downloaded a custom version of Foundation 5 without all the Javascript plugins en while looking inside the foundation.js Core file I see lots of Javascript that I really don't like to include in my website but for some reason I simply have to eat it to make all other features work.

Something like:

Bummer, I really hoped Foundation was for me but it's not!

Thanks everybody for trying to help me.

Helpful 0
You commented on Shmoo's post over 5 years

The Docs says you don't have to, it's foundation.min.js to load all Javascript plugins or load only them individually.
I like the individually option because most JS isn't needed at all pages and foundation core is packed with a lots of stuff I don't need, like the media queries meta tags in the head section.

"Then either load each plugin individually, or include foundation.min.js, which automatically loads the Foundation Core and all JavaScript plugins."

http://foundation.zurb.com/docs/javascript.html

If i'm not mistaken jQuery 2.0.3 is also included inside foundation.min.js

Helpful 0
You commented on Shmoo's post over 5 years

Sorry for the late reaction but I keep getting this error in the console.

" ReferenceError: Can't find variable: Foundation " - at line 5 of foundation.tab.js

Line 5 of that file looks like this:

   Foundation.libs.tab = {

This is what I did.

<head>
.... modernizr.js
.... Google's jQuery.2.0.3.min.js 
</head>

....

.... foundation.tab.js
<script>
(function ($) {
  $(document).foundation();
});
</script>
</body>
</html>

Changing the $ to jQuery doesn't help.

I don't like to load all JS functions-/features together in the footer because I only need the tabs feature on a single page and I can easily include the foundation.tab.js when this page is viewed.

Helpful 0

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content

Register Today

Get all the answers in our
Foundation Classes

Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.

See Upcomming Classes

Or if you prefer, contact the Foundation Team at training@zurb.com or (408) 341-0600 x635