Setting the Hash Location of a Web Page with the onkeyup() event

Michael_ · 08-10-2010, 10:40 PM

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 + " are:</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.

Old Pedant · 08-11-2010, 12:03 AM

Pure guess.

Try this:

Code:

function Search(){
	location.href = "#Factor" + document.getElementById("SearchNumber_txt").value
}

Put that code into the popup, not the main window, and try it.

Michael_ · 08-11-2010, 03:21 PM

Code:

location.href = "#Factor" + document.getElementById("SearchNumber_txt").value

didn't work
But maybe it's because I can't put it in the pop up window. I tried placing some Javascript in the pop up window and the whole web page crashed. I can still refer to it using the opener method though.
Is my problem something to do with the code I use to set the anchor? I use:

Code:

FactorsFound.push("<a name = 'Factor'" + Input2 + "><b>The Factors of " + Input2 + " are:</b></a><p style = 'margin: 0, 0, 25px, 0; position:relative; left:20px;'>")

Does this definately create an anchor with the name "#Factor" + Input2
Input2 is a number that increments by 1 each time the loop is executed.

I don't think it is the creating of the anchors, but could someone please confirm that thought for me.
Also, I tried reloading the page, but that doesn't work because the page was created by javascript. Would reloading the page, by running the DisplayFactors function work because then I could link to the anchor. I have made links before that do this.
Here is the full DisplayFactors function.

Code:

function DisplayFactors(FactorsFound, Input, Maximum, ShowFactors, ShowPrimeFactors){
	//                        Instead of opening the window here, could I open it at the end after everything has been placed in the window, then I could open it to the anchor.
	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;'>")
	FactorsWindow.location.hash += "#Top"
	if(ShowFactors){
		if(Input == Maximum){
			FactorsWindow.document.write("<title>Factors of " + Input + "</title>")
		}else{
			FactorsWindow.document.write("<title>Factors of Numbers Between " + Input + " and " + Maximum +"</title>")
		}
		FactorsWindow.document.write(FactorsFound.join("<br />"))
	}else{
		if(ShowPrimeFactors){
			FactorsWindow.document.write("<title>Prime Factors Of " + Input + "</title>")
			FactorsWindow.document.write(FactorsFound.join(""))
		}else{
			FactorsWindow.document.write("<title>Prime Numbers Between " + Input + " and " + Maximum + "</title>")
			FactorsWindow.document.write(FactorsFound.join("<br />"))
		}
	}
	FactorsWindow.document.write("</div>")
}

I'm as confused as my answer is to read.

Michael_ · 08-11-2010, 07:18 PM

I have to use location.hash = whatever because the window that opens doesn't have it's own web address. Is it possible to give it one? With

Code:

//                                         In one of these two?
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%")

If it is please say how

Old Pedant · 08-11-2010, 07:29 PM

I guess what I would do is completely change how you are doing this.

Instead of creating the contents of the popup from the main window, I'd create a *SEPARATE* HTML page for the popup and I would *PASS* the arguments from the main window to it, in the query string as part of its URL. Then in the popup I parse the arguments and create the contents. This means that all the needed JS code can already be there in the HTML for the popup.

Though it means a rewrite, it's actually a much simpler rewrite.

Up to you.

Michael_ · 08-11-2010, 10:58 PM

So if I do make the pop up window a html file how would I add to it. Also, I will have to upload the html to a different site and then load it from that because the thing I use .tumblr, it's more of a blogging thing. But I like it because it's easy and there's no ads. I think it would just be easier to do the javascript.

Old Pedant · 08-12-2010, 01:03 AM

Ugh...that last requirement (that the page be hosted elsewhere) is a real killer. It means you can use cross-page scripting because it would then be cross-site.

I'm not sure where to go with this. Sorry.

Best I could suggest would be to have a series of <a> links, one per number, and let the user click on them to jump to the appropriate spot.