This question already has answers here:
Changing the style of html tag by clicking on another
(2 answers)
Closed 8 years ago.
I have the following code, the parentAppliance is part of main left nav table and on hovering over "Appliance" I see a subtable containing "health". Now I want the subtable to disappear when I click on "Health", any thoughts?
CSS:
.childAppliance
{
display:none;
}
.parentAppliance:hover .childAppliance
{
display: block;
top: 50px;
left: 130px;
}
HTML:
<a href="#/appliance_status.home" hiddentitle="Appliance" id="ui-id-83" class="ui-corner-all" tabindex="-1" role="menuitem" aria-haspopup="true" title="" data-original-title="">
<span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><ins class="ui-navigation-static-menu-icon ui-navigation-static-menu-icon-backup"></ins>
<span class="ui-navigation-static-menu-text" style="display: inline;">Appliance</span>
</a>
<ul id="ApplianceSubTable" class="ui-menu ui-widget ui-widget-content ui-corner-all childAppliance" role="menu" aria-hidden="true" aria-expanded="false" aria-labelledby="ui-id-83">
<li itemid="Health" class="ui-menu-item" role="presentation">
<a href="#/appliance_status.home" hiddentitle="Health" id="ui-id-33" class="ui-corner-all ui-state-focus applianceFocus" tabindex="-1" role="menuitem" title="">
<span class="ui-navigation-static-menu-text">Health</span>
</a>
</li>
</ul>
You need to use Javascript/Jquery for that.
HTML
<li itemid="Health" class="ui-menu-item" role="presentation" id="Health">
jQuery
$( "#Health" ).click(function() {
$('#ApplianceSubTable').hide();
});
You have to add some javascript adding a clicked class.
$('.parentAppliance').on('click', function () { $(this).toggleClass('clicked'); });
And the css
.parentAppliance.clicked .childAppliance {
display: block;
top: 50px;
left: 130px;
}
Using javascript you can toggle a class which behaves like a hover.
Related
I have this tested page http://fiddle.jshell.net/wt3dqm8b/1/show/light/ (which might be edited here https://jsfiddle.net/wt3dqm8b/1/).
Unfortunately, when you visit it from iPhone with turned on VoiceOver (Settings -> General -> Accessibility -> VoiceOver ON), you hear "Link One link" for the "Link One" link (which is good), but do NOT hear the same "Link One link" when you tap on the ">" arrow. Only "link" pronounced when you click on the ">" arrow.
Many ways were tried, but no one worked fine.
How to change the html code so that the same text "Link One link" pronounced when you click on the ">" arrow?
Here is the code from the page above:
HTML:
<ul class="master secondary">
<li aria-expanded="false" class="main" tabindex="0" aria-label="Link One">
<a tabindex="-1" href="https://google.com">
<span ><span > Link One </span></span>
<i class="fa fa-angle-right"></i>
</a>
</li>
<li aria-expanded="false" class="main" tabindex="0" aria-label="Link Two">
<a tabindex="-1" href="https://google.com">
<span ><span > Link Two </span></span>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
and CSS:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin-top: 60px;
}
.master {
margin: 0;
padding: 0;
list-style: none;
}
.master .main {
border-bottom: 1px solid #ccc;
}
.master .main>a {
position: relative;
display: block;
padding: 20px;
color: green;
text-decoration: none;
background-position: 15px;
}
.master .main > a .fa-angle-right {
position: absolute;
top: 50%;
right: 30px;
margin-top: -8px;
}
P.S. Of course I don't want to change the html code significantly, so that:
no significant changes are expected for JAWS screen reader,
the same behavior kept for the keyboard used - the whole navigation items get focused only once when the Tab key used, no changes in this behavior please.
UPDATE:
Even in the code below
<ul class="master secondary">
<li aria-expanded="false" class="main">
<a target="_self" href="https://google.com">
<span ><span > Link One </span></span>
<i class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></i>
</a>
</li>
<li aria-expanded="false" class="main">
<a target="_self" href="https://google.com">
<span ><span > Link Two </span></span>
<span class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></span>
</a>
</li>
</ul>
Thank you.
I ran your updated code with your CSS and the "sr-only" class from What is sr-only in Bootstrap 3? and it worked fine with VoiceOver. I'm running iOS 12.1.2 on my iPhone.
I heard "this text is not pronounced..." when navigating to the link.
Everything contained within the <a> was treated as one "tab stop" in VoiceOver so I couldn't swipe specifically to the ">" arrow. That's the behavior I'd expect. You should not make the ">" arrow a separate link or tab stop if "link one" has the same destination (href) as the ">" arrow.
I have the following code:
<ul id="slide-out" class="side-nav">
<li><a class="subheader">Scalls Seleccionados</a></li>
<li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 1</a></li>
<li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 2</a></li>
<li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 3</a></li>
<li><div class="divider"></div></li>
</ul>
<a data-activates="slide-out" class="button-collapse btn-floating btn-large cyan" style="top: 10px; left: 10px;">
<i class="material-icons">menu</i>
</a>
Do you have any idea how to disable/remove the overlay when I display the sidenav in Materializecss?
I've spend a lot of time trying to remove it.
IF the issue is because the overlay is overlapping the nav menu, use this CSS fix;
.navbar-fixed {
z-index: 999;
}
// the default value is 997 in materialize.min.css, which places the nav behind the overlay... :(
add this to your css file :
#sidenav-overlay {
background-color: transparent;
}
I know it is an old question but for anyone wanting to remove the overlay the following works:-
.sidenav-overlay {
height: 0px;
width: 0px;
}
or with Svelte:-
:global(.sidenav-overlay) {
height: 0px;
width: 0px;
}
One approach would be to add .sidenav-overlay{opacity: 0;} to your css.
Well, I have also not found any specific function call to do so.
This is how disabling the sidenav without removing it from DOM.
var sideNavElem = $('a[data-activates="slide-out"]');
$(sideNavElem).off('click');
$(sideNavElem).click(function(e){
e.preventDefault();
});
is it similar to what you are looking for?
You can easily remove it from DOM using onOpenStart event
$('.side-nav').sidenav({
..., //your sidenav options here
onOpenStart: function(sidenav) {
sidenav.M_Sidenav._overlay.remove();
}
});
I have the below HTML and CSS. The CSS works fine in firefox but the color does not get applied in IE 9. I have specified the doctype as in xhtml file. How do i make it work with IE9?
HTML:
<div id="j_idt19:j_idt20" class="ui-tabmenu ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-tabmenuitem ui-state-default ui-state-active ui-corner-top" aria-expanded="true" role="tab">
<a id="j_idt19:homeTab" class="ui-menuitem-link ui-corner-all tabMenuDefaultCls" href="/XXX.xhtml?i=0" tabindex="-1">
<span class="ui-menuitem-text"> … </span>
</a>
</li>
<li class="ui-tabmenuitem ui-state-default ui-corner-top" aria-expanded="false" role="tab"> … </li>
<li class="ui-tabmenuitem ui-state-default ui-corner-top" aria-expanded="false" role="tab"> … </li>
</ul>
</div>
CSS:
.ui-state-active li {
background-color: #F85A5A !important;
}
li[aria-expanded="false"] {
background-color: #9975FC !important;
}
li[aria-expanded="true"] {
background-color: #F85A5A !important;
}
.tabMenuDefaultCls {
/* background-color: #9975FC; */
}
Answer:
Solved the issue by giving more precedence to a css class as,
li[aria-expanded="false"] a {
background-color: #9975FC !important;
}
li[aria-expanded="true"] a {
background-color: #F85A5A !important;
}
Add a tag to the css class to take precedence.
Did you add this MetaTag after <head> tag :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Hope it solves your problem.
Maybe the answer suraj gave here will be relevant for you:
Why IE doesn't support my CSS positioning
If it cheers you up, on IE11 it works fine..
http://jsfiddle.net/cg6jLnax/
e
I am using Twitter Bootstrap and I want to make a group of hidden fields inside a dropdown menu:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Export
<b class="caret bottom-up"></b>
</a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a id="downloadJsonButton">Link1</a></li>
<div id="downloadFormFilesDiv">
<li class="divider"></li>
<li><a id="downloadXformsButton">Link2</a></li>
<li><a id="downloadXmlButton">Link3</a><br /></li>
</div>
</ul>
</li>
However, links inside div element looks differently than those which are outside it. I want to make them look the same (links: 2 and 3 should look like link1). How can I accomplish it?
ul li{
width: 300px;
height: 70px;
background: #000;
color: white;
}
Now the menu is look the same to link content and to none content.
Try delete the div between <li> to <li>, you got iligal use with him.
Hope i helped..
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>