1

So this is my first question ever on stackoverflow, sorry if I ask this poorly or have failed to find the answer elsewhere.

I am using a simple toggleClass jQuery function to add a class called .slide-out that gives the whole body a left: 30% value. If I manually add the class it works properly. But if I use the toggleClass function to add the class it slides the whole body over 30% just like I expected but immediately moves the body back to its normal position. It sort of flashes and appears 30% over and then flashes again and is back to where it was.

my js code is wrapped in a document ready function and I haven't found any syntax errors.

JS:

$( document ).ready(function() {

  $("#main-menu-btn").click(function() {
      $('body').toggleClass("slide-out");
  });

});

SASS:

body
    height: 100%
    position: relative
    left: 0

.slide-out
    left: 30%

JADE:

doctype html
html(lang="en")
    head
      title jade
      meta(charset="utf-8")
      meta(name="viewport", content="width=device-width, initial-scale=1")
      link(rel="shortcut icon", href="/assets/img/favicons/favicon.ico")  
      link(rel="stylesheet", href="/assets/css/main.css")

    body(class="slide-out")

        .logo
        h1 Whole Life Sports
        .main-menu
            ul
                li Home
                li Stuff
                li Things
        .page-nav
            nav
                a(href="", id="main-menu-btn") Main Menu
                a(href="") Home
                a(href="") Kids Games
                a(href="") Max Sport Camp
                a(href="") The Big Think


    script(src="/assets/js/jquery-2.1.1.min.js")
    script(src="/assets/js/functions.js" type="text/javascript")
d3ddd
  • 65
  • 5
  • Unless your problem is related to the Sass -> CSS or Jade -> HTML compilation, *only* post the compiled results. – cimmanon May 06 '15 at 22:52
  • Good to know, I just kind of assumed the sass and jade would be easier to read. My problem was that my button that I was using to toggle the class was an anchor with an empty href that caused the page to reload every time that I clicked it. Newbie mistake for sure hahaha – d3ddd May 07 '15 at 00:59

1 Answers1

1

Use:

 $("#main-menu-btn").click(function(event) {
      $('body').toggleClass("slide-out");
      event.preventDefault();
  });

Or return false for the click event.

See: http://api.jquery.com/event.preventdefault/

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224