I'm trying to find out how to change the icon of a JStree node using only css?
There are a lot of posts explaining on doing it with javascript but i prefer to use css only.
Here's my code so far:
$("#treeview").jstree().on('loaded.jstree', function()
{
$("#treeview").jstree('open_all');
});
And the Html:
<div id="treeview">
<ul>
<li>
abcdefghijkl
<ul>
<li>
<a href="#" onclick="goTo('index.php?module=klimaat&pagina=dashboard&id=6',false);">
Beneden</a>
</li>
<li>
<a href="#" onclick="goTo('index.php?module=klimaat&pagina=dashboard&id=7',false);">
Boven</a>
</li>
</ul>
</li>
</ul>
</div>
For CSS i'm using the default style sheet delivered by jstree. The documentation provided by jstree is really crappy. So stackoverflow is a big help, but i couldn't find this one on the website.
If you need more code or information, please ask. Thanks
You just have to include this in the CSS:
a .jstree-icon
{
background-image: url("yourimage.png")!important;
background-position: 0!important;
}
This is a fiddle working correctly (updated 2016):
Related
I am trying to hide an element until its previous sibling is hovered over, in css (or scss rather), it looks like this:
.menu-container {
// style with flex etc...
& .menu-item-link {
// style the link...
&+.sub-menu-container {
display: none;
}
&:hover+.sub-menu-container {
display: block;
}
}
}
<ul class="menu-container">
<li class="menu-item-container">
<a class="menu-item-link">Ingredients</a>
<ul class="sub-menu-container">
<li class="sub-menu-item-container">
<a class="sub-menu-link">Fruits</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Vegetables</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Dairy</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Children</a>
</li>
</ul>
</li>
</ul>
How do I achieve this using tailwind?
You're not actually trying to target a sibling in your code, you're trying to target a child element. This is a very simple process when you just want to show a sub-menu dropdown.
Just add group to the hover trigger (.menu-item-link in your case) and group-hover:[some-display-class] to the child. This way the child will change it's display property when the parent element (or itself) is hovered.
You should change your title, also I'd recommend that you don't use Tailwind with class names like that. Please see extracting components for the recommended way to use Tailwind CSS. Of course, you are free to use it how you want but you're better off with plain old CSS if you want to use SCSS and classes like that.
Example with your structure:
<ul>
<li class="group">
<a>Ingredients</a>
<ul class="hidden group-hover:block">
<li>
<a>Fruits</a>
</li>
<li>
<a>Vegetables</a>
</li>
<li>
<a>Dairy</a>
</li>
<li>
<a>Children</a>
</li>
</ul>
</li>
</ul>
Example on Tailwind Play https://play.tailwindcss.com/dFc2zlmqDA
I'm new with css completely, thanks god there have many articles on the net, just like "CSS for IBM Notes and Domino XPages Developers", but I'm still confused with it, now go to the problem I meet, I didn't use my own create theme but the native bootstrap4 theme
here is my code (part of)
<xe:applicationLayout id="applicationLayout1">
<xp:callback facetName="facetMiddle" id="facetMiddle">
</xp:callback>
<xp:this.facets>
<xe:navigator id="navigator1" xp:key="LeftColumn">
<xe:this.treeNodes>
<xe:pageTreeNode page="/View.xsp">
</xe:pageTreeNode>
<xe:pageTreeNode page="/View_ip.xsp" imageHeight="27px" imageWidth="27px">
<xe:this.image>
<![CDATA[#{javascript:var nr=2 ; nr> 0 ? (Math.min(nr, 10) + '.gif') : '';}]]>
</xe:this.image>
</xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator>
</xe:this.treeNodes>
</xe:navigator>
</xp:this.facets>
<xe:this.configuration>
<xe:simpleResponsiveConfiguration collapseLeftColumn="true" collapseLeftTarget=".applayout-column-left"
collapsedLeftMenuLabel="Menu" navbar="false" pageWidth="fluid" invertedNavbar="true">
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
yes...i used Knut's idea about the badge,thanks for that~ Knut
html code(part of):
<div class="applayout-main" id="view:_id1:_id2:applicationLayout1">
<div role="main" class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 hidden-sm-down applayout-column-left sidebar">
<ul role="tree" id="view:_id1:_id2:navigator1" class="nav nav-pills nav-stacked xspNavigator">
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View.xsp" class="nav-link">
All Documents
</a>
</li>
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View_ip.xsp" class="active nav-link">
<img src="/OA/VVUS.nsf/2.gif" height="27px" width="27px">
In Process
</a>
</li>
</ul>
and this is what I want to show to user:
basically, I need this image float right always, that means I need add css myself, as I said beginning I have no idea with it although I read many people's article, and try this on my code, the interesting thing is it worked with below css...
<style type="text/css" media="print">
#applicationLayout1 {
background-color:blue;
}
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/06 update....yes, that's the media="print" thing...I used this css file before, but never try to remove it....How am I so stupid...thanks you guys help...and one more thing for me to do....reinstall my system....
<style type ="text/css">
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/10:final update, I think I found the problem is...I removed not only media="print",but also tags...and everything go to the peace....
.xspNavigator .nav-item img {
float:right;
}
I know it works because ".xspNavigator .nav-item img", the strange thing is if I remove the #applicationLayout1 , it will be back like this, just no effect with css anymore...I really really can't understand why....
so...what's my css file problem? thanks
Remove media="print" from the STYLE tag.
Remove the media="print" part because it tells the browser to only use the CSS when printing.
I am new to BEM and working on a sample template:
HTML
<header class="header">
<div class="header__branding">
<h1>Site branding</h1>
</div>
<div class="header__menu">
<nav class="main-menu">
<ul class="main-menu list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="footer__links">
<ul class="???? list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</div>
</footer>
CSS
.main-menu .list{
// styles here
}
.list__item{
// styles here
}
.list__item-link{
// styles here
}
.list__item-link--active{
// styles here
}
So my questions is, what is the best way to name lists and how best to organize the CSS? I got stuck in the footer, I added a ???? if someone can help me think of a better name for the footer links?
I am finding it hard to wrap my head around BEM, but I should not nest more than one element at a time right?
Think about BEM as reusable component that can be placed many times on site in different places.
In this case you don't need any more class in only 'list'. Both in header and footer.
If you need any modification you could use somethig like: 'list list--wider' or so. And this second class change only width of element.
And one more: list__item-link is wrong. Parent is 'list__item' so this should be named 'list__item__link' BUT you also could name it just 'anchor' or 'link' and you will be able reuse them all around site on <a> elements.
I am trying to make a menu with images only. Can anyone tell me how I should markup this in the most semantic way possible? My best guess would be like this:
HTML
<ul>
<li></li>
</ul>
CSS
.menu {width: 40px; height: 40px}
#home {background: url('...')
EDIT: The query is because Ineed to use empty <a> tags or alternatively I can put the <img> tag within the <a> tags.
First, if you are willing to respect HTML5 semantics, your menu should be wraped in a <nav> tag.
Second, the alt="" should be replaced by a title="" attribute on the <a> tag (MDN for more info)
Third, you should use the <img> tag with the alt="" attribute so you can add more semantic context.
Your menu could look like this:
<nav>
<ul>
<li><img src="" alt="" /></li>
... OTHER LINKS ...
</ul>
</nav>
You can use Font-Awesome icons instead of images.
They are light and easy to load while image taking time to load and you can apply CSS on those icon same as text.
http://fortawesome.github.io/Font-Awesome/icons/
for e.g.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<ul>
<li><i class="fa fa-home"></i></li>
</ul>
But for using font-awsome icons you have to include font-awsome CSS and fonts to your directory.
Good day!
I'm trying to implement drop down menu from examples on my site. But it is not work (drop down menu is not showing at all). I included all necessary js and css files, markup is the same as in the docs.
Can you see what I'm doing wrong?
<link type="text/css" href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-dropdown.js"></script>
...
<body>
<div class="navbar .navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">
Brand
</a>
<ul class="nav">
<li class="dropdown">
<a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
Аккаунт
<b class="caret"></b>
</a>
<ul class="dropdown-menu" id="fat-menu">
<li><a>SubLink</a></li>
<li class="divider"></li>
<li><a>SubLink</a></li>
</ul>
</li>
</ul>
...
</div>
</div>
</div>
Many thanks.
The problem was in missing js block in html file, required for a specific feature.
The missing code bit was:
$('.dropdown-toggle').dropdown()
You're not properly binding your main nav link to your dropdown, try this:
<ul class="nav">
<li class="dropdown" id="fat-menu"> /* notice the reference to your dropdown link #fat-menu */
<a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
Аккаунт
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a>SubLink</a></li>
<li class="divider"></li>
<li><a>SubLink</a></li>
</ul>
</li>
</ul>
Demo: http://jsfiddle.net/u5vhS/1/
I usually used to forget of one of these:
proper html
linking to jquery.js and bootstrap-dropdown.js
checking if i linked it properly (it seems redundant but it certainly helped me)
calling the dropdown: $('.dropdown-toggle').dropdown()
I know this may seem silly, but when you view the source (via right-click), are the addresses of the JavaScript files correct? It's possible that {{ STATIC_URL }} isn't correct. Try copy and pasting the addresses from the source into the address bar. Make sure you actually see the content of the JavaScript files.
I was facing the same problem. Commenting the link for bootstrap-dropdown.js resolved it. I only needed bootstrap.min.js
That will happen if you override li somewhere in your css. For example, if you have an other stylesheet with content:
li {
list-style: none;
margin-bottom: 20px;
overflow: hidden;
padding-bottom: 25px;
position: relative;
}
It will not work. Make sure there is no conflict.
Try to upgrade your jQuery library, it solved the same problem for me.
Had the same issue on a .net project (drop down menu not showing at all), however offcial bootstrap samples worked fine. Upgrading jQuery library on my project from 1.6.1 to 1.8.2 solved the problem.