No matter what I do, this page doesn't work at all. I want it to focus on the input box on load.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Screen</title>
<style type="text/css">
input {border:0px;}
input:focus {outline:none;}
</style>
</head>
<body onload="document.getElementById("search").focus()">
<input id="search" />
</body>
</html>
I know I'm breaking a bunch of rules with this code, so you don't need to say anything about that.
EDIT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Screen</title>
<style type="text/css">
input {border:0px;}
input:focus {outline:none;}
</style>
</head>
<body onload="document.getElementById('search').focus()">
<input id="search" onblur="setTimeout(document.getElementById('search').focus(),10)" />
</body>
</html>
EDIT 2:
<script type="text/javascript">
function refocus()
{
setTimeout(document.getElementById("search").focus(),10);
}
</script>
<input id="search" onblur="refocus()" />
Double quotes cannot include double quotes,not only in javascript,any other language is the same.
<body onload="document.getElementById('search').focus()">
I'f you're using jquery:
$(function() {
$("#search").focus();
});
or prototype:
Event.observe(window, 'load', function() {
$("search").focus();
});
or plain javascript:
window.onload = function() {
document.getElementById("search").focus();
};
It's "Better" for readability than an inline event...
You have to put search into single quotes:
<body onload="document.getElementById('search').focus()">
Put search in single quotes, since you have double quotes around the document.getelementbyid
<body onload="document.getElementById('search').focus()">
Your experiencing this issue because you're using the same quotes inside the onfocus event, you can change "search" to 'search' to fix the issue.
<body onload="document.getElementById('search').focus()">
Ideally though, you should attach your events in JavaScript so your markup stays clear and all functional aspects of the page are located in one place.
jsFiddle
<script type="text/javascript">
window.onload = function () {
document.getElementById("search").focus();
}
</script>
Set some delay in your code by using setTimeout function to resolve this problem.
function fireOnClick() {
// Set text filed focus after some delay
setTimeout(function() { jQuery('#globalText').focus() }, 20);
// Do your work.....
}
Related
I have the following simple java script code which does not execute when I press the Refresh button in Microsoft Edge. None of the 3 alerts execute at refresh. It works well with Chrome.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
jQuery(function() {
alert('jQuery');
});
function func() {
alert('func');
}
function load() {
alert('load');
}
window.onload = load();
func();
</script>
</head>
<body>
</body>
</html>
This code can be put in an HTML file (test.html).
Why does this happen? Thank you.
Maybe use window.addEventListener("load", load, false);. Sometimes, if one thing doesn't work, another will.
As requested, I simplified the problem as much as possible.
What I am trying to do is adding a onmousemove event to an HTML element, in this case the box, that will call a function. The problem I have is that not only mouse movements trigger the event, but also keys like SHIFT, CTRL, ALT... do.
So, once the mouse is passed over the box for the first time and the alert window is closed, any of the keys I mentioned previously will also make a new alert window pop up.
I am working with Safari, I also tested this on Google Chrome and the result is also a weird behavior of the browser.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml\" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
window.onload = function() {
boxx = document.getElementById("box");
boxx.onmousemove = showMessage;
}
function showMessage() {
alert("hello");
}
</script>
</head>
<body>
<div id="box" style="width: 900px; height: 300px; border: 1px solid;"></div>
</body>
</html>
I really don't understand what is happening, hopefully someone can help me!
Whenever the jQuery is triggered I recieve the error 500 Internal Server Error, does anyone have any ideas why the code below might be causing this?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="../meta/js/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('#form1').submit(function(e){
e.preventDefault();
alert('I clicked it');
});
});
</script>
</head>
<body>
<form name="form1" method="post">
<button id="button">grab user data</button>
<select></select>
</form>
</body>
</html>
I'm gonna guess its because of this variable:
<%=button.ClientID %>
There is nothing else (shown) that would signify anything else that would throw an error.
Can you clarify what you mean by 'jQuery is triggered'? Does that mean upon 'click' ?
Or just by loading this page (I assumed the later)
I would guess that it's giving the error with this line:
$('#<%=button.ClientID %>')
Hard code a value instead and test it:
$('#buttonID')
In order to achieve what you want this will do the job:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click',function(){
alert("i clicked it");
});
});
</script>
</head>
<body>
<button id="myButton">Click Me!</button>
</body>
</html>
$(document).ready is used to execute your code just after your page is rendered, then $('myButton') will get any element with an id "myButton", then you will use the method "on" to attach any event you want, in this case you will want to choose the "click" event, then you should give an anonymous function where you will put the code you would like to execute on that action.
Your button is inside a tag with action="". This will cause a postback to "/". If your server doesn't handle this correctly, you will get an internal server error.
if you only want the alert to show, you can call preventDefault on the jQuery event object. Se example below:
$(document).ready(function() {
$('#<%=button.ClientID %>').click( function(e) {
e.preventDefault();
alert("i clicked it");
});
});
EDIT:
Forget what i wrote above. It doesn't work. Instead, use the submit event on the form. Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="#{'/public/javascripts/jquery-1.6.4.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script>
$(document).ready(function() {
$('#form1').submit(function(e){
e.preventDefault();
alert('I clicked it');
});
});
</script>
</head>
<body>
<form id="form1" method="post" action="">
<button id="button">grab user data</button>
<select></select>
</form>
</body>
</html>
you are attaching the submit event to #form1 but your form doesn't have an id, only a name. You must select the form by name, $("form[name='form1']") or give it an id of id="form1".
When I enclose my checkbox in a css class, it becomes automatically checked. How can I stop this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>website</title>
<style type="text/css">
.checkbox0 {
position:fixed;
margin-left:137px;
margin-top:119px;
font-family:Segoe UI;
font-size:9px;
font-weight:normal;
}
</style>
</head>
<body>
<div class="checkbox0"><input type="checkbox" />s</input></div>
</body>
</html>
If we remove the <div class="checkbox0"> and the </div> we will see that it works normally however when it is with the css, it will auto check.
This can't be.Tried with this code but can't see it autochecked. problem is somewhere else. It might be due some other js file if included here or something else is conflicting.
I have a sneaking feeling it's not your code but your browser cache. ;) Try deleting your browser cache and see if it fixes it.
First of all, your code is not valid HTML:
<input type="checkbox" />s</input>
You have closed the input tag with /> and you then have a </input>. Please see if removing the </input> fixes the problem if you still see it.
Need help with my simple script that is supposed to auto click next after 5 seconds.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>
</title>
<script type="text/javascript">
window.onload = Next() {
setTimeout(Next() {
var next = document.getElementById("NEXT");
window.location.href = next.href;
}, 5000);
}
</script>
</head>
<body>
<div align="right">
<a id="NEXT" href="http://www.mysite.com/pictures.php?id=34">[ NEXT ]</a>
</div>
</body>
</html>
Your problem is that .click() only works on buttons.
Whilst were at it lets use unobtrusive javascript.
window.onload = function() {
setTimeout(function() {
var next = document.getElementById("NEXT")
window.location.href = next.href;
}, 5000);
}
Live example.
Edit
window.onload = Next() {
setTimeout(Next() {
Don't use the word Next() just use function()
To create functions you need either function () or function SomeName()
On a point of correctness, your script doesn't say it's javascript (you need to say which scripting language it is), and your html technically doesn't say it's HTML (it's missing a doctype declaration):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript">
function next() {
// '1' dynamically generated when this page was generated by PHP,
// and will be '2' next time the page loads.
location = "pictures.php?id=1";
}
document.addEventListener("DOMContentLoaded", function(){setTimeout(next,5000);}, false);
</script>
</head>
<body>
...
</body>
</html>
This sounds like being pedantic, but IE in particular is really anal about having those things. Without a doctype declaration, it won't treat a document starting with as HTML code, but start to take fairly inaccurate guesses.