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.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    Kirkland, WA
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question I want drop down buttons to designate which file opens in an iframe

    First of all, I'm so happy to find this forum. I'm pretty certain the help I need is with JS. I'm relatively new to it but have been working successfully with it so far.

    Please have a look at this page http://www.eatingmeat.com/newsletter.htm

    I have an iframe with the current newsletter in it. Right above the iframe I have two drop down buttons which the user is suppossed to be able to change to view other newsletters -- at this point they are for design purposes only as they do nothing. How can I make the two drop down menus designate which file the iframe opens up?

    What I want to do is have it so the user can pick the month/year, hit "Go" and the corresponding text appear in the frame. That's exactly what I'm looking for.

    I was thinking I could do something whereby the two values given in the form would designate the file (such as "July 2002" = "072002.htm", which is how the files are named) and then having this filename directed to open in the iframe which will initially be set to default -- or "current" issue.

    I know with the properties of the drop down buttons I can change the values for each item (i.e. January = Jan, 01, J, etc.) so getting the values to "add up" to something like "072002" should be doable. Anyway, I don't want to confuse the issue. I think I clearly stated what I'm trying to do above, and having a look at the page will give you a very clear idea of where I want this to go.

    I was looking at this as a solution (http://www.javascriptkit.com/script/cut183.shtml) and having the links open in the iframe but it would require me to add new lines of code every time another edition of the newsletter is written and over time would become huge. So I don't think that's the route to go.

    Help me sort this out and I'll be a very happy camper -- especially because I have another site I'll most likely want to do the same thing with (and they have years worth of weekly archives).

    Richard L. Palmer
    richard@bridgewaydesign.com
    http://www.bridgewaydesign.com
    Richard L. Palmer

    If trees could scream would we be so cavalier to cut them down?
    We might. If they screamed all the time, and for no good reason...

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Excuse me while I put down my burger....

    No need to do trickery with the data (assembling a url) unless you insist; here's one way:

    <script type="text/javascript" language="javascript">
    var $2002 = {
    January: 'Jan 2002 url' ,
    February: 'Feb 2002 url' ,
    March: 'Mar 2002 url'
    }
    function loadLetter(year,month) {
    if (!month) frames['newsletter'].location = 'curr issue url';
    else frames['newsletter'].location = window[year][month];
    }
    </script>
    <p align="center">Choose an issue you'd like to read.</p>
    <form action="" method="post" name="news" id="news">
    <div align="center">
    <select name="month" size="1">
    <option>Current</option>
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
    </select>
    <select name="year">
    <option value="$2002">2002</option>
    </select>
    <input type="button" name="Button" value="Go"
    onclick="loadLetter(year[year.selectedIndex].value,month[month.selectedIndex].value)">
    </div>
    </form>
    <p align="center">
    <iframe src="newsletters/current_newsletter.htm" name="newsletter" width="550" height="250" align="center"></iframe>

    That $2002 is an object literal (make one for each year), enclosed in curly braces and no trailing comma after the last property/value pair. Just plug 'em in and go.
    Last edited by adios; 07-30-2002 at 09:46 PM.

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    Kirkland, WA
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help. So far I'm tracking pretty well but how should my files be named with this?

    I can't follow it quite well enough to sort it out. Is it this the part that names the file?

    var $2002 = {
    January: 'Jan 2002 url' ,
    February: 'Feb 2002 url' ,
    March: 'Mar 2002 url'
    }

    And my files would be named these? If so I'll have to add one for every file added, instead of just having the months of the year and adding a year each Jan 1st, correct?
    Richard L. Palmer

    If trees could scream would we be so cavalier to cut them down?
    We might. If they screamed all the time, and for no good reason...

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Richard..

    Nope. Those are just window-dressing:

    var $2002 = {
    January: '012002.htm' ,
    February: '022002.htm' ,
    March: '022002.htm'

    Actual file names in there. If you wanted to use the system you originally proposed, try this:

    function loadLetter(month, year) {
    if (month == 'current') frames['newsletter'].location = 'curr issue url';
    else frames['newsletter'].location = month + year + '.htm';
    }
    </script>
    <p align="center">Choose an issue you'd like to read.</p>
    <form action="" method="post" name="news" id="news">
    <div align="center">
    <select name="month" size="1">
    <option value="current">Current</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
    </select>
    <select name="year">
    <option value="2002">2002</option>
    </select>
    <input type="button" name="Button" value="Go"
    onclick="loadLetter(month[month.selectedIndex].value, year[year.selectedIndex].value)">

  • #5
    New Coder
    Join Date
    Jul 2002
    Location
    Kirkland, WA
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, thanks for the clarification. I see now that I'll need to add every file name to the script -- I was hoping not to have to do that. But regardless of that I'm not getting it to work. Don't know what I'm doing wrong.

    When I insert the code (I'm using it in a blank page to work with) between the Body tags and check it I get the text, buttons and iframe like normal. It contains the current issue like it does now but when I select, say, January 2002 it simply makes the iframe go blank.

    Does this line:

    </div>
    </form>
    <p align="center">
    <iframe src="newsletters/current_newsletter.htm" name="newsletter" width="550" height="250" align="center"></iframe>

    specify just the one filename or is it simply calling up the first one -- in this case "current.htm".

    And thanks again for your help. Here's the URL with my work on this so far: http://www.eatingmeat.com/newsletter_script_work.htm
    Richard L. Palmer

    If trees could scream would we be so cavalier to cut them down?
    We might. If they screamed all the time, and for no good reason...

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Just not my day. OK - this better work...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
    <script type="text/javascript" language="javascript">

    function loadNewsLetter(month, year) {
    var Ifrm = document.getElementById ? document.getElementById('newsletter') :
    document.all ? document.all('newsletter') : null;
    if (Ifrm) Ifrm.src = (month == 'current') ?
    'newsletters/current.htm' : 'newsletters/' + month + year + '.htm';
    }
    </script>
    <p align="center">Choose an issue you'd like to read.</p>
    <form action="" method="post" name="news" id="news">
    <div align="center">
    <select name="month" size="1">
    <option value="current">Current</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
    </select>
    <select name="year">
    <option value="2002">2002</option>
    </select>
    <input type="button" name="Button" value="Go"
    onclick="loadNewsLetter(month[month.selectedIndex].value, year[year.selectedIndex].value)">
    </div>
    </form>
    <p align="center">
    <iframe src="newsletters/current.htm" id="newsletter" width="550" height="250" align="center"></iframe>
    </body>
    </html>

    Let me know...
    Last edited by adios; 07-31-2002 at 01:27 AM.

  • #7
    New Coder
    Join Date
    Jul 2002
    Location
    Kirkland, WA
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Thank you very very much! This works perfectly.

    Now, from what I understand I only need to add another line describing "2003" (when that year comes) to this line and it should work for those files:

    <select name="year">
    <option value="2002">2002</option>
    </select>

    Again, thak you for your help and answer to this last question. You are my saviour!

    Richard L. Palmer

    If trees could scream would we be so cavalier to cut them down?
    We might. If they screamed all the time, and for no good reason...


  •  

    Posting Permissions

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