Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Dec 2006
    Location
    GB
    Posts
    79
    Thanks
    3
    Thanked 1 Time in 1 Post

    Loading an Iframe using a text field

    I would like this website to have many links in the javascript, and load the one with the corresponding number to the one the user inputs.

    I may have completely the wrong approach to this idea.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>

    <
    head>

    <
    title>JackaSwitch</title>

    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <
    script type="text/javascript">
    function 
    doLoad(objCheck){
    if (
    objCheck.54){
    document.getElementById("rs").src.http://ams6.runescape.com/lang/en/aff/runescape/game.ws?lowmem=0&plugin=0; 
    }
    }
    </script>

    </head>

    <body bgcolor="#DFDFDF">

    <fieldset>
    <legend>
    World selector
    </legend>
    <form action="">
    <input type="text" maxlength="3" size="1">
    <input type="submit" value="Load" onclick="doLoad(this)">
    </form>
    </fieldset>

    <br />

    <div id="rs">
    <iframe name="rs" width="767" height="531" frameborder="0"></iframe>
    </div>

    </body>

    </html> 

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    You could try something on these lines, just add your numbers and urls to the array

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <
    html

    <
    head

    <
    title>JackaSwitch</title

    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"

    <
    script type="text/javascript">

    urls=[
    [
    "54","http://ams6.runescape.com/lang/en/aff/runescape/game.ws?lowmem=0&plugin=0"],
    [
    "36","table.htm"]

    ]


    function 
    doLoad(objCheck){

    for(var 
    i=0;i<urls.length;i++){

    if(
    urls[i][0]==document.myform.t1.value){

    window.frames["rs"].location=urls[i][1]
    }

    }


    </script> 

    </head> 

    <body bgcolor="#DFDFDF"> 

    <fieldset> 
    <legend> 
    World selector 
    </legend> 
    <form name="myform"> 
    <input type="text" name="t1" maxlength="3" size="1"> 
    <input type="button" value="Load" onclick="doLoad()"> 
    </form> 
    </fieldset> 

    <br /> 

    <div id="rs"> 
    <iframe name="rs" width="767" height="531" frameborder="0"></iframe> 
    </div> 

    </body> 

    </html> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New Coder
    Join Date
    Dec 2006
    Location
    GB
    Posts
    79
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thanks, that works very well.

    Would you mind explaining how this script actually works?

    I'm keen to learn some more javascript myself, the logic behind it just takes a bit of getting used to.

  • #4
    New Coder
    Join Date
    Mar 2006
    Location
    São Paulo, Brazil
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I won't explain the script, but I'll give you a nice way to learn how javascript works:

    1- Install Visual Studio 6.0 or higher;
    2- In Internet Explorer, go Tools->Internet Optioins->Advanced->Navitagion. Unmark the checkbox "Disable scripting debugging"
    3- Force an error in your browser and choose "Yes" to debug the application.

    Debugging a js script in Visual Studio can be very useful, because you can see almost all the properties that any HTML contains. And i think the properties showed works in all browsers.
    I knows that this works in I.E., but I didn't tested yet in firefox.

    The steps described by me just allow you to debug the javascript code that you have. Probally there are another debugging tools around, but this is a way to see what you can do with an HTML element.

    I don't know what the rest think about it, but i'm saying this because for me is very useful. Anyone knows that a html comment tag "<!-- -->" is accessible by javascript? It can have an id, name, or whatever you want...

    Try to debug a script and you'll discover a world of things that some tutorials don't explain.
    ----
    As coisas mais simples são as mais importantes.
    ---------
    Thompson M1A1: D-Day
    ----------------

  • #5
    New Coder
    Join Date
    Dec 2006
    Location
    GB
    Posts
    79
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thanks.

    P.s. It works perfectly in all my browsers, including firefox.
    Last edited by Jacka; 01-05-2007 at 05:40 PM. Reason: P.s.

  • #6
    New Coder
    Join Date
    Dec 2006
    Location
    GB
    Posts
    79
    Thanks
    3
    Thanked 1 Time in 1 Post
    I just found a problem actually.

    When you press return on the keyboard instead of clicking the Load button, it doesn't load the world, but just changes the URL to filename.html?w=number.

    Is there a way to cure this?

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Give this a try

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <
    html

    <
    head

    <
    title>JackaSwitch</title

    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"

    <
    script type="text/javascript">


    urls=[ // input number and its url
    ["54","http://ams6.runescape.com/lang/en/aff/runescape/game.ws?lowmem=0&plugin=0"],
    [
    "36","table.htm"]

    ]


    function 
    doLoad(){

    for(var 
    i=0;i<urls.length;i++){ // loop through the array

    if(urls[i][0]==document.myform.t1.value){ // if number in array matches input value

    window.frames["rs"].location=urls[i][1// go to appropriate url
    }

    }

    }

    function 
    chkKey(e){
    keycode=(!e?event.keyCode:e.which// get code for key pressed
    if(keycode==13){ // if return key
    doLoad() // run function
    }
    }

    document.onkeyup=chkKey
    </script>
     

    </head> 

    <body bgcolor="#DFDFDF"> 

    <fieldset> 
    <legend> 
    World selector 
    </legend> 
    <form name="myform" onsubmit="return false"> 
    <input type="text" name="t1" maxlength="3" size="1"> 
    <input type="button" value="Load" onclick="doLoad()"> 
    </form> 
    </fieldset> 

    <br /> 

    <div id="rs"> 
    <iframe name="rs" width="767" height="531" frameborder="0"></iframe> 
    </div> 

    </body> 

    </html> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    New Coder
    Join Date
    Dec 2006
    Location
    GB
    Posts
    79
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thank you very much indeed, you're been a great help.

    What does onsubmit="return false" in the <form> actually do, and how would I make it navigate to an error page (or any page) if the number they input doesn't correspond to a URL?
    Last edited by Jacka; 01-06-2007 at 06:26 PM. Reason: Further questions

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Using submit button or the return key submits the form, when a form is submitted the page is refreshed.

    Because you are not using the form to submit data for processing you do not want the page to refresh so the return false prevents this.

    I have amended the script to redirect to another page if a wrong number is entered.

    Look for this line

    window.frames["rs"].location="errorpage.htm"

    and change errorpage.htm to your own

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <
    html

    <
    head

    <
    title>JackaSwitch</title

    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"

    <
    script type="text/javascript">


    urls=[ // input number and its url
    ["54","http://ams6.runescape.com/lang/en/aff/runescape/game.ws?lowmem=0&plugin=0"],
    [
    "36","table.htm"]

    ]


    function 
    doLoad(){
    isOk=false

    for(var i=0;i<urls.length;i++){ // loop through the array

    if(urls[i][0]==document.myform.t1.value){ // if number in array matches input value
    window.frames["rs"].location=urls[i][1// go to appropriate url

    isOk=true
    }

    }

    if(!
    isOk){
    window.frames["rs"].location="errorpage.htm"
    }

    }

    function 
    chkKey(e){
    keycode=(!e?event.keyCode:e.which// get code for key pressed
    if(keycode==13){ // if return key
    doLoad() // run function
    }
    }

    document.onkeyup=chkKey
    </script>
     

    </head> 

    <body bgcolor="#DFDFDF"> 

    <fieldset> 
    <legend> 
    World selector 
    </legend> 
    <form name="myform" onsubmit="return false"> 
    <input type="text" name="t1" maxlength="3" size="1"> 
    <input type="button" value="Load" onclick="doLoad()"> 
    </form> 
    </fieldset> 

    <br /> 

    <div id="rs"> 
    <iframe name="rs" width="767" height="531" frameborder="0"></iframe> 
    </div> 

    </body> 

    </html> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #10
    New Coder
    Join Date
    Dec 2006
    Location
    GB
    Posts
    79
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thank you very much indeed, if I have any more queries, I will post them here.

    EDIT: Just found something, when you open the page, it automaticly thinks that you've put an invalid number in, and opens the error page in the iframe, any ideas of a way around this?

    ANOTHER EDIT: Nevermind, it seems to have stopped doing it now...
    Last edited by Jacka; 01-06-2007 at 09:11 PM. Reason: Zzzz

  • #11
    New Coder
    Join Date
    Dec 2006
    Location
    GB
    Posts
    79
    Thanks
    3
    Thanked 1 Time in 1 Post
    I'm back with another question!

    Is it possible to have 2 possible URLs for each number, but load it depending on whether a checkbox is ticked or not?

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Give the following a try

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <
    html>  

    <
    head>  

    <
    title>JackaSwitch</title>  

    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  

    <
    script type="text/javascript"


    urls=[ // input number and its url 
    ["54","http://ams6.runescape.com/lang/en/aff/runescape/game.ws?lowmem=0&plugin=0","optionalpage.htm"], 
    [
    "36","table.htm",""// if no optional page leave the last quotes empty




    function 
    doLoad(){ 
    isOk=false 

    for(var i=0;i<urls.length;i++){ // loop through the array 

    if(urls[i][0]==document.myform.t1.value){ // if number in array matches input value 

    if(!document.myform.c1.checked){
    window.frames["rs"].location=urls[i][1// go to appropriate url 
    }
    else{
    window.frames["rs"].location=urls[i][2// go to appropriate url 
    }

    isOk=true 




    if(!
    isOk){ 
    window.frames["rs"].location="errorpage.htm" 




    function 
    chkKey(e){ 
    keycode=(!e?event.keyCode:e.which// get code for key pressed 
    if(keycode==13){ // if return key 
    doLoad() // run function 



    document.onkeyup=chkKey 
    </script>
      

    </head>  

    <body bgcolor="#DFDFDF">  

    <fieldset>  
    <legend>  
    World selector  
    </legend>  
    <form name="myform" onsubmit="return false">  
    <input type="text" name="t1" maxlength="3" size="1">  
    <input type="checkbox" name="c1">
    <input type="button" value="Load" onclick="doLoad()">  
    </form>  
    </fieldset>  

    <br />  

    <div id="rs">  
    <iframe name="rs" width="767" height="531" frameborder="0"></iframe>  
    </div>  

    </body>  

    </html> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #13
    New Coder
    Join Date
    Dec 2006
    Location
    GB
    Posts
    79
    Thanks
    3
    Thanked 1 Time in 1 Post
    I've made this into tables now, and was wondering whether there's some way to make an iframe inside a cell that will have the largest possible dimensions?
    I know you can have width="*" for frames, with basicly means "the rest of the page".

  • #14
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    In the iframe try width=100%
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #15
    New Coder
    Join Date
    Dec 2006
    Location
    GB
    Posts
    79
    Thanks
    3
    Thanked 1 Time in 1 Post
    This isn't really Javascript, but maybe you can help.



    Any ideas on how I would achieve that?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •