Menu icon Foundation

My Posts

  • NEW
  • Post does not appear

    By Mike T

    duplicated post

    I submitted a post on foundation forum, but I had to make some changes in the post, so I deleted this post, and created a new post with the changes. But the new post does not appear in the forum. What is wrong? Thanks!


  • 4
    Replies
  • Accordion does not work

    By Mike T

    accordion not work

    I downloaded the Foundation6.2. As a beginner to the foundation template, I tried to use accordion in a FAQ page, but it does not work, it does not respond to the clicks on the headers. Who could tell me where is wrong? Following is the code. Thank you fo... (continued)

    Last Reply by Mike T over 3 years ago



  • 2
    Replies
  • Newbie question: row layout

    By Mike T

    row

    I am new to Foundation template. Following code does not work properly. The first sentence shows above the second sentence. And both sentences appear at the left side of the web browser. Where is wrong? Thank you!

    Last Reply by Rafi Benkual about 4 years ago


My Comments

Mike T commented on Mike T's post over 3 years

Thank you Brian. Because the Foundation custom download button is unavailable, I downloaded the custom edition Foundation files from other websites.
I followed your advice, replaced the three files foundation.min.css, jquery.min.js, foundation.min.js with the ones located in the complete Foundation download file complete-f6.zip (version 6.2), and deleted foundation.accordion.js, foundation.core.js, foundation.util.keyboard.js, foundation.util.motion.js. Now the accordion  works in Firefox, IE and Google chrome. Thank you very much!

Mike T commented on Mike T's post over 3 years

Thank you Brian! I updated the scripts to be compatible with the Foundation 6.2 standards.  Now the accordion works in IE, but it still does not respond to the clicks on headers in Google Chrome browser and Firefox, I don't know where is wrong. Thank you for help!
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>FAQ</title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>

<script src="js/foundation.accordion.js"></script>
<script src="js/foundation.core.js"></script>
<script src="js/foundation.util.keyboard.js"></script>
<script src="js/foundation.util.motion.js"></script>
</head>

<body>
<div>
<h1>This is the FAQ page</h1>

</div>

<div>
<ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item>
<a href="#1" class="accordion-title">This is question 1</a>
<div id="1" class="accordion-content" data-tab-content>
Yes, here is it.
</div>
</li>

&lt;li class="accordion-item" data-accordion-item&gt;
&lt;a href="#2" class="accordion-title"&gt;This is question 2&lt;/a&gt;
&lt;div id="2" class="accordion-content" data-tab-content&gt;
  It is blue.
&lt;/div&gt;
&lt;/li&gt;

&lt;li class="accordion-item" data-accordion-item&gt;
&lt;a href="#3" class="accordion-title"&gt;This is question 3&lt;/a&gt;
&lt;div  id="3" class="accordion-content" data-tab-content&gt;
  hello, how are you.
&lt;/div&gt;
&lt;/li&gt;

&lt;li class="accordion-item" data-accordion-item&gt;
&lt;a href="#4" class="accordion-title"&gt;This is question 4&lt;/a&gt;
&lt;div id="4"  class="accordion-content" data-tab-content&gt;
  good morning!
&lt;/div&gt;
&lt;/li&gt;

</ul>
</div>

<script>
$(document).foundation();
</script>

</body>
</html>
 

Mike T commented on Mike T's post about 4 years

Thank you Marko for your answer! it's helpful. Now I know that a column can contain multiple rows.

in HTML, the comment should be <!-- -->, I wrote /* */ in the code above by mistake. Thank you!

Mike T commented on Mike T's post about 4 years

Thank you Ian for your reply!

I tried the script on IE, Firefox, and Google Chrome, I checked the browsers, the Javascript feature is enabled. I am using the latest Foundation 5.5.2.

The two sentences locate at the left side of the 3 browsers. I also tried "large-4 columns panel" and "large-8 columns panel" , the two sentences were still at the left side. I don't know what is wrong.

Posts Followed

No Content

Following

    No Content

Followers

My Posts





My Comments

You commented on Mike T's post over 3 years

Thank you Brian. Because the Foundation custom download button is unavailable, I downloaded the custom edition Foundation files from other websites.
I followed your advice, replaced the three files foundation.min.css, jquery.min.js, foundation.min.js with the ones located in the complete Foundation download file complete-f6.zip (version 6.2), and deleted foundation.accordion.js, foundation.core.js, foundation.util.keyboard.js, foundation.util.motion.js. Now the accordion  works in Firefox, IE and Google chrome. Thank you very much!

You commented on Mike T's post over 3 years

Thank you Brian! I updated the scripts to be compatible with the Foundation 6.2 standards.  Now the accordion works in IE, but it still does not respond to the clicks on headers in Google Chrome browser and Firefox, I don't know where is wrong. Thank you for help!
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>FAQ</title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>

<script src="js/foundation.accordion.js"></script>
<script src="js/foundation.core.js"></script>
<script src="js/foundation.util.keyboard.js"></script>
<script src="js/foundation.util.motion.js"></script>
</head>

<body>
<div>
<h1>This is the FAQ page</h1>

</div>

<div>
<ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item>
<a href="#1" class="accordion-title">This is question 1</a>
<div id="1" class="accordion-content" data-tab-content>
Yes, here is it.
</div>
</li>

&lt;li class="accordion-item" data-accordion-item&gt;
&lt;a href="#2" class="accordion-title"&gt;This is question 2&lt;/a&gt;
&lt;div id="2" class="accordion-content" data-tab-content&gt;
  It is blue.
&lt;/div&gt;
&lt;/li&gt;

&lt;li class="accordion-item" data-accordion-item&gt;
&lt;a href="#3" class="accordion-title"&gt;This is question 3&lt;/a&gt;
&lt;div  id="3" class="accordion-content" data-tab-content&gt;
  hello, how are you.
&lt;/div&gt;
&lt;/li&gt;

&lt;li class="accordion-item" data-accordion-item&gt;
&lt;a href="#4" class="accordion-title"&gt;This is question 4&lt;/a&gt;
&lt;div id="4"  class="accordion-content" data-tab-content&gt;
  good morning!
&lt;/div&gt;
&lt;/li&gt;

</ul>
</div>

<script>
$(document).foundation();
</script>

</body>
</html>
 

You commented on Mike T's post about 4 years

Thank you Marko for your answer! it's helpful. Now I know that a column can contain multiple rows.

in HTML, the comment should be <!-- -->, I wrote /* */ in the code above by mistake. Thank you!

You commented on Mike T's post about 4 years

Thank you Ian for your reply!

I tried the script on IE, Firefox, and Google Chrome, I checked the browsers, the Javascript feature is enabled. I am using the latest Foundation 5.5.2.

The two sentences locate at the left side of the 3 browsers. I also tried "large-4 columns panel" and "large-8 columns panel" , the two sentences were still at the left side. I don't know what is wrong.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content