I have a jQuery statement that's working fine. How would I re-write it in .live?
$(document).ready(function()
{
$(':input:enabled:visible, a:enabled:visible, span.ValidatorClass').each
(function(i, e) { $(e).attr('tabindex', i) });
});
The reason I need this is I hide/show elements sometimes using .show and .hide and when that happens I need to reset tab order for the elements that appear/disappear.
Showing and hiding elements raises no events as far as I know, so live won't help you here.
However, since you don't add new elements nor reorder them, you can set the correct tabindex right from the start. The browser will ignore hidden or disabled elements anyway. Run your code without the :visible and enabled filters:
$(':input, a, span.ValidatorClass')
.each(function(i, e) { $(e).attr('tabindex', i) });
Related
It is showing warning that 'keymanweb.setKeyboardForControl' cannot set keyboard on iframes.
I want to manually set specific language of keyman on iframe element.
Please help me out to achieve the same.
While keymanweb.setKeyboardForControl cannot be used with iframes, you should be able to use a controlfocused event event to select a keyboard on entry to the control:
keyman.addEventListener('controlfocused', function(eventProperties) {
if(eventProperties.target == myIframe) {
keyman.setActiveKeyboard(...);
}
return true;
});
so i'm working on a meteor project and am trying to get a drop down menu to close when the user clicks outside of it. i've done this before using jquery and normal html but this time we're using velocity.js and meteor.
so on the link that opens the drop down div, i have this:
Template.layout.events({
'click #profile-btn': function () {
if (userTog == false) {
$('#user-menu').velocity("fadeIn", { duration: 150 });
userTog = true;
}
else if (userTog == true) {
$('#user-menu').velocity("fadeOut", { duration: 150 });
userTog = false;
}
},
.....
and then i use a meteor package to deal with events on the body as this isnt supported right now..
Template.body.events({
'click html': function(e, data, tpl) {
userTog = false;
$('#user-menu').velocity("fadeOut", { duration: 150 });
e.stopPropagation();
}});
however the above is just not working.. it basically just makes the menu appear then disappear straight away. is it something to do with velocity.js, meteor or am i just doing it plain wrong ?!?
any advice would be greatly appreciated!
I just had to make a material design select box, so I feel your pain :-). Here's how I solved it:
Normally, you can only focus an input or an anchor. A trick I stumbled upon is that using tabindex="0" in your element attributes allows it to gain focus, even if it's a div. What's this mean? Well, if you can focus() an element, that means you can blur() it. So, when you click the button for the dropdown, add a line at the end of the event handler like $('.dropdown-menu').focus(). Then, to escape that, just create an event handler like 'blur .dropdown-menu': function() {*..hide..*}. That way, you don't have these ugly global event watchers.
The downside is that you get a glowing blue outline (for accessibility reasons). You can get rid of this by having a line like outline: 0; in your css.
PS, the reason why yours wasn't working is because 'click #profile-btn' bubbles up to the body, so it executes both. To fix it, you need to stop that bubblin via e.stopPropagation();.
JScript
// Wait for the page and all the DOM to be fully loaded
$('body').ready(function() {
// Add the 'hover' event listener to our drop down class
$('.dropdown').hover(function() {
// When the event is triggered, grab the current element 'this' and
if ($(this).find('.sub_navigation').is(":visible")) {
// find it's children '.sub_navigation' and display/hide them
$(this).find('.sub_navigation').slideUp();
} else {
$(this).find('.sub_navigation').slideDown();
}
});
});
First of all here is the fiddle //
http://jsfiddle.net/Hv2HZ/
I am using wordpress to create my site...
(if that matters)
Someone helped me get the drop-down menu to work better.
But ever since I added the new JQuery script the link doesn't even work.
I tried hovering over it but no menu dropped.
When I hover on the fiddle it works.
Why is this?
And how can I fix this?! :(
I have many hrefs(with dynamic Ids) in my asp.net app that have the same CssClass=MyClass.
I want these button to be hidden with a condition.
I used the .ready
$(document).ready(function() {
if(condition)
$('.MyClass').css("display","none");
});
the problem is docuement.ready doesn't execut when there is a poctback.
Postback==>Button visible.normal as i've put the code in .ready.
Is there a way to persist the code:$('.MyClass').css("display","none");
I tried to apply .live() on button load,but it doesn't work.
Any ideas?
Thanks in advance.
You can take a different approach, define the style in CSS, like this:
body.conditionClass .MyClass { display: none; }
Then apply that class to <body> on document.ready, like this:
$(function() {
if(condition)
$('body').addClass('conditionClass');
});
Now new elements with .MyClass, anywhere in the <body> will get the display: none styling.
Use the jQuery livequery plugin: http://brandonaaron.net/code/livequery/docs
live() only binds events. When you have installed the plugin, use:
$('.MyClass')
.livequery(function() {
$(this).css("display","none");
});
This will hide items of class MyClass whenever they are found, even if they are created from a Ajax response. You can even use this code in place of the ready function you are currently using.
In this case, Nick Craver's solution is better, but only if you have to evaluate condition just on page load.
I am trying to set a focus on a dropdown within GridView(gridViewDropDown class) when page loads:
if ($('select.gridViewDropDown').length)
{
alert("Found my dropdown");
//$('select.gridViewDropDown:first').focus();
setTimeout(function() { $('select.gridViewDropDown').focus(); }, 10);
}
I can see the alert which means that dropdown is found but it never gets a focus. What do I need to change here? I am using IE 6/7.
I'd try this approach:
$(function() {
setTimeout(function() { $('select.gridViewDropDown').focus(); }, 50);
});
You need to wait until the DOM is ready, it's possible that something else is set to steal focus when the page loads (code that's most likely executing when the DOM's ready as well) This approach times it to be just slightly after that happens.
It also takes advantage of how jQuery works, if no elements are found when this function fires, none will steal focus, so it's safe to just leave in there as-is.