B efore we begin, we feel obligated to advise you that this tutorial is not designed for anyone who does not have a good solid knowledge of HTML coding and java script reconfigurations. In other words, if you are a novice, please do not attempt this until you are proficient with HTML coding, reconfigurations and java scripts.
T o begin with, all the instructions on howto add the effect to your pages stand. They do not vary. What we will explain is how to make the window have all the attributes of a full web browser page including all your top bars as in your browser on top of the page.
O n the new document that you create named popup.html there are two reconfigurations you make to have a larger text area on the left side of the page. These are both made in the section of script that is pasted into the <BODY> of the new document you created.
Default Settings
</head>
<body>>
<div id="contentLayer" style="position:absolute; width:300px; z-index:1; left: 39px; top: 51px">
insert your text here !! Do Not Use <div> tags!!
</div>
<div id="scrollmenu" style="position:absolute;width:200px;height:30px;z-index:1; left:400px; top: 40px">
Our Reconfigured Settings
</head>
<body>
<div id="contentLayer" style="position:absolute; width:550px; z-index:1; left: 39px; top: 51px">
insert your text here !! Do Not Use <div> tags!!
and add nothing below the </div> tag just below!!!!
</div>
<div id="scrollmenu" style="position:absolute;width:200px;height:30px;z-index:1; left:570px; top: 40px">
T he above reconfigurations are to give you more text area ( In Width ) on the left side of the pop up page to allow an easier read of text.
T he other reconfiguration is on the main page that your form button sits on to call the pop up window.
Default Form Button
<center>
<form name="scrollwindow">
<input type=button value="Open Scroll Window" onClick="window.open('popup.html','scrollwindow','top=100,left=100,width=575,height=400');">
</form>
</center>
T he above form button will cause the pop up window to open with no attributes at all. You can't resize, see page address, have browser buttons etc.
Form Button With All Browser Window Attributes
<center>
<form name="scrollwindow">
<input type=button value="Open Scroll Window" onClick="window.open('popup.html','scrollwindow','top=100,left=100,width=575,height=400,
toolbar=1,scrollbars=1,location=1,
statusbar=1,menubar=1,resizable=1');">
</form>
</center>
A
s you can notice in the above reconfigurations, we added all the attributes to give the page all the capabilities of a regular browser window page. Pay particular attention of the placement of the apostrophe's ' within the reconfigurations and the spacing between the words and numbers or you will constantly get error messages of either
"Indetermined String Constant" or "error expected '}'".
toolbar=1,scrollbars=1,location=1,statusbar=1,menubar=1,resizable=1
W hat we did in actuality was add the above line of attributes into the form button directly after the height=400, attribute. Do Not leave a space between the new attributes and height=400,. See the below examples. Also notice that we did not add any new apostrophe's ' within the script as shown in the above. There are also no spaces between any of the words or characters in our additions to the script!
Right Way No Space
height=400,toolbar=1,scrollbars=1,location=1,statusbar=1,menubar=1,resizable=1
Wrong Way With Space
height=400, toolbar=1,scrollbars=1,location=1,statusbar=1,menubar=1,resizable=1
O n a few final notes. As you can notice, we did not change the size of the new window that will open on the form button. Reason being, with the new attributes added, you can once the page opens, resize the window. Also you cannot enter any content into the new page you have created under where is says insert your text here!! it has to be above the closing </div> tag right below that or you will not like what you see when you open the page.
T
hat should just about sum it up. If you do have any problems with this, feel free to contact us.
[ Back To Main Autoscroll Page ]
[ Get Code Here ]
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere™ Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-