-2
\$\begingroup\$

I'm somewhat new to JavaScript / jQuery. I wrote this "plug-in", and it seems to do what I want. But I know what I've done is a bit clunky and inelegant.

The idea is that I have multiple columns of images, each column with a title. When you click on a column title, only that column of images shows. All the other columns disappear. And the selected column converts to a horizontal row. When the "all" button is clicked, the opposite happens. The selected horizontal row returns to being a column and all the others reappear.

I was hoping someone could show me a better way to write this.

The HTML is as follows:

<div class="row">
  <div class="multi-show">
    <div class="test-link">
      <a href="#"><h4>Commercial</h4></a>
    </div>
    <div class="content-thumbs">
      <div>
        <div class="thumb">
          <img class="w-100 img-thumbnail" src="pix/place-holder-1.gif" alt="">
        </div>
        <div class="thumb">
          <img class="w-100 img-thumbnail" src="pix/place-holder-1.gif" alt="">
        </div>
        <div class="thumb">
          <img class="w-100 img-thumbnail" src="pix/place-holder-1.gif" alt="">
        </div>
        <div class="thumb">
          <img class="w-100 img-thumbnail" src="pix/place-holder-1.gif" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="multi-show">
    <div class="test-link">
      <a href="#"><h4>Hospitality</h4></a>
    </div>
    <div class="content-thumbs">
      <div class="thumb">
        <img class="w-100 img-thumbnail" src="pix/place-holder-2.gif" alt="">
      </div>
      <div class="thumb">
        <img class="w-100 img-thumbnail" src="pix/place-holder-2.gif" alt="">
      </div>
      <div class="thumb">
        <img class="w-100 img-thumbnail" src="pix/place-holder-2.gif" alt="">
      </div>
      <div class="thumb">
        <img class="w-100 img-thumbnail" src="pix/place-holder-2.gif" alt="">
      </div>
    </div>
   </div>
</div>

The CSS is:

.multi-show {
  position: relative;
  width: 183px;
  height: 530px;
  float: left;
}

.single-show{
  position: absolute;
  width: 1200px;
  height: 237px;
  overflow: visible;
}

.test-link {
  z-index: 10;
}

.thumb {
  margin-bottom: 10px;
}

.thumb img {
  border: none;
}

.img-thumbnail {
  background-color: unset;
}

.content-thumbs {
  position: relative;
  height: 530px;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: scroll;
}

The original jquery was this:

$( document ).ready(function() {
  $( ".test-link" ).on("click", function() {
    var target = $(this).parent();
    var pos = target.offset();
    $(".thumbs-col").hide();
    target.show();
    target.css({
      "background-color": "green",
      "position": "absolute",
      "left": pos,
      "width": "1200px",
      "height": "237px",
      "overflow": "visible"
    });
    $(".content-thumbs .thumb").css({
      "float": "left"
    });
  });
  $( "#all" ).on("click", function() {
    (".content-thumbs .thumb").css({
      "float": "none"
    });
    console.log("good");
  });
});

I've since changed it with some guidance (Thanks) to writing some external CSS styles and dynamically changing the classes. Like this:

$( document ).ready(function() {
  var target;
  $( ".test-link" ).on("click", function() {
    target = $(this).parent();
    $(".multi-show").hide();
    target.show();
    target.removeClass("multi-show");
    target.addClass("single-show");
    $(".content-thumbs .thumb").css({
      "float": "left"
    });
  });
  $( "#all" ).on("click", function() {
    target.removeClass("single-show");
    target.addClass("multi-show");
    $(".content-thumbs .thumb").css({
      "float": "none"
    });
    $(".multi-show").show();
      console.log("good");
    });
  });
});

I'm guessing there is still a better way.

\$\endgroup\$

closed as unclear what you're asking by 200_success, Sᴀᴍ Onᴇᴌᴀ, Stephen Rauch, Jamal Apr 25 '18 at 2:31

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 5
    \$\begingroup\$ Welcome to Code Review! The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How do I ask a good question?. for examples, and revise the title accordingly. \$\endgroup\$ – Phrancis Apr 20 '18 at 3:51
  • 2
    \$\begingroup\$ I don't think folks can really understand how to simplify this without seeing the corresponding HTML and CSS so we can better understand what this code does and what simplifications might be possible. \$\endgroup\$ – jfriend00 Apr 20 '18 at 4:33
  • 1
    \$\begingroup\$ This question consists of: (1) The most generic and uninformative title possible for this site, (2) A code dump with no explanation of what it accomplishes, (3) No sample of the HTML on which this code operates, and (4) A how-to question about animation that is out of scope for this site. \$\endgroup\$ – 200_success Apr 24 '18 at 20:54
  • \$\begingroup\$ @200_success Thanks but you're a little late to the party. jfriend00 said pretty much the same thing but in a more concise and appropriate manner. Point well taken though. \$\endgroup\$ – belotte Apr 26 '18 at 8:31
  • \$\begingroup\$ I'm trying to give you specific feedback about how you can improve the question and reverse the downvotes and closure. It's not too late to edit the question. \$\endgroup\$ – 200_success Apr 26 '18 at 13:08
2
\$\begingroup\$

My Biggest callouts are going to be modifying css with JQuery instead of just using predefined classes. Modifying css with JQuery is very expensive, adding and removing classes is very cheap in comparison. It also will tidy up your JS a little. You can see my comment in line.

JS

$( document ).ready(function(){
  $( ".test-link" ).on("click", function({target}){  //The param `event` is passed to this function by default, if you are using es6 you can deconstruct `event` like so `{target}`
    /* var target = $(this).parent(); */ //you can read this from the event passed in on 'click' unless you are really looking for the parent, in which case I would expect it to be hidden and question how you are able to see it...
    //var pos = target.offset(); //you should be able to calculate this without js in css
    $(".thumbs-col").hide();
    target.show();
    /*target.css({
      "background-color": "green",
      "position": "absolute",
      "left": pos,
      "width": "1200px",
      "height": "237px",
      "overflow": "visible"
    });*/ // You are hiding and showing target, set the css through css instead of modifying it with JQuery
    /*$(".thumb").css({
      "float": "left"
    });*/ // instead of using JQuery css, you define a class with css and add/remove it with JQuery (https://api.jquery.com/addclass/)
    $(".thumb").addClass('active');
  });
  $( ".all" ).on("click", function() {
    /*$(".thumb").css({
      "float": "none"
    });*/ //instaed of using JQuery css, you can remove the `active` class that you added as show above
    $(".thumb").removeClass('active');
  });
});

CSS

    .parent-of-test-link { //looks like you were trying to attach this css to the parent of test-link
      background-color: green;
      position: absolute;
      left: 0; //if the parent is set to absolute as well I think you should be able to set this to 0. Otherwise you can look at using `relative`
      width: 1200px;
      height: 237px;
      overflow: visible;
    }

    .thumb.active {
       float: left;
    }

Note It is a little difficult to see exactly what you are trying to modify with the limited code you have provided, so some of the changes may need to be adjusted based on your implementation.

Animations

I would recommend doing animation in css as well and adding and removing classes as suggested above. Heres some docs on animation with css (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)

Using a combination of your example and theirs...

CSS

thumb.active {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
     margin-left: 100%;
     width: 300%; 
  }

  to {
     margin-left: 0%;
     width: 100%;
  }
}

JSFiddle http://jsfiddle.net/xcb6hadL/

\$\endgroup\$
  • \$\begingroup\$ Thank you for your input. Yes, I will re-do my question. But you already gave me some good feedback and made me think about this in a different way. I appreciate the help! \$\endgroup\$ – belotte May 1 '18 at 5:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.