at the moment, i am using the selectable JQUERY function
<style>
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
</style>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
but for some reason, when i select an element, the color will not change to bright orange but revert to the default gray of ui-state-default like below:
But if I go to the Chrome debugger and uncheck the background in ui-state-default in the style section, it works perfectly.
Is it because of this snippet:
var nodes = document.getElementById('selectable').getElementsByClassName('ui-widget-content');
if (nodes.length > 0)
{
nodes[0].innerHTML = getSymbol();
nodes[0].setAttribute("class", "ui-state-default");
}
How do i go around this problem, such that when i click on the element of interest, the color will change like i specified in the <style> tag.
With jQuery, this is quite simple.
$('.ui-widget-content') will select all of your LI elements. (alternately you could use $('#selectable li'))
$('.ui-widget-content').click(function() {
$(.'ui-widget-content').removeClass('.ui-state-default'); <-- this clears previous selections
$(this).addClass('.ui-state-default'); <-- this adds the class to the clicked item
})
Related
Im a jquery noob and I cant figure out how to get the next level expanding in a clickable accordion like menu.
Here is the fiddle:
https://jsfiddle.net/hinterseer/gaxm6uqo/29/
Html
<div class="navbar-collapse">
<ul class="nav">
<li class="subMenu">Archive <span class="caret toggle">+</span>
<ul class="subMenu-link">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li class="subMenu"> Archive 2 <span class="caret toggle">+</span>
<ul class="subMenu-link">
<li class="subMenu">Archive 3 <span class="caret toggle">+</span>
<ul class="subMenu-link">
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
css
.subMenu-link {
display: none;
}
.subMenu {
list-style: none;
}
jQyery
(function($) {
$("li.subMenu").unbind().click(function () {
var slideDown = $(this).find(".toggle").text() == "+" ? false : true;
$(".subMenu-link").slideUp();
$(".toggle").text('+');
if (!slideDown) {
$(this).find('.subMenu-link').slideDown();
$(this).find('.toggle').text('-');
}
});
})(jQuery);
I've refactored things a bit further to enable toggling of each list item and their children independently. I've listed the changes below:
change the listener to $(".toggle").on('click', function() {...
change slideDown to const and modify selector $(this).find(".caret:first")...
use .siblings() for slide up/down functionality, $(this).siblings(".subMenu-link").slideUp()
restructure HTML to wrap li text in its own span so that the text triggers the toggle instead of the whole element (and its children)
add cursor: pointer to .toggle for visual cue to user indicating click
Saw this and thought I'd give things a shot even if it was more than asked.
(function($) {
$(".toggle").on('click', function() {
const slideDown = $(this).find(".caret:first").text() == "+" ? false : true;
$(this).siblings(".subMenu-link").slideUp();
$(this).find(".caret").text('+');
if (!slideDown) {
$(this).siblings('.subMenu-link').slideDown();
$(this).find('.caret').text('-');
}
});
})(jQuery);
.subMenu-link {
display: none;
}
.subMenu {
list-style: none;
}
.toggle {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-collapse">
<ul class="nav">
<li class="subMenu"><span class="toggle">Archive <span class="caret">+</span></span>
<ul class="subMenu-link">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li class="subMenu"><span class="toggle">Archive 2 <span class="caret">+</span></span>
<ul class="subMenu-link">
<li class="subMenu"><span class="toggle">Archive 3 <span class="caret">+</span></span>
<ul class="subMenu-link">
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Just add :first in this line:
var slideDown = $(this).find(".toggle:first").text() == "+" ? false : true;
Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
I know the font library is loading because I was able to use <i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li> and the font rendered properly (though not styled properly).
If you are using the CSS version read this: Font Awesome 5, why css content is not showing?
Using the last release of the Font Awesome 5 you can enable the use of pseudo-element with the JS version by adding data-search-pseudo-elements like below:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
color: blue;
margin: 0 5px 0 -15px;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
You can check the documentation for more details :
If you’re using our SVG + JS framework to render icons, you need to do a few extra things:
Enable Pseudo Elements
Using CSS Pseudo elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the <script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.
Set Pseudo Elements’ display to none
Since our JS will find each icon reference (using your pseudo element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo element that’s rendered.
As stated in the docs of Font Awesome of how to enable Pseudo class...
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems::before {
font-family: "Font Awesome 5 Solid";
content: "\f058";
display: none;
}
.user::before{
font-family: "Font Awesome 5 Solid";
content: "\f007";
display: none;
}
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i><br>
<a class="user" href="#">User</a>
If you install fontawesome in your project using a package manager (I'm using yarn on a Rails project), you have to import not only the js resource but also the css resource:
import "#fortawesome/fontawesome-free/js/all"
import "#fortawesome/fontawesome-free/css/all"
Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
I know the font library is loading because I was able to use <i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li> and the font rendered properly (though not styled properly).
If you are using the CSS version read this: Font Awesome 5, why css content is not showing?
Using the last release of the Font Awesome 5 you can enable the use of pseudo-element with the JS version by adding data-search-pseudo-elements like below:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
color: blue;
margin: 0 5px 0 -15px;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
You can check the documentation for more details :
If you’re using our SVG + JS framework to render icons, you need to do a few extra things:
Enable Pseudo Elements
Using CSS Pseudo elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the <script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.
Set Pseudo Elements’ display to none
Since our JS will find each icon reference (using your pseudo element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo element that’s rendered.
As stated in the docs of Font Awesome of how to enable Pseudo class...
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems::before {
font-family: "Font Awesome 5 Solid";
content: "\f058";
display: none;
}
.user::before{
font-family: "Font Awesome 5 Solid";
content: "\f007";
display: none;
}
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i><br>
<a class="user" href="#">User</a>
If you install fontawesome in your project using a package manager (I'm using yarn on a Rails project), you have to import not only the js resource but also the css resource:
import "#fortawesome/fontawesome-free/js/all"
import "#fortawesome/fontawesome-free/css/all"
I have a web page that displays a list of item with variable length. There are two panels at the top of the page that display information about the selected item from the list. Both or just one can be hidden by the user to see more items in the list. If the panels are displayed, I need them to be fixed - even when scrolling through the list, they are always visible. If the user hides some panels, I want the list of items to move to the area where the fixed panel was.
The situation is shown in the picture. The green and yellow panels must always be seen until the user hides it. The list must move according to space above.
Is there a possibility to do this with HTML and CSS?
Yes. You can put your list inside a div and set the div to have a fixed height as well, then the items below will be scrollable.
See this example (jsfiddle):
.panel-1, .panel-2{
height: 100px;
}
.panel-1{
background: red;
}
.panel-2{
background: blue;
}
.list{
height: 200px;
overflow-y: auto;
}
.list-group{
background: rgba(0, 0, 0, 0.1);
list-style: none;
padding-left: 0;
}
.list-item{
margin: 5px 0;
padding: 5px 0;
background-color: yellow;
}
<div>
<div class="panel-1">Information</div>
<div class="panel-2">More information</div>
<div class="list">
<ul class="list-group">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
<li class="list-item">Item 5</li>
<li class="list-item">Item 6</li>
<li class="list-item">Item 7</li>
<li class="list-item">Item 8</li>
<li class="list-item">Item 9</li>
<li class="list-item">Item 10</li>
</ul>
</div>
</div>
How can I use CSS selectors to apply a style only to the inner item in a list. Example:
HTML fragment:
<ul class="list">
<li>Item 1</li>
<li>
<ul class="list">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>
<ul class="list">
<li>Subitem 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS fragment:
ul.list {
border: 1px solid red;
}
What I need is to have a border only arround the "Subitem 1.1" string. The list is generated and it's not possible to add an extra class or id and as the list has no fixed depth it's not an option to specify an "ul > ul > ul.list" or similar selector.
I believe you cannot do this with only CSS if it is not possible to use an Id or unique class. In this case I think jQuery is the way to go:
$("li").children().eq( $("li").children().length - 1 ).
css('border', '1px solid red');
The idea is to use eq() to pinpoint the deepest child.
Hope this helps
it's not an option to specify an "ul > ul > ul.list" or similar selector.
Why not? This, or adding a class, is the solution.
You've basically specified a requirement to identify an element, then rejected all the approaches that you could use to do so.
<html>
<head>
<style type="text/css">
li.list {
border: 1px solid red;
}
</style>
</head>
<body>
<ul >
<li>Item 1</li>
<li>
<ul >
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>
<ul >
<li class="list">Subitem 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
I Hope This ma help you..
JoseSantos is correct in that it can't be done with pure CSS. Here's how I'd do it in jQuery:
$("ul").each(function(){
if ($(this).find("ul").length == 0)
$(this).addClass("list");
});