Changing css with jquery on click not restoring object's original css

user_14408190 0
Viewed 61

First of all, thank you to anyone who takes the time to look at this. Second, apologies if this is elementary stuff. Anyway here's the issue: On the menu page of my portfolio site (www.henrykember.com), there are buttons that hide and reshuffle item thumbnails based on whether they're day-to-day work ("9-5") or side projects ("5-9"). To show everything again, you click "all". Clicking these buttons changes the css ("margin-top", margin-left"), so "5-9" items that are normally further down the page come up to the top when all the "9-5" stuff is hidden. But there's a glitch: when clicking "5-9", then "all" (in that specific order), someo of the "5-9" items don't return to their original css. These aren't actual buttons, just clickable list items. Is that a problem? Here's my js:

$(document).ready(function() {

var fivetonine = $("#fivetonine");
    var ninetofive = $("#ninetofive");
    var all = $("#all");
    var business = $(".business");
    var casual = $(".casual");

            fivetonine.on('click', function ()  {   
        casual.show(200);
        business.hide(200);
        $("a#subsub").css("margin-top", "200px"); 
        $("a#housework").css("margin-top", "160px");
    });

    fivetonine.off('click', function ()  {
        business.show(200);
        casual.show(200);

    });
    
    ninetofive.on('click', function ()  {
        business.show(200);
        casual.hide(200);
        $("a#archive").css("margin-top", "500px");
        $("a#subsub").css("margin-top", "930px");
        $("a#housework").css("margin-top", "1170px");
    });


    ninetofive.off('click', function ()  {
        business.show(200);
        casual.show(200);
    });

    all.on('click', function ()  {
        business.show(200);
        casual.show(200);
        $("a#subsub").css("margin-top", "930px !important");
        $("a#housework").css("margin-top", "1170px");
        $("a#archive").css("margin-top", "1790px");
    });

    all.off('click', function ()  {
        business.show(200);
        casual.show(200);
    });

});

jquery javascript
2 Answers

First of all, it has nothing to do with the fact that it's not a button but a list item.

Second, I see that your site uses absolute positioning for the projects showcase. This is a big no-no. I suggest you learn about css-grids and flex-box and integrate one of those for your projects. It will make your life a whole lot easier, as you won't need to mess with margins and so on, as your projects will be positioned dynamically.

I know I wasn't very detailed in this answer, but I hope it helps you anyway. Key take-away: learn about css-grids and flex-box

user_92369010

I created a simple bootstrap grid layout solution if your interested.

working Fiddle demo

Include bootstrap css in your head section:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Include bootstrap js in your head section after loading the jQuery js library

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Basic two column layout:

<div class="row">
  <!-- col 1 -->
  <div class="col-xs-6 d-flex flex-column justify-content-center">
  
    <!-- Nine to Five Item -->
    <div class="all ntf">
        9-5
    </div>
    
    <!-- Five to Nine Item -->
    <div class="all ftn">
        5-9
    </div>
  </div>

  <!-- col 2 -->
  <div class="col-xs-6 d-flex flex-column justify-content-center">
  
    <!-- Nine to Five Item -->
    <div class="all ntf">
        9-5
    </div>
    
    <!-- Five to Nine Item -->
    <div class="all ftn">
        5-9
    </div>
  </div>
</div>
  • The number of and order of the .ntf and .ftn div elements inside columns 1 and 2 are up to you.
  • in the demo, I added colors to these randomly placed div's to make it easier to see the two different content types.
  • you can get a more "random" look to your content by adjusting the top/bottom, left/right margin of the content within each of the .ntf/.ftn div's

Javascript:

$(document).ready(function(){

    $('.btnAll').on('click', function(){
    $('.all').slideDown(500);
  });
  
  $('.btnNineToFive').on('click', function(){
    $('.ftn').slideUp(500);
    $('.ntf').slideDown(500);
  });
  
  $('.btnFiveToNine').on('click', function(){
    $('.ntf').slideUp(500);
    $('.ftn').slideDown(500);
  });

});
  • I put a half-second (500) delay on all the animations, adjust as you see fit.

If you want random transition times on each element you could replace the 500 with getRandomInt(100,500) and include the simple random number function shown below in your script

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
user_24602940
Related