Rectangle 27 65

dragging multiple selected items from a sortable into a connected sortable

The accepted answer is buggy, and @Shanimal's answer is close, but not quite complete. I took @Shanimal's code and built on it.

  • cleaned up the syntax errors in the HTML (missing closing tags & nested <li/>s).
  • Proper Ctrl + click (or Cmd + click if on a mac) support for selecting multiple items. Clicking without the Ctrl key held down will cause that item selected, and other items in the same list to be deselected. This is the same click behavior as the jQuery UI Selectable() widget, the difference being that Selectable() has a marquee on mousedrag.
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>
$("ul").on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    connectWith: "ul",
    delay: 150, //Needed to prevent accidental drag when trying to select
    revert: 0,
    helper: function (e, item) {
        var helper = $('<li/>');
        if (!item.hasClass('selected')) {
            item.addClass('selected').siblings().removeClass('selected');
        }
        var elements = item.parent().children('.selected').clone();
        item.data('multidrag', elements).siblings('.selected').remove();
        return helper.append(elements);
    },
    stop: function (e, info) {
        info.item.after(info.item.data('multidrag')).remove();
    }

});
delay

It is better... but bug that Ryan mentioned is still reproducable... i dragged 2 elements out... then back in becuase I decided i didnt want to move them and unless I place them in the same postion as they were the DOM 3 exception occurs

@RoopakVenkatakrishnan: After a revamp it's fixed now.

@Mrigesh, I looked at the Fiddle for this answer and remembered how I access the dragged elements in the stop callback. Rather than explain it here, I made an update to the Fiddle that has comments so you can see how to do it. (Hint: it uses the jQuery.data() method to attach the elements to the dragged item that Sortable passes between its callbacks. You have to attach the selected items to item when the sort is initiated. I did it on the helper callback.) jsfiddle.net/hQnWG/614

@AaronBlenkush thanks for such an effort. Hats off for making it happen. I will try this solution you gave and let you know :)

jQuery Sortable - Select and Drag Multiple List Items - Stack Overflow

jquery jquery-ui
Rectangle 27 0

toggleClass is executed immediately and so you don't need a callback for toggleClass, just place the alert('a') in the next line which will alert after toggleClass is executed.

Edit: Looks like you want jQuery UI Effects - toggleClass which unfortunately doesn't have a callback function.

var $loader = $("#loader");
if ($loader.is(':visible')) {
  $loader.fadeOut(100, function () {
      alert('fade out complete');
  });
} else {
  $loader.fadeIn(100, function () {
      alert('fadeIn complete');
  });
}

im trying to get $("#loader") to hide() after its faded out, how can I do this?

@user1013512 Looks like toggleClass in jQuery UI effects doesn't have a callback.. Check out my updated post and let me know if that works out for you.

.toggleClass()
.toggleClass().promise().done(function(){alert("done")});

@KevinB Amazing.. It works Kevin. I suggest you post that as an answer. jsfiddle.net/skram/4x76J

jquery function on toggleClass complete? - Stack Overflow

jquery
Rectangle 27 0

The jQuery has promise method that returns a deferred object that you can access using .promise(). This promise object will be resolved after all running animations on selected elements are complete. At that point, you can bind to it's done method.

$("#loader").toggleClass('fadeOut',600).promise().done(function(){
    alert('a');
});

without jquery ui it wouldn't be an animation, and hence wouldn't have a callback. your point?

there would absolutely be animation without $.UI. you don't need that extra code just to perform an animation so that comment is completely valid.

Yes :) And any reader that's not familiar with the various versions libraries of jQuery would really get confused when they just drop this code into their source (as many are wont to do). Anyway, maybe updating the answer to include the fact that jQuery UI, not the just typical jQuery library, is necessary would be helpful to future coders (again, as many will see the check and just grab the code)

jquery function on toggleClass complete? - Stack Overflow

jquery
Rectangle 27 0

$("#loader").fadeOut('slow');

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

im trying to get $("#loader") to hide() after its faded out, how can I do this?

jquery function on toggleClass complete? - Stack Overflow

jquery
Rectangle 27 0

jQuery - Function on toggleClass complete

How can I do a function once a toggleClass has completed?

The .toggleClass method along with all other animation methods return a deferred object that you can access using .promise(). At that point, you can bind to it's done method.

jQuery
Rectangle 27 0

You can wait for the animationend event

$('.anim').toggleClass('slide-down').one('animationend', function () {
    $(".sentence").typed({
        strings: ["first sentence", "Second sentence."],
        typeSpeed: 45,
        backDelay: 500,
        callback: function () {}
    });
});

Or if you are using transition, then use transitionend

it's actually a transition, How can I use transitionend?

animationend
transitionend

javascript - JQuery wait until ToggleClass function completed - Stack ...

javascript jquery css jquery-ui css3
Rectangle 27 0

Just add another function to remove the active class from the sidebar-wrapper ID when a link is clicked.

// Closes the sidebar menu on link click
$("#sidebar-wrapper a").click(function (e) {
  e.preventDefault();
  $("#sidebar-wrapper").removeClass("active");
});
$(document).ready(function() {
  // Opens the sidebar menu
  $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#sidebar-wrapper").toggleClass("active");
  });

  // Closes the sidebar menu
  $("#menu-close").click(function(e) {
    e.preventDefault();
    $("#sidebar-wrapper").toggleClass("active");
  });

  // Closes the sidebar menu on link click
  $("#sidebar-wrapper a").click(function(e) {
    e.preventDefault();
    $("#sidebar-wrapper").removeClass("active");
  });

  // Scrolls to the selected menu item on the page
  $(function() {
    $('a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
          $('html,body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  });
});
html,
body {
  width: 100%;
  height: 100%;
}
body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.text-vertical-center {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.text-vertical-center h1 {
  margin: 0;
  padding: 0;
  font-size: 4.5em;
  font-weight: 700;
}
.btn-dark {
  border-radius: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
}
.btn-light {
  border-radius: 0;
  color: #333;
  background-color: rgb(255, 255, 255);
}
.btn-light:hover,
.btn-light:focus,
.btn-light:active {
  color: #333;
  background-color: rgba(255, 255, 255, 0.8);
}
hr.small {
  max-width: 100px;
}
#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  right: 0;
  width: 250px;
  height: 100%;
  margin-right: -250px;
  overflow-y: auto;
  background: #222;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}
.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999;
}
.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
  height: 55px;
  font-size: 18px;
  line-height: 55px;
}
.sidebar-nav > .sidebar-brand a {
  color: #999;
}
.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}
#menu-toggle {
  z-index: 1;
  position: fixed;
  top: 0;
  right: 0;
}
#sidebar-wrapper.active {
  right: 250px;
  width: 250px;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.toggle {
  margin: 5px 5px 0 0;
}
.header {
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpg) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.about {
  padding: 50px 0;
}
.services {
  padding: 50px 0;
}
.service-item {
  margin-bottom: 30px;
}
.callout {
  display: table;
  width: 100%;
  height: 400px;
  color: #fff;
  background: url(../img/callout.jpg) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.portfolio {
  padding: 50px 0;
}
.portfolio-item {
  margin-bottom: 30px;
}
.img-portfolio {
  margin: 0 auto;
}
.img-portfolio:hover {
  opacity: 0.8;
}
.call-to-action {
  padding: 50px 0;
}
.call-to-action .btn {
  margin: 10px;
}
.map {
  height: 500px;
}
@media(max-width:768px) {
  .map {
    height: 75%;
  }
}
footer {
  padding: 100px 0;
}
.modal-dialog {} .thumbnail {
  margin-bottom: 6px;
}
.carousel-control.left,
.carousel-control.right {
  background-image: none;
  margin-top: 10%;
  width: 5%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>

<nav id="sidebar-wrapper">
  <ul class="sidebar-nav"> <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>

    <li> <a href="#top" onclick=$ ( "#menu-close").click();>Home</a>

    </li>
    <li> <a href="#about" onclick=$ ( "#menu-close").click();>About</a>

    </li>
    <li> <a href="#services" onclick=$ ( "#menu-close").click();>Services</a>

    </li>
  </ul>
</nav>
<header id="top" class="header">
  <div class="text-vertical-center">
    <img src="img/PRECISIONLOGO.png" style="padding-bottom:2%; width: 40%; min-width:300px;">
    <center>
      <h1 style="font-size:5vw; max-width:85%;">DECORATE YOUR LIFE WITH PRECISION </h1>

    </center>
    <center>
      <h3 style="font-size:3vw; max-width:75%;">Established in 2008, we have already established ourselves as one of the premier landscaping companies in South Houston</h3>

    </center>
    <br>
    <center> <a href="#divMain" class="btn btn-info btn-lg" role="button" style="background:#abd91e; border:none;;">Hire Us</a> 
    </center>
    <a href="http://www.homeadvisor.com/rated.PrecisionTree.43991652.html">

      <img src="img/toprated.png" style="float:left; width:6%; min-width:70px; padding-left:15px; position: absolute; bottom:5px; left: 15px; border:0;">

      <img src="img/elite.png" style="float:left; width:6%;  min-width:70px; padding-left:15px; position: absolute; bottom: 17px; left: 95px;">

      <img src="img/approved.png" style="float:left; width:6%;  min-width:70px; padding-left:15px; position: absolute; bottom: 17px; left: 175px;">
    </a>

  </div>
</header>
<section id="about" class="about" style="padding-bottom:0;">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 style="color:#777">What we are all about!</h2>

        <p class="lead">Precision Tree and Landscaping is a locally owned and operated company with over 6 years of experience. We take pride in our work, our goal is to make and keep every customer happy. We have consistently focused on the needs of our customers, providing
          personalized attention and a stress-free experience.</p>
        <img src="img/jared.jpg" style="max-width:350px; width:80%;">
        <p class="lead"> <b>Jared Davis</b> Owner and Operator</p>
      </div>
    </div>
  </div>
</section>
<section id="services" class="services bg-primary">
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-10 col-lg-offset-1">
        <h2 style="color:#d7f385;">Our Services</h2>

        <hr class="small">
        <div class="row">
          <div class="col-md-3 col-sm-6">
            <div class="service-item"> <span class="fa-stack fa-4x">
                                <img src="img/banner1.png">
                            </span>

              <h4 style="color:#d7f385;">
                                    <strong>Landscaping Design</strong>
                                </h4>

              <p>Allow us to redesign the exterior of your home. It can even bost the value of your home!</p>
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#design" style="background:#abd91e; border:none;">Learn More</button>
              <!-- Trigger the modal with a button -->
              <div class="modal fade" id="design" role="dialog">
                <div class="modal-dialog">
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title" style="color:#777">Landscaping Design</h4>

                    </div>
                    <div class="modal-body">
                      <p style="color:#777">We have the talent and experience to give your home a complete makeover that will make you love your home again. You can leave all the work to us or we can come up with a design together. Whether you are designing, building, renovating
                        a home or simply creating a complimentary landscape, we can cover all your needs.</p>
                      <p style="color:#777;">Our team of designers will unify your home and garden to create a personalized outdoor living space.</p>
                      <h2 style="color:#777;">Scope of Design Services</h2>

                      <ul style="color:#777; text-align:left;">
                        <li>Landscape Design & Installation</li>
                        <li>Swimming Pools, Spas & Water Features</li>
                        <li>Fountains, Urns, Statuary & Garden Features</li>
                        <li>Outdoor Kitchens, Fireplaces, Fire pits, Terraces, Patios & Driveways</li>
                        <li>Pergolas, Arbors, Gates & Fencing</li>
                        <li>Outdoor Light</li>
                        <li>Irrigation Systems</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="service-item"> <span class="fa-stack fa-4x">
                                <img src="img/banner2.png">
                            </span>

              <h4 style="color:#d7f385;">
                                    <strong>Drainage</strong>
                                </h4>

              <p>Thinking ahead and planning can make a big difference when it comes to protect your house from flooding.</p>
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#drainage" style="background:#abd91e; border:none;">Learn More</button>
              <!-- Trigger the modal with a button -->
              <div class="modal fade" id="drainage" role="dialog">
                <div class="modal-dialog">
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title" style="color:#777">Drainage</h4>

                    </div>
                    <div class="modal-body">
                      <p style="color:#777">Do you have low spots in your yard? Does standing water stay for days after a rain storm? We can help you fix this. We know how annoying rain on Wednesday still standing in your back yard on Saturday can be. This can ruin -</p>
                      <ul style="color:#777; text-align:left;">
                        <li>Prevent water from entering and damaging your home</li>
                        <li>Prevent soil erosion in and around your home</li>
                        <li>Prevent mosquito infestation</li>
                        <li>Prevent your landscape from washout and drowning</li>
                        <li>Prevent standing water which causes slippery surfaces</li>
                        <li>Prevent overall nuisance standing water can cause</li>
                      </ul>
                      <p style="color:#777">Designing the proper drainage system for your property is more complex than you might think, but having it done correctly the first time is a simple choice. Trust Precision Tree &amp; Landscaping with all your drainage needs.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="service-item"> <span class="fa-stack fa-4x">
                                <img src="img/bannergrass1.png">
                            </span>

              <h4 style="color:#d7f385;">
                                    <strong>Lawn Maintanance</strong>
                                </h4>

              <p>Maintanance is a pivotal to keep your yard looking in top shape. At Precision we have you covered.</p>
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#sprinkler" style="background:#abd91e; border:none;">Learn More</button>
              <!-- Trigger the modal with a button -->
              <div class="modal fade" id="sprinkler" role="dialog">
                <div class="modal-dialog">
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title" style="color:#777">Lawn Maintanance</h4>

                    </div>
                    <div class="modal-body">
                      <p style="color:#777;">Make sure your lawn always looks fantastic with regular lawn maintenance services from Precision Tree &amp; Landscaping. From tiny yards to large properties, our specialists can tackle all jobs (big and small). Wether your trying
                        to grow new, revive, or maintain an already outstanding lawn we have all the tools to tackle the job.</p>
                      <p style="color:#777;">Proper maintenance can lead to benefits people dont often think about. Such as-</p>
                      <ul style="color:#777; text-align:left;">
                        <li>Decreased soil errosion</li>
                        <li>Reduces allergen-producing weeds</li>
                        <li>Oxygenates the air and filters groundwater naturally</li>
                        <li>Absorbs nutrients and prevents leaching</li>
                        <li>Absorbs as much carbon dioxide as trees</li>
                        <li>Dissipates heat to reduce temperature</li>
                        <li>Adds curb appeal to your home</li>
                        <li>Can improve your homes value by up to 11%</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="service-item"> <span class="fa-stack fa-4x">
                                <img src="img/banner4.png">
                            </span>

              <h4 style="color:#d7f385;">
                                    <strong>Tree Trimming &amp; Removal</strong>
                                </h4>

              <p>Fallen branches cause over a billion dollars in damage every year. Make sure you dont become a victim</p>
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tree" style="background:#abd91e; border:none;">Learn More</button>
              <div class="modal fade" id="tree" role="dialog">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title" style="color:#777">Tree Trimming and Removal</h4>

                    </div>
                    <div class="modal-body">
                      <p style="color:#777">Damage caused to trees by severe weather accounts for more than $1 billion in property damage in the United States each year. Broken limbs, fallen trees and wood debris propelled by strong wind damages thousands of properties annually.
                        Fallen trees and broken branches cause structural damage, roofing damage, siding damage, break windows, fall on cars and cause power lines to topple. Homeowners should be aware that trees located between the street and sidewalk
                        are usually owned by the city and removal of damaged trees are the citys responsibility. If you have a tree that has been damaged and needs to be removed, be aware that many insurance policies cover the cost of tree removal, including
                        fallen branches.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="services.2" class="services bg-primary" style="padding-top:0;">
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-10 col-lg-offset-1">
        <div class="row">
          <div class="col-md-3 col-sm-6">
            <div class="service-item"> <span class="fa-stack fa-4x">
                                <img src="img/fencebanner.png">
                            </span>

              <h4 style="color:#d7f385;">
                                    <strong>Custom Fencing</strong>
                                </h4>

              <p>If you are looked for a fence replacement or something for a new home. We can do that.</p>
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#fence" style="background:#abd91e; border:none;">Learn More</button>
              <div class="modal fade" id="fence" role="dialog">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title" style="color:#777">Custom Fencing</h4>

                    </div>
                    <div class="modal-body">
                      <p style="color:#777">Simply stated - perimeter fencing is one of the most important things to consider while either buying or building a new home. The home that you purchase will probably be the most important investment you will ever make, and there
                        is possibly no other feature that you can add to increase the value and marketablility of that investment - than an attractive looking perimeter fence that is professionally installed and maintained.</p>
                      <p style="color:#777">Let Precision help you with all your fencing needs. We can answer any questions you may have and we are always here to help</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="service-item"> <span class="fa-stack fa-4x">
                                <img src="img/rockbanner.png">
                            </span>

              <h4 style="color:#d7f385;">
                                    <strong>Rock Installation</strong>
                                </h4>

              <p>Whether its a custom walkway or place to relax in your backyard, the guys at percision have you covered.</p>
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#rock" style="background:#abd91e; border:none;">Learn More</button>
              <div class="modal fade" id="rock" role="dialog">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title" style="color:#777">Rock Installation</h4>

                    </div>
                    <div class="modal-body">
                      <p style="color:#777">We can make your dreams a reality for your custom walkways or outdoor relaxation areas. If you have an idea in your head we can get it onto paper and have it finished in no time. If you would like for us to design whatever you need,
                        we can do that to. Almost nothing can have as dramatic of an effect as custom stone walkways or deck areas in your back yard. The sky is truly the limit on how one of a kind your home can be with custom stone work.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="service-item"> <span class="fa-stack fa-4x">
                                <img src="img/grass1.png">
                            </span>

              <h4 style="color:#d7f385;">
                                    <strong>Sod Installation</strong>
                                </h4>

              <p>Building a new home? Trying to revive part of your lawn? Whatever the case, we have you covered.</p>
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#sod" style="background:#abd91e; border:none;">Learn More</button>
              <div class="modal fade" id="sod" role="dialog">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title" style="color:#777">Sod Instalation</h4>

                    </div>
                    <div class="modal-body">
                      <p style="color:#777">There is no job to big or small if you need sod installation we are the answer. It's back breaking work and is not advised to go at it alone. Let the guys at Precision help you out.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="service-item"> <span class="fa-stack fa-4x">
                                <img src="img/powerbanner.png">
                            </span>

              <h4 style="color:#d7f385;">
                                    <strong>Power Washing</strong>
                                </h4>

              <p>Give your home a quick face lift by power cleaning siding, side walks, and driveways.</p>
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#power" style="background:#abd91e; border:none;">Learn More</button>
              <!-- Trigger the modal with a button -->
              <div class="modal fade" id="power" role="dialog">
                <div class="modal-dialog">
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title" style="color:#777">Tree Trimming and Removal</h4>

                    </div>
                    <div class="modal-body">
                      <p style="color:#777">Pressure washing is a fast and effective way to clean decks, siding, driveways, and other exterior areas of your property. To have it done right, without the hassle and expense of renting a power washer, call the guys at Precision
                        for professional power washing services and get the clean deck, siding and driveway you want, fast!</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

javascript - Bootstrap side navbar wont collapse on link click - Stack...

javascript jquery html css twitter-bootstrap
Rectangle 27 0

$("#loader").stop().fadeTo(400,0, function() {
        $(this).toggleClass('fadeOut').hide(); // exec after is faded out.
        alert(' ta-da!');
    });

jquery function on toggleClass complete? - Stack Overflow

jquery
Rectangle 27 0

I used other method to deal with this problem. In this example I combined .delay() function and .queue()

$(this).toggleClass("focus_out").delay(500).queue(function(custom_call_back) {
    $(this).removeClass('focus_out');
    custom_call_back();
});
$(this)
$('#loader')

jquery function on toggleClass complete? - Stack Overflow

jquery
Rectangle 27 0

The .toggleClass function returns a deferred object, that you can access with .promise(), and then bind a function to it's .done() method;

$("#btnFind").button().click(function () {

    $("#btnFind").toggleClass('loadinggif btnStyle').promise().done(function() {

        var filterVal = $('#tags').val();

        if (filterVal != "") {
            $('#MainContent_myTable tr:gt(0)').each(function () {
                $(this).find('td:eq(0)').not(':contains(' + filterVal + ')').parent().hide();
            });
        }

        $('#btnFind').toggleClass('loadinggif btnStyle');
    });

});

that didn't quiet work... It looks like it was trying to change the class but I didn't get the spinner in the button at all.

@olimortimer if I add a delay I get the spinner but it still freezes while the filtering is happening. Any ideas?

Can you create a jsFiddle of your code, so I can take a look please?

jquery - toggleclass() not toggling until after function is complete -...

jquery
Rectangle 27 0

It will not work like that because the browser tab will work like a single thread application where at any point of time there will only one task running like running a js script, repainting the dom with changes etc

In this case when the button is clicked, a class is added to a button but since the event handler execution is not completed browser will not get time to update the dom changes to the UI, the following workaround tries to give the browser repaint thread execution time by delaying the scripts after the toggleClass using setTimeout

$("#btnFind").button().click(function () {
    $('#btnFind').toggleClass('loadinggif btnStyle');

    setTimeout(function){
        var filterVal = $('#tags').val();


        if (filterVal != "") {
            $('#MainContent_myTable tr:gt(0)').each(function () {
                $(this).find('td:eq(0)').not(':contains(' + filterVal + ')').parent().hide();
            });
        }

        $('#btnFind').toggleClass('loadinggif btnStyle');
    })
});

this sort of worked... I added 1000 to the end of the setTimeout function and I got the spinner to show up on the button but once it was doing the filtering the spinner stopped spinning. Any ideas?

@webdad3 it will freeze because of the reason said above if it is a time consuming process then the browser will not get any time to repaint the UI... because the script is blocking the execution time

jquery - toggleclass() not toggling until after function is complete -...

jquery
Rectangle 27 0

(function($) {
    $(function() {
        $('.clickMe').click(function () {
            $('.content').slideToggle('2000', function () {
                // Animation complete.
            });
            $(this).toggleClass('active');
        });
    });

})(jQuery);

+1 Note that if .clickMe matches multiple elements, though, this will toggle all of them. $(this).toggleClass('active'); will toggle only the one actually clicked.

@mostafaznv: Fantastic attitude deleting your second answer and editing this one instead, nice one. You're going to be a valuable addition to SO. Just be sure you always explain (one-line answers are rarely useful). Good job guessing what the OP was asking prior to their edit. Best,

.addclass when click! and when click again! .removeclass - jquery - St...

jquery jquery-ui