jQueryUI Stackable (Remove contents on different tab click)

Question

Note: I only have a few days experience with jQuery, although I have searched around to try to fix the issue and tested however it just doesn't work.

What I'm trying to achieve:

I'm having some trouble with jQueryUI's .selectable, I have created a Selectable with four different tabs, each tab displays different content added to it (a class for image, an append for a button and an append for paragraph text).

Here is a visual look at what I'm trying to achieve: http://puu.sh/gELQi/211165f55a.png

My current jQuery = http://jsfiddle.net/p5gsby49/8/

My Problem

Currently, when clicking on one tab it will correctly display the contents of that tab, however as soon as you click to a different/same tab again it will:

Add the contents overlapping the previous tab
1. Button is added on every new click of same or other tab
2. New image class is added and pushed below the previous tab
3. Paragraph text overlaps

What I need

I need a way so that on every tab click (same or other tab) it will clear all previous contents of the last tab (any buttons/paragraphs/image classes).

Also, one other problem with the jQueryUI .selectable() is that it allows selecting multiple tabs at once, if you drag your cursor over the tabs in my JSFiddle you'll see what I mean, I only want it to be able to select one at max.

My code broken down

jQuery

//Tab Content added in relation to tab number
if ($('#elements .elementOne').hasClass('ui-selected')) {
            // Tab 1
            $(".elementOneInfo").addClass("elementOneInfoImage");
            $(".elementOneInfo").append("<button><a href='/clans'>MORE<two</button>");
            $(".elementOneInfo").append("<p>"+textOne+"</p>");
        }
if ($('#elements .elementTwo').hasClass('ui-selected')) {
            //Tab 2 etc.
            $(".elementTwoInfo").addClass("elementTwoInfoImage");
            [...]

HTML

<div class="container elements-wrapper">
    <div class="col-md-12">
        <div class="row">

            <!-- Where new content is added -->

            <div class="col-md-7 elements-info">
                <div class="elementOneInfo"></div>
                <div class="elementTwoInfo"></div>
                <div class="elementThreeInfo"></div>
                <div class="elementFourInfo"></div>
            </div>

            <!-- Where tabs exist -->

            <div class="col-md-5 elements-titles-wrapper">
                <ul id="elements">
                    <li class="elementOne light ui-widget-content"><h3>Title1</h3></li>
                    <li class="elementTwo dark ui-widget-content"><h3>Title2</h3></li>
                    <li class="elementThree light ui-widget-content"><h3>Title3</h3></li>
                    <li class="elementFour dark ui-widget-content"><h3>Title4</h3></li>
                </ul>
            </div>
        </div>
    </div>
</div>

SCSS

/* Tabs */

.elements-titles-wrapper {
    padding:0;
    ul {
        list-style: none;
        padding-left: 0;
    }
    li > h3 {
        color: white;
        margin:0;
        padding: 15px 0 15px 15px;
    }
    .light {
        background-color: $aqua;
    }

    .dark {
        background-color: $dark_aqua;
    }

    .active {
        background-color: #75c5e0;
    }
    .ui-selected {
        background: $light_aqua;
    }
    .ui-selecting {
        background: $light_aqua;
    }
}


/* Tab Content Added */

.elements-info {
    padding:0;
    p {
        color:white;
        font-size:12px;
        background: rgba(0,0,0,.5);
        padding: 10px;
        position:absolute;
        bottom:0;
        margin-bottom: 0;
        @include font(Open-Sans);
    }
    button {
        background: $cream;
        border-radius:5px;
        margin: 5px 0 0 5px;
        a {
            color:$brown;
            @include font(Open-Sans);
            padding: 4px 8px;
            text-decoration: none;
        }
    }

    /* Random Background Images for testing */
    .elementOneInfoImage {
        background: url(http://wallpaperkick.com/wp-content/uploads/2015/02/gray-wallpaper.jpg) no-repeat center right;
        height:224px;
    }
    .elementTwoInfoImage {
        background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/red-wallpaper-4.jpg) no-repeat center right;
        height:224px;
    }
    .elementThreeInfoImage {
        background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/Green-Wallpaper-3.jpg) no-repeat center right;
        height:224px;
    }
    .elementFourInfoImage {
        background: url(http://walldiskpaper.com/wp-content/uploads/2014/11/Blue-Light-Wallpaper-Image-Picture.png) no-repeat center right;
        height:224px;
    }
}

Thanks for reading, I hope someone may be able to enlighten me on how this could be achieved, I have been able to add the look and feel of the visual image I sent with one tab but as soon as soon as I added the switching of tabs into the mix it just didn't work.

You are appending a button MORE again and again. Do you need that to be generated only once or it is fine working right now? — Suhaib Janjua
– Suhaib Janjua, Commented Mar 18, 2015 at 15:24
@Joker I want the button to only be applied once on each tab, it's not just the button but the text and image classes are being added again and again the button just looks more dominant but they're doing the same thing. Everytime a tab is clicked (same or different) I want it to clear the contents of the previous tab and apply the new information. — Joe Methven
– Joe Methven, Commented Mar 18, 2015 at 17:12

guest271314 · Accepted Answer · 2015-03-18 18:35:05Z

0

Try

$(document).ready(function () {
    var content = {
        "server-one": "Aenean eu leo quam."
          + " Pellentesque ornare sem lacinia quam venenatis vestibulum."
          + " Donec id elit non mi porta gravida at eget metus."
          + " <button><a href='/clans'>MORE<two</button>",
        "server-two": "Nulla vitae elit libero, a pharetra augue."
          + " Etiam porta sem malesuada magna mollis euismod."
          + " <button><a href='/clans'>MORE<two</button>",
        "server-three": "Cum sociis natoque penatibus et magnis "
          + "dis parturient montes, nascetur ridiculus mus."
          + " Nullam quis risus eget urna mollis ornare vel eu leo."
          + " <button><a href='/clans'>MORE<two</button>",
        "server-four": "Donec id elit non mi porta gravida at eget metus."
          + " Aenean eu leo quam."
          + " Pellentesque ornare sem lacinia quam venenatis vestibulum."
          + " <button><a href='/clans'>MORE<two</button>"
    };

    $('#server-titles').selectable({
        selected: function (event, ui) {
            var sel = $(ui.selected).attr("class").split(" ")[0];
            var elem = $(".row [class^=" + sel.concat("-info") + "]");
            elem.html(content[sel]).show(0).siblings().hide(0);
             
        }
    });
});

div[class$=image] {
    display:none;
}

/* Server Tabs */
/* line 423, ../sass/home.scss */
.server-titles-wrapper {
  padding: 0;
}
/* line 425, ../sass/home.scss */
.server-titles-wrapper ul {
  list-style: none;
  padding-left: 0;
}
/* line 429, ../sass/home.scss */
.server-titles-wrapper .server > h3 {
  color: white;
  margin: 0;
  padding: 15px 0 15px 15px;
}
/* line 434, ../sass/home.scss */
.server-titles-wrapper .light {
  background-color: #6bb3cc;
}
/* line 438, ../sass/home.scss */
.server-titles-wrapper .dark {
  background-color: #61a4ba;
}
/* line 442, ../sass/home.scss */
.server-titles-wrapper .active {
  background-color: #75c5e0;
}
/* line 445, ../sass/home.scss */
.server-titles-wrapper .ui-selected {
  background: #75c5e0;
}
/* line 448, ../sass/home.scss */
.server-titles-wrapper .ui-selecting {
  background: #75c5e0;
}

/* line 453, ../sass/home.scss */
.server-info {
  padding: 0;
}
/* line 455, ../sass/home.scss */
.server-info p {
  color: white;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  font-family: Open-Sans, Trebuchet MS, Serif;
}
/* line 465, ../sass/home.scss */
.server-info button {
  background: #f4dab9;
  border-radius: 5px;
  margin: 10px 0 0 10px;
}
/* line 469, ../sass/home.scss */
.server-info button a {
  color: #946d3b;
  font-family: Open-Sans, Trebuchet MS, Serif;
  padding: 4px 8px;
  text-decoration: none;
}
/* line 476, ../sass/home.scss */
.server-info .server-one-info-image {
  background: url(../img/clans.jpg) no-repeat center right;
  height: 224px;
}
/* line 480, ../sass/home.scss */
.server-info .server-two-info-image {
  background: url(../img/test.jpg) no-repeat center right;
  height: 224px;
}

.server-info .server-one-info-image {
    background: url(http://wallpaperkick.com/wp-content/uploads/2015/02/gray-wallpaper.jpg) no-repeat center right;
    height:224px;
}
.server-info .server-two-info-image {
    background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/red-wallpaper-4.jpg) no-repeat center right;
    height:224px;
}
.server-info .server-three-info-image {
    background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/Green-Wallpaper-3.jpg) no-repeat center right;
    height:224px;
}
.server-info .server-four-info-image {
    background: url(http://walldiskpaper.com/wp-content/uploads/2014/11/Blue-Light-Wallpaper-Image-Picture.png) no-repeat center right;
    height:224px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container server-wrapper">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-7 server-info">
                <div class="server-one-info server-one-info-image"></div>
                <div class="server-two-info server-two-info-image"></div>
                <div class="server-three-info server-three-info-image"></div>
                <div class="server-four-info server-four-info-image"></div>
            </div>
            <div class="col-md-5 server-titles-wrapper">
                <div id="display"></div>
                <ul id="server-titles">
                    <li class="server-one light server ui-widget-content">
                        <h3>Title1</h3>
                    </li>
                    <li class="server-two dark server ui-widget-content">
                        <h3>Title2</h3>
                    </li>
                    <li class="server-three light server ui-widget-content">
                        <h3>Title3</h3>
                    </li>
                    <li class="server-four dark server ui-widget-content">
                        <h3>Title4</h3>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

jsfiddle http://jsfiddle.net/p5gsby49/12/

edited Mar 18, 2015 at 18:35

answered Mar 18, 2015 at 18:24

guest271314

1

Sign up to request clarification or add additional context in comments.

5 Comments

Joe Methven Over a year ago

That's some great work right there, thank you, would you be able to explain what the code is actually doing? jsfiddle.net/p5gsby49/13 Also, why do the images slide like that? From the slide I can see lots of black thin bars across the screen, is there a way to remove that slide function as I don't see any mention of it in the jQuery

guest271314 Over a year ago

@JoeMethven js primarily utilizes server-* class see sel of ui-selected to select appropriate server-*-info element, then display content from content object utilizing same pattern, i.e.g., sel server-* is property of contents object, returning value of text/html . Try .show , .hide duration at 0 to adjust visible rendering of elements between display:block , display:none jsfiddle.net/p5gsby49/14 ; see also stacksnippets above , where both .show , .hide set at 0

Joe Methven Over a year ago

That's great thanks, i managed to add a short fade rather than the slide function that was occurring, I have one last small thing I just need to add before I'm fully done with this however: I need to somehow have a default tab (tab-1 - server-one/server-one-info) which will have ui-selected on the top tab and show the top tabs content before the user has even clicked on anything else, is this possible with the code you've gave me? I tried adding code if ($('#server-titles li').click() == false) { as an alternative if the selectable hasn't been clicked but that kinda failed.

guest271314 Over a year ago

Try chaining .find(".server-one").addClass("ui-selecting").parent().data("ui-selectable")._mouseStop(false); to $('#server-titles').selectable({}) jsfiddle.net/p5gsby49/18 . See stackoverflow.com/questions/3140017/… , api.jqueryui.com/mouse

Joe Methven Over a year ago

This works great now! Thank you so much you've helped so much

Collectives™ on Stack Overflow

jQueryUI Stackable (Remove contents on different tab click)

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related