2
\$\begingroup\$

I am generating a content bar with jQuery, that can be inserted into any webpage. It is a <ul> with two smaller lists within it. Those two minor lists have a header and a text box. The whole thing can be resized vertically, and each block within can be resized horizontally.

Is there a way to simplify the HTML and CSS?

Here's a jsFiddle incase you want to play with it a bit.

I know I could probably swap out the list stuff for spans and divs, but I don't think that would simplify things enough to matter.

$(function() {
    function generate_element_group() {
        var list_elem = $("<li />");
            var container = $("<ul />", { class: "elem_container" });
                container.resizable({ handles: "e" });
                var header = $("<li />", { class: "header_t" });
                var content_container = $("<li />", { class: "content_container_t" });
                    var content = $("<textarea />", { class: "content_t" });
                content_container.append(content);
            container.append(header);
            container.append(content_container);
        list_elem.append(container);
        return list_elem;
    }    
    var resize_container = $("<span />", {class: "resize_container"});
        var container = $("<ul />", { class: "container_t" });
                container.resizable({ handles: "n" });
                container.append(generate_element_group());
                container.append(generate_element_group());
        resize_container.append(container);
    $('body').append(resize_container);
});
.resize_container {
    position : fixed !important;
    top      : 65% !important;
    left     : 0px !important;
}

.container_t {
    position         : relative;
    display          : inline-block;
    bottom           : 0px;
    left             : 0px;

    height           : 150px;
    margin           : 0;
    padding          : 0;

    background-color : red;
    list-style       : none;

    
}

.container_t > li {
    display : inline-block;
    height  : 100%;
}

.elem_container {
    height     : 100%;
    width      : 350px;
    padding    : 0;

    list-style : none;
}

.header_t {
    position         : absolute;
    box-sizing       : border-box;

    height           : 35px;
    width            : 100%;
    padding          : 5px;

    background-color : blue;
}

.content_container_t {
    position         : absolute;
    top              : 35px;
    bottom           : 0;
    box-sizing       : border-box;

    width            : 100%;
    padding          : 5px;

    background-color : green;
}

.content_t {
    position : absolute;
    top      : 5px;
    bottom   : 5px;
    left     : 5px;

    width    : 90%;
}

.ui-resizable-n {
    cursor     : n-resize;
    border-top : 5px solid purple;
}

.ui-resizable-e {
    right        : 0;

    cursor       : e-resize;
    border-right : 5px solid purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="resize_container">
    <ul class="container_t ui-resizable">
        <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90; display: block;">      
        </div>
        <li>
            <ul class="elem_container ui-resizable" style="width: 398px;">
                <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;">       
                </div>
                <li class="header_t">
                </li>
                <li class="content_container_t"><textarea class="content_t">          
                </textarea>
                </li>
            </ul>
        </li>
        <li>
            <ul class="elem_container ui-resizable" style="width: 349px;">
                <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;">
                </div>
                <li class="header_t">
                </li>
                <li class="content_container_t"><textarea class="content_t">    
                </textarea>
                </li>
            </ul>
        </li>
    </ul>
</span>

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

Well, lists generally speaking should be used for lists, so <div>'s and <spans>s would probably be more semantically accurate, but hard to say what the purpose of this is.

Additionally, if you're using headings, it would probably be worth it to change the <li class="header_t"> to an <h2> tag.

Not sure what your support levels are for this, but I'd do something along these lines: http://jsfiddle.net/darcher/smQ7D/1/

Replace <section>'s with <div>'s if you aren't using html5 elements.

*I didn't do much in term of cleaning up the css, so you may want to check to make sure there aren't any unused properties. If you ever come back to see this I'll refine the css a bit.

*I added aria roles to add more value to devices that support it. I'd also look into State aria roles that you can dynamically adjust as the user interacts with items. e.g. `aria-grabbed', etc. That doesn't really go along with 'simplifying html' so If not, just stick with what's in the fiddle.

HTML:

<div class="resize_container">
  <div class="container_t ui-resizable">
    <div class="ui-resizable-handle ui-resizable-n" aria-label="resize"></div>

    <section class="elem_container ui-resizable">
      <div class="ui-resizable-handle ui-resizable-e" aria-label="resize"></div>
      <h2 role="heading" aria-label="heading1" class="header_t"></h2>
      <textarea class="content_t" role="textbox" aria-labelledby="heading1"></textarea>
    </section>

    <section class="elem_container ui-resizable">
      <div class="ui-resizable-handle ui-resizable-e" aria-label="resize"></div>
      <h2 role="heading" aria-label="heading2" class="header_t"></h2>
      <textarea class="content_t" role="textbox" aria-labelledby="heading2"></textarea>
    </section>

  </div>
</div>

CSS:

.resize_container {
  position: fixed !important;
  top: 65% !important;
  left: 0px !important;
  *zoom:1
}

  .resize_container:after,
  .resize_container:before {
    content:' ';
    display:table
  }
  .resize_container:after {clear:both}

.container_t{
    height: 100px;
    background-color: green;
    padding: 0;
    margin: 0;
}

.elem_container {
    padding: 0;
    width: 250px;
    float:left;
    display:inline-block;
    height: 100%;
}

.header_t {
    height: 35px;
    margin:0;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
}

.content_t {
    width: 90%;
    margin:2%;
height: 50px;
border: 1px solid #cccccc;
padding: 5px;
}

.ui-resizable-n {
    cursor: n-resize;
    border-top: 5px solid purple;
}

.ui-resizable-e {
    cursor: e-resize;
    border-right: 5px solid purple;
    right: 0;
}
\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.