Menu icon Foundation

My Posts

  • 6
    Replies
  • Reflow

    By Trevor West

    Reflow

    Had some issues with this one earlier, thought this might help some others out. There doesn't seem to be a good spot in the docs for this feature. From what I understand without reading the foundation javascript file (lazy) you want to fire this badbo... (continued)

    Last Reply by Jack Lena about 1 month ago



  • 17
    Replies
  • IE9 Off Canvas

    By Trevor West

    IE9off-canvas

    So I am trying to get the off canvas to work in IE9. The off canvas aside (hidden content) is appearing overtop. I have the tab bar at the bottom of the content, I just rearranged the HTML to get it there. I tried switching the order and same issue.

    Last Reply by Toby Stokes over 3 years ago


My Comments

Trevor West commented on Trevor West's post over 3 years

http://webdesign.tutsplus.com/articles/build-a-top-bar-off-canvas-navigation-with-foundation-5--webdesign-17767

This is a helpful blog post if anyone is messing with the top bar off canvas thing.

Trevor West commented on Richard Longmuir's post over 3 years

Put

$(document).foundation();

at the end of your document. Along with all of your javascript I would suggest.

Trevor West commented on Trevor West's post almost 4 years

Nice one Cliff.

Trevor West commented on James Cocker's post almost 4 years

I have to support IE8 and 7 also I am just going to do something simple like this with PHP

function foundationVersion() {
preg_match('/MSIE (.*?);/', $_SERVER['HTTP_USER_AGENT'], $matches);
if (count($matches) > 1) {
$foundation = ($matches[1] <= 8) ? 4 : 5;
} else {
$foundation = 5;
}
return $foundation;
}

I will load foundation 4 and 5 depending on the browser. The syntax of 4 and 5 is almost identical and shouldn't be too hard to just switch the javascript/css files around.

Trevor West commented on Trevor West's post almost 4 years

I am not sure if anyone else is having this issue but I came up with an easy fix.

in header
<!--[if lt IE 10]>
public/css/ie9.css" rel="stylesheet">
<![endif]-->

In footer

<!--[if lt IE 10]>
public/js/ie9.js">
<![endif]-->

ie9.css

.right-off-canvas-menu {
width:0;
z-index:1005;
}

ie9.js

(function ( $ ) {
var width;
var csToggle = false;

$('.off-canvas-wrap').on('click', '.right-off-canvas-toggle, .exit-off-canvas', function() {
  width = (csToggle) ? 0 : 250;
  csToggle = (csToggle) ? false : true;

  $('#calendar-settings').animate({
    width: width+'px'
  });

  $('.main-section, .tab-bar').animate({
    left: '-'+width+'px'
  });
});

}( jQuery ));

Trevor West commented on Trevor West's post almost 4 years

I should have mentioned this is how it loads before the button to make the off canvas appear has been pressed. By default it is overlapping.

Posts Followed

No Content

Following

    No Content

Followers

My Posts




My Comments

You commented on Trevor West's post over 3 years

http://webdesign.tutsplus.com/articles/build-a-top-bar-off-canvas-navigation-with-foundation-5--webdesign-17767

This is a helpful blog post if anyone is messing with the top bar off canvas thing.

You commented on Richard Longmuir's post over 3 years

Put

$(document).foundation();

at the end of your document. Along with all of your javascript I would suggest.

You commented on Trevor West's post almost 4 years

Nice one Cliff.

You commented on James Cocker's post almost 4 years

I have to support IE8 and 7 also I am just going to do something simple like this with PHP

function foundationVersion() {
preg_match('/MSIE (.*?);/', $_SERVER['HTTP_USER_AGENT'], $matches);
if (count($matches) > 1) {
$foundation = ($matches[1] <= 8) ? 4 : 5;
} else {
$foundation = 5;
}
return $foundation;
}

I will load foundation 4 and 5 depending on the browser. The syntax of 4 and 5 is almost identical and shouldn't be too hard to just switch the javascript/css files around.

You commented on Trevor West's post almost 4 years

I am not sure if anyone else is having this issue but I came up with an easy fix.

in header
<!--[if lt IE 10]>
public/css/ie9.css" rel="stylesheet">
<![endif]-->

In footer

<!--[if lt IE 10]>
public/js/ie9.js">
<![endif]-->

ie9.css

.right-off-canvas-menu {
width:0;
z-index:1005;
}

ie9.js

(function ( $ ) {
var width;
var csToggle = false;

$('.off-canvas-wrap').on('click', '.right-off-canvas-toggle, .exit-off-canvas', function() {
  width = (csToggle) ? 0 : 250;
  csToggle = (csToggle) ? false : true;

  $('#calendar-settings').animate({
    width: width+'px'
  });

  $('.main-section, .tab-bar').animate({
    left: '-'+width+'px'
  });
});

}( jQuery ));

You commented on Trevor West's post almost 4 years

I should have mentioned this is how it loads before the button to make the off canvas appear has been pressed. By default it is overlapping.

Posts Followed

No Content

Following

  • No Content

Followers