I have a div with only one focusable element button (close button), when the lightbox opens focus should be on div. when i press tab focus should goto 'close' button.
As per assertive technology(blind users) close button should be at the bottom of the DOM,that is one reason DIV should be focus when lightbox triggers.
I have set
<div id="div-id" role="dialog" tabindex="-1" aria-labelledby="operations-help">
and in jQuery set :
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
$('#div-id').focus();
}
});
but focus is setting on close button only, is there any way i can set focus on DIV.
Thanks
A div can't take focus afaik. If the div has a button you could instead call
$('#div-id button').focus();
Or if I've misunderstood and the div is the button can changing the div to a button or submit input should allow focusing.
Use
window.location.hash = '#div-id';
This will scroll to the element, essentially focusing it.
So finally,
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
window.location.hash = '#div-id';
}
});
I guess this should work.
A div is not a focusable element.
A possible solution is to set a button/link with dimensions 1px by 1px somewhere on the corner of the div and set focus on it.
aria-labelledby could be then set on that button instead of the entire div :)
Do let me know if that works. If using a link, make sure you set href as #.
You could also, add a button and hide it. Not with display: none, but with z-index, so that it remains tabbable.
Hey you cannot focus div element but you can do a little work around and put after or inside of this div element that you can. Here is example:
var div = document.getElementById("test2");
div.addEventListener("focus", function(){alert("it's a test")});
#test{
width:200px;
height:200px;
background-color:#0CF;
z-index:1;
}
#test2{
position:absolute;
z-index:0;
width:100;
height:100%;
opacity:0;
cursor:default;
}
<div id="test"><textarea id="test2"></textarea>sdfsdf</div>
I am able to fix by setting property :focusPopover : false , this solved my problem.
$('#div-id').lightbox_me({
destroyOnClose: true,
focusPopover : false,
onLoad: function() {
$('#div-id').focus();
}
});
Change your jQuery to
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
$('#div-id').attr('tabindex', 1).focus();
$('.close').attr('tabindex',2);
}
});
UPDATE
$('#div-id').lightbox_me({
destroyOnClose: true,
centered: true,
onLoad: function() {
$('#div-id').find('a:first').parent().focus()
}
});
here is the fully functional working demo https://jsfiddle.net/jfy5n2nf/1/
NOTE: on pressing tab key focus shifts to close button and a red border appears
Try it with HTML5 contenteditable
$('#focusbtn').click(function(){
$('#div-id').focus();
});
$('#div-id').on('focus', function(){
alert('I am focusing in div!');
});
$('#div-id').keypress(function(e){
e.preventDefault();
});
#div-id{
pointer-events: none;
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-id" role="dialog" contenteditable="true">
I am the div. Please focus on me
</div>
<BR/>
<button id="focusbtn">Focus</button>
you can try,
position:fixed;
it will always be in the same position even when scrolling,
here is my code, it will be always on the center of the screen.
.example
{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:800px;
height:450px;
background:#ffffff;
z-index:51;
padding:20px 10px 10px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}
Related
I have the following javascript that adjusts my div height when a user clicks trend_exp_bt.
It works fine at the moment. However, if the user clicks trend_exp_bt again, i want to reset the div height (130px).
Please can someone show me how to do this, i've tried to look at toggle function on google but these don't seem to be working for me.
<script>
$('.trend_exp_bt').click(function(){
$('.trending_contain').animate({height:'500'})
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∧");
})
</script>
Maybe toggling a class would work for you?
document.getElementById('trend_exp_bt').onclick = function() {
document.getElementById('exp-panel').classList.toggle('expanded')
}
.panel {
width: 250px;
height: 130px;
border: 1px solid blue;
background-color: lightgrey;
transition: all 0.3s;
}
.expanded {
height: 300px;
}
<button id="trend_exp_bt">Expand</button>
<div id="exp-panel" class="panel">
</div>
If you want to use click handlers, you will have to remove the "expand" handler and add a "collapse" handler after it is expanded. You will have to do the opposite when a user collapses the div element.
function expandDiv() {
$('.trending_contain').animate({height:'500'});
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∧");
$('.trend_exp_bt').off('click').on('click', collapseDiv)
}
function collapseDiv() {
$('.trending_contain').animate({height:'200'});
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∨");
$('.trend_exp_bt').off('click').on('click', expandDiv)
}
$('.trend_exp_bt').click(expandDiv);
I have a button inside the anchor tag(defined it using class).
<a id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px; FONT-WEIGHT:normal; FONT-SIZE:11pt;" onclick="doSomething();">More</a>
Now I want to disable it.So I have used the following code to disable the anchor tag.
moreButton.disabled = true;
The anchor tag is not working after disabling it , but the button of anchor still looks as if it is not disabled i.e. not grayed out. Is there any way to disable the button? Please let me know if you need any additional information.
The best way to disable an anchor tag is to give it the correct pointer-events property. Here's a simple example how to disable the anchor tag with one simple CSS line:
a {
pointer-events: none;
}
I am a disabled anchor tag
As others have said, inline CSS is bad practice so you should export your style code to a separate CSS file, as so:
.contactButtonSmall {
position:absolute;
left:225px;
top:165px;
font-weight:normal;
font-size:11pt;
}
Then you can use the :disabled selector to change the appearance of the button when it is disabled:
.contactButtonSmall:disabled {
/* Styling for disabled button */
}
I have used button along with the style attributes
background-color: Transparent;
border: none;
instead of anchor tag to fix the issue. The style attributes helped to remove the grayed out area of the original html button and to keep my own image for the button.
example code is given below:
<button> id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px; FONT-WEIGHT:normal; FONT-SIZE:11pt; background-color: Transparent;border: none;" onclick="doSomething();">More</button>
In CSS file:
.contactButtonSmall {
position:relative;
display: block; /* 'convert' <a> to <div> */
width: 60px;
max-height: 20px;
padding-top: 2px;
padding-bottom: 2px;
background-position: center top;
background-repeat: no-repeat;
background-image: url(../contactImages/blankSmallButton.gif);
text-decoration: none;
text-align: center;
cursor:pointer;
background-color: Transparent;
border: none;
}
You can use a mixture of CSS and JS to accomplish this:
HTML:
<a href="/" id="myLink">
click me!
</a>
CSS:
#myLink {
background: red
}
a#myLink.disabledLink {
background: grey;
cursor: not-allowed;
}
JS:
document.getElementById("myLink").onclick = function(e)
{
e.preventDefault();
this.className += " disabledLink";
}
jsfiddle here
this on click prevents the default action of the anchor tag and assigns it a class. The class has css that makes the cursor show the now-allowed icon as well as changing background colour to grey.
By using keyboard tabbing and press enter on anchor,
the layer enable to show.
The problem is the focus getting lost when the Focus2 anchor pressed.
I want to keep focused when even press keyboard enter on "focus2" anchor tag
This is what I tried so far.
https://jsfiddle.net/0gfqtc4v/19/
focus1<br>
<a href='#' class='basic'>focus2</a><br>
focus3<br>
focus4<br>
<script
src="https://code.jquery.com/jquery-1.7.2.min.js"
integrity="sha256-R7aNzoy2gFrVs+pNJ6+SokH04ppcEqJ0yFLkNGoFALQ="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>
<script>
jQuery(function ($) {
$('.basic').click(function (e) {
$('#basic-modal-content').modal();
$('.basic').focus();
return false;
});
});
</script>
:focus { outline:2px solid red;}
.basic { font-weight:bold; font-size:20px;}
#basic-modal-content {display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000;}
/* Container */
#simplemodal-container {height:260px; width:200px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/demos/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
Please help
Here, I have made focus:false. In this senerio, if user click on focus 2. Model will popup and focus will have continue on it's position but if user click on any next element, it will loose it's focus because user have give another event trigger for another html. If you do not want to loose focus event user click on modal you may need to pass some class .
$('#basic-modal-content').modal(
{
focus:false
}
);
When working with focus, I find it Works best if it's wrapped in a timeout, like this:
$('.basic').click(function (e) {
$('#basic-modal-content').modal();
settimeout(function(){
$('.basic').focus();
}, 100);
return false;
});
This approach gives the browser a 'break' to set the focus. If it doesn't Work, try increasing the timeout value.
I'm currently trying to get bPopup (http://dinbror.dk/blog/bPopup/) to work on my page.
I've found this jsFiddle (http://jsfiddle.net/24A9b/) which shows to get the script to work. Using following code:
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
But i want to get a little more fancy.
On this page (http://dinbror.dk/bpopup/) is several customization elements described. The problem is that i can't write javascripts and jQuery so i have no clue of how to i.e. add a transition to the script.
Hope somebody can guide me.
Marius
Try this
#element_to_pop_up {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
box-shadow: 0 0 25px 5px #999;
}
.bClose{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
border-radius: 7px 7px 7px 7px;
box-shadow: none;
font: bold 131% sans-serif;
padding: 0 6px 2px;
position: absolute;
right: -7px;
top: -7px;
background-color: #2b91af;
}
You do not need to write anything.
See the transition effect you want and so change this line:
$('#element_to_pop_up').bPopup();
To (for instance):
$('#element_to_pop_up').bPopup({
speed: 650,
transition: 'slideIn',
transitionClose: 'slideBack'
});
You need only to include the two libraries:
jQuery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
bpopup: https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js
A simple snippet:
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
speed: 650,
transition: 'slideIn',
transitionClose: 'slideBack'
});
});
});
#element_to_pop_up {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.bClose{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js"></script>
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="bClose">x<a/>
Content of popup
</div>
I have a hidden div that I show when the mouse hovers.
Then when I click the text changes and I want the div to be permanently shown. The problem is that it disappears again when the mouse moves off.
Is there a way in jQuery to override the mouse out hide in the css?
Thanks
CSS
.saveCompare {
display:none;
margin-left: 10px;
background-color:#BDD455;
color:#ffffff;
padding: 2px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.listingContainer:hover .saveCompare {
display: inline;
}
jQuery
$("div.saveCompare").click(function() {
$(this).text('Compare Added');
$(this).show();
return false;
});
Thats probably because of your "display:none" in the ".saveCompare". The div still has this class. So its going to hide the div.
Maybe you can write a new class:
.saveCompareNew {
display:inline;
margin-left: 10px;
background-color:#BDD455;
color:#ffffff;
padding: 2px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
And then use this call to remove your old class and add your new class
.removeClass("saveCompare").addClass("saveCompareNew")
Thats probably no the best solution, but it should work.
Before you hide the form on mouseout do a check
$('#yourElement').hover(function(){
//show your form
},function(){
if (!textHasChanged)
//hide your form
});
As far as I know it is not possible to manipulate pseudo-classes in JavaScript (correct me if I'm wrong). You could go for a all-jQuery solution with sth like this:
$('.saveCompare').hide(); //you could do this in the CSS as well
$('.listingContainer').hover(function(){
$(this).children('.saveCompare').show(); //on mouse over show child .saveCompare
},function(){
$(this).children('.saveCompare').hide(); //on mouse out hide child .saveCompare
});
$('.saveCompare').click(function(){
$(this).append('<p>Added</p>').parent('.listingContainer').unbind(); //remove parent element's hover handler when clicked and show .saveCompare forever
});