Skip to content
This repository has been archived by the owner on Feb 18, 2020. It is now read-only.

Commit

Permalink
Revved to 1.4.0.
Browse files Browse the repository at this point in the history
  • Loading branch information
Anthony Colangelo committed Nov 11, 2014
1 parent 901f548 commit a822f0f
Show file tree
Hide file tree
Showing 8 changed files with 1,136 additions and 40 deletions.
30 changes: 20 additions & 10 deletions README.md
View file
@@ -1,8 +1,8 @@
#<a id="docs" href="#docs">jPanelMenu</a>

###Version 1.3.0
###Version 1.4.0

jPanelMenu is a [jQuery](http://jquery.com) plugin that creates a paneled-style menu (like the type seen in the mobile versions of [Facebook](http://m.facebook.com) and [Google](http://google.com), as well as in many native iPhone applications).
jPanelMenu is a [jQuery](http://jquery.com) plugin for easily creating and managing off-canvas content.

Check out the [demo (and documentation) site](http://jpanelmenu.com) to see it in action.

Expand Down Expand Up @@ -43,7 +43,7 @@ When jPanelMenu is [turned on](#api-on), two `<div>` elements are created. The m

The menu, `#jPanelMenu-menu`, contains the elements targeted by the menu selector passed into the jPanelMenu constructor function. By default, the targeted menu element is cloned into `#jPanelMenu-menu`, and is not removed from its original position in the DOM. This action can be overridden with the [`clone`](#options-clone) option.

The panel, `.jPanelMenu-panel`, contains all of the content in the `<body>` element (except for the elements specified by the [`excludedPanelContent`](#options-excludedPanelContent) option). The selected content is moved, not cloned, into `.jPanelMenu-panel`.
The panel, `.jPanelMenu-panel`, contains all of the content in the element specified by the [`panel`](#options-panel) option (except for the elements specified by the [`excludedPanelContent`](#options-excludedPanelContent) option). The selected content is moved, not cloned, into `.jPanelMenu-panel`.

To style or select the menu, use the following selector: `#jPanelMenu-menu`.

Expand Down Expand Up @@ -348,8 +348,6 @@ Called after the plugin is turned off (when [`off( )`](#api-off) is called).
- **Data Type:** `function`
- **Default Value:** `function(){ }`



#<a id="api" href="#api">API</a>

The following are the methods and properties of the object returned by the jPanelMenu constructor function call. In the following example, these would be the methods and properties of `jPM`.
Expand Down Expand Up @@ -527,16 +525,28 @@ Check out the [example](http://jpanelmenu.com/examples/jrespond) of how to use j

jPanelMenu is distributed freely under the [MIT License](http://opensource.org/licenses/MIT), so you&rsquo;re free to use this plugin on any and all projects.

And please, [let me know](http://acolangelo.com/contact) when you launch something using jPanelMenu. I&rsquo;d love to see examples of it being used in the wild!
#<a href="#changelog" id="#changelog">Changelog</a>

###<a href="#changelog-1.4.0" id="changelog-1.4.0">1.4.0</a>

#<a href="#changelog" id="#changelog">Changelog</a>
November 11th, 2014

- Added [`panel`](#options-panel) option.
- Added [`clone`](#options-clone) option.
- Added [`setPosition(&nbsp;)`](#api-setPosition) API method.
- Removed support for fixed positioning within the panel. CSS transforms and fixed positioning [do not get along well, per the spec](http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/). If fixed positioning is needed, use [the legacy build](https://github.com/acolangelo/jPanelMenu/blob/master/jquery.jpanelmenu-legacy.js) in the jPanelMenu repository.
- Updated `.jPanelMenu-panel` to be positioned statically.
- Updated background handling so that all properties are transferred to the `.jPanelMenu-panel` appropriately.
- Updated key press preventers to include typing within a `<select>` field.
- Fixed event propagation up to the document.
- Fixed an issue causing links under the menu button to be triggered inadvertently.
- Fixed an issue with loop styles and the Ember.js framework.

###<a href="#changelog-1.3.0" id="changelog-1.3.0">1.3.0</a>

February 4th, 2013

- Added new option: [`closeOnContentClick`](#options-closeOnContentClick)
- Added [`closeOnContentClick`](#options-closeOnContentClick) option.

###<a href="#changelog-1.2.0" id="changelog-1.2.0">1.2.0</a>

Expand Down Expand Up @@ -567,10 +577,10 @@ November 4th, 2012

#<a href="#about" id="#about">Who Made This Wonderful Little Plugin?</a>

jPanelMenu was created, and is maintained, by [Anthony Colangelo](http://acolangelo.com), a developer at [Happy Cog](http://happycog.com).
jPanelMenu was created, and is maintained, by [Anthony Colangelo](http://acolangelo.com).

You can find him ([@acolangelo](https://twitter.com/acolangelo)) on [Twitter](https://twitter.com/acolangelo) and [Github](https://github.com/acolangelo).

Have a question about how jPanelMenu works that is not answered here? Have feedback for new features, options, or API functions that I should add? Anything else you want to talk about?

Talk to me on [Twitter](https://twitter.com/acolangelo), where I am [@acolangelo](https://twitter.com/acolangelo), or , and let&rsquo;s talk!
Talk to me on [Twitter](https://twitter.com/acolangelo), where I am [@acolangelo](https://twitter.com/acolangelo), and let&rsquo;s talk!
1 change: 1 addition & 0 deletions docs/Gruntfile.js
View file
Expand Up @@ -45,6 +45,7 @@ module.exports = function(grunt){
// Include:
'js/lib/modernizr-2.6.1.min.js',
'js/lib/respond.js',
'js/lib/jRespond.js',
'js/lib/highlight.min.js',
'js/lib/jquery-1.9.0.js',
'../jquery.jpanelmenu.js',
Expand Down
12 changes: 2 additions & 10 deletions docs/examples/jrespond/index.html
View file
Expand Up @@ -39,10 +39,6 @@ <h1 class="logo"><a href="../../index.html" class="ss-list">jPanelMenu</a></h1>
<section class="intro">
<h2 id="overview"><a href="#">Using jRespond with jPanelMenu</a></h2>

<p><a href="http://www.abookapart.com/products/responsive-web-design">Responsive design</a> is an amazing revolution in our industry. It&rsquo;s changing every part of our process &mdash; definition, planning, design, development, and beyond. But, as we all know, design is only one part of the equation.</p>

<p>Responsive behavior is a big thing that no one is talking about, but everyone needs to be. I&rsquo;ve tried a few different things to accomplish this, but the best thing I&rsquo;ve found is <a href="https://github.com/ten1seven/jRespond" title="jRespond | Github">jRespond</a>.</p>

<p>jRespond is &ldquo;a simple way to globally manage JavaScript on responsive websites.&rdquo; It&rsquo;s really straightforward to use, and it makes a world of difference in your JavaScript on responsive sites.</p>

<p>jPanelMenu and jRespond are the perfect couple. Many people want the functionality that jPanelMenu provides, but only at smaller sizes (this page, for example). jRespond is there to help accomplish that task, and it couldn&rsquo;t be easier to do.</p>
Expand Down Expand Up @@ -106,13 +102,9 @@ <h2 id="functionality"><a href="#functionality">Adding Functionality</a></h2>
<section>
<h2 id="about"><a href="#about">Who Made This Wonderful Little Plugin?</a></h2>

<p>jPanelMenu was created, and is maintained, by <a href="http://acolangelo.com" title="Anthony Colangelo | Web Design &amp; Development">Anthony Colangelo</a>, a developer at <a href="http://happycog.com">Happy Cog</a>.</p>
<p>jPanelMenu was created, and is maintained, by <a href="http://acolangelo.com" title="Anthony Colangelo | Web Design &amp; Development">Anthony Colangelo</a>.</p>

<p>You can find him (<a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">@acolangelo</a>) on <a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">Twitter</a> and <a href="https://github.com/acolangelo" title="Github | Anthony Colangelo (@acolangelo)">Github</a>.</p>

<p>Have a question about how jPanelMenu works that is not answered here? Have feedback for new features, options, or API functions that I should add? Anything else you want to talk about?</p>

<p>Talk to me on <a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">Twitter</a>, where I am <a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">@acolangelo</a>, or <a href="http://acolangelo.com/contact" title="Anthony Colangelo | Web Design &amp; Development | Contact">send me a message</a>, and let&rsquo;s talk!.</p>
</section>
</div>

Expand Down Expand Up @@ -143,4 +135,4 @@ <h2 id="about"><a href="#about">Who Made This Wonderful Little Plugin?</a></h2>
-->
<script src="../../js/example-jRespond.min.js"></script>
</body>
</html>
</html>
38 changes: 25 additions & 13 deletions docs/index.html
View file
Expand Up @@ -42,15 +42,14 @@ <h1 class="logo"><a href="." class="ss-list">jPanelMenu</a></h1>

<div class="content">
<section class="intro">
<h2 id="overview"><a href="#">Version 1.3.0</a></h2>
<h2 id="overview"><a href="#">Version 1.4.0</a></h2>
<div class="text">
<p>jPanelMenu is a <a href="http://jquery.com">jQuery</a> plugin that creates a paneled-style menu (like the type seen in the mobile versions of <a href="http://m.facebook.com">Facebook</a> and <a href="http://google.com">Google</a>, as well as in many native iPhone applications).</p>
<p>jPanelMenu is a <a href="http://jquery.com">jQuery</a> plugin for easily creating and managing off-canvas content.</p>
<p class="jPM-specific">Just click on the menu button (the top left of this page) to see it in action.</p>
<p>Check out the <a href="#changelog">changelog</a> to see what&rsquo;s new in version 1.3.0.</p>
<p>Check out the <a href="#changelog">changelog</a> to see what&rsquo;s new.</p>
</div>
<div class="download">
<p><a href="../jquery.jpanelmenu.min.js" title="jPanelMenu 1.3.0 (Minifed)" class="button ss-download">Download jPanelMenu</a></p>
<p>Download the <a href="../jquery.jpanelmenu.js" title="">unminifed version</a>.</p>
<p><a href="jquery.jpanelmenu.js" title="jPanelMenu 1.4.0" class="button ss-download">Download jPanelMenu</a></p>
<p>Or <a href="https://github.com/acolangelo/jPanelMenu" title="Github | jPanelMenu">view the project on Github</a></p>
</div>
</section>
Expand Down Expand Up @@ -89,7 +88,7 @@ <h2 id="inner-workings"><a href="#inner-workings">How Does This Thing Work?</a><

<p>The menu, <code>#jPanelMenu-menu</code>, contains the elements targeted by the menu selector passed into the jPanelMenu constructor function. By default, the targeted menu element is cloned into <code>#jPanelMenu-menu</code>, and is not removed from its original position in the <abbr title="Document Object Model">DOM</abbr>. This action can be overridden with the <code><a href="#options-clone" title="jPanelMenu | Options| clone">clone</a></code> option.</p>

<p>The panel, <code>.jPanelMenu-panel</code>, contains all of the content in the <code>&lt;body&gt;</code> element (except for the elements specified by the <code><a href="#options-excludedPanelContent" title="jPanelMenu | Options| excludedPanelContent">excludedPanelContent</a></code> option). The selected content is moved, not cloned, into <code>.jPanelMenu-panel</code>.</p>
<p>The panel, <code>.jPanelMenu-panel</code>, contains all of the content in the element specified by the <code><a href="#options-panel" title="jPanelMenu | Options| panel">panel</a></code> option (except for the elements specified by the <code><a href="#options-excludedPanelContent" title="jPanelMenu | Options| excludedPanelContent">excludedPanelContent</a></code> option). The selected content is moved, not cloned, into <code>.jPanelMenu-panel</code>.</p>

<p>To style or select the menu, use the following selector: <code>#jPanelMenu-menu</code>.</p>

Expand Down Expand Up @@ -585,14 +584,31 @@ <h3 id="tips-jrespond"><a href="#tips-jrespond" title="jPanelMenu and jRespond &
<h2 id="license"><a href="#license">License</a></h2>

<p>jPanelMenu is distributed freely under the <a href="http://opensource.org/licenses/MIT" title="Open Source Initiative OSI &dash; The MIT License">MIT License</a>, so you&rsquo;re free to use this plugin on any and all projects.</p>

<p>And please, <a href="http://acolangelo.com/contact" title="Anthony Colangelo | Web Design &amp; Development | Contact">let me know</a> when you launch something using jPanelMenu. I&rsquo;d love to see examples of it being used in the wild!</p>
</section>

<section>
<h2 id="changelog"><a href="#changelog">Changelog</a></h2>

<dl>
<dt id="changelog-1.4.0"><a href="#changelog-1.4.0">1.4.0</a></dt>
<dd>
<p><time>November 11th, 2014</time></p>
<ul>
<li>Added new option: <code><a href="#options-closeOnContentClick" title="jPanelMenu | Options | closeOnContentClick">closeOnContentClick</a></code></li>

<li>Added <code><a href="#options-panel" title="jPanelMenu | Options | panel">panel</a></code> option.</li>
<li>Added <code><a href="#options-clone" title="jPanelMenu | Options | clone">clone</a></code> option.</li>
<li>Added <code><a href="#options-clone" title="jPanelMenu | API | setPosition">setPosition(&nbsp;)</a></code> API method.</li>
<li>Removed support for fixed positioning within the panel. CSS transforms and fixed positioning <a href="http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/">do not get along well, per the spec</a>. If fixed positioning is needed, use <a href="https://github.com/acolangelo/jPanelMenu/blob/master/jquery.jpanelmenu-legacy.js">the legacy build</a> in the jPanelMenu repository.</li>
<li>Updated <code>.jPanelMenu-panel</code> to be positioned statically.</li>
<li>Updated background handling so that all properties are transferred to the <code>.jPanelMenu-panel</code> appropriately.</li>
<li>Updated key press preventers to include typing within a <code>&lt;select&gt;</code> field.</li>
<li>Fixed event propagation up to the document.</li>
<li>Fixed an issue causing links under the menu button to be triggered inadvertently.</li>
<li>Fixed an issue with loop styles and the Ember.js framework.</li>
</ul>
</dd>

<dt id="changelog-1.3.0"><a href="#changelog-1.3.0">1.3.0</a></dt>
<dd>
<p><time>February 4th, 2013</time></p>
Expand Down Expand Up @@ -641,13 +657,9 @@ <h2 id="changelog"><a href="#changelog">Changelog</a></h2>
<section>
<h2 id="about"><a href="#about">Who Made This Wonderful Little Plugin?</a></h2>

<p>jPanelMenu was created, and is maintained, by <a href="http://acolangelo.com" title="Anthony Colangelo | Web Design &amp; Development">Anthony Colangelo</a>, a developer at <a href="http://happycog.com">Happy Cog</a>.</p>
<p>jPanelMenu was created, and is maintained, by <a href="http://acolangelo.com" title="Anthony Colangelo | Web Design &amp; Development">Anthony Colangelo</a>.</p>

<p>You can find him (<a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">@acolangelo</a>) on <a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">Twitter</a> and <a href="https://github.com/acolangelo" title="Github | Anthony Colangelo (@acolangelo)">Github</a>.</p>

<p>Have a question about how jPanelMenu works that is not answered here? Have feedback for new features, options, or API functions that I should add? Anything else you want to talk about?</p>

<p>Talk to me on <a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">Twitter</a>, where I am <a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">@acolangelo</a>, or <a href="http://acolangelo.com/contact" title="Anthony Colangelo | Web Design &amp; Development | Contact">send me a message</a>, and let&rsquo;s talk!</p>
</section>
</div>

Expand Down

0 comments on commit a822f0f

Please sign in to comment.