How can I set the focus on a hidden textbox element?
I tried this:
document.getElementById("textControl_fd_component_JSON_TASK_NStext64").focus();
But, this does not work here. As alert(document.activeElement.id); returns null in this case.
If I make this field visible, the above script works fine. Any ideas where I am getting it wrong?
If you really need to do this, make the box transparent, not hidden:
opacity:0;
filter:alpha(opacity=0);
Alternatively, if you want to ensure that the user doesn't accidentally click it, just place the input inside a div with
width: 0;
overflow: hidden;
However, there is most certainly a better way to do what you want, maybe using keydown/keypress events.
I don't think this is allowed, at least in IE. I got this information from jQuery's focus page.
You can add some js if you need a workaround and cannot change the opacity attr.
/* bind a click handler to your trigger */
jQuery('#your-search-trigger').on('click', function searchIconEventhandler (event) {
/* in case your field is fading, cheat a little (check css transition duration) */
setTimeout ( function timeoutFunction () {
/* show the cursor */
jQuery('#your-search-input').focus();
}, 100);
});
Using Apsillers answer, my setup for this same situation involved:
a parent div with position:relative;
a child form element position:absolute; z-index:0; opacity:0; filter:alpha(opacity=0);
a second child element position:absolute; z-index: (value > 0) (positioned to cover the transparent input).
Aspillers' answer is the correct one given the question asked, but I wanted to give a practical example of when this is necessary.
Specifically, form elements can be hidden if you're using any kind of script/plugin that makes "fancy" inputs (i.e. radio/check elements, select elements). But if your script or plugin is written poorly, it can eliminate keyboard accessibility. Preserving the flow of a form by allowing all elements to have focus can save a lot of headaches for website users.
Related
I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance
Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.
I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/
You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}
This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});
The problem is pretty straight forward although I'm having a hard time figuring out just how to solve it.
I'm using a jQuery-ui datepicker along with a custom made "ios style on/off toggle". This toggle uses some absolutely positioned elements which are currently showing up on top of my date picker.
see the ugly circle covering july 6th below...
the dirty way to do this (at least imo) is to write a style in one of my stylesheets, but I'd much rather use some javascript when the picker launches to get this done.
I've already tried
$('.date_field').datepicker();
$('.date_field').datepicker("widget").css({"z-index":100});
and
$('.date_field').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({"z-index":100});
}
});
but it seems the z-index get overwritten each time the datepicker is launched.
any help is appreciated!
Your JS code in the question doesn't work because jQuery resets the style attribute of the datepicker widget every time you call it.
An easy way to override its style's z-index is with a !important CSS rule as already mentioned in another answer. Yet another answer suggests setting position: relative; and z-index on the input element itself which will be automatically copied over to the Datepicker widget.
But, as requested, if for whatever reason you really need to set it dynamically, adding more unnecessary code and processing to your page, you can try this:
$('.date_field').datepicker({
//comment the beforeShow handler if you want to see the ugly overlay
beforeShow: function() {
setTimeout(function(){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
Fiddle
I created a deferred function object to set the z-index of the widget, after it gets reset'ed by the jQuery UI, every time you call it. It should suffice your needs.
The CSS hack is far less ugly IMO, I reserve a space in my CSS only for jQuery UI tweaks (that's right above the IE6 tweaks in my pages).
There is a more elegant way to do it. Add this CSS:
.date_field {position: relative; z-index:100;}
jQuery will set the calendar's z-index to 101 (one more than the corresponding element). The position field must be absolute, relative or fixed. jQuery searches for the first element's parent, which is absolute/relative/fixed, and takes its' z-index
You need to use !important clause to force the in-line z-index value using CSS.
.ui-datepicker{z-index: 99 !important};
This worked for me when I was trying to use datepicker in conjunction with a bootstrap modal:
$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
e.preventDefault();
$(this).datepicker('show');
$(this).datepicker('widget').css('z-index', 1051);
});
Of course, change the selector to fit your own need. I set the "z-index" to 1051 because the z-index for the bootstrap modal was set to 1050.
The datepicker now sets the popup z-index to one more than its associated field, to keep it in front of that field, even if that field is itself in a popup dialog. By default the z-index is 0, so datepicker ends up with 1. Is there a case where this is not showing the datepicker properly? JQuery Forum Post
To get a z-index of 100. You need an input with z-index:99; and JQueryUI will update the datepicker to be z-index:100
<input style="z-index:99;"> or <input class="high-z-index"> and css .high-z-index { z-index: 99; }
You can also specify the z-index to inherit which should inherit from your dialog box and cause jQueryUI to properly detect the z-index.
<input style="z-index:inherit;"> or <input class="inhert-z-index"> and css .inherit-z-index { z-index: inherit; }
In my case nothing worked.
I needed to add the z-index to the input type that has the datepicker.
<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">
The BEST NATURAL way is to simply put the date-picker element on a "platform" that has a "relative" position and has a higher "z-index" than the element that is showing up above your control...
This is for Bootstrap datetimepicker
If your datepicker is hiding because of scroll appears in your div use:
overflow-x: visible !important;
overflow-y: visible !important;
in css of whole div that contain your datepicker and other item such as
.dialogModel{
overflow-x: visible !important;
overflow-y: visible !important;
}
Add this:
$(document).ready(function()
{
$('#datepickers-container').css('z-index', 999999999);
};
I want to display an input form attached to an input field like the datepicker does.
I've tried the "show" function, but instead of displaying the input form overlaid, it shows what was hidden and moves the rest of the page down.
There are many overlay libraries out-there, but none (that I've seen) attaches the overlaid form to the input field, like the "datepicker" does.
Is there a simple way to accomplish this? (preferably no other external libraries, other than jQuery or jQuery UI).
Thanks!
The problem you're having is CSS related.
Just apply some absolute positioning on the DIV you're showing via .show().
Example :
// jQuery is :
$('#yourDiv').addClass('yourDivClass');
/* CSS is : */
.yourDivClass {
position: absolute;
top: 50px;
left: 100px;
}
Adjust left and top values to your likings.
As far as I know, there is no library or plugin for this (correct me if I'm wrong). You should use CSS absolute positioning for the form, and set the top/left properties on the form to the offset of the input field. Here is a quick example of how I'd do it: http://jsfiddle.net/85ZkV/
I just saw a demo that had this jquery code to show and hide a dive on hover, can't this be done with just regualr css though? And if you can do it with css is there any advantage of doing it with javascript?
$('.comment').hover(function() {
$(this).children('.delete').show();
}, function() {
$(this).children('.delete').hide();
});
CSS hover works fine with anchor tags, but IE6 does not recognize hover events on things like li tags.
If you were using an anchor tag, however, you could achieve the same effect in CSS:
a.comment .delete { display: none; }
a.comment:hover .delete { display: block; }
You can do this with CSS but IE6 only supports the :hover pseudo-class on anchor tags (A), so it's not as common.
Jody is correct. Check out the docs for the CSS Display property.
There is more functionality that the .hover will do. If you provide it more than 2 functions it will cycle through all the functions.
Example
$('.comment').hover(
function(){$(this).children('.delete.first').show()},
function(){$(this).children('.delete.first').hide()},
function(){$(this).children('.delete.second').show()},
function(){$(this).children('.delete.second').hide()}
);
That would show one set of children the first time they hover, then hide, and the next time show a different set of children.
The hover function also works over multiple elements, and only fires if the mouse has left all the elements (not just when it leaves one and moves to another)
I dynamically create something like this on the server side. I'm sure there is a more efficient/prettier way but this usually serves my needs. Basically hides all the divs and un-hides the one that needs to be shown (passed as arg in function from onClick event).
function toggleTab(id)
{
document.getElementById('divEnrollment').style.display='none';
document.getElementById('divSearch').style.display='none';
document.getElementById('divMeeting').style.display='none';
document.getElementById('divBenefit').style.display='none';
document.getElementById('div' + id).style.display='block';
document.getElementById('spnEnrollment').style.color='blue';
document.getElementById('spnSearch').style.color='blue';
document.getElementById('spnMeeting').style.color='blue';
document.getElementById('spnBenefit').style.color='blue';
document.getElementById('spn'+id).style.color = 'red';
}
I have a <button> with an accesskey assgined to it. The accesskey works fine as long as the button is visible, but when I set display: none or visibility: hidden, the accesskey no longer works.
Also tried without success:
Use a different element type: a, input (various types, even typeless).
Assign the accesskey to a label that wraps the invisible control.
Note, I'm not sure if this is the standard behavior, but prior to Firefox 3 the accesskey seemed to worked regardless of visibility.
The behavior you are seeing is correct, you cannot "access" an element that is not displayed. Sal's suggestion will almost certainly work, but may I ask what your purpose is in doing this? There is probably a better way to accomplish what you are trying to achieve. Have you considered using a keypress handler?
I think you probably want to go with the other suggestions if you don't want a keypress handler. Try position:absolute; left:-9999px; to pull your content out of the page. Or use absolute position, change opacity to zero and z-index to -1. By using position absolute the element won't affect positioning of other content on the page, setting opacity will make it not visible. Even with opacity set to zero you can still click on the element and though you cannot see it it may prevent you from being able to click on other elements of the page so use a negative z-index to pull it behind other content.
You can apply a negative margin to push the element outsite of the visible page. I think many browsers and text readers ignore elements with display:none and possibly also visibility:hidden.
Easiest solution: height: 0px; margin: 0px; padding: 0px; in your CSS.
Instead of visibility or display attributes, position the button outside of the page
<button accesskey="a" style="position: absolute; top: -9999px">button</button>
Warning: using left instead of top causes a weird display bug in ie7