Menu icon Foundation

Designer

My Posts

  • 2
    Replies
  • Stick to bottom of element

    By Ben Wills

    stickyanchor

    Hi is it possible to get the bottom of an element to stick to the bottom of an id? i.e. I don't want the image to scroll past the bottom of the div that it is within. but everything i try seems to base what the btm anchor is on the top of the sticky eleme... (continued)

    Last Reply by Ben Wills over 2 years ago




  • 2
    Replies
  • CMS prefixing F6 styles

    By Ben Wills

    tablecmsprefix

    Hi i used to do this with F5 to avoid the styles conflicting with the styling used in my CMS system (Concrete5), however i'm having some issues with F6, the main one I have found so far is that it doesn't prefix the table styles, so I lose some aspects of... (continued)

    Last Reply by Ben Wills over 3 years ago




  • 3
    Replies
  • Delayed Sticky Topbar

    By Ben Wills

    topbarsticky

    Hi in F5, when using topbar with the sticky attribute, the topbar in question would remain as it was until it was reached in the scroll, at which point it would become sticky. I can't seem to get that delay with F6, what ever I do the topbar jumps to... (continued)

    Last Reply by Ben Wills over 3 years ago


My Comments

Ben Wills commented on Ben Wills's post over 2 years

Hi Rafi, thanks but i'd tried that.  My code is below, but basically i need the .canvas-ribbons to move from the header to the bottom, but at present the overflow the bottom before they stop :( adding stick-to-bottom just sticks them to the bottom of the header without them moving at all.
This is where they start:

This is where they should finish:

but they carry on to here:

<div data-sticky-container>

&lt;div data-sticky data-top-anchor="header" data-btm-anchor="header:bottom" style="width:100%;"&gt;
  &lt;div class="canvas-ribbon connect" data-open="offCanvasLeft"&gt;&lt;img src="img/connect-ribbon.png" alt="Connect"/&gt;&lt;/div&gt;
  &lt;div class="canvas-ribbon diary" data-open="offCanvasRight"&gt;&lt;img src="img/diary-ribbon.png" alt="What's On?"/&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;header id="header"&gt;

  &lt;div class="row logo show-for-medium-up"&gt;
    &lt;div class="small-12 columns text-center"&gt;
      &lt;a href="/"&gt;&lt;img src="img/harvest-white.png" alt="Harvest"/&gt;&lt;/a&gt;
      &lt;a href="/" class="show-for-small-only"&gt;&lt;img src="img/harvest-icon.png" alt="Harvest"/&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div id="welcome" class="row welcome"&gt;
    &lt;div class="small-12 columns text-center"&gt;
      &lt;img src="img/welcome.png" alt="Welcome"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/header&gt;

&lt;nav data-sticky data-margin-top="0" data-top-anchor="header:bottom" style="width:100%"&gt;
 &lt;div class="top-bar show-for-medium" id="primary-menu"&gt;
    &lt;div class="top-bar-left"&gt;
        &lt;ul class="medium-horizontal vertical menu dropdown" data-responsive-menu="accordion medium-dropdown" role="menubar" data-dropdown-menu="xs67uf-dropdown-menu" data-mutate="v26dnx-responsive-menu" data-events="mutate"&gt;
        &lt;li class="active active-path hide-for-medium-only" role="menuitem"&gt;&lt;a href="http://harvest:8888/index.php" target="_self" class="active active-path hide-for-medium-only"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li class="has-submenu is-dropdown-submenu-parent opens-right" role="menuitem" aria-haspopup="true" aria-label="Who We Are" data-is-click="false"&gt;&lt;a href="http://harvest:8888/index.php/who-we-are" target="_self" class="has-submenu"&gt;Who We Are&lt;/a&gt;&lt;ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" role="menu" style=""&gt;&lt;li class="" role="menuitem"&gt;&lt;a href="http://harvest:8888/index.php/diary" target="_self" class=""&gt;Diary&lt;/a&gt;&lt;/li&gt;        &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&lt;section class="content"&gt; 
&lt;div class="row"&gt;
  &lt;div class="small-12 columns"&gt;
    &lt;h1&gt;Page Title: Lorem ipsum dolor sit amet&lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

</div>

Ben Wills commented on Kevin Neal's post over 2 years

Hi Kevin, I know this is an old post, but it's still relevant.  No idea how to use GIT etc, so maybe someone else can submit a pull request, but there are a number of places in the foundation js where it states:
match(/(reveal-for-medium|reveal-for-large)/g)[0].split('-')[2];
by finding and replacing on this with:
match(/(reveal-for-medium|reveal-for-large|reveal-for-xlarge)/g)[0].split('-')[2];
I was able to get this working. Hope this helps someone.

Ben Wills commented on Vlasta Novak's post about 3 years

Any ideas how I do this in F6? Thanks

Ben Wills commented on Ben Wills's post over 3 years

Hi Rafi
 
I think what i'm getting at was missed, this is what i'm trying to achieve, do you think its possible?
<div class="row">
<div class="column outer">

&lt;div class="row"&gt;
  &lt;div class="column inner"&gt;
    Standard content
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="row expanded"&gt;
  &lt;div class="column inner"&gt;
    Full screen width content
  &lt;/div&gt;
&lt;/div&gt;


&lt;div class="row"&gt;
  &lt;div class="column inner"&gt;
    Standard content
  &lt;/div&gt;
&lt;/div&gt;

</div>
</div>

Ben Wills commented on Ben Wills's post over 3 years

I've managed to get something working now by applying some very 'hacky' custom classes to the block grid, which may help someone so i'm posting it here.  Its very purpose specific, so a better solution would be great for the future please Rafi :)
So i'm using 2 columns only in medium and 3, 4 or 5 in large.
If its an odd number of blocks I apply the .medium-odd class.
Then I add either .large-shift-1, .large-shift-2, .large-shift-3 or .large-shift-4 depending on the number of 'empty' blocks on the last line.
@media screen and (min-width: 40em) {
.large-shift-1 > .column, .large-shift-2 > .column, .large-shift-3 > .column, .large-shift-1 > .columns, .large-shift-2 > .columns, .large-shift-3 > .columns {
margin-left: 0; }
.medium-odd > .column:last-child, .medium-odd > .columns:last-child {
margin-left: 25%; }
}

@media screen and (min-width: 64em) {
.medium-odd > .column:last-child, .medium-odd > .columns:last-child {
margin-left: 0; }
.large-up-3.large-shift-1 > .column:nth-last-child(2), .large-up-3.large-shift-1 > .columns:nth-last-child(2) {
margin-left: 16.6666666665%; }
.large-up-3.large-shift-2 > .column:last-child, .large-up-3.large-shift-2 > .columns:last-child {
margin-left: 33.3333333333%; }
.large-up-4.large-shift-1 > .column:nth-last-child(3), .large-up-4.large-shift-1 > .columns:nth-last-child(3) {
margin-left: 12.5%; }
.large-up-4.large-shift-2 > .column:nth-last-child(2), .large-up-4.large-shift-2 > .columns:nth-last-child(2) {
margin-left: 25%; }
.large-up-4.large-shift-3 > .column:last-child, .large-up-4.large-shift-3 > .columns:last-child {
margin-left: 37.5%; }
.large-up-5.large-shift-1 > .column:nth-last-child(4), .large-up-5.large-shift-1 > .columns:nth-last-child(4) {
margin-left: 10%; }
.large-up-5.large-shift-2 > .column:nth-last-child(3), .large-up-5.large-shift-2 > .columns:nth-last-child(3) {
margin-left: 20%; }
.large-up-5.large-shift-3 > .column:nth-last-child(2), .large-up-5.large-shift-3 > .columns:nth-last-child(2) {
margin-left: 30%; }
.large-up-5.large-shift-4 > .column:last-child, .large-up-5.large-shift-4 > .columns:last-child {
margin-left: 40%; }
}

Ben Wills commented on Ben Wills's post over 3 years

Thanks Carlo, thats perfect!

Ben Wills commented on Ben Wills's post over 3 years

Hi Rafi

Not sure what you mean by 'production flag'?

There are some items that clash, mainly things like global radius', typography and core styling, but also because it uses a custom version of bootstrap, things like the pagination also conflict.

I'm trying to iron out which styles are the main issues, but its not top of my list at present.

Thanks

Ben

Ben Wills commented on Ben Wills's post over 3 years

Hi Rafi,

Ok can you please explain to me what i'm doing wrong, there is a live site here: http://preview.funzoneatprioryprep.co.uk

I just can't get this to work.

Thanks

Ben

Ben Wills commented on Ben Wills's post over 3 years

Almost works, but... the top-bar dropdown menu submenus show up hovered right with right arrows not dropdown with down arrows?

Ben Wills commented on Ben Wills's post over 3 years

Hi Thanks, it seems that it wont work without the bottom anchor specified? very strange, but working through this helped me solve my issue.

Posts Followed



Following

    No Content

Followers

My Posts







My Comments

You commented on Ben Wills's post over 2 years

Hi Rafi, thanks but i'd tried that.  My code is below, but basically i need the .canvas-ribbons to move from the header to the bottom, but at present the overflow the bottom before they stop :( adding stick-to-bottom just sticks them to the bottom of the header without them moving at all.
This is where they start:

This is where they should finish:

but they carry on to here:

<div data-sticky-container>

&lt;div data-sticky data-top-anchor="header" data-btm-anchor="header:bottom" style="width:100%;"&gt;
  &lt;div class="canvas-ribbon connect" data-open="offCanvasLeft"&gt;&lt;img src="img/connect-ribbon.png" alt="Connect"/&gt;&lt;/div&gt;
  &lt;div class="canvas-ribbon diary" data-open="offCanvasRight"&gt;&lt;img src="img/diary-ribbon.png" alt="What's On?"/&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;header id="header"&gt;

  &lt;div class="row logo show-for-medium-up"&gt;
    &lt;div class="small-12 columns text-center"&gt;
      &lt;a href="/"&gt;&lt;img src="img/harvest-white.png" alt="Harvest"/&gt;&lt;/a&gt;
      &lt;a href="/" class="show-for-small-only"&gt;&lt;img src="img/harvest-icon.png" alt="Harvest"/&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div id="welcome" class="row welcome"&gt;
    &lt;div class="small-12 columns text-center"&gt;
      &lt;img src="img/welcome.png" alt="Welcome"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/header&gt;

&lt;nav data-sticky data-margin-top="0" data-top-anchor="header:bottom" style="width:100%"&gt;
 &lt;div class="top-bar show-for-medium" id="primary-menu"&gt;
    &lt;div class="top-bar-left"&gt;
        &lt;ul class="medium-horizontal vertical menu dropdown" data-responsive-menu="accordion medium-dropdown" role="menubar" data-dropdown-menu="xs67uf-dropdown-menu" data-mutate="v26dnx-responsive-menu" data-events="mutate"&gt;
        &lt;li class="active active-path hide-for-medium-only" role="menuitem"&gt;&lt;a href="http://harvest:8888/index.php" target="_self" class="active active-path hide-for-medium-only"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li class="has-submenu is-dropdown-submenu-parent opens-right" role="menuitem" aria-haspopup="true" aria-label="Who We Are" data-is-click="false"&gt;&lt;a href="http://harvest:8888/index.php/who-we-are" target="_self" class="has-submenu"&gt;Who We Are&lt;/a&gt;&lt;ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" role="menu" style=""&gt;&lt;li class="" role="menuitem"&gt;&lt;a href="http://harvest:8888/index.php/diary" target="_self" class=""&gt;Diary&lt;/a&gt;&lt;/li&gt;        &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&lt;section class="content"&gt; 
&lt;div class="row"&gt;
  &lt;div class="small-12 columns"&gt;
    &lt;h1&gt;Page Title: Lorem ipsum dolor sit amet&lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

</div>

You commented on Kevin Neal's post over 2 years

Hi Kevin, I know this is an old post, but it's still relevant.  No idea how to use GIT etc, so maybe someone else can submit a pull request, but there are a number of places in the foundation js where it states:
match(/(reveal-for-medium|reveal-for-large)/g)[0].split('-')[2];
by finding and replacing on this with:
match(/(reveal-for-medium|reveal-for-large|reveal-for-xlarge)/g)[0].split('-')[2];
I was able to get this working. Hope this helps someone.

You commented on Vlasta Novak's post about 3 years

Any ideas how I do this in F6? Thanks

You commented on Ben Wills's post over 3 years

Hi Rafi
 
I think what i'm getting at was missed, this is what i'm trying to achieve, do you think its possible?
<div class="row">
<div class="column outer">

&lt;div class="row"&gt;
  &lt;div class="column inner"&gt;
    Standard content
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="row expanded"&gt;
  &lt;div class="column inner"&gt;
    Full screen width content
  &lt;/div&gt;
&lt;/div&gt;


&lt;div class="row"&gt;
  &lt;div class="column inner"&gt;
    Standard content
  &lt;/div&gt;
&lt;/div&gt;

</div>
</div>

You commented on Ben Wills's post over 3 years

I've managed to get something working now by applying some very 'hacky' custom classes to the block grid, which may help someone so i'm posting it here.  Its very purpose specific, so a better solution would be great for the future please Rafi :)
So i'm using 2 columns only in medium and 3, 4 or 5 in large.
If its an odd number of blocks I apply the .medium-odd class.
Then I add either .large-shift-1, .large-shift-2, .large-shift-3 or .large-shift-4 depending on the number of 'empty' blocks on the last line.
@media screen and (min-width: 40em) {
.large-shift-1 > .column, .large-shift-2 > .column, .large-shift-3 > .column, .large-shift-1 > .columns, .large-shift-2 > .columns, .large-shift-3 > .columns {
margin-left: 0; }
.medium-odd > .column:last-child, .medium-odd > .columns:last-child {
margin-left: 25%; }
}

@media screen and (min-width: 64em) {
.medium-odd > .column:last-child, .medium-odd > .columns:last-child {
margin-left: 0; }
.large-up-3.large-shift-1 > .column:nth-last-child(2), .large-up-3.large-shift-1 > .columns:nth-last-child(2) {
margin-left: 16.6666666665%; }
.large-up-3.large-shift-2 > .column:last-child, .large-up-3.large-shift-2 > .columns:last-child {
margin-left: 33.3333333333%; }
.large-up-4.large-shift-1 > .column:nth-last-child(3), .large-up-4.large-shift-1 > .columns:nth-last-child(3) {
margin-left: 12.5%; }
.large-up-4.large-shift-2 > .column:nth-last-child(2), .large-up-4.large-shift-2 > .columns:nth-last-child(2) {
margin-left: 25%; }
.large-up-4.large-shift-3 > .column:last-child, .large-up-4.large-shift-3 > .columns:last-child {
margin-left: 37.5%; }
.large-up-5.large-shift-1 > .column:nth-last-child(4), .large-up-5.large-shift-1 > .columns:nth-last-child(4) {
margin-left: 10%; }
.large-up-5.large-shift-2 > .column:nth-last-child(3), .large-up-5.large-shift-2 > .columns:nth-last-child(3) {
margin-left: 20%; }
.large-up-5.large-shift-3 > .column:nth-last-child(2), .large-up-5.large-shift-3 > .columns:nth-last-child(2) {
margin-left: 30%; }
.large-up-5.large-shift-4 > .column:last-child, .large-up-5.large-shift-4 > .columns:last-child {
margin-left: 40%; }
}

You commented on Ben Wills's post over 3 years

Thanks Carlo, thats perfect!

You commented on Ben Wills's post over 3 years

Hi Rafi

Not sure what you mean by 'production flag'?

There are some items that clash, mainly things like global radius', typography and core styling, but also because it uses a custom version of bootstrap, things like the pagination also conflict.

I'm trying to iron out which styles are the main issues, but its not top of my list at present.

Thanks

Ben

You commented on Ben Wills's post over 3 years

Hi Rafi,

Ok can you please explain to me what i'm doing wrong, there is a live site here: http://preview.funzoneatprioryprep.co.uk

I just can't get this to work.

Thanks

Ben

You commented on Ben Wills's post over 3 years

Almost works, but... the top-bar dropdown menu submenus show up hovered right with right arrows not dropdown with down arrows?

You commented on Ben Wills's post over 3 years

Hi Thanks, it seems that it wont work without the bottom anchor specified? very strange, but working through this helped me solve my issue.

Posts Followed


Following

  • No Content

Followers

  • No Content