It works fine in IE but does nothing in FF.
Here's the code I'm using it with.
The code does a some things for proboards.com.
I think the explanation of the code is irrelevant in this case. If not, let me know.
But the focus part is simply to put focus on a single element.
Here's the code:
<script>
var TitleBarGuestMessage="Hello Guest!";
var TitleBarMemberMessage="Welcome Back "+pb_displayname+"!";
var i,table,LTPI,LTPItable,titlerow,titlerowcell1,LTPIrow,LTPIrowcell1,shortcutA,shortcutB,shortcutC,
td=document.getElementsByTagName("td");LTPItable= document.getElementById("rectangle_table");LTPI=document.getElementById("rectangle_right_side");LTPItable.style.width="100%";
shortcutA=LTPI.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
shortcutB=shortcutA.previousSibling.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;shortcutC=shortcutA.firstChild;
shortcutA.previousSibling.parentNode.parentNode.cellSpacing="0";
shortcutA.previousSibling.style.display="none";
shortcutB.className="";
shortcutB.bgColor="transparent";
shortcutC.align="center";
shortcutC.style.backgroundColor="transparent";
shortcutC.className="";
LTPI.style.display="none";
for(i=0;i<td.length;i++){
if(td[i].className=="titlebg" && td[i].colSpan=="2"){
td[i].parentNode.parentNode.parentNode.id="forum";}}
table=document.getElementById("forum");
if(pb_action=="home"){
setTimeout(function(){table.focus();}, 2000)};
titlerow=table.insertRow(0);
titlerowcell1=titlerow.insertCell(0);
titlerowcell1.className="titlebg";
titlerowcell1.colSpan="5";
titlerowcell1.id="LTPI_titlebar";
LTPIrow=table.insertRow(1);
LTPIrowcell1=LTPIrow.insertCell(0);
LTPIrowcell1.colSpan="5";
LTPIrowcell1.innerHTML=LTPI.innerHTML;
LTPIrowcell1.id="LTPI_row";
if(pb_username=="Guest"){
titlerowcell1.innerHTML=TitleBarGuestMessage}
else{titlerowcell1.innerHTML=TitleBarMemberMessage}
</script>
This is the focus part of the script:
if(pb_action=="home"){
setTimeout(function(){table.focus();}, 2000)};
I have also tried:
setTimeout("table.focus();",2000);
Any suggestions?
this is because DOM table element does not have focus method (although it is implemented in IE). I assume that you need to scroll to that element, so you can do it this way:
window.scrollTo(0,table.scrollHeight);
Or as in your exact code:
if(pb_action=="home"){
setTimeout(function(){window.scrollTo(0,table.scrollHeight)}, 2000)};
Related
My friends, the code below used to work in Chrome till version 52.x but in the newest version it does not work anymore. Does any of you have any idea why it does not work?
https://jsfiddle.net/2jtrs2m2/
<input type="text" id="test" />
<script type="text/javascript">
var my_event = document.createEvent("TextEvent");
my_event.initTextEvent("textInput",true,false,window,"T");
document.getElementById("test").focus();
document.getElementById("test").dispatchEvent(my_event);
</script>
Usually when I executed this code, Chrome would insert the character T in the input. I dont want to use document.getElementById("xxx").value = "T" cause in some very specific cases I am working on, I really can only use the code above firing the oninput event which for some reason is not working anymore.
Try using document.execCommand
ie;
document.execCommand("insertText", false, "foo");
I have a very simple piece of javascript code that just should work and it only works when I run it in the browser console:
<script>
$(".hopscotch-close").click(function () {
alert("Hi");
Cookies.set("tourState", "closed")
})
</script>
Because it runs in the console I know that:
1) the ".hopscotch-close" is OK;
2) there are no errors in the code that could prevent it from running;
Also:
1) because is a "click" event I know that I haven't got a problem with the DOM being ready (and I can put everywhere - but in this case in at the bottom of the <body>;
2) I know I don't have an issue because of using the same name for a class than something else that exist;
3) The behavior is the same in Safari and Firefox, so its not a Browser issue.
I know this is tough without the full code, but if someone has experienced this maybe has na idea about what could be the problem.
From your comments I sense that the element is getting appended dynamically so instead of
$(".hopscotch-close").on('click',
you need to make use of event-delegation as
$(document).on('click','.hopscotch-close',function(){
That will do the trick.
If you are appending .hopscotch-close to any already existing static
element then instead of $(document).on('click' you can use
$('#yourStaticElementId').on('click','.hopscotch-close',function(){
which improves site performance.
I have some code wrapped in $(document).ready(function(){ /*code*/ });, and all of it works fine, except for one line. The code above it works fine, the code below it works fine, I'm not getting any errors in my console.
$('.main-right.category').height( $('.footer').height() + $('.main-right.category').height() );
That doesn't fire. However, if I paste that exactly in the developer console and press enter after the page has loaded, it works. All of the elements exist at page load (meaning none are built dynamically via javascript). Same result in chrome, firefox, IE.
Any ideas?
edit: I should add that my css is loaded before my javascript, and I've done other CSS related tweaks in this same javascript file that have worked fine.
Also, if I console.log $('.main-right.category').height() and $('.footer').height() right above that line of code, they both give non-zero integer values like I'd expect.
The ready event fires when the DOM is ready to work with. It differs from the load event which fires when all assets (css, javascript, images, ...) are all loaded.
I guess that when you code runs, the elements you're trying to get the height does have an height calculated already so it seems nothing happens.
When you executed your code in the console, everything is loaded so the behavior is the one expected.
To bind to the load event, check the method .load().
$(document).ready fires when the DOM-structure is full available, at this time the rendering ususally isn't finished, so the dimensions of the elements may be unknown and height() will return wrong values.
Use $(window).load() instead.
i usually set height with:
var height = $('.footer').height() + $('.main-right.category').height();
$('.main-right.category').css('height',height+'px');
You should use the console to debug the selectors and view the heights of the elements;
$(document).ready(function() {
var $footer = $('.footer');
var $category = ('.main-right.category');
console.log($category, $footer);
console.log($category.height(), $footer.height());
console.log('New height =', ($category.height() + $footer.height()));
});
I need to attach a click event on a button tag. I've tried addEventLister, but it still doesn't work.
widget.innerHTML = "<button id=\"w_btn\">do action</button>";
w_btn = document.getElementById("w_btn");
w_btn.addEventListener("click",
function() {
alert("sdf");
}
);
The third optional is required in some browsers.
The following code should work in every decent browser (fiddle: http://jsfiddle.net/5hnPP/2/):
var widget = document.getElementById("widget");
widget.innerHTML = "<button id=\"w_btn\">do action</button>";
var w_btn = document.getElementById("w_btn"); //Added var
w_btn.addEventListener("click",
function() {alert("test")},
false
);
Another possible cause is the existence of another element with ID w_btn, which appears before the #widget element. To solver this, you can adjust your code. Since you overwrite the contents of the #widget element, the first and only content is the button. Define:
var w_btn = widget.firstChild;
A last possibility is that you're in strict mode. In strict mode, using undeclared variables is forbidden.
Hmm. I made a jsFiddle for you, here: http://jsfiddle.net/5hnPP/1/. Using a "real" button works. You may be running into a DOM issue. Let you know if I find anything more useful.
EDIT: Hmm, even adding the button dynamically works for me. Are you naming your element correctly? (Notice the updated jsFiddle link - has updated markup).
I am developing webapp using jQuery.
I have functionality that adds new row of 3 input fields. After creating these DOM elements I want to focus one of input fields. I am doing it with calling jQuery focus() function on necessary input field.
Problem is that calling focus() works fine in IE6 and FF3.5, but not working in IE8.
I was trying to make simple working example of this problem for showing it here, but with stripped version of code focus() is working fine. So my guess was that DOM is not ready yet when I call focus() in IE8. For this I tried calling setTimeout('myFocus()',400). I had success and in some of cases focus was really working but still not always. Randomly it does not focus my input field.
Question is: Has anybody faced similar problems and does anybody have any idea how to workaround it? Using setTimeout feels like very ugly workaround.
Tnx in advance
Edited : 26.08.2009
Succeeded to reproduce on simple example. Here is HTML+JS code that reproduces this bug on IE8.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function performChanged() {
formChanged = true;
}
function handleChange() {
var parentDiv = $('#container');
newValue = $(html).html();
parentDiv.html(newValue);
$(".sel1",parentDiv).bind('change',handleChange);
//alert('Uncomment this and after alert focus will be on input');
$("input.cv_values",parentDiv).focus();
}
$(document).ready(function() {
$('.trackChange').bind('change', handleChange);
});
var html = '<div class=\"div1\">\n<select class=\"sel1\" id=\"sel1\" name=\"sel1\"><option value=\"\"><\/option>\n<option value=\"11\">Select me to see problem<\/option>\n<\/select>\n\n\n<input class=\"cv_values\" id=\"sel3\" name=\"sel3\" size=\"30\" type=\"text\" value=\"\" /><br/>Focus should in input field. With alert it is but without alert focus is not there</div>';
</script>
</head>
<body>
<select class="trackChange" onchange='performChanged();'>
<option value=""></option>
<option value="1" >Select me to generate new inputs</option>
</select>
<div id="container"></div>
</body>
To reproduce:
1) select value from first dropdown. You will see that first time input is working
2) select value from second dropdown. You will see that bug is reproduced.
Then in code you can comment out line where it shows JS alert(). Strange thing is that if there is this alert() then after it focus is working fine.
Hope this helps to understand where my problem is.
P.S. I need my app to work this way - it is regenerating those inputs after selecting value from dropdown. This is simplified example of my app ;).
I had a similar problem with my app, but I can't reproduce the focus problem with your code. My problem was slightly different in that my page had a link hash that made IE not give my element focus.
Anyway, to get around the problem I added a timeout:
setTimeout(function () {
$('.my-thing').focus();
}, 100);
Not noticeable by a user but it gives IE a moment to breathe.
In conjunction with Kazys's solution, I found this to fix all my problems (using IE8 & .HTA files):
$("elem").blur();
$("elem").focus().focus();
I have no idea why, but somehow calling focus twice helps IE along.
EDIT:
I have found that calling .show() and .select() can also help.
Strangely i had the same problem and resolved it using plain old javascript like so:
document.getElementById('friend_name').focus();
Using jQuery equivalent $('#friend_name').focus(); didn't work in IE8 :-/
Had similar problem with IE8. I wanted to focus input in dialog when it is opened. Used autoOpen = false. Noticed that focus doesn't work only for first focusable element in dialog. Tried setTimeout but it worked only sometimes. Blurring element before focusing helped me.
$('#dialog').find('#name').blur();
$('#dialog').find('#name').focus();
Since you have not posted any code are you using:
$(document).ready(function(){
//code here
});
This will make javascript run after the html is loaded.
And you should use live events also. When your adding inputs to the dom the will automatically have focus binded to them.
$("p").live("focus", function(){
alert( $(this).text() );
});
This means that every p that is created will have a focus binded to it.
This is the best solution for the moment to set focus:
$('.elt').fadeIn(200, function() {$('.elt').focus();});
This is an old question, but it is top in search, so wanted to update.
I don't know if there was ever a time that it was fixed, but I ran into this issue again today in IE11, using jquery-2.1.3. I found that wrapping the focus call in a setTimeout, as set out by Ponny above, worked best for me.
I did need to increase the timeout in some cases, to get it to work.