JavaScript - Preload Username And Password Into Iframe For External Site

I trying to modify that username password script so that only a password is needed,and if entered correctly, it takes you to a certain webpage but the script seems to break when I take out the username variables..is there any way I can do this?

Heres the script, its from the resources on javascriptkit. How would I do this?

Any help would be appreciated!

Heres the script I found.
<script type = "text/javascript">


var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;

var unArray = ["Philip", "George", "Sarah", "Michael"]; // as many as you like - no comma after final entry
var pwArray = ["Password1", "Password2", "Password3", "Password4"]; // the corresponding passwords;

for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}

if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}

var t = " tries";
if (count == 1) {t = " try"}

if (count >= 1) {
alert ("Invalid username and/or password. You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}

else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}

}

</script>

<form name = "myform">
<p>ENTER USER NAME <input type="text" name="username"> ENTER PASSWORD <input type="password" name="pword">
<input type="button" value="Check In" name="Submit" onclick= "validate()">
</p>

</form>

I have two pages A and B.
I have a link in the page A.
I have two iframes in the page B.

In practice, the link in the page A must open the page B and the link's href must open in the second iframe of the page B.
Is there any script that does this?

Hello. I have built a basic website that contains an iframe in the middle, called "iframe1". In this iframe I wish to load an external message board from proboards.com. In my code I can easily do this by making a button or hyper-link with the href="httproboards.com/myforums" and the rel="nofollow" target="iframe1"

When I do this it will load inside of it the iframe jsut as I want it to. However, my the problem is when you click on the button to login its coded to target "_top" and it opens on the entire page replacing the whole website. If i run firebug (a real time HTML editor). I can easily locate and change the link code to rel="nofollow" target="iframe1". But How can I write a script in javascript in my webpage code to do this as soon as the iframe has loaded the external messageboard?

I have also been trying things like
javascript:void(document.iframe1.getElementsByTag("a")[5].rel="nofollow" target="iframe1")

but i have had no luck so far in changing the target without the aid of firebug.

Here is the code that needs to be changed. the rel="nofollow" target="_top" needs to be altered somehow to rel="nofollow" target="iframe1" as soon as the frame has finished loading the messageboards.

Code:

<p><font size="2"> 

Welcome Guest.  Please <a href="/index.cgi?action=login" rel="nofollow" target="_top">Login</a> or <a href="/index.cgi?action=register" rel="nofollow" target="_top">Register</a>.<br/>Nov 19, 2010, 7:23pm

</font><br /></p>

Heres a screenshot that may help, as you can see I have easily changed the target of the link to="iframe1" using firebug, but I need to hardcode a script in my website that does this automatically after the iframe has loaded the forums page.

http://img191.imageshack.us/img191/7264/26796014.jpg

Thanks to for any help.

Disclaimer 1: I am not a programmer, just a curious designer, so please take that into consideration in your replies.
Disclaimer 2: Despite all advices against it, I couldn't find a better solution to my website than using iFrame
Disclaimer 3: Before asking for help, I researched *several* forums and although I found people discussing similar issues, I was not successful at adapting their solutions to my needs.

Gentlemen,

I need your help implementing a method to intercept and redirect external links to a dynamic iframe. By "dynamic" iframe I mean an iframe whose SRC would be filled up in accordance to the external URL being intercepted and that it would resize its HEIGHT accordingly in order to avoid scroll bars.
The function for resizing the iframe id="child" is already correctly implemented like so:

Code:

<script language="JavaScript">
<!--
function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('child').contentWindow.
      document.body.scrollHeight;
  //change the height of the iframe
  document.getElementById('child').height=
      the_height;
}
//-->
</script>

and the call
Code:

<iframe src="/main/index.php" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child">

This what I have going on:

- index.html => contains some content and the iframe id="child"
- childpage1[...N].php => several PHP pages which I do not want to show up outside of the parent "index.html". These pages use clean URLs from CMS such as "http://mydomain.com/pages/this-is-a-child-page/"

Users might click on external links from search engines, for instance, about an specific page such as "http://mydomain.com/pages/this-is-child-page-7/" which obviously would load the page "orphaned", outside "index.html" and that is exactly what I am trying to avoid.

Based on what I have researched so far, the best way (please, correct me if I'm wrong) to deal with this would be implementing a test condition on the header of the PHP child pages to verify if they are on "top" or not (if they are already inside the "parent" object "index.html"). If FALSE, the page would load normally, if TRUE, a variable should be created to store the URL of the requested page and passed through the link to the page "index.html" which would be immediately called.

In "index.html" there would be a script to collect the variable sent through the link (something like "http://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/") and break the text string apart, store a portion of PATHNAME (in this case, "/pages/this-is-child-page-7/) and use it to replace the current SRC of iframe id="child". Probably, there would have to be another testing function in this script to compare the variable passed from the "orphaned" PHP page against the current value of SRC in iframe id="child" to determine if any action is actually required.

This "replacement" function would be called onLoad and if tested true would run and refresh the page with the proper value in the iframe SRC.
All this should be accomplished while still making the iframe HEIGHT dynamically adjustable and show a "clean" URL in the browser, such as "http://mydomain.com".

The potential issues I foresee is an infinite loop due to two onLoad queries (one for SRC, another for HEIGHT) in the parent and child objects, which might required a merge into a single script.

As you can tell, I have an idea of what needs to be done but not a clue on how to get it done. Any help would be greatly appreciated.
Thanks,

Say I have a website, that I want to use an iframe with.

Would be possible, to use Javascript to change the logo image of an iframe of myspace (just for the example), to one on my site?

So switch the logo of myspace with one on my server?

Is this possible?

Blockis

Problem resolved. Please delete.

So,

I have to rely on a third party external JS file to load into a site of mine. Problem is I have to have it (for ads), but once every blue moon the server fails to repond to the request (its down or unresponsive), and thus because the JS can't load, the site hangs.

Is there a reliable js/ajax etc.. mechanism that I can use to set an allotted time and if the js isn't loaded, cancel the call or stop it so the page can load?

Please advise.

Caveats: I cannot host it, I cannot use php. Basically I was given a script call and I include it in the header of the page. I don't have alot of room to host, use various technologies etc.. other than what I am able to use without any backend/app scripting.

Hi,

1- I have 2 index files (parent) which contain an iframe each. The purpose of the index file is to provide a static template, a frame, for a title bar, navigation and footer. One index file is in French, the other in English (index-e, and index-f) in two disctinct folders.

2- I created several html files (in connection with the menu topics in the navigation bar) to be loaded and targeted at the iframe within the index file.

I need to be able to switch the iframe content from topic to topic (which is easy) AND from french to English for the same topic, at the push of a button.

The issue I have is this: if I put that button on the navigation bar, it will only switch language at navigation bar level (i.e the index file). If I put that button within each html file fed to the iframe, content will switch language but the navigation bar in the index will not follow.

In other words, if I switch topic within the same language, it works fine, but if I switch language for a specific topic, I cannot get the index file to switch language too. Do you understand?

I am looking for a way to let the browser know that a topic is now in a french, for instance, and the iframe content must be loaded in the french index file rather than the english one. It seems I will need some programming to achieve the result I want and I am a beginner javascript programmer. Before I get the know-how to approach such case instinctively and effectively, it will take a while. Any simpler workaround or javascript code I could insert in the index files and/or the html files fed to the iframe?

Please do not suggest php, or ssi as they are not viable options with the server I use. At least not for now...

Regards,

The Apprentice

Hi,

I am looking for some code that will do the following

Form to post any URL to an iFrame and load said URL.

I been told Javascript can do this, but I am also after the form bit as well if possible.

I'm having trouble getting two password boxes to work on the same page, which I created using the JavaScript Kit Encrypted Password Generator (http://www.javascriptkit.com/epassword/index.htm).

I've used the code that this generator produces, with some modifications as given by cheesebagpipe (http://www.codingforums.com/showthread.php?t=14646). These changes enable the user to press the keyboard's enter key to submit the password (as an alternative to clicking the submit button), and will also refocus the text box and select the text in it if the user enters the wrong password.

The code works fine on pages with just one box (e.g. http://www.mistymusic.co.uk/StLuke's.html), but what changes are needed to make two work on the same page? (I'm new to web design and clueless when it comes to JavaScript, which I know isn't the most secure method of password protection, but will do for now).

At the moment, on pages with two boxes (e.g. http://www.mistymusic.co.uk/BEAP.html), neither of the boxes work; this appears in the address bar instead: 'http://www.mistymusic.co.uk/BEAP.html?password2=help!' ('help!'=whatever has been entered in the text box).

The full code for both boxes is given below.

Code:

<div id="passwordBoxes">
      <div id="password2">
        <form name="password1" onsubmit="submitentry();return false;">
          <span class="WhiteLogin">Keyboard classes login</span> 
          <input name="password2" type="password" class="AlignedFormBoxes" size="15" />
           
          <input type="button" class="AlignedFormBoxes" value="Login" />
        </form>
      </div>
      <div id="password1">
        <form name="password1" onsubmit="submitentry();return false;">
          <span class="WhiteLogin">Community Youth Choir login</span> 
          <input name="password2" type="password" class="AlignedFormBoxes" size="15" />
           
          <input type="button" class="AlignedFormBoxes" value="Login" />
        </form>
      </div>
    </div>
  
<script>

var pass=new Array()
var t3=""
var lim=6
pass[0]="gc3Gu5uygvU8VDA"
pass[1]="aNL6yjrU5AAKyy3"
pass[2]="enSaX8glavp54H"
pass[3]="WF3XUKEpbbMEx"
pass[4]="8Pv7bsEqaIjNdb6b"
pass[5]="35Pv7bsEqaIjNdb6"

//configure extension to reflect the extension type of the target web page (ie: .htm or .html)
var extension=".html"
var enablelocking=0
var numletter="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
var temp3=''
var cur=0


function max(which){
return (pass[Math.ceil(which)+(3&15)].substring(0,1))
}

function testit(input){
temp=numletter.indexOf(input)
var temp2=temp^parseInt(pass[phase1-1+(1|3)].substring(0,2))
temp2=numletter.substring(temp2,temp2+1)
return (temp2)
}


function submitentry(){
t3=''
verification=document.password1.password2.value
phase1=Math.ceil(Math.random())-6+(2<<2)
var indicate=true
for (i=(1&2);i<window.max(Math.LOG10E);i++)
t3+=testit(verification.charAt(i))
for (i=(1&2);i<lim;i++){
if (t3.charAt(i)!=pass[phase1+Math.round(Math.sin(Math.PI/2)-1)].charAt(i))
indicate=false
}
if (verification.length!=window.max(Math.LOG10E))
indicate=false
if (indicate) 
window.location=verification+extension;
else {
alert("That wasn't the correct password. Please check that your CAPS Lock key is turned off and try again.");
document.password1.password2.focus();
document.password1.password2.select();
}
}
</script>
  <script>

var pass=new Array()
var t3=""
var lim=7
pass[0]="Qmsn8tUQZX4T0PC"
pass[1]="DUtntGtFhaTppWO"
pass[2]="JahI7L4JqbxZrwS"
pass[3]="ong1qqnbr9rvV2s"
pass[4]="7BlqC2sc8hQ8bWMK"
pass[5]="15BlqC2sc8hQ8bWM"

//configure extension to reflect the extension type of the target web page (ie: .htm or .html)
var extension=".html"
var enablelocking=0
var numletter="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
var temp3=''
var cur=0


function max(which){
return (pass[Math.ceil(which)+(3&15)].substring(0,1))
}

function testit(input){
temp=numletter.indexOf(input)
var temp2=temp^parseInt(pass[phase1-1+(1|3)].substring(0,2))
temp2=numletter.substring(temp2,temp2+1)
return (temp2)
}


function submitentry(){
t3=''
verification=document.password1.password2.value
phase1=Math.ceil(Math.random())-6+(2<<2)
var indicate=true
for (i=(1&2);i<window.max(Math.LOG10E);i++)
t3+=testit(verification.charAt(i))
for (i=(1&2);i<lim;i++){
if (t3.charAt(i)!=pass[phase1+Math.round(Math.sin(Math.PI/2)-1)].charAt(i))
indicate=false
}
if (verification.length!=window.max(Math.LOG10E))
indicate=false
if (indicate) 
window.location=verification+extension;
else {
alert("That wasn't the correct password. Please check that your CAPS Lock key is turned off and try again.");
document.password1.password2.focus();
document.password1.password2.select();
}
}
</script>

Any help would be a lifesaver - thanks in advance!

Hi!

I have a website that requires preloading images a lot.

I would like to preload only the most important images first and display the page as quickly as possible.

After that it will take at least 20 seconds before the user will need the rest of the images.

Is there a way of making two preloading groups and have the second group load in background after the page is already visible?

My current preload code is simply like this:

<SCRIPT language="JavaScript">
if (document.images)
{
pic01= new Image(200,200);
pic01.src="images/base.jpg";

pic02= new Image(200,200);
pic02.src="images/grump1.jpg";

pic03= new Image(200,200);
pic03.src="images/grump2.jpg";

pic04= new Image(200,200);
pic04.src="images/grump3.jpg";

pic05= new Image(200,200);
pic05.src="images/grump4.jpg";

pic06= new Image(200,200);
pic06.src="images/love.jpg";

pic07= new Image(200,200);
pic07.src="images/smile1.jpg";

pic08= new Image(200,200);
pic08.src="images/smile2.jpg";

pic09= new Image(200,200);
pic09.src="images/smile3.jpg";

pic10= new Image(200,200);
pic10.src="images/smile4.jpg";

pic10= new Image(200,200);
pic10.src="images/rotate.gif";

}
</SCRIPT>

I have more than a hundred images (small ones though), which is a cut-to-pieces large image arranged in tables that I want to preload. I have been looking for a preload script that could possibly load all images in a folder by wildcard and if possible via JavaScript.

Any suggestions? Any other language will be welcome as long as it will run on Linux.

I have a good preload javascript here that I downloaded from hotscripts.com that displays a progress bar, percentage of download, and number of images downloaded. The bad thing is that creating an array out of a hundred images will be tedious especially with computer genereted filenames! If anyone knows of a program that could automate the process then we can forget the wildcard! Hehe!

Hope someone has ideas . Thanks in advance.

Hi all

If I pre-cache imgs like this ... (10 in all)

Code:

<head>
<script type="text/javascript">
PreImage1= new Image(width,height);
PreImage1.src = "images/navbtn/onbtn_1.gif";
PreImage2 = new Image(width,height);
PreImage2.src = "images/navbtn/onbtn_2.gif";
PreImage3= new Image(width,height);
PreImage3.src = "images/navbtn/offbtn_1.gif";
PreImage4 = new Image(width,height);
PreImage4.src = "images/navbtn/offbtn_2.gif";
</script>

Will imgs be read from cache if I then do this?... or have I missed smthg?

Code:

<body>
<img src="images/navbtn/offbtn_1.gif" onmouseover=this.src="images/navbtn/onbtn_1.gif"  onmouseout=this.src="images/navbtn/offbtn_1.gif"  alt=""  />  	</div>

low tech

Hello,

I've some javascript code which preload the images for a photo gallery made of clickable thumbnails and the images to be shown. The script is structured to preload the images in order to have a smooth experience while browsing through the thumbnails but, as the images are needed in quite high quality and can't be compressed any further, the page is too slow to load.

Basically, as the script sits between the head tags at the beginning of the page, it holds the loading of the whole page, leaving the user with a black page for a good 10 seconds on a fast connection.

Is there any chance I can preload the images in such a way I don't have to hold the whole page from displaying while the images are loaded? It would be ideal to be able to display the contents of the page (logo, menu, 1st picture of the gallery and foot of the page) while the images preload in the background.

Could please anybody help with this?

Here is the code I'm using:


<SCRIPT language=JavaScript1.1>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("images/gallery/editorial/1.jpg","images/gallery/editorial/2.jpg","images/gallery/editorial/3.jpg","images/gallery/editorial/4.jpg","images/gallery/editorial/5.jpg","images/gallery/editorial/6.jpg","images/gallery/editorial/7.jpg","images/gallery/editorial/8.jpg","images/gallery/editorial/9.jpg","images/gallery/editorial/10.jpg","images/gallery/editorial/11.jpg","images/gallery/editorial/12.jpg","images/gallery/editorial/13.jpg","images/gallery/editorial/14.jpg","images/gallery/editorial/15.jpg","images/gallery/editorial/16.jpg","images/gallery/editorial/17.jpg","images/gallery/editorial/18.jpg","images/gallery/editorial/19.jpg","images/gallery/editorial/20.jpg","images/gallery/editorial/21.jpg","images/gallery/editorial/22.jpg","images/gallery/editorial/23.jpg","images/gallery/editorial/24.jpg","images/gallery/editorial/25.jpg")
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</SCRIPT>


and this is for the thumbnails:

<a onmousedown='changeimage(myimages[0],this.href)'><img src="images/gallery/thumb1.gif" alt="1" width="16" height="16" border="0" /></a>
<a onmousedown='changeimage(myimages[1],this.href)'><img src="images/gallery/thumb2.gif" alt="2" width="16" height="16" border="0" /></a>
<a onmousedown='changeimage(myimages[2],this.href)'><img src="images/gallery/thumb3.gif" alt="3" width="16" height="16" border="0" /></a>
<a onmousedown='changeimage(myimages[3],this.href)'><img src="images/gallery/thumb4.gif" alt="4" width="16" height="16" border="0" /><br />
</a> etc....


Any help would be much appreciated.

Thanks
paolo