For some reasons i can't put my dropdown button to the right edge of my page, here is my code :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="container">
<ul id="dropdown" class="dropdown-content">
<li>Accueil</li>
<li>Notre entreprise</li>
<li>Nos réalisations</li>
<li>Contact</li>
</ul>
<a class = "btn dropdown-button" href = "#" data-activates = "dropdown">Mail Box
<i class = "mdi-navigation-arrow-drop-down right"></i></a>
</div>
Here is what i have : https://codepen.io/anon/pen/pWpRRz
Just add the following css
.container {
position: fixed;
top: 5%;
right: 0;
left: 0;
}
.btn{
float: right;
}
You can also check the Updated Codepen.
Related
im doing a website for videogames news and updates.I have to add a translation option, so i decided to add google translate button, but it disables the links in the menu on the right side.Please help!
HTML:
<!DOCTYPE html>
<head>
<title> GameDog | Video games info </title>
<meta charset = "UTF-8">
<link rel="stylesheet" type = "text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section class="page">
<nav>
<div class="logo">
<img src = "gamedoglogo.png">
<p> <b> GameDog </b> </p>
</div>
<div>
<ul>
<li>
<div class="toggle"></div>
</li>
<li id="aboutme">About me</li>
<li id="news">
News about ↓
<ul>
<li> Fortnite</li>
<li> Rocket League</li>
<li> League of Legends</li>
<li> CS:GO</li>
</ul>
</li>
<li id="main">Home</li>
</ul>
</div>
</nav>
<h1 class="topic"> Home Page </h1>
<div class = "card-info">
<h3> Hey Gamers, </h3>
<br>
<h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite games. Explore by clicking the button below or the News section above.</h4>
</div>
<div class = "button">
Explore
</div>
<div class="social">
<ul>
<li> <img src="facebook%20white.png", id="facebook-main"></li>
<li> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id="instagram-main"></li>
<li> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-main"></li>
</ul>
</div>
<div class="translate-1">
<div id="google_translate_element"></div>
<span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</span>
</div>
</section>
<div class="menu">
<ul>
<li> Home </li>
<li> News </li>
<li> About me </li>
</ul>
<div class="social-menu">
<ul>
<li> <img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png", id="facebook-menu"></li>
<li> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id = "instagram-menu"></li>
<li> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-menu"></li>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const page = document.querySelector('.page')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
page.classList.toggle('active')
})
</script>
<script>
window.addEventListener("scroll", function(){
var navbar = document.querySelector("nav");
var menu = document.querySelector(".menu");
navbar.classList.toggle("sticky", window.scrollY > 0);
menu.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
CSS:
.menu{
position:absolute;
background-color:#ffd700;
top:0;
right:0;
width:15.62vw;
min-height:100vh;
display:flex;
justify-content: center;
align-items:center;
z-index:-5;
}
.menu.sticky{
position:fixed;
}
.menu ul{
position:relative;
list-style:none;
}
.menu ul li{
padding:1.04vh 1.04vw;
}
.menu ul li a{
text-decoration: none;
color:black;
font-size:4.5ch;
}
.menu ul li a:hover{
color:dimgray;
}
.translate-1{
position:absolute;
left:3vw;
top:16vh;
display:flex;
justify-content: center;
align-items:center;
}
.translate-2{
position:absolute;
left:3vw;
top:76vh;
display:flex;
justify-content: center;
align-items:center;
}
Here are some photos:
this is the page with the translate button
this is the menu on the right, when opened
The links in the menu, should become gray when u hover on them, but due to the google translate button, they don't. When i remove the google translate button, it works, so the problem is there.
JS for the menu is included in the html
And also, im really sorry for my bad formatting, im new to this :(
Your menu has a negative z-index value, so it's just falling behind everything. Make it a positive value or remove it altogether and you're set. If you have a specific reason for using the z-index on the menu, then you'll need to add it to the other elements as well so they're layering correctly and the menu items are accessible.
SO's snippet doesn't seem to like the Google translate script so here's a fiddle that shows that it still works with the z-index property modified:
https://jsfiddle.net/astombaugh/hwo73b64/8/
.menu {
position: absolute;
background-color: #ffd700;
top: 0;
right: 0;
width: 15.62vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.menu.sticky {
position: fixed;
}
.menu ul {
position: relative;
list-style: none;
}
.menu ul li {
padding: 1.04vh 1.04vw;
}
.menu ul li a {
text-decoration: none;
color: black;
font-size: 4.5ch;
}
.menu ul li a:hover {
color: dimgray;
}
.translate-1 {
position: absolute;
left: 3vw;
top: 16vh;
display: flex;
justify-content: center;
align-items: center;
}
.translate-2 {
position: absolute;
left: 3vw;
top: 76vh;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<head>
<title> GameDog | Video games info </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section class="page">
<nav>
<div class="logo">
<img src="gamedoglogo.png">
<p> <b> GameDog </b> </p>
</div>
<div>
<ul>
<li>
<div class="toggle"></div>
</li>
<li id="aboutme">About me</li>
<li id="news">
News about ↓
<ul>
<li> Fortnite</li>
<li> Rocket League</li>
<li> League of Legends</li>
<li> CS:GO</li>
</ul>
</li>
<li id="main">Home</li>
</ul>
</div>
</nav>
<h1 class="topic"> Home Page </h1>
<div class="card-info">
<h3> Hey Gamers, </h3>
<br>
<h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite
games. Explore by clicking the button below or the News section above.</h4>
</div>
<div class="button">
Explore
</div>
<div class="social">
<ul>
<li>
<img src="facebook%20white.png" , id="facebook-main">
</li>
<li>
<img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-main">
</li>
<li>
<img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-main">
</li>
</ul>
</div>
<div class="translate-1">
<div id="google_translate_element"></div>
<span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</span>
</div>
</section>
<div class="menu">
<ul>
<li> Home </li>
<li> News </li>
<li> About me </li>
</ul>
<div class="social-menu">
<ul>
<li>
<img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png" , id="facebook-menu">
</li>
<li>
<img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-menu">
</li>
<li>
<img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-menu">
</li>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const page = document.querySelector('.page')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
page.classList.toggle('active')
})
</script>
<script>
window.addEventListener("scroll", function() {
var navbar = document.querySelector("nav");
var menu = document.querySelector(".menu");
navbar.classList.toggle("sticky", window.scrollY > 0);
menu.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
I followed the example code here to put a dismissible drawer under a top app bar but it doesn't work.
Here is what I tried:
// Note: these styles do not account for any paddings/margins that you may need.
body {
display: flex;
height: 100vh;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
position: relative;
}
.main-content {
overflow: auto;
height: 100%;
}
.app-bar {
position: absolute;
}
// only apply this style if below top app bar
.mdc-top-app-bar {
z-index: 7;
}
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Default Page Title</title>
<link rel="stylesheet" type="text/css" href="drawer.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="./drawer.css">
</head>
<header class="mdc-top-app-bar app-bar" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons" href="#">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
</section>
</div>
</header>
<aside class="mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust">
<div class="mdc-drawer__content">
<div class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
</div>
</div>
</aside>
<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
<main class="main-content" id="main-content">
App Content
</main>
</div>
<body>
<script src="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.js"></script>
<script>
// Instantiate MDC Drawer
const drawerEl = document.querySelector('.mdc-drawer');
const drawer = new mdc.drawer.MDCDrawer.attachTo(drawerEl);
// Instantiate MDC Top App Bar (required)
const topAppBarEl = document.querySelector('.mdc-top-app-bar');
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarEl);
topAppBar.setScrollTarget(document.querySelector('.main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
</script>
</body>
</html>
In order to have the header on the side of the dismissble drawer, you need the following structure:
// Instantiate MDC Drawer
const drawerEl = document.querySelector('.mdc-drawer');
const drawer = new mdc.drawer.MDCDrawer.attachTo(drawerEl);
// Instantiate MDC Top App Bar (required)
const topAppBarEl = document.querySelector('.mdc-top-app-bar');
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarEl);
topAppBar.setScrollTarget(document.querySelector('.main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
// Note: these styles do not account for any paddings/margins that you may need.
body {
display: flex;
height: 100vh;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
position: relative;
}
.main-content {
overflow: auto;
height: 100%;
}
.app-bar {
position: absolute;
}
// only apply this style if below top app bar
.mdc-top-app-bar {
z-index: 7;
}
<!-- IMPORTS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap">
<link rel="stylesheet"
href="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- CONTENT -->
<aside class="mdc-drawer mdc-drawer--dismissible">
<div class="mdc-drawer__content">
<div class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated"
href="#"
aria-current="page">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item"
href="#">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item"
href="#">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
</div>
</div>
</aside>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar app-bar"
id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons"
href="#">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
</section>
</div>
</header>
<main class="main-content"
id="main-content">
App Content
</main>
</div>
<!-- IMPORTS -->
<script src="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.js"></script>
Changes to make this work:
First, you don't need the class mdc-top-app-bar--fixed-adjust since we won't need to adjust the items anymore
Next, move the header itself into the app content (here, called mdc-drawer-app-content).
I looked at this example's HTML in order to see how they did it themselves
Here is the custom CSS that worked for me. Mine is a permanent drawer, so you may need some JS to apply the changes dynamically if you want the drawer to be dismissible, but it solves the layout issues.
First, the critical bit:
.mdc-drawer {
position: fixed;
top: 64px;
}
Since the drawer is now fixed-position, it no longer affects the layout, and the top bar sees it has room to fill the whole width of the page. Pushing the drawer down 64 px keeps it from covering the top bar.
However, this has some side-effects that have to be dealt with. First, most obviously, your main content does the same thing the top bar does--it thinks it has room to fill the whole page, so it gets lost behind the drawer. This is fixable by simply pushing it over:
main {
margin-left: 255px;
}
Second, you will notice that if you resize the viewport, the drawer doesn't show a scroll bar when it should, and when the scroll bar does appear, it won't go all the way to the bottom. This is because you've pushed the bottom of the drawer down off the page.
To fix this, make the drawer's scrollable content shorter:
.mdc-drawer__content {
height: calc(100% - 128px);
}
(I would have expected it to be 100% - 64px, but for some reason it needs 128. I haven't figured out why.)
Hi I'm trying to set a background image for an angularjs website. I've followed quite a few tutorials/examples. They do work. However I want my background image to be set in the bottom of the page above the footer behind a view without affecting the view that's on top. Some suggestions haven't been helpful.
The main culprit is this gap here..which is preventing the background from going to the bottom...I have no idea where in the code is causing this...does anyone know? It's not footer because I've commented it out and the gap still persists.
I've tried filling the div and image sizes to 100% and 100% width/height...no effect.
and this is the full background
As you can see the bottom half is missing.
If I use background-image in css...it crops the background and forces it to stay on top rather than bottom.
I've also tried using a div and filling it with background
.form-wrapperBack {
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #fff;
font-family: Arial;
background-image: url("/img/river.png");
background-repeat: no-repeat;
background-height: 100%;
background-position: center bottom;
Please see image of what it looks like when I set the background in css:
/* general settings */
html {
min-height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
width:100%;
background-color:#000;
}
body {
background-color:000;
font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em;
color:#FFF;
font-weight:100;
margin:0;
min-height:100%;
width:100%;
}
This is index.html
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/history_00.png" />
<h7>Building lasting relationships<h7>
</header>
<body>
<ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-right">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">Join Us</a>
</li>
<li ng-class="{active: isState('about') }">
<a ui-sref="about">About</a>
</li>
<li ng-class="{active: isState('invest') }">
<a ui-sref="invest">Investments</a>
</li>
<li ng-class="{active: isState('contact') }"> </div>
<a ui-sref="contact">Contact</a>
</li>
<li ng-class="{active: isState('login') }">
<a ui-sref="login">log In</a>
</li>
<li ng-class="{active: isState('logout') }">
<a ui-sref="logout">log Out</a>
</li>
</ul>
<h3 class="text-muted"> </h3>
<br>
</div>
<div id="back-Img3">
<div ui-view class=""></div>
<br>
</div>
<!-- Loading the Footer -->
<div id="footer" ng-include="'partials/footer.html'"></div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="js/rg-slider.min.js"></script>
<script src="js/script.js"></script>
<script data-require="ui-router#0.2.10" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>
<script src="js/dialogs.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
If I edit the css and change the image sizing...it also changes the size of the view which I don't want.
style.css
/* general settings */
html {
min-height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
width:100%;
background-color:#000;
}
body {
background-color:000;
font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em;
color:#FFF;
font-weight:100;
margin:0;
min-height:100%;
width:100%;
}
div[back-img3]{
width: 100%;
height:500px;
color: #fff;
}
Also it only shows a part of the background...not all of it.
Is there another way to set an image background in index.html?
Help would be appreciated thank you.
You should position your .form-wrapperBack fixed, make sure it has 100% width and height and that it stays at the top of page and set the background-size to cover:
.form-wrapperBack {
position: fixed;
height: 100%;
width: 100%;
top: 0;
background-image: url("/img/river.png");
background-size: cover;
}
I made a fiddle for you, using some random image.
If any of the rules above does not apply, it must be overridden by another css rule, with a stronger selector. You can easily find it by inspecting the element in a modern browser and either remove that rule or make your selector stronger.
div[back-img3]{
width: 100%;
height:500px;
color: #fff;
}
If you declare image as background of this particullary div it is always 500px and background is cropped to fit that.
Try to add background to the body element
background:src('file_path');
background-size:cover;
also you have little typo here:
body {
background-color:000;
I have a menu on my website which is situated like this,
header>.container>nav{
border:none;
position: absolute;
top:50px;
right: 30px;
text-align: left
}
What I am trying to do is relocate nav inside of a new element within the structure called topLine, and so my new code is,
header.container.clearfix.topLine.nav{
border:none;
position: absolute;
top:50px;
right: 30px;
text-align: left;
background-color:#282b30;
}
However it is not working and I am not sure what I am missing.
The HTML code is below
<header>
<div class="container">
<div class="topLine">
<!--MENU-->
<nav class="clearfix">
<i class="fa fa-bars"></i>
<ul class="list-inline">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Companies</li>
<li>News</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
i would have posted a comment but i don't have enough xp yet. :)
some periods that you have in your css should't be there. Periods are for referencing a class. for example, i see a .nav but you don't have a class="nav" anywhere in the html. if you want to refer to a child element, use >. So instead, do header > .container > .clearfix > .topLine > nav {
Can anyone tell me how to disable a div or elements inside a div?
I have a jstree in my div and I want to disable the div/jstree.
Thanks!
I made a simple example for you here
Basically, it creates a div over your jstree's one so that it is disabled from user interactions.
I guess you can make it visually better, but i think this gives you the idea.
I also checked that there is no strigth way to disable a jstree, even if it could be usefull.
Maybe you'd want to ask the dev in google group...
HTML Code:
<button id="disable">Disable</button>
<button id="enable">Enable</button>
<div id="jstree-wrapper">
<div id="demo" style="height:100px;">
<ul>
<li id="node_1_id">
<a>Root node 1</a>
<ul>
<li id="child_node_1_id">
<a>Child node 1</a>
</li>
<li id="child_node_2_id">
<a>Child node 2</a>
</li>
</ul>
</li>
</ul>
<ul>
<li><a>Team A's Projects</a>
<ul>
<li><a>Iteration 1</a>
<ul>
<li><a>Story A</a></li>
<li><a>Story B</a></li>
<li><a>Story C</a></li>
</ul>
</li>
<li><a>Iteration 2</a>
<ul>
<li><a>Story D</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="disabler"></div>
</div>
CSS code:
#jstree-wrapper {
position: relative;
}
#disabler {
position: absolute;
top: 0px;
left: 0px;
background-color: black;
opacity: 0.5;
}
JS Code:
$(document).ready(function() {
$("#demo").jstree();
$("#disable").on("click", function() {
$("#disabler").css("width", $("#demo").width());
$("#disabler").css("height", $("#demo").height());
});
$("#enable").on("click", function() {
$("#disabler").css("width", "0px");
$("#disabler").css("height", "0px");
});
});
Here's a very good example I didn't find done so simple and good anywhere else. In this example you can simulate the 'disabled' attribute only by adding CSS style as I entered in the code snippet. It disables by using the CSS "visible:hidden", and adds a translucent mask to cover the whole div area and disable anything inside it. You can choose to comment out the 'Visibility:hidden' to be able to see the elements behind the mask, but then they will be tabable, if you don't mind them hidden then uncomment that style.
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.2;
background-color: black;
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
</div>
<button>Dummy</button>
<br/>
<br/>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>