|
JavaScript - Setting The Hash Location Of A Web Page With The Onkeyup() Event
What I want is a textbox that the user can enter information into. When they press a key the onkeyup event will simulate a function. All that I can do. The function needs to automatically scroll down the page to the anchor that corresponds to the number the user entered.
The web page is a factor finding program. You can enter 2 numbers and it finds all the factors of all the numbers between the 2 you entered. Here is the link: http://factorfinder.tumblr.com/ As you can see, when you try to find factors of numbers a new window opens and there is a search box in the top left. Unfortunately, it doesn't work. If you want to check out the code look at the web page but here is the bit that creates the new window Code: function DisplayFactors(FactorsFound, Input, Maximum, ShowFactors, ShowPrimeFactors){
FactorsWindow = window.open("", "", "location = no, menubar = no, personal = no, scrollbars = yes, status = no, toolbar = no, resizable = no, width = 580%, height = 600%, left = 720%, top = 100%")
FactorsWindow.document.write("<div id = 'TheHeader' style = 'position: fixed; left: 0; top: 0; width: 100%; height: 15%; z-index: 2; background-color: white; border-bottom: 3px dashed black;'><table style = 'position: relative; left: 2%; top: 25%; font-size: 24px; font-weight: bolder; text-decoration: underline;'><tr><td>The Factor Finding Window</td></tr></table><table align = 'right' style = 'position: relative; top: -25%;'><tr><td>Search For The Number:</td></tr><tr><td><input type = 'text' id = 'SearchNumber_txt' maxlength = '12' onkeyup = 'opener.Search()'/></td></tr></table></div>")
FactorsWindow.document.write("<div id = 'TheBody' style = 'position: absolute; left: 0; top: 20%; width: 100%; height: 80%; z-index: 1; background-color: white;'>")
}
function Search(){
FactorsWindow.location.hash = "#Factor" + FactorsWindow.document.getElementById("SearchNumber_txt").value
//This is the bit I need to change because it currently doesn't work
}
also, this is the bit where I place the anchors in the array Code: FactorsFound.push("<a name = 'Factor'" + Input2 + "><b>The Factors of " + Input2 + " a </b></a><p style = 'margin: 0, 0, 25px, 0; position:relative; left:20px;'>")
Ultimately I need it so that when the onkeyup event is triggered it scrolls down the window to the anchor that corresponds to the number entered. I will validate the numbers entered after I find out how to do it. I mean, If the user enters the number 9 and the Factor Window is only displaying numbers 2 - 6, then I'll add an alert message or something. I'll cross that bridge when I get to it. I couldn't find this anywhere on the internet. Similar TutorialsHi there, I have an ajax search function. I have an input text field where I type in what I want to search for, but I would like the search to be delayed of a few miliseconds before the ajax search is called. How could I do that? The search field: Code: <input type="text" onkeyup="searchPlayer(this.value)"> The javascript function: Code: function searchPlayer(str)
{
here is my ajax search...
}
I tried different ways but I don't seem to be able to delay the searchPlayer function. Any help on that? Should I use setTimeout on the input field, or in my function or in another function? And how do I pass the 'this.value' to my searchPlayer function if using setTimeout? I am lost... Thanks in advance! <script type="text/javascript"> function sum1() { noofrow = document.getElementById("NoOfRow").value-0; for (i=1;i<=3;i++) { var DAY1=parseFloat(document.getElementById('"day"+i').value,2); var day2=parseFloat(document.getElementById("day"+i).value,2); var day3=parseFloat(document.getElementById("day"+i).value,2); var tot=DAY1+day2+day3; document.getElementById("day"+i).value=tot; } } </script> <?php mysql_connect("localhost", "Admin", "aaaaaa") or die(mysql_error()); mysql_select_db("sb") or die(mysql_error()); $sqlstr = "SELECT * FROM WWW "; $row=mysql_query($sqlstr); //echo $record; //$row = mysql_fetch_array( $record ); ?> <body> <table width="834" border="1"> <tr> <td width="115">Order name</td> <td width="80">qty</td> <td width="144">Day1</td> <td width="144">Day2</td> <td width="144">Day3</td> <td width="145">TOT</td> </tr> <?php $count=0; while($record = mysql_fetch_array( $row )) { $count++; ?> <tr> <td> <?php print $record['Ordername']; ?></td> <td> <?php print $record['QTY']; ?></td> <td><form id="form1" name="form1" method="post" action=""> <label> <input type="text" name="day1qty<?php echo $count ?>" value="" /> </label> </form> </td> <td> <label> <input type="text" name="day1qty<?php echo $count ?>" /> </label> </td> <td> <label> <input type="text" name="day2qty<?php echo $count ?>" /> </label> </td> <td> <label> <input type="text" name="ttl<?php echo $count ?>" onkeyup="sum1()" /> </label> <input name="NoOfRow" id="NoOfRow" type="hidden" size="4" value="<?php echo $count ?>"> </form> </td> </tr> <?php echo $count; } ?> </table> please help me for the above code to get the sum of day1 day2 day3 onkeyup to get the total im really confusing above this plzz help me for to get the ttl value when key in values plzz help me ......................... give me smaple code also Hi: I'm new to this forum and JS. I simply want to be able to use the Google Maps API v3 to allow a location value entered in my app (by the user) to show that location via Google maps. The code below accomplishes this via an onClick event. How to accomplish the same WITHOUT an onClick? To be clear, it appears I need to be able to perform the geocode lookup to get the long/lat coordinates and then apply them. That all needs to occur on page load. Any tips on how to re-arrange this code to accomplish the desire goal are appreciated. Thanks much. Bill Code: <html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
// You should always check that a result was returned, as it is
// possible to return an empty results object.
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.set_center(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
}
} else {
alert("Geocode was unsuccessful due to: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
<div>
<input id="address" type="hidden" value="Chicago">
<input type="button" value="Geocode It!" onClick="codeAddress()">
</div>
</body>
I know next to nothing about javascript and I don't even know if this is possible. I need to target window.location.href to an iframe on a different page. So, right now, the piece of the code that redirects the browser looks like this: Code: window.location.href='http://www.somewhere.com/'; Works great, brings it up in the same browser window. So now I need to modify the code so it goes to a different page and brings that page up in a specified iframe. I hope this makes sense. I really need help. And if it is not possible, I just need to know to abandon all hope. hi, have a series of 2 pages. The first is a drop down select box that gathers the state name. Onclick we are using a window.open to open a page with a list of cities for that state. Again using a drop down select box to select the city and then, onclick, we send the user off to the appropriate page based on state/city selection while at the same time updating the 1st (parent) page with a new location.href. Problem is that instead of updating the parent page, it updates the page with the list of cities (the child page). On the first page script we generate the following warning: Warning: XUL box for _moz_generated_content_after element contained an inline #text child, forcing all its children to be wrapped in a block. Source File: chrome://browser/content/browser.xul Line: 0 First page is not generated via javascript but standard html. This happens both locally and when pages are moved to the server (Apache). First page script is as follows Code: <HTML>
<HEAD>
<TITLE>J1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function StateSelect (form) {
Item = form.state.selectedIndex;
Result = form.state.options[Item].value;
window.open('j2.htm?value='+ Result,'myWindow','resizeable=no,resizeable=0,scrollbars=no,scrollbars=0,location=no,location=0,toolbar=no,toolbar=0,directories=no,directories=0,menubar=no,menubar=0,status=no,status=0,copyhistory=no,copyhistory=0,width=300,height=100,left=300,top=300,screenX=300,screenY=300')
}
</SCRIPT>
</HEAD>
2nd page (where user selects city) code is as follows: Code: <SCRIPT LANGUAGE="JavaScript">
function CitySelect (form) {
Item = form.city.selectedIndex;
city = form.city.options[Item].value;
state = document.myform.state.value;
window.open('j3.htm','mywindow3')
setTimeout("Func1()",3000);
}
function Func1()
{
parent.location.href='j4.htm?st='+ state + '&city=' + city,'mywinow2';
}
</SCRIPT>
Ideas on why and what the error (actually a warning) is trying to tell us? Thank you all! Jim Code: <script language="JavaScript" type="text/javascript">
function confirmDelete(url){
var decision = confirm("Click OK to delete this post.");
if(decision == true){
window.location = url;
}
}
</script>
<!--HTML LATER ON -->
<a onclick="confirmDelete('deletePost.php?id=17')" href=''><img src='delete.png' alt='' title='Delete this post' /></a>
I get absolutely nothing out of this. The confirm box pops up, but a the URL never changes when I click OK. I have no clue what's going wrong here. I'm using Google Chrome to test this out if that helps. Also does not work in Firefox. Hello. It is Friday. I thought this will be a simple question, but it seen like hard to find a fast and simple solution. I am working on an online sign in tool. Two browser windows are open at the same time. One is for people to sign in with password and submit their information; another one is for Administrator to see who sign in. I am trying to refresh the Administrator page whenever user finished sign in and submitted their information. These two pages cannot be parent and child page. What will be the easiest way to solve this in ColdFusion or JavaScript? Thank you so much for your time. Have a wonderful weekend.
Hi, I have some JavaScript that is being used to open a new window and display a PDF file. This is working fine apart from the title of the new window being open. I am using the window.open function and I have set the title of the page using the document.write function (see code below). The code works fine for FF and IE but for some reason Google Chrome just displays 'Untitled - Google Chrome' Code: <body>
<a href="javascript:openNewWindow();">Click Here</a>
<script type="text/javascript">
function openNewWindow()
{
var pdfWindow = window.open('', "window",
'resizable=1,scrollbars=0,width=800,height=600');
pdfWindow.document.write('<html><head><title>Window Title</title></head>');
pdfWindow.document
.write('<body><iframe src="" id="ifrm" name="ifrm" width="100%" height="100%"></iframe>');
pdfWindow.document.write('</body></html>');
pdfWindow.document.close();
}
</script>
</body>
Note: I have also tried adding - pdfWindow.document.title="Title"; - to the JavaScript, with no luck. Is there anything specific that is required for Chrome or am I just missing something?? Thanks in advance for any help! First, I will state that I am totally inexperienced in JavaScript. I have a web site application written in VB.net and asp. The main page uses JavaScript to load a popup page that performs multiple tasks. The main page accepts a variety of incoming messages, only SOME of which need to be passed to this popup page for processing. I found an ugly way to pass the message to the popup by placing it in a Session variable. Now I need to cause it to be handled. I see two possibilities, and I do not have a clue how to implement either. Either one would be great: 1. In the main page, trigger a subroutine in the popup, using JavaScript. OR 2. In the popup, establish a trigger any time that Session variable changes. Thanks in advance for any help on this. Hello, I have this onchange event that occurs after user selection of a dropdown menu. When a user makes a selection it queries the database and delivers some data. The value of the dropdown is stored in a database, but the problem is when the page is refreshed the delivered data disapears, only reappearing if you change the dropdown. How can I make the onchange event run when the page loads so that if there is already a selection, the database data will always be there, only to change if the user changes the selection? Here is the JS: Code: <script type="text/javascript">
function showCustomer(str)
{var xmlhttp;
if (str=="")
{document.getElementById("txtHint").innerHTML="";
return;}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();}
</script>
And the onchange line: Code: <SELECT Name=""customers"" id=""customers"" onchange=""showCustomer(this.value)""> Etc... Please ignore the double sets of quotes. our requirement is client wants to know howmany users leaving the main page without entering data in the application page.at that time we need to show the css popup overlay. in the following scenarios overlay should pop up. 1)when user leaves the page.(e.g. type other address in the address bar).bascially user shy away from the browser. 2)clicks browser close button. we will show one css popup overlay(not browser popup) and in the back ground main application will be greyed out.this overlay consists of some text fields and some buttons will be there and parallely in the back ground we will execute AJAX call. can we accomplish this requirement??is yes how?will it work in all browsers? my concern is how to prevent the browser from closing(e.g.when user chooses browser X button) when css overlay comes up. Hi All, I have a script that is called by the onchange event on my text field (it compares the date entered into the field and issues an alert if the date is earlier than the current date). This worked great on my data entry form but I also want to use the same script in my update form. In the update form the text field is already receiving a value via php: Code: <input name="DateNeeded" type="text" class="formField" id="DateNeeded" onchange="checkDate(this)" value="<?php echo $row_rstRequestDetails['DateNeeded']; ?>" /> and this is causing my onchange event to fire when the page is loaded. Is there a way to suppress the onchange event for the initial page load? Thanks, Ken Alright, so I'm working on a script, and I'm simply using the following code: document.getElementById("element").onclick = alert("hello"); When I load the page, the alert fires instantaneously. I'm completely stumped. I've checked everything in my not too extensive Javascript file, and it looks fine. What common errors could cause this? Hello everyone... I've got a question about an onKeyUp event. I'm using a text box that HAS to be a negative number therefore it has to have a - sign in front of the number. Can someone point me in the right direction as to how to write a function to do this? Thanks so much...
Dear friends, I was looking for some help on getting all the ten digits mobile numbers in the current webpage and assign an onclick event to it just by a click of a button. Likewise, Suppose there are mobile numbers Code: <p>9876543210 Blah....Blah...Any other content.9654321000</p> <input type="button" value="Get 10 digit mobile numbers" onclick="getnumbers();" /> in the current webpage. and the user clicks on a button. Then all the ten digit mobile numbers(in this case two numbers 9876543210 and 9654321000) gets the html as Code: <p><span onclick="openpopup('9876543210')">9876543210</span> Blah....Blah...Any other content.<span onclick="openpopup('9654321000')">9654321000</span></p>
I am a PHP guy and probably suck at JS. Tried experimenting with the following code but didn't got it to work. Code: var html = document.getElementsByTagName('body')[0].innerHTML; and
match = new RegExp("/\d{10}/");
replaceWith = "<span style='text-decoration:underline;' onclick=\"openpopup('--NUMBER--')\" >--NUMBER--</span>",
replaced = html.replace(pattern,replaceWith);
Please get me out of this glitch as it is getting harder for me to do it. I have a html page with a lot of thumbnails. The idea is that when the user clicks on an image the onClick event is to display another detailed form and deliver to that form the name of the image in a variable. In the detailed php-form there is a query to MySQL to retrieve a record. The record will be retrieved by a Query based on the name of the picture. Apparently the PHP cannot do the job. I had an idea to make the thumbnail page as a form and to use use a hidden field with the thummnail name which should be carried on with the $_POST array through the submit button but i do not want to have a submit button. The more elegant way is just by clicking the picture the detailed page is opened and the variable is transferred where my php code can make use of the variable for the query. I have never used java before so you have to excuse for the lack of knowledge. Can anyone gie me an idea how i should implemnt this Best regards MSP I have a html page with a lot of thumbnails. The idea is that when the user clicks on an image the onClick event is to display another detailed form and deliver to that form the name of the image in a variable. In the detailed php-form there is a query to MySQL to retrieve a record. The record will be retrieved by a Query based on the name of the picture. Apparently the PHP cannot do the job. I had an idea to make the thumbnail page as a form and to use use a hidden field with the thummnail name which should be carried on with the $_POST array through the submit button but i do not want to have a submit button. The more elegant way is just by clicking the picture the detailed page is opened and the variable is transferred where my php code can make use of the variable for the query. I have never used java before so you have to excuse for the lack of knowledge. Can anyone gie me an idea how i should implemnt this Best regards MSP I have a pop-up window system on my site that shows an absolutely-positioned div over the entire page as a "pop up" of sorts when someone clicks a link. I use this simple line of Javascript to disable page scrolling when a "pop up" box is opened by a user: Code: document.documentElement.style.overflow = document.body.style.overflow = 'hidden'; The problem is that when a user is scrolled down on a page and clicks a link to bring up one of my pop up boxes, when the overflow is set to 'hidden' to disable scrolling, the page "jolts" back up to the top (similar as to what would happen if someone clicked an <a> element with href="#" ). However, the links are not actually links, but span tags that are programmed with JS to trigger the scrollbar to be disabled when clicked, so that is not the culprit here. I've narrowed the problem down to that one line of code which I posted earlier. Apparently, setting the documentElement overflow style to 'hidden' scrolls the user to the top of the page automatically along with "disabling" the scroll bar on the page. I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes. Thanks in advance for any help I receive. Hi, I have the following code. This code is working fine in FF but not in IE. Can any one let me know how i can resolve this. function handlerFunc (elem, elem1) //elem1 is id of input tag { elem.onKeyUp = keyupHandler (elem1); //throwing error in IE. If i remove argument it is working fine, but i want to make it work with arguments. } function keyUpHandler (elem1) { alert (elem1.form.name); } Now, i am adding a onKeyUp function to change the radio if the value of another field is larger than 1. But this code isn't working... Any thoughts? Code: function getUses() {
var listcost = document.getElementsByName('form[listcost]');
var uses = document.getElementById('Uses');
if (uses == 1) {
listcost[0].checked = true;
}
else {
listcost[1].checked = true;
}
}
|
|||||||