Skip to content

Commit

Permalink
prettying up README
Browse files Browse the repository at this point in the history
  • Loading branch information
Derek Perez committed Jun 19, 2009
1 parent 6a728a5 commit f56aec7
Showing 1 changed file with 6 additions and 12 deletions.
18 changes: 6 additions & 12 deletions README.textile
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,15 @@ h2. Setup

First, include these lines in your html files HEAD tag:

<pre><code>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<pre><code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.pageslide.min.js"></script>
</code></pre>

I recommend you use Google to host your jQuery library, but you can use the included one, or download it yourself.

Next, at the bottom of your html file, add the following

<pre><code>
<script type="text/javascript">
<pre><code><script type="text/javascript">
$("#my_anchor").pageSlide({width:'350px'});
</script>
</code></pre>
Expand All @@ -48,32 +46,28 @@ h3. Defining a custom close button in your slide

If you'd like to define a "close" button within your slide, simply add the class "pageslide-close" to any html element.

<pre><code>
<a href="javascript:;" class="pageslide-close">Close me!</a>
<pre><code><a href="javascript:;" class="pageslide-close">Close me!</a>
</code></pre>

h3. Making your slide modal

It is possible to make your slide modal, meaning, no click will implicitly cause the slide to close, instead you must explicitly defined an element with a class "pageslide-close" to return to normal.

<pre><code>
$("#my_anchor").pageSlide({width:'350px', modal:true});
<pre><code>$("#my_anchor").pageSlide({width:'350px', modal:true});
</code></pre>

h3. Slide in from the right

If you would rather have your slide come in from the right, simply define a direction argument.

<pre><code>
$("#my_anchor").pageSlide({width:'350px', direction:'right'});
<pre><code>$("#my_anchor").pageSlide({width:'350px', direction:'right'});
</pre></code>

h3. Setup multiple PageSlides on the same page

If you want to have multiple slides on the same page, simply define more!

<pre><code>
$("#my_anchor").pageSlide({width:'350px', modal:true});
<pre><code>$("#my_anchor").pageSlide({width:'350px', modal:true});
$("#foobar").pageSlide({width:'150px', direction:'right'});
</code></pre>

Expand Down

0 comments on commit f56aec7

Please sign in to comment.