Automatic Scroll Down to see Query Results.

[weightinwildcat]

I am wokring on code to cause a page to automatically scroll down so users can see the results of a query. Thus far I have tried adapting several Javascript code samples. I can make an alert work OK, but I would like to replace it with something that actually brings a person down to where the results are.

Here are the samples I have tried to adapt:

document.getElementByName('contactinfo').focus()

document.getElementById('jumpdown').scrollIntoView(true)

window.location.hash="contactinfo"

var el = document.getElementByName('jumpdown')
el.scrollIntoView(true)

window.location="index.php#jumpdown"

Any ideas as to why these are not working?

 

[vacunita]

Both of these

window.location.hash="contactinfo"

window.location="index.php#jumpdown"

work for me, I think the real question, is how have you defined your anchor to which you are wanting to jump in those instances.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[weightinwildcat]

Like this:

<a name='jumpdown' id='jumpdown'></a>

All very straightforward. But the Javascript code does NOT move me down the page. Even though all the documentation I have seen on line says that it should.

 

[feherke]

Hi

Even though all the documentation I have seen on line says that it should.

If a documentation says there is DOM method like getElementByName, it should be burned.

[gray]// works, if you correct the method name and add the array element reference, then add a form element with name contactinfo[/gray]
document[teal].[/teal][COLOR=darkgoldenrod]getElement[highlight]s[/highlight]ByName[/color][teal]([/teal][green][i]'contactinfo'[/i][/green][teal])[/teal][highlight][teal][[/teal][purple]0[/purple][teal]][/teal][/highlight][teal].[/teal][COLOR=darkgoldenrod]focus[/color][teal]()[/teal]

[gray]// works with your HTML posted on 6 May 11 12:13[/gray]
document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'jumpdown'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]scrollIntoView[/color][teal]([/teal][b]true[/b][teal])[/teal]

[gray]// works, if you change the a tag's name and/or id to contactinfo[/gray]
window[teal].[/teal]location[teal].[/teal]hash[teal]=[/teal][green][i]"contactinfo"[/i][/green]

[gray]// works, if you correct the method name and add the array element reference[/gray]
[b]var[/b] el [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]getElement[highlight]s[/highlight]ByName[/color][teal]([/teal][green][i]'jumpdown'[/i][/green][teal])[/teal][highlight][teal][[/teal][purple]0[/purple][teal]][/teal][/highlight]
el[teal].[/teal][COLOR=darkgoldenrod]scrollIntoView[/color][teal]([/teal][b]true[/b][teal])[/teal]

[gray]// works with your HTML posted on 6 May 11 12:13[/gray]
window[teal].[/teal]location[teal]=[/teal][green][i]"index.php#jumpdown"[/i][/green]

Feherke.

http://free.rootshell.be/~feherke/

 

[weightinwildcat]

Sorry, but NONE of these worked. A few of them make the screen flicker for a moment, but that is all.

A little more explanation seems relevant at this point. I am developing with hand-coded PHP (and Javascript) and using a MySQL database, with IIS on my development computer and a Linux virtual server for the live version of the form I am working on.

Since the form is bigger than the viewing area on my monitor I decided to comment out code except except the line or lines that would automatically scroll downward. Absolutely nothing else was active. I can put code into my Javascript method that makes an alert message appear, but that is all.

So, since everybody else seems to be able to manage this, and there are several different ways of doing it, I can only conclude that something on my computer is interfering with the code, or that there is something I do not have in place that should be there.

 

[LyndonOHRC]

Try posting the "server-side" of the whole document.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[LyndonOHRC]

My apoligies, I ment client-side.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[vacunita]

Have you checked if you are getting any JS errors? As Feherke pointed out above, some of your calls there are just wrong.

Firefox's Error console is good for this





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[weightinwildcat]

This is the Javascript method:

<script language='javascript'>
function downward()
{
if(document.lookup.US_Senators.checked == true || document.lookup.US_Congressmen.checked == true || document.lookup.State_Senators.checked == true ||
document.lookup.State_Assemblymen.checked == true || document.lookup.State_Governor.checked == true || document.lookup.Lieut_Governor.checked == true)
{
alert("Scroll down to see the results of your search.");
}
}
</script>

This is where it gets called:

<input type='submit' value='Find Your Politician' onclick=downward()>

All seemingly straightforward.

 

[feherke]

Hi

there is something I do not have in place that should be there.

That is my conclusion too.

As Lyndon asked you, post the whole document. Or even better, post the URL of a publicly accessible copy of that page.

In meantime another guess : the [tt]id[/tt] or [tt]name[/tt] you use is not unique.


Feherke.

http://free.rootshell.be/~feherke/

 

[vacunita]

Assuming you aren't getting any JS errors (which you should be chcecking for), I'd agree with Lyndon and feherke, we need to see a publicly accessible copy of the page.
Or if that is not possible, the client side code for it once it has been rendered by the browser.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[weightinwildcat]

Here is the client side code:

<html>
<head>
<script language='javascript'>
function downward()
{
if(document.lookup.US_Senators.checked == true || document.lookup.US_Congressmen.checked == true || document.lookup.State_Senators.checked == true || document.lookup.State_Assemblymen.checked == true || document.lookup.State_Governor.checked == true || document.lookup.Lieut_Governor.checked == true)
{

//window.location.replace="jumpdown";
//window.location.hash="#jumpdown";
//window.location.href="index.php#jumpdown";
//window.location.hash = '#<bean:write name="jumpdown"/>'

//if(!window.location.hash){
// window.scrollTo(200, 200);
//}

// works, if you correct the method name and add the array element reference, then add a form element with name jumpdown
//document.getElementsByName('jumpdown')[0].focus()

// works with your HTML posted on 6 May 11 12:13
//document.getElementById('jumpdown').scrollIntoView(true)

// works, if you change the a tag's name and/or id to jumpdown
//window.location.hash="jumpdown"

// works, if you correct the method name and add the array element reference
//var el = document.getElementsByName('jumpdown')[0]
//el.scrollIntoView(true)

// works with your HTML posted on 6 May 11 12:13
//window.location="index.php#jumpdown"

//document.location.replace="index.php#jumpdown";

//document.getElementsByName("#jumpdown")[0].scrollIntoView(true);

alert("Scroll down to see the results of your search.");
}
}
</script>

<title>
Politician Search - Find your US Senators, your Congressional Representative, your State Legislators, your Governor, and your Lieutenant Governor
</title>

<meta name = 'keywords' contents = 'Politician Search, politician, politicians, legislator, legislators, representative, representatives, senators, congressmen, congresswomen, Governor, Lieutenanat, Lieutenant Governor, United States, US, America, United States of America, Senate, Congress, Senator, Congressman, Congresswoman, Delegate, State Senator, State Representative, State Assemblyman, State Assemblywoman, AL, Alabama, AK, Alaska, AS, American Samoa, Samoa, AZ, Arizona, AR, Arkansas, CA, California, CO, Colorado, CT, Connecticut, DE, Delaware, DC, District of Columbia, FM, Federated States of Micronesia, Micronesia, FL, Florida, GA, Georgia, GU, Guam, HI, Hawaii, ID, Idaho, IL, Illinois, IN, Indiana, IA, Iowa, KS, Kansas, KY, Kentucky, LA, Lousiana, ME, Maine, MH, Marshall Islands, Republic of the Marshall Islands, MD, Maryland, MA, Massachusetts, MI, Michigan, MN, Minnesota, MS, Mississippi, MO, Missouri, MT, Montana, NE, Nebraska, NV, Nevada, NH, New Hampshire, NJ, New Jersey, NM, New Mexico, NY, New York, NC, North Carolina, ND, North Dakota, MP, Northern Mariana Islands, OH, Ohio, OK, Oklahoma, OR, Oregon, PW, Palau, PA, Pennsylvania, PR, Puerto Rico, RI, Rhode Island, SC, South Carolina, SD, South Dakota, TN, Tennessee, TX, Texas, UT, Utah, VT, Vermont, VI, Virgin Islands, US Virgin Islands, VA, Virginia, WA, Washington, WV, West Virginia, WI, Wisconsin, WY, Wyoming, make your voice heard, tell them how you feel, let people know you care, How do I find my state representative, How do I find my Senator, How do I find my legislator, How do I find my congressman, my state representative, my Senator, my legislator, my congressman, my representative, Alabama politician, Alaska politician, American Samoa politician, Arizona politician, Arkansas politician, California politician, Colorado politician, Connecticut politician, Delaware politician, DC politician, District of Columbia politician, Delaware politician, Micronesia politician, Federated States of Micronesia politician, Florida politician, Georgia politician, Guam politician, Hawaii politician, Idaho politician, Illinois politician, Indiana politician, Iowa politician, Kansas politician, Kentucky politician, Louisiana politician, Maine politician, Marshall Islands politician, Republic of the Marshall Islands politician, Maryland politician, Massachusetts politician, Michigan politician, Minnesota politician, Mississippi politician, Missouri politician, Montana politician, Nebraska politician, Nevada politician, New Hampshire politician, New Jersey politician, New Mexico politician, New York politician, North Carolina politician, NOrth Dakota politician, Northern Mariana Islands politician, Mariana Islands politician, Ohio politician, Oklahoma politician, Oregon politician, Palau politician, Pennsylvania politician, Puerto Rico politician, Rhode Island politician, South Carolina politician, South Dakota politician, Tennessee politician, Texas politician, Utah politician, Vermont politician, Virgin Islands politician, US Virgin Islands politician, Virginia politician, Washington politician, West Virginia politician, Wisconsin politician, Wyoming politician'>
<meta name = 'description' contents = 'Find your US Senators, your Congressional Representative, your State Legislators, your Governor, and your Lieutenant Governor. Make your voice heard. Tell them how you feel. Let people know you care.'>

<!--
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-9810626-12']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? '

https://ssl'

: '

http://www')

+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>-->

</head>

<body bgcolor='#4682b4'>
<a name='gotop'></a>

<table width='100%' border='0' cellpadding='0' cellspacing='0' bgcolor='#000044'><tr><td align='center' valign='center'>

<table width='1325' border='12' cellpadding='0' cellspacing='0' bordercolor='#000044' bgcolor='#ffffff' style='margin-top:0; margin-bottom: 0;'><tr height='135'><td align='left' valign='top' width='33%' bordercolor='#ffffff'><img src='politiciansearchlogo.jpg' width='256' height='120'></td><td width='55%' valign='top' align='right' bordercolor='#ffffff'></td><td width='8%' valign='top' align='center' bordercolor='#ffffff'><table width='110' border='0' cellpadding='0' cellspacing='0'><tr><td width='110' height='110' valign='top' align='left'><a href='

http://wordpress.politiciansearch.com'

target='_TOP' title='Politician Search'><img src='wordpress.png' width='110' height='110' style='border: 0px; margin-top:0; margin-bottom: 0;' alt='Politician Search WordPress Blog' /></a></td></tr></table><p style='font: 12pt/12pt Times New Roman; align: left; margin-top:3; margin-bottom: 3;'><font color='#000000'><b><a href='

http://wordpress.politiciansearch.com'

target='_TOP'>Our Blog</a></b></font></p></td><td width='5%' valign='top' align='right' bordercolor='#ffffff'><table width='51' border='0' cellpadding='0' cellspacing='0'><tr><td width='51' height='51' valign='top' align='right'><a href='

http://www.facebook.com/pages/Politician-Search/165866516776374'

target='_TOP' title='Politician Search'><img src='facebook_icon_00221.png' width='51' height='51' style='border: 0px;margin-top:0; margin-bottom: 0;' alt='Politician Search on Facebook' /></a><br><p style='font: 12pt/12pt Times New Roman; align: left; margin-top:0; margin-bottom: 0;'></td></tr></table><table width='51' border='0' cellpadding='0' cellspacing='0'><tr><td width='51' height='51' valign='top' align='center'><a href='

http://twitter.com/share'

data-url='

http://www.politiciansearch.com'

data-text='Politician Search - Find your State Legislators, your Congressional Representative, and your US Senators' data-count='none' data-via='David Tacke' data-related='Angel Free' target='_TOP'><img src='twitter.png' width='51' hight='51' style='border: 0px;margin-top:0; margin-bottom: 0;' alt='Politician Search on Facebook' /></a><script type='text/javascript' src='

http://platform.twitter.com/widgets.js'></script></td></tr></table></td></tr><tr

bgcolor='#000044' height='20'><td colspan='4'><p style='font: 12pt/12pt Times New Roman; align: left; margin-top:7; margin-bottom: 0;'><font color='#ffffff'><b>Make Your Voice Heard &#8226; Tell Them How You Feel &#8226; Let People Know You Care</b></font></p></td></tr></table>
<table width='1300' border='5' cellpadding='2' cellspacing='2' bgcolor='#ffffff' bordercolor='#ffffff'>
<tr align='center' width='100%'>

<td width='700' bgcolor='#aaccff' align='left' valign='top'>

<table width='100%' border='0' cellpadding='0' cellspacing='0' >
<tr>
<td align='left' valign='top'>

<font face='Times New Roman' size='5'><b>Search For Your Politician</b></font>
<font face='Times New Roman' size='1'><br></font>
<font face='Times New Roman' size='3'><b>Who represents me?</b></font>

<form action = '' method='post'' style='margin-top: 0;' name='lookup'>

<div style = 'margin-top: 0; margin-bottom: 0; font: 12pt/12pt Times New Roman; align: left'>
<input type='checkbox' name='US_Senators'></input> <font face='Times New Roman' size='3'>US Senators</font><br>

<input type='checkbox' name='US_Congressmen'></input> <font face='Times New Roman' size='3'>US Congressional Representatives & Territorial Delegates</font><br>

<input type='checkbox' name='State_Governor'></input> <font face='Times New Roman' size='3'>State Governor</font><br>

<input type='checkbox' name='Lieut_Governor'></input> <font face='Times New Roman' size='3'>Lieutenant Governor</font><br>

<input type='checkbox' name='State_Senators'></input> <font face='Times New Roman' size='3'>State Senators</font><br>

<input type='checkbox' name='State_Assemblymen'></input> <font face='Times New Roman' size='3'>State Assembly Representatives</font><br>

<font face='Times New Roman' size='3'>State/Territory: </font>

<SELECT Name='State' style='margin-top: 5; margin-bottom: 0;'>
<option value='AL'>Alabama
<option value='AK'>Alaska
<option value='AS'>American Samoa
<option value='AZ'>Arizona
<option value='AR'>Arkansas
<option value='CA'>California
<option value='CO'>Colorado
<option value='CT'>Connecticut
<option value='DE'>Delaware
<option value='DC'>District of Columbia
<option value='FM'>Federated States of Micronesia
<option value='FL'>Florida
<option value='GA'>Georgia
<option value='GU'>Guam
<option value='HI'>Hawaii
<option value='ID'>Idaho
<option value='IL'>Illinois
<option value='IN'>Indiana
<option value='IA'>Iowa
<option value='KS'>Kansas
<option value='KY'>Kentucky
<option value='LA'>Lousiana
<option value='ME'>Maine
<option value='MH'>Marshall Islands
<option value='MD'>Maryland
<option value='MA'>Massachusetts
<option value='MI'>Michigan
<option value='MN'>Minnesota
<option value='MS'>Mississippi
<option value='MO'>Missouri
<option value='MT'>Montana
<option value='NE'>Nebraska
<option value='NV'>Nevada
<option value='NH'>New Hampshire
<option value='NJ'>New Jersey
<option value='NM'>New Mexico
<option value='NY'>New York
<option value='NC'>North Carolina
<option value='ND'>North Dakota
<option value='MP'>Northern Mariana Islands
<option value='OH'>Ohio
<option value='OK'>Oklahoma
<option value='OR'>Oregon
<option value='PW'>Palau
<option value='PA'>Pennsylvania
<option value='PR'>Puerto Rico
<option value='RI'>Rhode Island
<option value='SC'>South Carolina
<option value='SD'>South Dakota
<option value='TN'>Tennessee
<option value='TX'>Texas
<option value='UT'>Utah
<option value='VT'>Vermont
<option value='VI'>Virgin Islands
<option value='VA'>Virginia
<option value='WA'>Washington
<option value='WV'>West Virginia
<option value='WI' selected>Wisconsin
<option value='WY'>Wyoming
</SELECT>

<br>
<p style='font: 12pt/12pt Times New Roman; align: margin-top: 0; margin-bottom: 0;'>Zipcode and four digit extension:
<input type = 'text' size = '5' name = 'Zipcode' maxlength = '5' style='margin-top: 0; margin-bottom: 0;'> <input type = 'text' size = '4' name = 'Zext' maxlength = '4' style='margin-top: 0; margin-bottom: 0;'>
Find your 4-digit zipcode extension: <b><a href='

http://zip4.usps.com/zip4/welcome.jsp'>Post

Office</a></b></p>

<p style='font: 12pt/12pt Times New Roman; align: margin-top: 0; margin-bottom: 5;'>
<b><font color='#003300' size='4'>Note:</font></b> You do not need a zipcode to find your US Senators, your Governor or your Lieutenant Governor.

<p style='font: 12pt/12pt Times New Roman; align: center; margin-top: 3; margin-bottom: 3;'>
<input type='submit' value='Find Your Politician' onclick=downward()>&nbsp;<input type='reset' value='Clear Entries'></p>
</div>

<table width='100%' cellpadding='0' cellspacing='0' style='margin-top: 3; margin-bottom: 0;' name='contactinfo'><tr><td align='left' width='100%'><p style='font: 12pt/12pt Times New Roman; align: left; margin-top:0; margin-bottom: 0;'>To contact us call 1-855-271-0888 or send an email message to our <a href='mailto:dtacke@politiciansearch.com'>webmaster</a> at Politician Search LLC.</p></td></tr></table>
</form>
</td></tr>
</table>
</td>

<td width='600' align='left' valign='top'>

<table width='100%' border='0' cellpadding='0' cellspacing='0' >
<tr>
<td align='center' valign='center'>
<img src='youradhere.png' width='600' height='483' style='border: 0px; margin-top:0; margin-bottom: 0;' alt='Your Ad Here' />
</td>
</tr>
</table>

</td></tr>
</table>

<table width='100%' cellpadding='0' cellspacing='0'><tr><td align='left' width='100%'><p style='font: 12pt/12pt Times New Roman; align: left; margin-top:3; margin-bottom: 3;'><font color='#ffffff'><b>&nbsp;&nbsp;&nbsp;&#169; 2011 Politician Search, LLC</b></font></p></td></tr></table>
</td></tr></table>

</body>
</html>

 

[vacunita]

I see two issues here. Your code has no element with the name jumpdown, and more importantly, your code submits the form after it runs the javascript to jump down.

Since the form hasn't been submitted when the downward() function is called, there is nothing to jump down to. Once the form is submitted it loads the search results and that is that.

The point here is that JS and PHP run independently of each other and at spearate times.
Once PHP stars doing its thing to produce the results, JS is no longer running.

To do what you want you would need to either use Ajax so you keep the JS in scope so to speak and it can jump down to the returned results, or add the downward() call to your onload event, so that once the form is submitted, and the answers returned the JS can execute and actually jump down.

Personally I would conditionalize it from PHP so that it sets the jumpdown function only if the form has been submitted.

<?PHP
...
if(isset(formvariable)){
$jumpdown="downward();"'
}
?>
...
<body onload="[red]<?PHP echo $jumpdown; ?>[/red]">

P.S. Use [ignore]

[/ignore] tags next time so it makes it easier to read the code.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/