Skip to content

Instantly share code, notes, and snippets.

@zxkane

zxkane/foundation-magellan-not-working.html

Last active December 30, 2015 13:49
Show Gist options
  • Save zxkane/7838623 to your computer and use it in GitHub Desktop.
Save zxkane/7838623 to your computer and use it in GitHub Desktop.
Download ZIP
Try to use Foundation Magellan on a normal div. It only works properly when the scrollable content is very long. It does not work if the content only exceeds size of window a bit.
Raw
foundation-magellan-not-working.html
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Foundation - Magellan - Testing</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/normalize.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/vendor/custom.modernizr.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/vendor/jquery.min.js"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=5aaddbae69513573cd7f693bbdcbe12a"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment-with-langs.min.js"></script>
</head>
<body>
<!-- Header and Nav -->
<nav id="nav" class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Foundation Magellan
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Sitemap</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active" ><a href="#">Item1</a></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li><a href="#">Login</a></li>
</ul>
</section>
</nav>
<!-- End Header and Nav -->
<!-- Main Feed -->
<section role="main">
<div data-magellan-expedition="fixed">
<div data-magellan-arrival="js">
<div id="calendar" class="row">
<dl id="calendar-per-day" class="sub-nav">
<script>
function addMonth(monthstr) {
var monthItem = jQuery('<dt/>', {});
monthItem.append("<strong><sup>" + monthstr + "</sup></strong>");
monthItem.appendTo($(".sub-nav"));
}
var starttime = moment("Sat 07 Dec 2013");
var endtime = moment("Sun 08 Dec 2013");
var m = moment();
var thismonth = m.month();
addMonth(m.lang('zh_CN').format('MMM'));
for (var i = 0; i < 30; i++) {
if (m.month() != thismonth) {
addMonth(m.lang('zh_CN').format('MMM'));
thismonth = m.month();
}
var dayItem = jQuery('<dd/>', {});
if (m.date() == starttime.date() && m.month() == starttime.month())
dayItem.attr('class', 'active');
contentTemplate = "<h5><a href=\"javascript:void(0);\" timestamp=\"" + m.valueOf() + "\">" + m.date() + "</a>";
contentTemplate += "</h5>";
dayItem.append(contentTemplate);
dayItem.appendTo($(".sub-nav"));
m.add('days', 1);
}
</script>
</dl>
<hr>
</div>
<div class="row">
<div class="large-12 columns">
<div id="baidumap"
style="height:300px; overflow: hidden; margin: 0;"></div>
</div>
</div>
</div>
</div>
<div data-magellan-destination="js" class="row">
<div class="large-9 columns">
<p>
Why Foundation?
Foundation is the first and most advanced responsive, front-end framework in the world.
Millions of designers and engineers use Foundation in their workflows. It was the first framework to introduce the concepts of responsive design, semantics, mobile first and partials. Foundation is the professional choice for designers and engineers.
Why Foundation is Awesome
Foundation Support
Your safety net when it comes to using our framework.
Foundation has grown over the last two years at a tremendous pace — millions of designers and engineers worldwide are using Foundation to build their product and website front ends. Our support services will keep your company worry free so you can focus on building your products and growing your business. Reach out to [email protected] if you’re interested in using our support services.
Individual
For a designer or engineer who needs support.
Help Desk
Email only
10 Incidents
7AM-7PM PST, Mon-Fri
Response Time: 48 Hours
Business Support
This solution is necessary for businesses that have built their product stack on Foundation. We offer three different levels of support for companies and teams.
Basic Team
Email, 1 Priority Call
10 Incidents
7AM-7PM PST, Mon-Fri
Response Time: 24 Hours
Priority Call: 4 Hours
Plus Team
Email, 3 Priority Calls
30 Incidents
7AM-7PM PST, Mon-Fri
Response Time: 12 Hours
Priority Call: 2 Hours
Premium Team
Email, 10 Priority Calls
100 Incidents
7AM-7PM PST, 7 Days a Week
Response Time: 4 Hours
Dedicated Support Manager
If you’re interested in Foundation support services, reach out to [email protected].
Foundation Engineering Studios
Helping you build your marketing site, application or HTML email.
Foundation is a powerful responsive framework for building the front end of your applications and websites. Your users will feel the power across their mobile devices and desktops. We built Foundation to solve problems for our clients at ZURB, and we want to help you use this power in your products and services. Our product engineering services will help you build the front end of your responsive marketing site, application or HTML email. Reach out to [email protected] if you’re interested in getting a project started.
</p>
</div>
<div class="large-3 columns">
<div class="row">
<div class="large-11 large-centered columns">
<h4>Right side content</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-5 columns">
<p>&copy; 2013 All Rights Reserved</p>
</div>
<div class="large-7 columns">
<ul class="inline-list right">
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</div>
</footer>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.magellan.min.js"></script>
<script>
$(document).foundation();
var map = new BMap.Map("baidumap");
$(document).ready(
function() {
$("#baidumap").css("height", 300);
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.enableScrollWheelZoom(true);
map.centerAndZoom('北京');
});
</script>
</body>
</html>
Raw
foundation-magellan-working-with-longcontent.html
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Foundation - Magellan - Testing</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/normalize.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/vendor/custom.modernizr.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/vendor/jquery.min.js"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=5aaddbae69513573cd7f693bbdcbe12a"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment-with-langs.min.js"></script>
</head>
<body>
<!-- Header and Nav -->
<nav id="nav" class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Foundation Magellan
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Sitemap</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active" ><a href="#">Item1</a></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li><a href="#">Login</a></li>
</ul>
</section>
</nav>
<!-- End Header and Nav -->
<!-- Main Feed -->
<section role="main">
<div data-magellan-expedition="fixed">
<div data-magellan-arrival="js">
<div id="calendar" class="row">
<dl id="calendar-per-day" class="sub-nav">
<script>
function addMonth(monthstr) {
var monthItem = jQuery('<dt/>', {});
monthItem.append("<strong><sup>" + monthstr + "</sup></strong>");
monthItem.appendTo($(".sub-nav"));
}
var starttime = moment("Sat 07 Dec 2013");
var endtime = moment("Sun 08 Dec 2013");
var m = moment();
var thismonth = m.month();
addMonth(m.lang('zh_CN').format('MMM'));
for (var i = 0; i < 30; i++) {
if (m.month() != thismonth) {
addMonth(m.lang('zh_CN').format('MMM'));
thismonth = m.month();
}
var dayItem = jQuery('<dd/>', {});
if (m.date() == starttime.date() && m.month() == starttime.month())
dayItem.attr('class', 'active');
contentTemplate = "<h5><a href=\"javascript:void(0);\" timestamp=\"" + m.valueOf() + "\">" + m.date() + "</a>";
contentTemplate += "</h5>";
dayItem.append(contentTemplate);
dayItem.appendTo($(".sub-nav"));
m.add('days', 1);
}
</script>
</dl>
<hr>
</div>
<div class="row">
<div class="large-12 columns">
<div id="baidumap"
style="height:300px; overflow: hidden; margin: 0;"></div>
</div>
</div>
</div>
</div>
<div data-magellan-destination="js" class="row">
<div class="large-9 columns">
<p>
Why Foundation?
Foundation is the first and most advanced responsive, front-end framework in the world.
Millions of designers and engineers use Foundation in their workflows. It was the first framework to introduce the concepts of responsive design, semantics, mobile first and partials. Foundation is the professional choice for designers and engineers.
Why Foundation is Awesome
Foundation Support
Your safety net when it comes to using our framework.
Foundation has grown over the last two years at a tremendous pace — millions of designers and engineers worldwide are using Foundation to build their product and website front ends. Our support services will keep your company worry free so you can focus on building your products and growing your business. Reach out to [email protected] if you’re interested in using our support services.
Individual
For a designer or engineer who needs support.
Help Desk
Email only
10 Incidents
7AM-7PM PST, Mon-Fri
Response Time: 48 Hours
Business Support
This solution is necessary for businesses that have built their product stack on Foundation. We offer three different levels of support for companies and teams.
Basic Team
Email, 1 Priority Call
10 Incidents
7AM-7PM PST, Mon-Fri
Response Time: 24 Hours
Priority Call: 4 Hours
Plus Team
Email, 3 Priority Calls
30 Incidents
7AM-7PM PST, Mon-Fri
Response Time: 12 Hours
Priority Call: 2 Hours
Premium Team
Email, 10 Priority Calls
100 Incidents
7AM-7PM PST, 7 Days a Week
Response Time: 4 Hours
Dedicated Support Manager
If you’re interested in Foundation support services, reach out to [email protected].
Foundation Engineering Studios
Helping you build your marketing site, application or HTML email.
Foundation is a powerful responsive framework for building the front end of your applications and websites. Your users will feel the power across their mobile devices and desktops. We built Foundation to solve problems for our clients at ZURB, and we want to help you use this power in your products and services. Our product engineering services will help you build the front end of your responsive marketing site, application or HTML email. Reach out to [email protected] if you’re interested in getting a project started.
</p>
<p>
Why Foundation?
Foundation is the first and most advanced responsive, front-end framework in the world.
Millions of designers and engineers use Foundation in their workflows. It was the first framework to introduce the concepts of responsive design, semantics, mobile first and partials. Foundation is the professional choice for designers and engineers.
Why Foundation is Awesome
Foundation Support
Your safety net when it comes to using our framework.
Foundation has grown over the last two years at a tremendous pace — millions of designers and engineers worldwide are using Foundation to build their product and website front ends. Our support services will keep your company worry free so you can focus on building your products and growing your business. Reach out to [email protected] if you’re interested in using our support services.
Individual
For a designer or engineer who needs support.
Help Desk
Email only
10 Incidents
7AM-7PM PST, Mon-Fri
Response Time: 48 Hours
Business Support
This solution is necessary for businesses that have built their product stack on Foundation. We offer three different levels of support for companies and teams.
Basic Team
Email, 1 Priority Call
10 Incidents
7AM-7PM PST, Mon-Fri
Response Time: 24 Hours
Priority Call: 4 Hours
Plus Team
Email, 3 Priority Calls
30 Incidents
7AM-7PM PST, Mon-Fri
Response Time: 12 Hours
Priority Call: 2 Hours
Premium Team
Email, 10 Priority Calls
100 Incidents
7AM-7PM PST, 7 Days a Week
Response Time: 4 Hours
Dedicated Support Manager
If you’re interested in Foundation support services, reach out to [email protected].
Foundation Engineering Studios
Helping you build your marketing site, application or HTML email.
Foundation is a powerful responsive framework for building the front end of your applications and websites. Your users will feel the power across their mobile devices and desktops. We built Foundation to solve problems for our clients at ZURB, and we want to help you use this power in your products and services. Our product engineering services will help you build the front end of your responsive marketing site, application or HTML email. Reach out to [email protected] if you’re interested in getting a project started.
</p>
</div>
<div class="large-3 columns">
<div class="row">
<div class="large-11 large-centered columns">
<h4>Right side content</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-5 columns">
<p>&copy; 2013 All Rights Reserved</p>
</div>
<div class="large-7 columns">
<ul class="inline-list right">
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</div>
</footer>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.magellan.min.js"></script>
<script>
$(document).foundation();
var map = new BMap.Map("baidumap");
$(document).ready(
function() {
$("#baidumap").css("height", 300);
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.enableScrollWheelZoom(true);
map.centerAndZoom('北京');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment