Menu icon Foundation

Designer | Chesterfield

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

My Posts




  • 8
    Replies
  • Add a different UL on every page?

    By Craig Wright

    breadcrumbs

    I watched the breadcrumbs video and it seems that I'd need to add a different UL for the breadcrumbs for each different page on my site. Is that correct? On a large site, where content might get moved around a lot, that is going to require a lot of work. ... (continued)

    Last Reply by kikimi 3 days ago



My Comments

Craig Wright commented on Craig Wright's post 2 months

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

Craig Wright commented on Craig Wright's post 3 months

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 3 months

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 3 months

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 3 months

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 3 months

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 2 months

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

You commented on Craig Wright's post 3 months

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 3 months

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 3 months

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 3 months

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 3 months

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