I want to put element under focus just after append it, means something similar to :
$("id").append($("elementid")).focus(); // not working
In your example you are adding focus to id element, that's why it doesn't work.
Try this solution instead:
$("#elementid").appendTo("#id").focus();
DEMO: http://jsfiddle.net/wRSBY/
The jQuery ID selector needs a # before the id.
So
$("#id").append($("#elementid")).focus();
should work if you want to put focus on your #id DOM element, if you want to put focus on the #elementid DOM element, then you can use VisioN's answer.
Try trigger
$("#id").trigger('focus');
Related
how do i click the button(LayersWidget) in the below html code which doesnt have id or classname.
code is provided below screenshot with highlighted in red.
as i am unable to find the id, i cannot click it using Javascript code
So in your case, the element does have a class, but you could also select the element by another attribute such as the data-dojo-attach-point attribute:
$('li[data-dojo-attach-point="LayersWidget"]')
i am able to access the element using the code
var elmnt1 = document.querySelector('[title="Table of Contents"]');
You can try to select it using jquery and the data attribute as the selector
$('[data-dojo-attach-point="LayersWidget"]').on('click', function() {});
i use the below code to click the element which i got from one of the answer from above.
$('li[data-dojo-attach-point="LayersWidget"]').click();
I need to change the text in a button but it's not working. This is what I've come up with thus far:
var newElemen = $(<button text='Text changed..'></button>);
document.append$(newElemen);
I've also prepared a jsFiddle example.
Don't spend too many horses on this.
You need to first look at how jQuery's selector works. It works similar to CSS selectors (if you're not familiar with that I suggest you start with something more basic).
If you need a quick review on jQuery syntax. In your example you need to use the element selector $('button') and then you'll want to apply the .text() function to change the text for the button. So if you put it together. You'll want to select the button and then apply the text() function, passing in the string you want to change the text to, to change it's text.
$('button').text('Insert Text Here');
Use .text method using button selector
$("button").text('Text changed..');
$('button').text('new text');
fiddle: http://jsfiddle.net/zLf3k/3/
jQuery selector must be String
created new DOM element when you use html element on jQuery selector
use $(document).append instead of document.append$
$('button').text('some text');
$('#button').click(function(){
$('body').css('-webkit-filter', 'blur(4px)');
});
When button is clicked, body is turned blur, but i don't want the div inside the body to turn blurred as well. How to do that? can i do that with the .not() jquery function?
No, the not([selector]) function is used for discarding elements from the current jQuery selection. It can't be used for exempting an element from an effect that is applied to one of its ancestor elements.
You could try to apply the blur to everything inside the body, except the div itself.
$('body').children().not('div').toggleClass('blur');
Fiddle
I would use something like this.
$('#button').click(function(){
$('body').css('-webkit-filter', 'blur(4px)');
$('body').find("div").css('-webkit-filter', 'blur(0px)');
});
Maybe I misunderstand the question, but couldn't you just add
$('#DIV').css('-webkit-filter', 'blur(0px)');
(where #DIV is the div you don't want blurred) and turn off the blurring on that specific element?
Edit: They were saying in the above answer that it couldn't be done, so maybe something like a container for everything except the div?
http://jsbin.com/eDIPoYU/1/
I need to set focus on the first form element or class of ".focus"; whichever is visible or first.
This does not seem to sort through each to determine which comes first?
http://jsfiddle.net/infatti/tdvHJ/1/
$('.focus:visible:first, body:not(:has(.focus:visible)) input:visible:first, body:not(:has(.focus:visible)) textarea:visible:first').focus();
This will locate all visible input elements, textarea elements and .focus elements:
$('input:visible, .focus:visible, textarea:visible')
It will also have them ordered according to their order in the DOM, so the first of those elements in the document will be the first in the jQuery object. To access the first:
$('input:visible, .focus:visible, textarea:visible').eq(0);
and to focus on it:
$('input:visible, .focus:visible, textarea:visible').eq(0).focus();
Note that, as I just found out, jQuery considers elements to be 'visible' if they take up space in the document. So elements with visibility:hidden or opacity:0 will still be considered visible:
http://api.jquery.com/visible-selector/
Like this ?
$('.focus:visible:first, body:not(:has(.focus:visible)) input:visible:first, body:not(:has(.focus:visible)) textarea:visible:first').eq(0).focus();
Fiddle :
http://jsfiddle.net/infatti/tdvHJ/1/
Eq(0) select the first element... ;)
Try:
$('.focus:visible:first').filter(":input").focus();
jsFiddle example
im not sure what you are trying to achieve as there isnt any elements with the class focus. Simply add the class focus to your input element and then us
$('.focus').focus();
How can i execute the action only on the div,when i have multiple div with same class
http://jsfiddle.net/kent93/Qw7bw/
when the mouse enter one div , the other div also will have action , how can i solve this
i want only the div that my mouse goes in take action , not the other, what best solution?
Change the selector of each position to: $(this).children(".class")
for example the code $(".fromTopToBottom") will change to $(this).children(".fromTopToBottom")
Demo: http://jsfiddle.net/Qw7bw/10/
very simple, use $(this), for example
$('.mydivclass').mouseover(function(e){
$(this).css('color','gray'); // Current element
});
If divs are nested then you should use e.stopPropagation() to stop the event bubling.
What you need is a "current" div concept.
At the beginning of mouseenter handler:
$(".trbl").removeClass("current");
$(this).addClass("current");
In your case statement, $(".fromTopToBottom").css({...}) -> $(".current .fromTopToBottom").css({...})
For the effect check out http://jsfiddle.net/Qw7bw/7/
Use $(this).find(x) rather than $(x) directly when selecting ".fromTopToBottom" and similar classes. This allows jQuery to only select childs of the hovered element http://jsfiddle.net/Qw7bw/6/
Use $(this).children(".fromTopToBottom") instead of $(".fromTopToBottom").
This will select divs of the given class inside the element whose handler you are writing.