https://www.thefreedictionary.com/words-that-start-with-wit
What, specifically? Scroll down, and you now have to scroll back up to get back to the text field. Wouldn't it be nice if that entry field was always within view no matter where in the page you went?
Enter frames - the poor man's solution :)
I want to have one frame with a text box where I can enter the prefix, and hit Go and load the result in the frame on the right. Doesn't work! Why? What's special about this website? The page sort of loads up - partially... They tell you, something's wrong..
Fortunately, I have a solution that works okay if I say open in new tab. Other, less useful pages work fine, but thefreedictionary does not.. Go figure..
I feel like I've arrived as a webeloper with that hack that selects the text in the field when you click on it :)
For your index.html :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="20%,80%">
<frame name="left" src="input.html" />
<frame id="right" name="right" src="http://www.wordfind.com/starts-with/tru/" />
</frameset>
</html>
And for the input.html :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript">
function process()
{
var seturl="https://www.thefreedictionary.com/words-that-start-with-" + document.getElementById("url").value;
window.open( seturl, '_blank');
return false;
}
</script>
<form onSubmit="return process();" >
Prefix: <input onClick="this.select();" type="text" name="url" id="url"> <input type="submit" value="go">
</form>
</body>
</html>
And, you guessed it. With my OCD, I want more - the text input field is way too small - you want to be able to click anywhere - a bigger target boosts productivity :) So, :
<input onClick="this.select();" type="text" style="height:200px; font-size:30px;" name="url" id="url">
Helps big time!!
At the end - the frames part didn't really help - in fact, it only hurts - coz we're not using it at all..
Meaning? Use just the input.html and you'll be fine - use that for your bookmark. Now, if you have OCD like me, you want to get the focus in the input field, with the text selected when you activate the tab that this page is in.. For starters, when the page loads, you want the cursor in the text field :) And then, anytime you "return" to this tab, you want to focus in the text field, and you want all the text selected so you can replace it..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript">
function process()
{
var seturl="https://www.thefreedictionary.com/words-that-start-with-" + document.getElementById("url").value;
window.open( seturl, '_blank');
return false;
}
function onFocus(){
document.getElementById("url").select();
};
// http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/
window.onfocus = onFocus;
</script>
<form id="wform" onSubmit="return process();" >
Prefix: <input onClick="this.select();" type="text" autofocus="autofocus" style="height:200px; font-size:30px;" name="url" id="url">
</form>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript">
function process()
{
var seturl="https://www.thefreedictionary.com/words-that-start-with-" + document.getElementById("url").value;
window.open( seturl, '_blank');
return false;
}
function onFocus(){
document.getElementById("url").select();
};
// http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/
window.onfocus = onFocus;
</script>
<form id="wform" onSubmit="return process();" >
Prefix: <input onClick="this.select();" type="text" autofocus="autofocus" style="height:200px; font-size:30px;" name="url" id="url">
</form>
</body>
</html>
No comments:
Post a Comment