Question 230144 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I reveal a div content within a JQuery selectable?

I have an idea in my mind but I’m not sure if it’s doable:
I have a list of items which I want to be selectable using JQuery Selectable widget; on top of that, I’d like the content of every cell to be visible on mouse over, I tried putting a div with variable opacity inside the element, but the visibility works only when I pass onmouseover, not when I actually drag the Selectable lasso over the element, which kind of defies the purpose.
I am sure there’s a way to do it, maybe with CSS, but I haven’t been able to find it.

Here’s my current code:

<ul id="selectable">
<li class="selectable"><div class="inner">1</div></li>
<li class="selectable"><div class="inner">2</div></li>
<li class="selectable"><div class="inner">3</div></li>
<li class="selectable"><div class="inner">4</div></li>
<li class="selectable"><div class="inner">5</div></li>
</ul>

#selectable .ui-selecting { background: #0d5a8d; }

#selectable .ui-selected {
background: #0d5a8d;
color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100px;
}
#selectable li {
  margin: 0px;
  padding: 0px;
  height: 30px;
  font-size: 12px;
  color: grey;
  text-align: center;
  border-style: solid;
  border-color: grey;
  border-width: 1px;
}
.inner {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.inner:hover { opacity: 1; }

var options = {
  filter: "li"
};

$("#selectable").selectable(options);

$(document).ready(function() {
  $("#selectable").selectable('destroy').selectable(options);
});

And here’s the fiddle of what I’m currently at:

https://jsfiddle.net/giovannimin/rtav1fjL/11/

As you can see, passing on mouse over reveals the numbers, selecting them with the selectable lasso does not.

(I’m sorry if I did something wrong, but it looks like you have to expand javascript menu and turn on jquery UI 1.9.2 in order for it to work – I couldn’t get jsfiddle to memorize it)

Any help or tip will be appreciated!

Tags:

2

Answers


  1. 0

    Selectable adds a class to the parent LI of ui-selected when it is selected.

    So you can use #selectable .ui-selected .inner to target the inner object when the parent is selected

    #selectable .ui-selected .inner{ opacity:1 }

    var options = {
  filter: "li"
};

$("#selectable").selectable(options);

$(document).ready(function() {
  $("#selectable").selectable('destroy').selectable(options);
});
    #selectable .ui-selecting { background: #0d5a8d; }

#selectable .ui-selected {
background: #0d5a8d;
color: white;
}
#selectable .ui-selected .inner{
opacity:1
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100px;
}
#selectable li {
  margin: 0px;
  padding: 0px;
  height: 30px;
  font-size: 12px;
  color: grey;
  text-align: left;
  text-indent: 3px;
  border-style: solid;
  border-color: grey;
  border-width: 1px;
}
.inner {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.inner:hover { opacity: 1; }
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link type="text/css" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet" />
<ul id="selectable">
<li class="selectable"><div class="inner">1</div></li>
<li class="selectable"><div class="inner">2</div></li>
<li class="selectable"><div class="inner">3</div></li>
<li class="selectable"><div class="inner">4</div></li>
<li class="selectable"><div class="inner">5</div></li>
</ul>
    Login or Signup to reply.
  2. 0

    Please try with this css:

      .ui-selected .inner,.ui-selecting .inner { opacity: 1;color: white; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search