Menu icon Foundation

Designer | Chesterfield

I'm actually a technical writer. I create documentation in various forms - HTML and PDF outputs usually.

My Posts






My Comments

Craig Wright commented on Craig Wright's post 12 days

Hi Vincent, Do you have a web site with a portfolio etc.? Where are you based?

Craig Wright commented on Craig Wright's post 29 days

Oh damn, that Handlebars stuff is big boy developer stuff...I'm not even a developer. Maybe hiring someone to do a breadcrumb with javascript might be easier?

Craig Wright commented on Craig Wright's post 29 days

I tried that, but the page has images and snippets and things like that, so it doesn't display properly and show the problem. The code is:
<body>
<div class="page-container">
<div class="title-bar" data-responsive-toggle="offCanvas" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="offCanvas">
</button>
<div class="title-bar-title">Menu</div>
</div>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas="">
<MadCap:snippetBlock src="../mobile-menu.flsnp" />
</div>
<div class="off-canvas-content" data-off-canvas-content="">
<div class="row header" data-equalizer="">
<div class="small-12 medium-6 columns" data-equalizer-watch="">
<div class="logo-container">
<img src="../Images/alt-logo.svg" />
</div>
</div>
<div class="small-12 medium-6 columns" data-equalizer-watch="">
<div class="search-container">
<MadCap:searchBarProxy />
</div>
</div>
</div>
<div class="row doc-title">
<div class="small-12 columns">
<p>UltraSync ONE User Guide</p>
</div>
</div>

            &lt;div class="row content-container"&gt;
                &lt;div class="hide-for-small-only medium-4 columns"&gt;
                    &lt;MadCap:snippetBlock src="../toc-menu.flsnp" /&gt;
                &lt;/div&gt;
                &lt;div class="small-12 medium-8 columns" id="topic-container"&gt;
                    &lt;MadCap:bodyProxy /&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
        &lt;p&gt;footer here&lt;/p&gt;
    &lt;/div&gt;
    &lt;script src="../js/vendor/jquery.js"&gt;
    &lt;/script&gt;
    &lt;script src="../js/vendor/what-input.js"&gt;
    &lt;/script&gt;
    &lt;script src="../js/vendor/foundation.js"&gt;
    &lt;/script&gt;
    &lt;script src="../js/app.js"&gt;
    &lt;/script&gt;
&lt;/body&gt;

</html>
And the problem is that when the page is shown on mobiles, the row containing <Madcap:searchbar proxy>wraps below the header correctly. The trouble is, the content of the searchbar proxy is too big and so overlaps the row doc-title. I just want the height of the row header to expand to include whatever is inside the header row. So that the doc-title always comes after and isn't overlapped. 

Craig Wright commented on Craig Wright's post 29 days

Thanks Roy. I'm using off-canvas at the top for a mobile menu, then a header, then 2 divs - left one is an accordion menu, right one is content. To complicate matters, the left one vanishes on small devices and the right one goes full width. The two divs are followed by the footer div. 
I'll take a look at your link later, thanks.

Craig Wright commented on Craig Wright's post about 1 month

This is what I have:
<!DOCTYPE html>
<html lang="en-gb" xml:lang="en-gb">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Getting Started</title>
<link href="../SkinSupport/MadCap.css" rel="stylesheet" />
<link href="../Resources/css/foundation.min.css" rel="stylesheet" />
<link href="../Resources/MasterPages/Resources/css/foundation.css" rel="stylesheet" />
<link href="../Resources/MasterPages/Resources/css/app.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container fluid">
<div class="grid-x grid-margin-x">
<div class="cell medium-4">
<ul class="menu vertical" data-accordion-menu="">
<li value="1"><a href="../Topic A.htm" class="MCXref_0" xrefformat="{paratext}">Topic A</a>
</li>
<li value="2"><a href="../Topic B.htm" class="MCXref_0" xrefformat="{paratext}">Topic B</a>
</li>
<ul class="menu vertical nested">
<li value="1"><a href="../Topic C.htm" class="MCXref_0" xrefformat="{paratext}">Topic C</a>
</li>
</ul>
<li value="3"><a href="../Topic D.htm" class="MCXref_0" xrefformat="{paratext}">Topic D</a>
</li>
<li value="4"><a href="../index.html" class="MCXref_0" xrefformat="{paratext}">Welcome to Foundation</a>
</li>
</ul>
</div>
<div class="cell medium-8">
<h1>Getting Started</h1>
<p>See the following to get started quickly:</p>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
</div>
</div>
</div>
<script src="../Resources/MasterPages/Resources/js/vendor/jquery.js">
</script>
<script src="../Resources/MasterPages/Resources/js/vendor/what-input.js">
</script>
<script src="../Resources/MasterPages/Resources/js/vendor/foundation.js">
</script>
<script src="../Resources/MasterPages/Resources/js/app.js">
</script>
</body>
</html>

Craig Wright commented on Craig Wright's post about 1 month

I'm using a tech comm tool called MadCap Flare for documentation and I'm trying to get the accordion menu to work. I have the x-y grid working, but can't get the accordion menu to work. Can anyone help?

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Craig Wright's post 12 days

Hi Vincent, Do you have a web site with a portfolio etc.? Where are you based?

You commented on Craig Wright's post 29 days

Oh damn, that Handlebars stuff is big boy developer stuff...I'm not even a developer. Maybe hiring someone to do a breadcrumb with javascript might be easier?

You commented on Craig Wright's post 29 days

I tried that, but the page has images and snippets and things like that, so it doesn't display properly and show the problem. The code is:
<body>
<div class="page-container">
<div class="title-bar" data-responsive-toggle="offCanvas" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="offCanvas">
</button>
<div class="title-bar-title">Menu</div>
</div>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas="">
<MadCap:snippetBlock src="../mobile-menu.flsnp" />
</div>
<div class="off-canvas-content" data-off-canvas-content="">
<div class="row header" data-equalizer="">
<div class="small-12 medium-6 columns" data-equalizer-watch="">
<div class="logo-container">
<img src="../Images/alt-logo.svg" />
</div>
</div>
<div class="small-12 medium-6 columns" data-equalizer-watch="">
<div class="search-container">
<MadCap:searchBarProxy />
</div>
</div>
</div>
<div class="row doc-title">
<div class="small-12 columns">
<p>UltraSync ONE User Guide</p>
</div>
</div>

            &lt;div class="row content-container"&gt;
                &lt;div class="hide-for-small-only medium-4 columns"&gt;
                    &lt;MadCap:snippetBlock src="../toc-menu.flsnp" /&gt;
                &lt;/div&gt;
                &lt;div class="small-12 medium-8 columns" id="topic-container"&gt;
                    &lt;MadCap:bodyProxy /&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
        &lt;p&gt;footer here&lt;/p&gt;
    &lt;/div&gt;
    &lt;script src="../js/vendor/jquery.js"&gt;
    &lt;/script&gt;
    &lt;script src="../js/vendor/what-input.js"&gt;
    &lt;/script&gt;
    &lt;script src="../js/vendor/foundation.js"&gt;
    &lt;/script&gt;
    &lt;script src="../js/app.js"&gt;
    &lt;/script&gt;
&lt;/body&gt;

</html>
And the problem is that when the page is shown on mobiles, the row containing <Madcap:searchbar proxy>wraps below the header correctly. The trouble is, the content of the searchbar proxy is too big and so overlaps the row doc-title. I just want the height of the row header to expand to include whatever is inside the header row. So that the doc-title always comes after and isn't overlapped. 

You commented on Craig Wright's post 29 days

Thanks Roy. I'm using off-canvas at the top for a mobile menu, then a header, then 2 divs - left one is an accordion menu, right one is content. To complicate matters, the left one vanishes on small devices and the right one goes full width. The two divs are followed by the footer div. 
I'll take a look at your link later, thanks.

You commented on Craig Wright's post about 1 month

This is what I have:
<!DOCTYPE html>
<html lang="en-gb" xml:lang="en-gb">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Getting Started</title>
<link href="../SkinSupport/MadCap.css" rel="stylesheet" />
<link href="../Resources/css/foundation.min.css" rel="stylesheet" />
<link href="../Resources/MasterPages/Resources/css/foundation.css" rel="stylesheet" />
<link href="../Resources/MasterPages/Resources/css/app.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container fluid">
<div class="grid-x grid-margin-x">
<div class="cell medium-4">
<ul class="menu vertical" data-accordion-menu="">
<li value="1"><a href="../Topic A.htm" class="MCXref_0" xrefformat="{paratext}">Topic A</a>
</li>
<li value="2"><a href="../Topic B.htm" class="MCXref_0" xrefformat="{paratext}">Topic B</a>
</li>
<ul class="menu vertical nested">
<li value="1"><a href="../Topic C.htm" class="MCXref_0" xrefformat="{paratext}">Topic C</a>
</li>
</ul>
<li value="3"><a href="../Topic D.htm" class="MCXref_0" xrefformat="{paratext}">Topic D</a>
</li>
<li value="4"><a href="../index.html" class="MCXref_0" xrefformat="{paratext}">Welcome to Foundation</a>
</li>
</ul>
</div>
<div class="cell medium-8">
<h1>Getting Started</h1>
<p>See the following to get started quickly:</p>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
<ul>
<li value="1"><span class="SetOffFirstLevel">Do This </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
<li value="2"><span class="SetOffFirstLevel">Do That </span>Here is some general text for a list item. Replace this with your own content.</li>
<li value="3"><span class="SetOffFirstLevel">Do The Other Thing </span>Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content. Here is some general text for a list item. Replace this with your own content.</li>
</ul>
</div>
</div>
</div>
<script src="../Resources/MasterPages/Resources/js/vendor/jquery.js">
</script>
<script src="../Resources/MasterPages/Resources/js/vendor/what-input.js">
</script>
<script src="../Resources/MasterPages/Resources/js/vendor/foundation.js">
</script>
<script src="../Resources/MasterPages/Resources/js/app.js">
</script>
</body>
</html>

You commented on Craig Wright's post about 1 month

I'm using a tech comm tool called MadCap Flare for documentation and I'm trying to get the accordion menu to work. I have the x-y grid working, but can't get the accordion menu to work. Can anyone help?

Posts Followed


Following

  • No Content

Followers