Learn VBA & Macros in 1 Week!

JavaScript - Setting Documentelement.style.overflow = 'hidden' Jolts To Top Of Page (undesirably)

Full Excel VBA Course - Beginner to Expert

Setting Documentelement.style.overflow = 'hidden' Jolts To Top Of Page (undesirably)	View Content

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.

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Javascript Setting Value Of Hidden Variable

Style.overflow Returns Null?

Printing Problem :- Style.overflow Property In Firefox -- Javascript

Hidden Fields Are Showing On Page

Getting Error "documentelement" Is Either Null Or Does Not Exist

Show Hidden Element On Page Scroll

Hidden Text Field And Process Page Help.

Inserting Hidden Content On Page Into Between Tags

Using A Search Form To Display Hidden Divs On A New Page

Form Hidden Field Redirection To Parent Page

Show A Hidden Div On Page Load Complete Without Using Body Tag

Setting The Hash Location Of A Web Page With The Onkeyup() Event

Setting The Page Title Of Chrome Window.open

Setting The Size Of The Page, Disabling Scrollbars, Menu Bars, Address Bars Etc.

Getting Element Style Outside The Style Attribute

Detecting Div Overflow

Hiding Overflow

Overflow Check?

Checking If Div Is Hidden. Help.

Hidden Information?

Learn VBA & Macros for Excel in 1 Week!

Javascript Setting Value Of Hidden Variable

Similar Tutorials

I really thought this would work, a user goes to a page, selects a value from a select box then clicks a link to run a report using that hidden variable as a parameter. I am attempting to place the value in the URL to pass it. I'm sure the javascript is working, and maybe it's the HTML I've messed up - not sure.
Here is the javascript (the alert does return the correct value):
Code:

function OnChangeDay() {
	//assign the day id to the hidden variable $day
	x=eval(document.getElementById("day_loc_id_select").value)
	
	if(x) {	
        document.getElementById("test_day_id").value=x;
    } else {
        document.getElementById("test_day_id").value=0;
    }
	// test
	alert(document.getElementById("test_day_id").value)  
}

Here is the calling HTML:
Code:

<input type="hidden" name="test_day" id="test_day_id" value="">

 <select name="day_loc_id" id="day_loc_id_select"  
              onchange="OnChangeDay()"> 
 <option></option>
        <?= form_options($day_loc_options) ?>
</select>

And here is the HTML that should send the value, but I get day= (nothing)
Code:

<a href='/depts/edoptions/excel_extract.php?ex=2&day=<? echo $test_day ?>'>SLIP Data to Excel</a>

Can anyone point out where I've messed up?
Thanks

Style.overflow Returns Null?

Similar Tutorials

I know there is probably going to be an embarrassingly simple answer to my issue (like I am pointing to the wrong place in the DOM) but here goes. Why is the value of overflow not being returned by the below script?

Code:

<style type="text/css">

div.fbOverflow_Scroll { position:absolute; top:20px; left:20px; z-index:27; 
    overflow:scroll; overflow-x:hidden; height:30px; width:100px; 
    background-color:#FFB60D; border:1px Solid #000000; }
    
</style></head><body><form method='post' enctype='multipart/form-data' id='myForm' name='myForm'>

<!-- **** lab(Box10pt, fbOverflow_Scroll, , Extra=) -->
<div class='fbOverflow_Scroll' id='fbOverflow_Scroll' position=relative >
    This is stuff inside of a little scrolling area of the form</div>

<script language="JavaScript">
    alert(document.getElementById('fbOverflow_Scroll').style.overflow);
</script>

</form>

Printing Problem :- Style.overflow Property In Firefox -- Javascript

Similar Tutorials

Hi All,

I have a web application which has two DIV, one is main and one is child.

I am having problem in printing multiple pages. There is a lot of data in

the child DIV and i am using JavaScript functions to control the print

functionality. When i print using window.print(), only the data on the

main page currently being showed is printed. I further researched and

checked out the Style.Overflow property.

Now i am using divMain.style.overflow = "visible"

After this the complete print comes. But in Firefox, the scroll bar

disappears and only single page is left with no scroll bar .

Now if after print i give divMain.style.overflow = "Auto" OR

divMain.style.overflow = "Scroll", still the scroll bar doesn't come and if

it comes then its inactive. I am unable to see the complete data on the

page after the print is taken.

The problem is not coming in I.E and the full data with scroll bar is

recovered in I.E.

Please help me how to get the normal page with full data and scroll bar

after printing in Firefox.

Hidden Fields Are Showing On Page

Similar Tutorials

I dynamically create a hidden form field with some javascript. It works fine, the field gets created and filled in with whatever the user types in the prompt popup. But even though I have specified type="hidden" it is still displaying the field contents at the bottom of my form.

Code:

   var newvar = document.createElement('input');
    newvar.setAttribute('name',varname);
    newvar.setAttribute('type','hidden');
    newvar.setAttribute('value',Prompt.show("Enter notes"));
    document.mainform.appendChild(newvar);

Thanks for any help

Getting Error "documentelement" Is Either Null Or Does Not Exist

Similar Tutorials

Code:

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Washington DC</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; } 
</style>
<script type="text/javascript"> 

      var side_bar_html = ""; 
  
      var gmarkers = []; 

      var map = null;

function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    // save the info we need to use later for the side_bar

    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}


function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {

   var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(38.897725,-77.036511),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
     myOptions);

   google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data from Washington.xml

      downloadUrl("Washington.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var marker = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(marker[i].getAttribute("lat"));
          var lng = parseFloat(marker[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = marker[i].getAttribute("html");
          var label = marker[i].getAttribute("label");
          // create the marker
          var POI = createMarker(point,label,html);
        }

        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

 

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });
</script> 

</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 

     <table border="1"> 
      <tr> 
        <td> 
           <div id="map_canvas" style="width: 1000px; height: 600px"></div> 
        </td> 
        <td valign="top" style="width:200px; text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 
   </body> 
</html>

Show Hidden Element On Page Scroll

Similar Tutorials

Looking for a simple way to have a hidden element made visible when the page scrolls.

The idea is to have a back arrow appear only when the page has been scrolled horizontally.

trying something along these lines without success ...

Code:

	<script type="text/javascript">
		window.onscroll = function () {
			if $("back").is(":hidden") {
				$("back").show("slow");
			}
		}
	</script>

The site is he www.milesjaffe.com.

Thanks --

Hidden Text Field And Process Page Help.

Similar Tutorials

I need for the form to do the following:
when age is greater than or equal to 65 enter "yes" in the hidden field
when age is less than 65 enter "no" in the hidden filed
return true

Create a page processAge.htm that
Writes the message on the page
Hi name. At age # you may retire.
or
Hi name. At age # you are not ready to retire. Get to work.
name is the name entered on the form.
# is the age entered on the form.

Java:
Code:

<script type="text/javascript">
/* <![CDATA[ */
function validateSubmission() {
  var retValue = true;
  if (document.forms[0].name.value == "") {
      window.alert("You did not fill in one of the following required fields: Name or Age.");
      retValue = false;
      }
}
function checkForNumber(fieldValue) {
  var numberCheck = isNaN(fieldValue);
  if (numberCheck == true) {
    window.alert("You must enter a numeric value!");
    return false;
    }
} 
/* ]]> */
</script>

Body:
Code:

<form action="processAge.htm" method="get" onsubmit="makeList(); return validateSubmission(); ">
<table frame="border" rules="cols" >
<tr>
<td valign="top">
<h2>Retirement</h2>
<p>Name<br />
<input type="text" name="name" size="40" /></p>
<p>Age<br />
<input type="text" name="age" size="40" onchange="return checkForNumber(this.value);" /></p>
<p style="text-align: center"><input type="submit" value="Send" /><input type="reset" />
<input type="hidden" name="Retirement" /></p>
</td></tr>
</table>
</form>

Process Page:
Code:

<script type="text/javascript">
/* <![CDATA[ */
document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
  formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
  document.writeln(formArray[i] + "<br />");
}
/* ]]> */
</script>

Thanks for any help!

Inserting Hidden Content On Page Into Between Tags

Similar Tutorials

Hello,

I was wondering if it is possible to do something like below using JS.

Say I have some hidden text at the top of an HTML page...

Code:

<div id="text" style="visibility: hidden;">text</>

and an empty tag at the bottom of the page.

Code:

<div id="empty_container"></div>

Is there any way JS could grab the content inside #text and move it inside #empty_container when the page loads?

Thanks.

Using A Search Form To Display Hidden Divs On A New Page

Similar Tutorials

Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<LINK rel="stylesheet" type="text/css" href="<?php
   $path = $_SERVER['DOCUMENT_ROOT'];
   $path .= "/php/fleet/includes/website.php";
   include_once($path);
?>/php/font.css"></style>
</head>
<body>
<script type="text/javascript">
var showndiv=false;
function show() {
document.getElementById('fleet1').innerHTML="";
if (showndiv){document.getElementById(showndiv).style.display = 'none';

}
theval=Number(document.getElementById('tb').value);
switch (theval){
case 120:
showndiv='fleet2'
break;
case 121:
showndiv='fleet3'
break;
case 122:
showndiv='fleet4'
break;
default:
document.getElementById('fleet1').innerHTML="Sorry, nothing found"
return;
	}
document.getElementById(showndiv).style.display = 'block';
}
	
</script>
<script type="text/javascript">
/////////////////////////////////////////////////////
// Between the quotation marks, list the id values of each div.

var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4";

/////////////////////////////////////////////////////
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/  +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");

function ShowAllDivs() {
for(var i=0; i<IDlist.length; i++) { 
   document.getElementById(IDlist[i]).style.display = "";
   }
}

function HideAllDivs() {
for(var i=0; i<IDlist.length; i++) { 
   document.getElementById(IDlist[i]).style.display = "none";
   }
}
</script>

<form name="myForm">
<input type="text" id="tb">
<input type="button" value="Search" onclick="show()">
</form>

<div id="fleet1" style="display:block">
</div>


<div id="fleet2" style="display:none" class="fleetdiv">	<br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">

             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img 

src="http://www.nctfleetlist.co.uk/images/camera.png"  border="0"></a></FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W599 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network 

Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table>
<table align="right">
<TR>
<TD>
<a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr>
</table>



<div id="fleet3" style="display:none">	<br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">

             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img 

src="http://www.nctfleetlist.co.uk/images/camera.png"  border="0"></a></FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W601 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table></div>

<div id="fleet4" style="display:none">	<br>

<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">
             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>

            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>

             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">122</FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W602 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>

http://nctfleetlist.co.uk/div3.php

Form Hidden Field Redirection To Parent Page

Similar Tutorials

I have a form in an iframe that submits nicely. Here is one of the hidden fields that gives the page to redirect to after submitting the form:

Code:

<input type="hidden" name="rtrn" value="http://www.domain.com/thanks.html" target="_parent">

The parent target doesn't work, does anyone know how I get the thanks page to replace the page containing the iframe?

Show A Hidden Div On Page Load Complete Without Using Body Tag

Similar Tutorials

epic thread title!

Right I have a process page in php which is fairly long and complex with many options. If a certain option case is met as this ie: we've hit the Note Saved case.

PHP Code:
// save notes against company
if ($_POST['a']=="Save Note") {
    if (addnote($_POST['notetitle'],$_POST['notebody'])) {
        $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Note Saved</strong></font></p>";
    } else {
        $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Failed to save note.</strong></font></p>";
    }
}

I want to then wait until the page load is complete and then do the following.

PHP Code:
document.getElementById('addevent').style.display='block';

The reason I need to wait for page complete is that the div that needs to be displayed it one of the last parts of the page rendered so triggering the above too soon leads to the div not actually being available to be shown.

Now my current fail attempt at doing it was this
PHP Code:
echo "<script type=\"text/javascript\">if (confirm('You have not yet added a call back event do you wish to do so now?')) { document.getElementById('addevent').style.display='block'; }

However it doesn't display the hidden div like i want it to as it holds the page rendering off until the confirm is completed are there any suggestions of better ways or should I say CORRECT says of doing this.

Setting The Hash Location Of A Web Page With The Onkeyup() Event

Similar Tutorials

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.

Setting The Page Title Of Chrome Window.open

Similar Tutorials

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!

Setting The Size Of The Page, Disabling Scrollbars, Menu Bars, Address Bars Etc.

Similar Tutorials

How can I fixed the size of the page to desired width and length and also make that page fixed to that size so that it cannot resized.
And also I want to disable all bars(scrollbars, menubars, address bars etc) for the page.
I am using these codes for my projects and these are for commercial purpose. I am also asking for your permission to use these codes for my projects.
lookin 4wrd.

Getting Element Style Outside The Style Attribute

Similar Tutorials

if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them?
eg
Code:

<html>
<head>
	<title>expandable text area</title>
	<style type="text/css">
		#expandable{
			height: 100px;
		}
	</style>
	
</head>
<body>
<form>
	<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
	document.getElementById('expandable').addEventListener('click',function(){
		
		if(!this.style.height){
			this.style.height = this.scrollHeight+'px';
		}
		alert(this.style.height);
	}, true);
</script>
</html>

In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element

Detecting Div Overflow

Similar Tutorials

I have an html page that contains a div that has overflow:auto. Is there a way to detect if the scrollbar is displayed on the div? If the scrollbar is present then I want a message to be displayed inside another div. If there is no scrollbar then I don't want any message to appear.
Thanks

Hiding Overflow

Similar Tutorials

This might not be as simple as the title suggests. It may be a CSS problem, please say so if you know it to be and I will move it to the correct forum.

Now for the question,

Please visit:

http://danielrhyshardy.com/header/demo.html

I am using the jquery plugin supersized to create a carousel of images in the background of the page. As you will see though, as the transition starts, the second image is visible. I only want it to be visible when it indeed starts to overlap the current image. (i.e when the bench image overlaps the trees etc)

Here is the CSS:

Code:


* { margin:0; padding:0; }
body { background:#111; height:100%; }
	img{ border:none; }
	
	
	
	#supersized { position:absolute; left:0; top:0; overflow:hidden; z-index:-999; height:50%; width:100%; }
		#supersized img{ width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
			#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
			#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
		
		#supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:50%; background:#111; display:block; }
			#supersized a.prevslide { z-index:-20; }
			#supersized a.activeslide { z-index:-10; }
			#supersized a.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:50%; }
			#supersized a.prevslide img, #supersized a.activeslide img{ display:inline; }

Thanks guys

Dan

Overflow Check?

Similar Tutorials

Is it possible to find out if an element is using a scroll bar for overflow?

like I need to be able to change the size of something if there is any overflow....

Checking If Div Is Hidden. Help.

Similar Tutorials

hello,

This seems very basic, but I am running into a complication. What I would like to do is check if a certain div is displayed or hidden (really doesnt matter which) then set a map zoom level based upon that.

here is my current function.
function closeDirections(){
gdir.clear();

if(document.getElementById("river").style.display="none"){
map.setZoom(16);
hideID('river');
showID('main');
}
if(document.getElementById("main").style.display="none"){
map.setZoom(12);
hideID('main');
showID('river');
}

}

Also here is a link to my map, just in case. map

I have tried several variations, but from what I can tell with every instance, it only examines the first and never considers the second "if".

I thought to rememdy this issue by using if/else...same issue.

The only thing I could think is a nested if statements, but I am not sure what to use as a parent if.

I have searched for a while, but cannot seem to find something like an .is_hidden().

Something that I could see if its true/false.

Any help would be very much appreciated.

Hidden Information?

Similar Tutorials

Hello. The link below is the result of a product search on a website. It displays 2 results. However, the actual results (picture & information) that are displayed on the web page are not present in the "Page Source".

For example, if you search the page source for the string '860723' (which is one of the product numbers visible on the web page) it is not there. What is going on here? It looks to me like dummy images & information in the HTML are first loaded by the browser, and then that dummy info gets replaced by the real information via a javascript function. Is that what's going on?

http://www.lightsamerica.com/metro/s...mber:SL9469-8;

I'm trying to retrieve that information by downloading the source in my PHP program. The problem is that the information I want isn't present in the source. It stands to reason that the information is somehow being sent to the browser because I can see it... any ideas?

Thanks for your time,
-Scott