I want to show the text that is in a ul tag one by one on mouseover of some text. It is showing some error. How can I fix it?
You can check the code mouseover on "hover here hover again" link in a link. Is there another way to do it?
You are gettign errors because you are calling a function which is not defined:
hideCaption
Related
Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation
I wanted to display a hidden div in function after it will do some things but it doesn't work. Could you please help me with it? Here is what i tried to do:
#Edit
Ok, it's the code in short. After i click link calc there is a form, and after i click on input submit, there is and alert, and then it should display a div, but that's not working.
http://pastebin.com/XU58GhFv
Try to put the id directly in JQuery.
`$("#evolves-calculator").css('display', 'block');`
I want to create a button on toolbar of Ckeditor that I can highlight words. When words are highlighted, there are "x" button next to them so that we can click on them to remove the highlighting effect.
<span class="highlight">sample <span class="remove-highlight></span></span>
Implementing highlight is OK for me but the close button (x) is a problem.
Does anyone have any idea?
Thanks a lot
you shouldn't need the second span. if you have the css rule for remove-highlight you can do:
$("#X").on('click',function(){
$("span").removeClass("highlight);
$("span").addClass("remove-highlight");
});
but you don't have to physically bind the remove-highlight rule to the html.
I'm using jquery 1.8.2 and toggleSlide animation to smootly show search input box but that have two issues on chrome - one of them I've separated into a jsfiddle
$('#hiddenBlock').slideToggle(500);
$('#inputHiddenBlock').slideToggle(500);
$('#but').slideToggle(500);
On chrome open this fiddle and click button - write some text in the textbox and click button again twice - one to hide second to show again - text is now invisible and stay that way until get refreshed by f.e. writing one more letter.
This maybe also connected to second issue, which is seems connected to canvas/displaying text - it allow cut letters like 'l' in half....
In that example you see 'l' and 't':
'l' and 't' http://img171.imageshack.us/img171/5784/beztytuuvxq.png
You don't need to slideToggle both the textbox and search button. Just the div hiddenBlock is enough.
I simplyfied your solution:
// on dom ready hides your div
$(document).ready(function(){
$('#hiddenBlock').hide();
});
function toggleSearchWindow() {
$('#hiddenBlock').slideToggle("fast");
}
$('input[type=button]').click(function() {
toggleSearchWindow();
});
TEST
UPDATE I put the typed text in a temp variable to see whether this solve your cutted text:
TEST2
Try removing
display:none;
from #inputhiddenblock and #but css and then remove
$('#inputHiddenBlock').slideToggle(500);
$('#but').slideToggle(500);
I have update your jsfiddle link.
Problem was you are not initialize the input-text field and in dom load for input-text field we have initialize as inline not display none.
I have commented it;
$('#inputHiddenBlock').slideToggle(500);
Sorry for the strange title question.
I am wondering how to do the following:
When a user clicks on the blurred out textarea through onfocus, it will display: block the div around it, displaying a "textarea console" and then a "add step" icon beneath the textarea. If you click out, it will blur the textarea along with two extra items.
However, what I would like to add is, if they click either the "textarea console" or the "add step" icon, the div will not blur out.
Here's what I have so far at jsfiddle.net
I've updated the jsFiddle: HERE
I think it was just a few things wrong...you were on the right track.
$("#textareasteinstruc").focusout(function() {
alert('focusout');
$(".textareaconsole").hide();
$("#addPrepStepButtonicon").hide();
The # was missing from focusout function...and classes/IDs were not referenced properly.
It's working the way you want it now I'm thinking :)
UPDATE: I added the $("#addPrepStepButtonicon").show(); to the click event so the 'submit' button will appear again
Check this one http://jsfiddle.net/wAaDz/13/ . Have made changes.