-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (75 loc) · 3.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html>
<head>
<title>Polymer Error Demo</title>
<!-- Comment out platform.js and Foundation topbar menu button will open correctly -->
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-tooltip/core-tooltip.html" />
<link rel="stylesheet" type="text/css" href="bower_components/foundation/css/foundation.css">
</head>
<body unresolved touch-action>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu button not working</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><a href="#">Left Nav Button</a></li>
</ul>
</section>
</nav>
<div class="row">
<div class="columns">
<p>
Once platform.js is included at the top of the page, Foundation 5's topbar doesn't open the collapsable menu buttons for the small (mobile) screen size in Firefox and Safari. Nor does Foundation's modal reveal work. Firefox used to log a jQuery error similar to Safari but I may have recently updated Firefox so no errors are logging out anymore. However, topbar still doesn't work.
</p>
<p>
Platform.js causes the following error in Safari 6 when clicking anywhere on the page: <br />
<small><em>TypeError: 'undefined' is not a function (evaluating 'elem.getAttribute( name )') for jquery on line: 1430</em></small>
</p>
<!-- Core tooltip example -->
<core-tooltip label="I'm a polymer tooltip">
<span>Polymer core-tooltip example</span>
</core-tooltip>
<hr />
<div>
<a href="#" data-reveal-id="myModal">Clicking this should open a modal</a>
</div>
</div>
</div>
<!-- Foundation modal example -->
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- Edited Foundation libary swapping out all `document.body` with `document.querySelector('body') -->
<script src="scripts/foundation-custom.js"></script>
<!--
<script src="bower_components/foundation/js/foundation/foundation.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.topbar.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.reveal.js"></script>
-->
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>