I'm currently checking a complex web application for accessibility without JavaScript. We heavily rely on JSF and Seam to render the pages and I'm more than annoyed about the overall behaviour when JavaScript is turned off. Many links and buttons rely on JavaScript to perform even the most basic operations.
Is there some general documentation about that topic?
Has any of you some advise how to maintain accessibility?
My first investigations showed that tags like <s:button> can be replaced with <h:commandButton>. But a few minutes later I've realized that even <h:commandLink> doesn't seem to work without JavaScript. I'd love to have some documentation that describes what parameters that make JS mandatory and showing alternate ways to achieve the same elements.
It's understood that things like onClick and others won't work without JS. But I really need to make at least the basic actions behind those links and buttons work. Currently much of the webapp can't be navigated without JS and that's unacceptable.
I had the same accesibility requirements for my previous project.
What I've done is the following:
Just use s:link or h:commandlink for users who have JS and put there a noscript tag with a h:commandbutton styled like your link (as good as possible).
And also make sure that s:link or h:commandlink is default hidden in the CSS and made visible with JS. This way you only get one link or button seen when JS is off.
You can do this easily with Jquery.
Cheers.
<>
One possibile replacement for the <rich:modalPanel> is the following CSS only solution - maybe it helps others.
div.modal {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}
div.modal div.wrapper {
background-color: white;
border: 5px solid black;
width: -moz-fit-content; /* Mozilla Optimization */
max-width: 90%;
max-height: 90%;
overflow-y: scroll;
margin : 50px auto;
padding: 10px;
-moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Simply replace <rich:modalPanel> with <s:div rendered="..." styleClass="modal"><div class="wrapper"> content </div></s:div>. The CSS is a bit stylish... you may strip some of the cosmetic things though.
A possible replacement for <rich:tabPanel> might be Tomahawk's <t:panelTabbedPanel> which should work without JavaScript - at least that's what has been told me... but I still have to verify this.
Another alternative is the <noscript> tag... as mentioned by Serkan. For the tab panel this could look like the following (just a quick wireframe):
<noscript>
<h:form id="formTasksNoJS">
<fieldset>
<legend>Alternative Steuerung ohne JavaScript</legend>
<h:commandButton action="#{taskManagerSettings.setSelectedTab('eingang')}" value="Eingang" id="noJS1"/>
<h:commandButton action="#{taskManagerSettings.setSelectedTab('ausgang')}" value="Ausgang" id="noJS2" />
<h:commandButton action="#{taskManagerSettings.setSelectedTab('archiv')}" value="Archiv" id="noJS3" />
</fieldset>
</h:form>
</noscript>
<h:form id="formTasks">
<rich:tabPanel switchType="server" selectedTab="#{taskManagerSettings.selectedTab}" >
<rich:tab name="eingang" label="Eingang">
...
</rich:tab>
<rich:tab name="ausgang" label="Ausgang">
...
</rich:tab>
<rich:tab name="archiv" label="Archiv">
...
</rich:tab>
</rich:tabPanel>
</h:form>
This allows clients without JavaScript to activate the desired tab. A better solution would hide the unusable tab panel navigation and present a cleaner interface. But you'll get the point.
Related
I'm new at Vuejs and Nuxt. I'm using a library facebook-login-vuejs,
it works but I need little bit modifying like the button width adjustment.
I tried to give a "fbutton" class in this component :
<facebook-login
class="button fbbutton"
appId="102023513468xxx"
loginLabel="Facebook"
#login="fbOnLogin"
#logout="fbOnLogout"
></facebook-login>
and here my CSS :
.fbbutton button{
width: 100px;}
But nothing gonna change
here in this picture, the width doesn't change. Seems like set by facebook
this one also, the button still out of the container
Please any body can help me how to solve this, thanks
Checking the facebook-login-vuejs source code you clearly see "the html structure".
You need to override the "default" css rule.
.facebook-login button {
border: none;
color: #fff;
position: relative;
line-height: 34px;
min-width: 225px;
padding: 0 15px 0px 46px;
background-image: linear-gradient(#4c69ba, #3b55a0);
}
I have tried everything I can think of - including including every bpopup and jquery javascript file, even a .json file I found on one example, but can not seem to get this thing to work. I have all of the script files included in the same folder as the example I am trying to run:
bpopup (jQuery plugin), Code Example. My Non-working example here.
It is this last link that I am trying to get to work, as just a starting point. I have looked through the examples here. It shows just some of the cool things I would like to use. downloading the page and accompanying files and opening it in Dreamweaver doesn't work for me either..
Any help would be astronomically appreciated. the jfiddle examples work, I however can not see which script files they are linking to - they must be uploaded in to jfiddle somehow. I have searched other issues when trying to use bpopup on stackoverflow, I however can not find a full, non-broken (in to various pieces) solution i.e. the whole html page along with the script files linked to embedded in the head tag.
Thanks much,
Brian
You need to add jQuery.js, jquery.bpopup-0.9.4.min.js, jquery.easing.1.3.js and a style sheet. For example,
JS:
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js
http://dinbror.dk/bpopup/assets/jquery.easing.1.3.js
StyleSheet from their site:
http://dinbror.dk/bpopup/assets/style.min.css
And this code
$(function(){
$('#pop').click(function(){
$('#popup').bPopup();
});
});
HTML:
<div id="popup" style="display: none;">
<span class="button b-close"><span>X</span></span>
If you can't get it up use<br />
<span class="logo">bPopup</span>
</div>
Works Fine (Click Popup button).
CSS: (Used in popup) with another example
#popup, .bMulti {
background-color: #FFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 25px 5px #999;
color: #111;
display: none;
min-width: 450px;
min-height: 250px;
padding: 25px;
}
#popup .logo {
color: #2B91AF;
font: bold 325% 'Petrona',sans;
}
.button.b-close, .button.bClose {
border-radius: 7px 7px 7px 7px;
box-shadow: none;
font: bold 131% sans-serif;
padding: 0 6px 2px;
position: absolute;
right: -7px;
top: -7px;
}
.button {
background-color: #2B91AF;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
color: #FFF;
cursor: pointer;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
Update : In your example (given link), you have loaded jQuery three times and most importantly, you've loaded the plugin (bPopup) more than once and at last jQuery again, so jQuery object changed. So, just load a single verion of jQuery first and then load jquery.easing.js and then load bPopup.js (min/expanded). Also load stylesheet (style.js) with styles declared for your popup div.
I have used the same code of yours and it's working fine. Here's the demo. The problem seems to be with the multiple jQuery versions you are calling. In total you need the following two files to get this working:
jquery.js
jquery.bpopup.min.js or jquery.bpopup.js
If you wish to learn more about what happens when you try to use multiple versions of jQuery and how you can actually do it, you should refer to http://api.jquery.com/jQuery.noConflict/
Other than that, you should always load jQuery prior to using any jQuery based plugin.
So I am trying to make a website and have a popup window/box DIV that appears after clicking something. This popup DIV contains text/content, let's name it "Locations," as per my website's design. This Locations Popup DIV has a fixed height and width, and consequently, there is a vertical scroll bar I've created to scroll down and read the text. I would like to add more content to this popup but unfortunately, the text is being cutoff, and the scroll does not continue scrolling down. I have set a pretty large value for the margin/padding in the DIV to make this work for a very long page length, but it is very inefficient and poor programming.
How can I set the style of a div to the height of the total HTML document (which is the dyanamic, changing factor here) using JavaScript or CSS so I can do this intelligently and properly? I don't want to have to manually do this, as the longer the HTML Document becomes if I choose, I will always have to go back and either change the margin/padding value in CSS or do something to the JavaScript.
Below is the CSS for it:
/* Pop Up */
#popupAbout, #popupLocations, #popupContact, #popupBlog {
height: 600px;
width: 900px;
overflow: scroll;
background-color: rgba(0, 0, 0, 0.75);
border: 2px solid #cecece;
z-index: 15;
padding: 20px;
color: #FFF;
-webkit-box-shadow: 0px 0px 4px #000 inset;
-moz-box-shadow: 0px 0px 4px #000 inset;
box-shadow: 0px 0px 4px #000 inset;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: -50px;
visibility: hidden;
}
#popupAbout p, #popupLocations p, #popupContact p, #popupBlog p {
padding-left: 10px;
font-size: 18px;
line-height: 20px;
}
#popupAbout h1, #popupLocations h1, #popupContact h1, #popupBlog h1 {
text-align: left;
font-size: 30px;
letter-spacing: 1px;
border-bottom: 1px dotted #D3D3D3;
padding-bottom: 2px;
margin-bottom: 20px;
}
#popupAboutClose, #popupLocationsClose, #popupContactClose, #popupBlogClose {
right: 6px;
top: 6px;
position: absolute;
display: block;
}
And the appropriate JavaScript:
//Locations Page Pop Up
var popupLocationsStatus = 0;
function loadPopupLocations(){
if(popupLocationsStatus==0){
$("#popupLocations").fadeIn("slow");
popupLocationsStatus = 1;
}
}
function disablePopupLocations(){
if(popupLocationsStatus==1){
$("#popupLocations").fadeOut("slow");
popupLocationsStatus = 0;
}
}
function centerPopupLocations(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupLocationsHeight = $("#popupLocations").height();
var popupLocationsWidth = $("#popupLocations").width();
$("#popupLocations").css({
"position": "absolute",
"top": windowHeight/2-popupLocationsHeight/2,
"left": windowWidth/2-popupLocationsWidth/2
});
}
$(document).ready(function(){
$("#popupLocations").fadeOut();
popupLocationsStatus = 0;
$("#Locations").click(function(){
$("#popupLocations").css({
"visibility": "visible" });
disablePopupAbout();
disablePopupContact();
centerPopupLocations();
loadPopupLocations();
});
$("#popupLocationsClose").click(function(){
disablePopupLocations();
});
});
$(function()
{
$('#popupLocations').jScrollPane();
$('.popupLocations').jScrollPane(
{
showArrows: true,
horizontalGutter: 10
}
);
});
Here is the screenshot I've saved to give a better look at what I am talking about exactly (looking at the bottom of the popup window where the text is being cutoff):
My Website Screenshot
Everyone may view my work so far at: www.zaheeruddinsyed.com, to see exactly what I am talking about.
I believe you're looking for overflow: auto property. Take a look at this fiddle.
If you want to achieve the scrollbar like on sample image, you'll have to play around with css, here is tutorial on how to apply custom style to scrollbar.
Btw, if you want to make popup window, you might want to look at Fancybox, which, in my opinion, looks really good and most of work is already done! The only downside might be that you have to use it with jQuery, but it's already used on most of the webpages today.
Edit
When I've looked at page source, I found the problem in less than a minute. The content of your popup div isn't scrolling to the bottom, it stops for some reason.
This question is similar: Bottom content cutoff using overflow: auto; and jscrollpane
Try and put this code in JavaScript console (Ctrl + Shift + (J in Chrome, K in Firefox):
$("#popupLocations .jspPane").css("top","-800px")
It scrolls down to the bottom where it should. I know that this doesn't solve your problem just yet, but I think I've found a solution (I'm not sure because I can't test it myself). But if you look at that other question, the solution is using autoReinitialise:true. You can try it right away by running this in JavaScript console:
$('.popupLocations').jScrollPane({
showArrows: true,
horizontalGutter: 10,
autoReinitialise:true
}
);
Of course you'll have to put it in your file where you're initializing jScrollPane if you want it to work correctly every time you refresh the page.
And why do you have 2 $(document).ready(function()...) and 2 $(function()... (which is the same) definitions in your file? You should put all the code in one function, which will be called when the DOM is loaded. And for the sake of your users UX, try to reduce the images and files, also try to avoid using millions of different js plugins. It took me almost 11s (according to network profiler) to load for the first time and I have 100Mb/s uplink, I can't imagine someone with mobile internet. The webpage makes over 100 requests, a lot of them are 1x1px pngs. If all that is really necessary, you might want to look into compressing and bundling. It depends on what back-end framework you'll be using. I can say that ASP.NET MVC 4 provides very simple bundle manager but I'm sure that PHP or rails provide something similar.
If you have a look at digg.com, there is a persistent status bar (i.e. the Digg version number etc).
I have played with a few jQuery plugins, but they don't anchor fully to the bottom like that one in Digg.. I have tried to look at the CSS, but can't quite understand what bits are needed..
Any ideas/pointers very welcome?
<--- EDIT: SOLUTION --->
Thanks to the answer/comments below, I have ended up with the follow (just in case anyone else wants a basic working version to get going..):
The CSS is:
.footer-bar {
background: -webkit-gradient(linear,left top,left bottom,from(#F3F3F3),to(white));
background: -moz-linear-gradient(top,#F3F3F3,white);
background-color: white;
border-top: 1px solid #AAA;
bottom: 0;
color: #333;
font-size: .833333333333em;
font-family: Arial Narrow;
height: 12px;
padding: 5px 0;
position: fixed;
right: 0;
text-align: left;
width: 100%;
z-index: 5;
}
Obviously you can change the relevant bits, and then of course in my case I just have the following HTML:
<span class="footer-bar">Some text in the footer/status bar that stays there even when you scroll</span>
So there you are - thanks to all the others and of course the guys who originally created it.. CSS is still a bit of a mystery in some cases to me!
You want position: fixed on the element. No JavaScript.
Fixed positioning makes the element relevant to the viewport.
I'm trying to find a jQuery scrollbar that looks like the one of the iPhone: a simple black bar without the up or down buttons. I've found a few scripts but most tend to do so much more than I need. I basically have a div with a fixed height that is set on overflow:auto to which I would like to apply this scrollbar. Help would greatly be appreciated!
Matteo Spinelli has an iPhone-like scrollbar inside of his iScroll library. You should try looking into whether or not you can adopt it to your needs.
What are your browser requirements?
You should try to avoid javascript solutions since they will increase the complexity of your page. If a third-party scrollbar javascript library breaks, you will have to debug it yourself (been there, done that).
Chrome has full support for CSS3 scrollbars, something like this should make an iPhone like scrollbar
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
IE allows styling scrollbars with vendor specific tags, but its very limited. e.g.:
scrollbar-base-color: #663366;
scrollbar-face-color: #99CCCC;
scrollbar-track-color: #996699;
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;
Here is a jsFiddle with the styled scrollbars:
http://jsfiddle.net/APmLZ/3/