Template Javascripts


  • Reveal Popup Dialog

    You can easily call modals without writing any JS, even spawn subsequent modals cleanly on the same page. Reveal works across devices.


    Click Me!
    Write Your Markup

    Remember: Your modal should be at the end of the page, after any of your rows or columns.

    <div id="myModal" class="reveal-modal [expand, xlarge, large, medium, small]">
      <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">&#215;</a>
    </div>
    
    Calling Reveal

    There are two ways to do call a Reveal modal. The first is to attach a handler to something (button most likely) then call Reveal:

    <script type="text/javascript">
      $(document).ready(function() {
        $("#buttonForModal").click(function() {
          $("#myModal").reveal();
        });
      });
    </script>
    
    The easy way
    <a href="#" class="button" data-reveal-id="myModal2">Click Me For A Modal</a>
    

    This will launch the modal with the ID "myModal2" without attaching a handler or calling the plugin (since the plugin is always listening for this). You can also pass any of the parameters simply by putting a data-nameOfParameter="value" (i.e. data-animation="fade")

    Options

    Reveal comes with a nice list of helpful options, here's the rundown:
    Name Options Description
    animation fade
    fadeAndPop none
    Control how your slides transition
    animationSpeed 300 How fast should they progress?
    closeOnBackgroundClick true
    false
    If you click background, should modal close?
    dismissModalClass close-reveal-modal
    Use our default dismiss class or make your own.
    open callback function that triggers 'before' the modal opens.
    opened callback function that triggers 'after' the modal is opened.
    close callback function that triggers 'before' the modal prepares to close.
    closed callback function that triggers 'after' the modal is closed.

    Options can be used on the "data-reveal-id" implementation too, just do it like this:

    Name Options
    data-animation fade
    fadeAndPop
    none
    data-animationSpeed 300
    data-closeOnBackgroundClick true
    false
    data-dismissModalClass close-reveal-modal
  • Reveal Popup Dialog

    Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let's see just how easy it is to take your first ride without getting the fuzz involved.


    Using Joyride

    A demonstration is used on the index page.

    Follow these simple steps to get Joyride up and running on your next project:

    Define your stops

    Joyride will work with any element in your markup, the only requirement is that the element must have a unique id to tell the joyride plugin it is a stop of the tour. You will use the id or class of each "stop" when you create your tour outline in the next step. In case of classes, Joyride will select the first matching element.

    <h3 id="yourHeaderID"></h3>
    <p class="your-paragraph-class"></p>
    <a id="yourAnchorID" href="#url"></a>
    
    Create your outline

    Create an outline list of your tour stops in a ol element and be sure to give that an id of your choice. You'll need to add this id into the options a little later. For each stop of the tour add an li element with a "data-id" attribute. The value of the data-id attribute should be the ID of the html element you want as the stop. This ol element should be placed right before you close the body of your markup.

    There are some options to consider when creating the steps of your tour. First, you can control the text of each button in the tour. To do this, simply add "data-button" to your li and type out what the button should say. Second, you can add custom classes to any or all of the li's. This enables you to control each step with complete granularity.

    If a data-class or data-id attribute is not specified, then the tooltip is attached to the body of the page as a modal window.

    <!-- Each tip is set within this <ol>. -->
    <!-- This creates the order the tips are displayed -->
    <ol id="chooseID">
      <!--data-id needs to be the same as the parent it will attach to -->
      <li data-id="newHeader">Tip content...</li>
      <!--This tip will be display as a modal -->
      <li>Tip content...</li>
      <!--using "data-button" lets you have custom button text -->
      <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>
      <!--you can put a class for custom styling -->
      <li data-id="parentElementID" class="custom-class">Content...</li>
    </ol>
    
    Start the Engine

    To make sure your Joyride goes smoothly, start the engines by including the above code before the closing /body element of your page. There are also a handful of options that you can set to customize the experience for your passengers.

    /* Launching joyride when the page is loaded */
    <script>
      $(window).load(function() {
        $("#chooseID").joyride({
          /* Options will go here */
        });
      });
    </script>
    
    Options & Upgrades

    These options will let you control how people interact with Joyride.

    Name Options Description
    tipLocation top
    bottom
    top or bottom in relation to parent
    nubPosition auto Override the nub on a per tooltip bases
    scrollSpeed 300 Page scrolling speed in ms
    timer 2000 0 = off, all other numbers = time(ms)
    startTimerOnClick true
    false
    Start timer on click?
    nextButton true
    false
    Do you want a next button?
    tipAnimation pop
    fade
    Control how the steps animate
    pauseAfter [] Use an array of indexes where to pause the tour after
    tipAnimationFadeSpeed 300 Fade of the speed if you used 'fade'
    cookieMonster true
    false
    Do you want to cookie users who take the tour?
    cookieName JoyRide Choose your own cookie name if you want.
    cookieDomain false
    yoursite.com
    Which URL the cookie works for.
    tipContainer body Choose where you want your tip container to be.
    postRideCallback $noop A method to call once the tour closes
    postStepCallback $noop A method to call after each step
x

I am a popup model dialog!


I can be hooked to any element to trigger this popup!

x
Customer Login
New User Login
x
New Customer
Register
x
Please enter name Please enter e-mail E-mail is not a valid format
There was a problem validating the form please check!
The connection to the server timed out!

Message sent, Thank you.

x