Is there a way to announce a Successful message using an alert/status role without showing anything visible on the screen for the user?
I tried creating an alert div dynamically but the user could see the success text displaying on the screen. I need it to just be announced and don't give any visual feedback to the user.
var newAlert = document.createElement("div");
newAlert.setAttribute("role", "alert");
newAlert.setAttribute("id", "alert");
var msg = document.createTextNode('You have Successfully updated your phone number');
newAlert.appendChild(msg);
document.body.appendChild(newAlert);
You can hide it from the screen using CSS, with the off-screen technique.
If you are using bootstrap, there's a .sr_only class doing that. Otherwise, you can easily find the corresponding CSS code.
Basically it looks something like this:
.sr_only {
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
left: -2px;
top: -2px;
}
Don't use display:none, visibility:hidden or width/height:0, as those are also going to hide the message for screen readers, and as a consequence, the alert won't be spoken.
Note that you can't hide the message from the screen reader's display as known as virtual buffer. If you want to do so, the best you can do is removing the element from the DOM after a few seconds.
You must wait long enough for the message to be spoken entirely, as with some screen readers, speech is cut when the element is removed.
use css
.alert{
display: none;
}
or
.alert{
z-index: -100;
}
Related
When a user presses the close button on the browser or tab, I want to action an overlay, wait for a second, then close. I know its not a done practice and I've stood on my soap box and cried about what is acceptable to the user and such but, they want it...
I know that the browsers close action is pretty explicit in what it can do, so where do I start?
Thanks
you could hook the onbeforeunload event, and have a overlay element hidden, then show it inside the event
overlay element
<div id="dark-overlay" style=""></div>
css
#dark-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
z-index: 1000;
display: none;
}
javascript
<script type="text/javascript">
window.onbeforeunload = function(event){
var overlayelement = document.getElementById('dark-overlay');
overlayelement.style.display = 'block';
return 'are you sure you want to quit?';
}
</script>
note this won't exactly achieve what you asked: it will show an overlay, along with a browser confirm dialog containing the text you returned.
I couldn't think of a way to wait a second before exiting, except putting a loop that exits after the defined amount of time which is terribly inefficient.
I know that the browsers close action is pretty explicit in what it can do
Correct.
It can pause while asking the user if they really want to close the window or not using a standard UI.
… and that's it.
so where do I start?
But telling your client that browsers don't provide any way to do what they want.
I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...
Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.
You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)
I want to make a modal dialog like prompt() method. How can i make a prompt dialog with 2 input like this one :
with plain javascript (without using any jquery/javascript framework).
Is it possible to create such prompt ?
These are native browser-specific controls that you cannot modify. Also for alert, prompt, and confirm, you may only supply values to them. Please see also this answer
for a modal prompt, my suggestion is:
create a screen filling div to get the modal result:
<div id="modalDiv" style="position: absolute; top: 0px; left: 0px; width: 100%;
height: 100%; z-index: 4; display: none"> </div>
create a div for the prompt, with a higher z-index and with the text fields, labels, buttons and everything you need. Have it centered on the screen.
make a function customPrompt (or whatever name you like) in which you set the display of both divs to "block" and to the OK button set a function that handles the input for whatever you need.
I have a page where I do not want the user to be able to scroll. In order to prevent it, I just set the body to have a hidden overflow style. This is sufficient up until the point where a user tries to select some text and then drags to the bottom. The window then scrolls with the users dragging. How can I prevent this?
use position: fixed;. If you want the whole body to be non-scrollable:
body
{
position: fixed;
}
EDIT: after receiving the comment from user Sam, I've decided to go back and test this method once again. Now that I reconsider it and Sam's concern that it would mess with styles, I've come to the conclusion that the following would be a better solution:
html
{
position: fixed;
width: 100%;
height: 100%;
}
The prevents some sites (stackoverflow included) from ending up left aligned. It also uses the highest node available, which should have been done in the first place.
I tried Josephs answer but it can mess up a lot of the style on the website.
Another way would be to set the overflow of the website to hidden, this is also far from ideal but it didn't mess up any styling for me, hopefully this is helpful to someone.
body {
overflow-y: hidden;
}
It can be helpfull
html
{
overflow: hidden;
}
I'm trying emulate the MS-DOS command prompt on my website. I don't need to accept keystrokes, but I'd like to append data at the bottom and optionally scroll upwards.
At first I looked at the asp:TextBox and asp:Label, but the flicker of using postbacks seemed to be too much. I'm now considering DIV tags and Javascript where I simply update the InnerHTML property, but there too I get flicker, and have issues with scrolling.
What solution would you recommend in this situation? Essentially I'm trying to count to infinity, with a 1 sec delay, only need the most current 300 or so entries, with the most current entry at the bottom of the screen.
Is this even possible with JS/CSS?
Do you wish to make it a little more stylous ? :)
see this page...
http://www.klaus.dk/Some_unknown_page
or this one
http://www.harryovers.com/404.html?aspxerrorpath=/Account/LoginPartial
here is the javascript source code.
http://code.google.com/p/c64-404-page/
With a little change, you can append your text on this code :)
I just built something very similar using jQuery. You can use the append method to add content to the bottom of your DIV. You can then set the scrollTop attribute to keep things scrolled to the bottom as follows:
$("#someDiv").attr({ scrollTop: $("#someDiv").attr("scrollHeight") });
I think "DOS-style window" is a bit misleading considering all you want to do is append text to a div and make sure it stays scrolled to the bottom.
function addLine(text) {
var box = document.getElementById('DOSBox') //teehee
var line = document.createElement('p');
line.innerHTML = text;
box.appendChild(line);
box.scrollTop = box.scrollHeight;
}
And style it as such
#DOSBox {
overflow: auto;
display: block;
height: 400px; width: 500px; /* or whatever */
/* and if you want it to look DOS-like */
background: #000;
color: rgb(192, 192, 192);
font-family: fixedsys;
}
#DOSBox p {
margin: 0;
}