I'm using JavaEE with Maven and Primefaces and i want to hide (HTML hidden) a menuitem in Primfaces tabMenu.
Something like the answer in this (prior) question would be good:
.ui-tabmenuitem: {
visibility: hidden !important;
}
Just another small hint:
Adding a style class doesn't work, adding a containerStyle is not supported: See primefaces github page
Your code works for hiding them if I remove the invalid ":"
.ui-tabmenuitem {
visibility: hidden !important;
}
Tested on PF 6.0 and 5.3.
If you want to do it dynamically you can conditionally add a styleClass to the relevant menuitem's;
<p:menuitem styleClass="#{bean.something ? 'ui-tabmenuitem-hidden' : ''}" value="Social">
and hide it with some script:
<script>
$('.ui-tabmenuitem-hidden').parent().css('visibility', 'hidden'); // or toggle()
</script>
Getting the parent is not possible with pure css, that's why the script is needed (as far as I can see..). Use the inspector i Firebug or similar to figure out what's needed.
Either just put the script in the page for running at load time, or put it in an onclick-listener on a button (or somewhere else).
Related
I recently made a (responsive) redesign for a website of mine.
Oddly there is a strange behaviour of the links in some places which every tester missed (because they thought they had missed the link I imagine):
If you click on these links they only get "activated" -- but they aren't followed. If you click them again, then they work fine.
This even works if you click say 7 links in a row and then the first one again.
This only happens on ios 8.x (Tested on 8.4.1.) but not on 7.x and not on android or any desktop-browser.
With remote debugging I see nothing.
I don't even know where to start debugging this ...
Effect can be seen (with an 8.x iPhone) here: http://www.plamundo.de in the listed products.
I've seen the same behaviour, but only with 8.4.1 not with 8.4. This also seems to be the case on your site. An 8.4.1 device requires a double tap, with 8.4 only one tap is needed. This is a minimal testcase I built:
<html>
<head>
<title>Minimal testcase iOS 8.4.1 hover double tap problem</title>
<style>
body { font-size: 2em; } /* Only needed for a readable font-size */
a { display: block; font-decoration: none;}
a:hover { font-decoration: underline; }
</style>
</head>
<body>
<a href="http://www.apple.com/" >Click me</a>
</body>
</html>
We solved this by making the 'a:hover' conditional. You can do this with a media-query (but that's hard if you also want to target iPads) or with some JavaScript that adds a class which you can use to make the CSS selective. Example:
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
with:
.iamanobnoxiousiphonedevice *:hover{
text-decoration: inherit !important;
}
An easier way to solve this is by removing the 'display: block', but I don't know if that's an option for you.
A strange trick solution that works in a project I am working on is to reset the z-index:
* { z-index: 0 }
Found that hack by Ryan Ou (thx) in an Angular google group
I suspect that it might be Adobe Analytics on our site that "steals" some clicks. Had issues because of Adobe also when trying to set focus on a text field and reveal the keyboard after a click. They caught the initial click so that our became synthetic and became restricted by iOS.
I'm surprised to have encounted this same issue so many years after the original post. I'm exploring solving this as follows:
const onHover = useCallback(
(evt) => {
// ios browsers intercept the tap/click event and instead trigger a mouseover event.
// This happens ONLY if we subscribe to onHover events.
// But we can grab the original event target and directly call click.
if (isIos()) {
evt.target.click?.();
}
// whatever your normal onHover code is can now be called:
onOriginalOnHover();
},
[onOriginalOnHover],
);
This works in my test app. Will need further validation though.
I have a custom directive that I use to manage user access through my website. I use this to add a 'disabled="disabled"' attribute to html tags.
However, when I try to use this with tag-input, it doesn't work. I'm guess this is down to that fact that ngTagsInput uses it's own directive for tags-input.
I have read the documentation and cannot find a solution to what I am looking for.
Here is my code:
Html:
<div access-level="Admin">
<tags-input ng-model="tags" on-tag-added="addNewTag($tag)" on-tag-removed="removeTag($tag)">
<auto-complete source="loadTags($query)" min-length="0"></auto-complete>
</tags-input>
</div>
Is there any work around for this?
Thanks.
It's currently unsupported, but looks like will be in the next major version (2.3.0):
https://github.com/mbenford/ngTagsInput/issues/102
Edit:
2.3.0 is out; see following link for details https://github.com/mbenford/ngTagsInput/blob/master/CHANGELOG.md#features
I could not find this option in the release 2.3.0, but at least they have enabled the regular disabled attribute.
What I have done to hide the remove button and the "Add a tag" input box, was to add a couple of rules in the CSS.
tags-input[disabled] .remove-button {
display: none;
}
tags-input[disabled] input.input {
display: none;
}
Probably there is a better way to do it, this was the fastest I could find.
I have a site that requires two themes to be loaded. The second theme can be toggled on/off by the user. I'm currently accomplishing this by using the disabled tag in the link like so:
<link rel="stylesheet" href="{{main css}}">
<link rel="stylesheet" title="theme-white" href="{{2nd theme css}}" disabled>
I then toggle disabled in JavaScript.
This works great in Safari (Mac), Chrome (Mac/Windows), and IE10. However, Firefox (both Mac and Windows) seems to ignore the disabled tag on page load and displays the second theme on initial load (as it is loaded second). When I manually toggle disabled, however, Firefox does respond to the tag and will begin to switch the second theme on/off.
How can I accomplish this goal?
I found a workaround that seems to be functional in all browsers. This does NOT seem like it should be the best way to do it but I wanted to share.
This is not ideal for a few reasons but I tried to make it streamlined and without any external library dependency like jQuery because this needs to be placed in your head tag and you probably have not loaded your JS libraries at that point.
<script>
window.onload = function() {
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.href = '/your/css/url.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
style.disabled = true;
};
</script>
NOTE: Firefox seems to only respond to the disabled tag if it is applied to the stylesheet after it has been added to the DOM. I still feel like I'm missing something because that seems crazy.
So, if you were to put style.disabled = true; before you add the style to your document then Firefox does not recognize the disabled state of the stylesheet.
This is fixed in Firefox 68. You can now set the disabled attribute on <link> elements that also contain the ref=stylesheet attribute value. This will prevent the browser from loading that stylesheet until the disabled attribute is set to false or removed via JavaScript or some other method.
This brings Firefox in line with Chrome, Edge, Safari on support for this feature.
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes
Bugzilla report: https://bugzilla.mozilla.org/show_bug.cgi?id=1281135
Late to the party here, but I just encountered this problem as well in Firefox. Turns out it had to do with HOW the disabled attribute is applied to the stylesheet via Javascript.
See the below code, assuming some trigger to swap disabled state between two stylesheets. The first function is what I tried first, and the latter is what ended up working for me.
var myStyles = document.getElementById('my-default-style');
var myOtherStyles = document.getElementById('my-other-style');
function thisFailsInFirefox() {
myStyles.setAttribute('disabled', true);
myOtherStyles.removeAttribute('disabled');
}
function thisWorksInFirefox() {
myStyles.disabled = true;
myOtherStyles.disabled = false;
}
The thisWorksInFirefox function seemed to do the trick, maintaining functionality in Chrome / Safari / Edge, while making Firefox match in its behavior.
Everything in your theme stylesheet could be prefixed with a class. For instance, if you have the following in your theme css:
h1 {color: red;}
h2 {color: green;}
It becomes something like:
.theme-white h1 {color: red;}
.theme-white h2 {color: green;}
Then, to toggle your theme, you can use the following:
if (show theme) {
$('body').addClass('theme-white');
} else {
$('body').removeClass('theme-white');
}
If I create an HTML anchor tag and set the disabled attribute to true, I get different behaviors in different browsers (surprise! surprise!).
I created a fiddle to demonstrate.
In IE9, the link is grayed out and does not transfer to the HREF location.
In Chrome/FF/Safari, the link is the normal color and will transfer to the HREF location.
What should the correct behavior be? Is IE9 rendering this incorrectly and I should implement some CSS and javascript to fix it; or is Chrome/FF/Safari not correct and will eventually catch up?
Thanks in advance.
IE appears to be acting incorrectly in this instance.
See the HTML5 spec
The IDL attribute disabled only applies to style sheet links. When the
link element defines a style sheet link, then the disabled attribute
behaves as defined for the alternative style sheets DOM. For all other
link elements it always return false and does nothing on setting.
http://dev.w3.org/html5/spec/Overview.html#the-link-element
The HTML4 spec doesn't even mention disabled
http://www.w3.org/TR/html401/struct/links.html#h-12.2
EDIT
I think the only way to get this effect cross-browser is js/css as follows:
#link{
text-decoration:none;
color: #ccc;
}
js
$('#link').click(function(e){
e.preventDefault();
});
Example: http://jsfiddle.net/jasongennaro/QGWcn/
I had to fix this behavior in a site with a lot of anchors that were being enabled/disabled with this attribute according to other conditions, etc. Maybe not ideal, but in a situation like that, if you prefer not to fix each anchor's code individually, this will do the trick for all the anchors:
$('a').each(function () {
$(this).click(function (e) {
if ($(this).attr('disabled')) {
e.preventDefault();
e.stopImmediatePropagation();
}
});
var events = $._data ? $._data(this, 'events') : $(this).data('events');
events.click.splice(0, 0, events.click.pop());
});
And:
a[disabled] {
color: gray;
text-decoration: none;
}
disabled is an attribute that only applies to input elements per the standards. IE may support it on a, but you'll want to use CSS/JS instead if you want to be standards compliant.
The JQuery answer didn't work for me because my anchor tag is on a form and on my forms I use asp field validators and they just weren't playing nice. This led me to finding a pretty simple answer that doesn't require JQuery or CSS...
<a id="btnSubmit" href="GoSomePlace">Display Text</a>
You can disable the element and it should behave as input types do. No CSS needed. This worked for me in chrome and ff.
function DisableButton() {
var submitButton = document.getElementById("btnSubmit");
if (submitButton != null) {
submitButton.setAttribute('disabled', 'disabled');
}
}
Of course you'll be doing a loop to disable all anchor tags in the DOM but my example shows how to do it for just one specific element. You want to make sure you're getting the right client id of your element but this worked for me, on more than one occasion. This will also work on asp:LinkButtons which end up being anchor tag elements when rendered in the browser.
I need to style disabled <select>elements to make them look like they're enabled. Can someone help?
PS. I am all-too-aware of the downsides of doing this sort of thing vis a vis HCI principles etc., but its a requirement so I've got to do it if it is possible ...
Thanks.
EDIT:
#AlexThomas' method works well when the elements are disabled in HTML code but unfortunately I'm doing the disabling/enabling with JQuery:
<select class='dayselector'>
<option>Monday</option>
<option>Tuesday</option>
<!-- .... etc. -->
</select>
$(".dayselector").attr("disabled",true);
$(".dayselector").attr("disabled",false);
So the selector:
$(".dayselector") //works and gets all the selects
and
$(".dayselector option") //works and gets all the selects' option items
but
$(".dayselector [disabled='true']") //doesn't return anything.
and
`$(".dayselector [disabled='false']") //doesn't return anything.
Is there something I'm missing?
You could either go with
select[disabled] { }
(not supported in <IE7)
or
select:disabled { }
(not supported in <IE9)
Maybe you should use readonly instead of disabled. This will make the input enabled, but without allowing the user to change its value.
Using jquery:
$('option[disabled="true"]').each(function () {
$(this).attr('style', 'color:red');
});
check it in action here http://jsfiddle.net/GfNve