CODEWITHSUNDEEP
javascriptjquerycsshtml
Tom Maxwell
Tom Maxwell

Reputation: 9573

Slide div off screen with toggle?

What I'd like to do is have a toggle that slides a div in and out out of the viewport to the left. So you visit the site and both the div and the toggle are visible, you click the toggle, and the div and toggle both slide to the left, but only the div slides out of the viewport. The toggle needs to stay so you can obviously toggle the div back into view.

Here's the HTML I have:

<div id="right-hand-column">

    <div id="hide-column">
    </div>

    <div id="slide-container">
      <div id="list-header">
        <h3>My Journals</h3>
        <a href="#" class="plus-icon md-trigger" id="create-journal" data-modal="modal-5"><i class="icon-plus"></i></a>
      </div>

      <div id="submission-list-container">
      <% if can? :read, Folder %>
        <% current_user.folders.each do |folder| %>
          <% if folder.parent_id.nil? %>
              <%= content_tag :div, :data => {:id => folder.id }, class: 'post-container' do %>
                <div id="journal-title"><%= folder.title %></div>
              <% end %>
          <% else %>
          <% end %>
      <% end %>
      <% end %>

        <hr id="above-container-footer">
        <h2 id="journal-container-bottom">Select a journal or<br/> <a href="#">create a new one.</a></h2>

      </div>

      <div id="fixed-bottom-container">
        <h3>chakra</h3>
        <ul id="footer-links">
          <li><a>About ·</a></li>
          <li><a>Terms ·</a></li>
          <li><a>Contact</a></li>
        </ul>
      </div>

    </div>

        </div>

The div at the top, #hide-column, is the toggle. Everything in the #slide-container is what needs to slide out of view to the left. Here's the jQuery I've tried:

$("#hide-column").click(function(){
            $("#slide-container").toggle("slide", function(){
                $(".resize").css({
                    'max-width':'100%'
                });
            });
    $(this).toggle("slide");
        });

This in theory would work but I need the toggle to not slide out of the viewport. Any suggestions?

Upvotes: 3

Views: 2483

Answers (2)

Fat Monk
Fat Monk

Reputation: 2265

I've produced a pure JavaScript (i.e. no JQuery or other external stuff required) version of this functionality using two functions.

The animation function itself is:

function hMove(element, endPos, duration) {
    // element = DOM element to move
    // endPos = element.style.left value for the element in its final position
    // duration = time in ms for the animation

//    var leftPos = element.style.left.replace(/px/,"");  // Get the current position of the element
    var leftPos = window.getComputedStyle(element,null).getPropertyValue("left").replace(/px/,"");
    var animStep = (leftPos - endPos) / (duration / 10);  // Calculate the animation step size
    var direction = ( leftPos > endPos ) ? "left" : "right";  // Are we moving left or right?

    function doAnim() {  // Main animation function

        leftPos = leftPos - animStep;  // Decrement/increment the left position value

        element.style.left = leftPos + "px";  // Apply the new left position value to the element

        // Are we done yet?
        if ((direction == "left" && leftPos <= endPos) || (direction == "right" && leftPos >= endPos)) {
            clearInterval(animLoop);  // Stop the looping
            element.style.left = endPos + "px";  // Correct for any fractional differences
        }
    } // and of main animation function

    var animLoop = setInterval(doAnim, 10); // repeat the doAnim function every 10ms to animate
}

and this is toggled with:

function toggleLeftMenu() {

    var element = document.getElementById('myLeftMenu'); // The element I want to toggle

    // If the element is placed on screen (ie left > 0) hide it, otherwise show it
    if ( window.getComputedStyle(element,null).getPropertyValue("left").replace(/px/,"") > 0 ) {
        hMove(element, -310, 250);  // Call the horizontal move function
        document.getElementById('hideButton').innerHTML='\u00BB';  // Change the button to the show indicator
    } else {
        hMove(element, 30, 250);  // Call the horizontal move function
        document.getElementById('hideButton').innerHTML='\u00AB';  // Change the button to the hide indicator
    }
}

This http://jsfiddle.net/47MNX/16/ shows the solution in action.

-FM

Upvotes: 1

blackeyebeefhorsefly
blackeyebeefhorsefly

Reputation: 1949

if I understand correctly I think you may be looking for something akin to the concept of a slide out nav. Here is a little demo of I fiddled into what you described. it works using css if you want to re purpose it. Let me know if you are looking for something else or if I misunderstood. :)

it adjusts the widths to make it appear like a div comes in off screen. the control is a label tied to checkbox which then selects its siblings

input[type='checkbox']:checked ~ div.toggle-area {
width:30%;
}

input[type='checkbox']:checked + div.page-wrap {
    width:70%;
    float:right;
}

DEMO http://jsfiddle.net/bDW6J/1/

ORIGINAL CONCEPT http://codepen.io/jetpacmonkey/pen/ktIJz

Upvotes: 1

Related Questions