Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Which of these 3 is best practice?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #45478
    Rugg
    Participant

    Here is the scenario…

    I’m initially hiding an element(s) in css using **display: none**. I then use jQuery to make the element(s) visible by using **.show()**. By default the .show() method will make elements **display: block**. I need the elements to be **display: inline-block**. As a result I came up with the following methods to .show() inline-block elements. I prefer the first method, but I’m wondering if there’s best practice for doing this?

    **Method 1 (Preferred)**

    $.fn.showInBlock = function () {
    return this.css(‘display’, ‘inline-block’);
    };

    In action…

    $(‘#element’).showInBlock(0);

    **Method 2**

    var showInBlock = function (){
    $(this).css(‘display’, ‘inline-block’);
    };

    **Method 3**

    function showInBlock() {
    $(this).css(‘display’, ‘inline-block’);
    }

    Any suggestions are welcome…Thank You.

    #138526
    TheDoc
    Member

    You could do something like this: http://codepen.io/ggilmore/pen/a51ff3b8bd05a974c8b834f63f90e346

    Utilizing `visibility: hidden;`. I prefer avoiding manipulating CSS directly from jQuery. Instead, I prefer toggling class names.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.