SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Dropdownmenu / Iframe code needed urgent please

    Hi i need to make a presentation with lots of picture's.
    So i created a simple setup, one index.htm page with 2 page in leftframe rightframe setup, these pages are called left.htm and home.htm
    All pics are in a subfolder pics
    Now comes the problem in the left.htm i created dropdownbuttons in plain html, in every button i have about 25 choices.
    In the home.htm i created 5 iframe's called "1", "2", till "5"

    Now i want some java code that allows me to select one option in every dropdown menu, then submit and it should show 5 pictures in the iframe's making 1 picture in total

    second problem that i have is that my iframe's are cutting a border of my pictures, and i made them exactly the same size with no borders

    Can anyone help please?

    It would help me a lot?
    If anymore questions please ask, if needed i can send the files in zipfile to anuy who like to check my code, i have allready some script but it doesen't seem to work
    please post your e-mail if you would like the files, it's only 20k or so

    Thanks in advance for ALL your quick responses, i'm really desperate

    Hi guys i managed to upload the zip file here, so please download and have a look
    Attached Files Attached Files

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    show 5 pictures in the iframe's making 1 picture in total
    I would not have thought that iframes were the best way of achieveing this.

    If you are looking for somthing like an image split then that would be the best way of approaching the problem and change the src's of an existing images on home.htm

    please explain why you are using iframes

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I don't really know

    If you have another solution, please tell me. i whas thinking on iframe to have fields.
    hwat i actually need is that it makes 1 complete picture with no spaces in between like i have now

    The first dropdown, should give one of thos pictures in the upper iframe
    and so on, so every dropdown stands for 1 iframe

    but the trick is that it should only show once you selected all dropdown menu and then submit

    so it's not allowed to show the pictures immidiately when you select it in the dropdowns.

    That's why i needed the javascript.

    Anyway, any other solution is ok, it's even allowed to be in 1 file instead of 2 like i have now. Dropdowns are also allowed to be on top, so maybe that's easier to center everything, what is shure, is that there will be at least 4 dropdowns, maybe 5 (like now) and eventually (this whas only test) 25 choices per menu, which stands for 25 pictures per menu. and the 4 or 5 menu's will make 1 complete picture.

    I hope somebody can help me with such files, or code.

    Thanks allready for your quick reply, that's really kind of you.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Frameset
    PHP Code:
    <html>
    <
    head>
    <
    title>No title</title>
    <
    meta name="description" content="Makes a menu frame in the left. Hyperlinks in the menu frame are targeted to the main frame.">
    </
    head>
    <
    frameset rows="1*" cols="20%, 80%">
    <
    frame name="LHPage" src="LHPage.htm" scrolling="auto" marginwidth="10" marginheight="14" namo_target_frame="detail">
    <
    frame name="RHPage" id="detail" src="RHPage.htm"  scrolling="no" marginwidth="10" marginheight="14">
    <
    noframes>
    <
    body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

    <
    p>You need a browser that supports frame to veiw this page.</p>
    </
    body>
    </
    noframes>
    </
    frameset>
    </
    html
    LHPage
    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var 
    SelectsSet='';
    var 
    SelAry=new Array();

    function 
    Selects(){
     
    Sels=document.getElementsByTagName('BODY')[0].document.getElementsByTagName('SELECT')
    }


    function 
    ChangeImageDo(){
     for (
    i=0;i<Sels.length;i++){
      if (
    Sels[i].selectedIndex<1){
       
    alert("All Images must be selected");
       return;
      }
     }
     for (
    i=0;i<Sels.length;i++){
      if (
    Sels[i].selectedIndex){
       
    window.top['RHPage'].Imgs[i].src=ImgPath+Sels[i].options[Sels[i].selectedIndex].value;
      }
     }
    }


    //-->
    </script>

    </head>

    <body onload="Selects();" >

    LH Frame<br>
    <select size="1">
    <option value="">Select Image</option>
    <option value="Zero.gif">Zero.gif</option>
    <option value="One.gif">One.gif</option>
    <option value="Two.gif">Two.gif</option>
    <option value="Three.gif">Three.gif</option>
    <option value="Four.gif">Four.gif</option>
    <option value="Five.gif">Five.gif</option>
    </select>
    <br>
    <br>
    <select size="1">
    <option value="">Select Image</option>
    <option value="Zero.gif">Zero.gif</option>
    <option value="One.gif">One.gif</option>
    <option value="Two.gif">Two.gif</option>
    <option value="Three.gif">Three.gif</option>
    <option value="Four.gif">Four.gif</option>
    <option value="Five.gif">Five.gif</option>
    </select>
    <br>
    <br>
    <select size="1">
    <option value="">Select Image</option>
    <option value="Zero.gif">Zero.gif</option>
    <option value="One.gif">One.gif</option>
    <option value="Two.gif">Two.gif</option>
    <option value="Three.gif">Three.gif</option>
    <option value="Four.gif">Four.gif</option>
    <option value="Five.gif">Five.gif</option>
    </select>
    <br>
    <br>
    <select size="1">
    <option value="">Select Image</option>
    <option value="Zero.gif">Zero.gif</option>
    <option value="One.gif">One.gif</option>
    <option value="Two.gif">Two.gif</option>
    <option value="Three.gif">Three.gif</option>
    <option value="Four.gif">Four.gif</option>
    <option value="Five.gif">Five.gif</option>
    </select>
    <br>
    <br>
    <select size="1">
    <option value="">Select Image</option>
    <option value="Zero.gif">Zero.gif</option>
    <option value="One.gif">One.gif</option>
    <option value="Two.gif">Two.gif</option>
    <option value="Three.gif">Three.gif</option>
    <option value="Four.gif">Four.gif</option>
    <option value="Five.gif">Five.gif</option>
    </select>
    <br>
    <br>
    <input type="button" name="" value="Change Images" onclick="javascript:ChangeImageDo();" >
    <br>
    <br>

    </TABLE>
    </body>

    </html> 

    RHPage
    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var 
    SelectsSet='';
    var 
    SelAry=new Array();

    function 
    Images(){
     
    Imgs=document.getElementsByTagName('BODY')[0].document.getElementsByTagName('IMG')
    }



    //-->
    </script>

    </head>

    <body onload=" Images();" >
    RH Frame<br>
    <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="150" HEIGHT="150">

    <TR>
    <TD ROWSPAN="1" COLSPAN="1" WIDTH="50" HEIGHT="150">
        <IMG  SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" WIDTH="50" HEIGHT="50" BORDER="0"></TD>
    <TD ROWSPAN="1" COLSPAN="1" WIDTH="50" HEIGHT="150">
        <IMG SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" WIDTH="50" HEIGHT="50" BORDER="0"></TD>
    <TD ROWSPAN="1" COLSPAN="1" WIDTH="50" HEIGHT="150">
        <IMG SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" WIDTH="50" HEIGHT="50" BORDER="0"></TD>
    <TD ROWSPAN="1" COLSPAN="1" WIDTH="50" HEIGHT="150">
        <IMG SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" WIDTH="50" HEIGHT="50" BORDER="0"></TD>
    <TD ROWSPAN="1" COLSPAN="1" WIDTH="50" HEIGHT="150">
        <IMG SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" WIDTH="50" HEIGHT="50" BORDER="0"></TD>
    </TR>

    </TABLE>
    </body>

    </html> 

  5. #5
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok the code is less or more what i want, but can you make the code so it takes the photo's from under the pics folder? i changed some parameters and it doesen't seem to work.
    Can you make the right frame so that it shows all images under each other?

    Does the code that you titled PHP code , needs to be copied in the index page, i think i'm right here

    Then i ow you a very big thank you
    Last edited by Sergio_Belgium; Feb 7, 2005 at 08:49.

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sergio_Belgium
    so it takes the photo's from under the pics folder?
    I do not understand this!


    Quote Originally Posted by Sergio_Belgium
    i changed some parameters and it doesen't seem to work.
    Post your code so I can look at it

    Quote Originally Posted by Sergio_Belgium
    Can you make the right frame so that it shows all images under each other?
    Yes, but that is just how the HTML table making the image slice is constructed
    Images could be positioned by style positioning if you prefer.

    Quote Originally Posted by Sergio_Belgium
    Does the code that you titled PHP code , needs to be copied in the index page,
    PHP Code is added by the forum
    The framset Code can be the index.html but can be any legal name.

    I will wait until you explain you first request(quote) above and/or post your current code to be fixed.

  7. #7
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pics folder

    hi,

    Well it's simple, i use a folder in the root of my website wish is called pics, there i store all my pictures. all numbered

    i would like to have the code written that way that it gets the pictures in there.

    so in the root i have index.htm, left.htm, home.htm and pics (folder)

    I hope you see it clear now, i checked the dropdowns they are working great.

    the pictures in the right frame are showing behind each other, what is the html code that i can use to let it show under each other without any space between?

    One more question is it possible to define the wide of the dropdowns, because my list is not equal in caracters, so it take's the longest word.
    and i would like to make all dropdowns the same size?

    Thanks for your quick replys

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    index.htm

    <html>
    <
    head>
    <
    title>No title</title>
    <
    meta name="description" content="Makes a menu frame in the left. Hyperlinks in the menu frame are targeted to the main frame.">
    </
    head>
    <
    frameset rows="1*" cols="20%, 80%">
    <
    frame name="LHPage" src="left.htm" scrolling="auto" marginwidth="10" marginheight="14" namo_target_frame="detail">
    <
    frame name="RHPage" id="detail" src="home.htm"  scrolling="no" marginwidth="10" marginheight="14">
    <
    noframes>
    <
    body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

    <
    p>You need a browser that supports frame to veiw this page.</p>
    </
    body>
    </
    noframes>
    </
    frameset>
    </
    html
    PHP Code:
    left.htm

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    var 
    ImgPath='pics/';
    var 
    SelectsSet='';
    var 
    SelAry=new Array();
    var 
    SelWidth='150';
    // enter all images in this array or use the Add Image Facility
    var ImgAry=new Array('Zero.gif','One.gif');
    var 
    SRCAry=new Array();

    function 
    PreloadImages(){
     for (
    i=0;i<ImgAry.length;i++){
      
    SRCAry=new Array();
      
    SRCAry[i]=new Image();
      
    SRCAry[i].src=ImgPath+ImgAry[i];
     }
     
    Selects();
    }


    // remove this function if you dont need it
    function AddImage(){
     if (!
    document.getElementById('ImageAdd').value.match(ImgPath.substring(0,ImgPath.length-1))){
      
    alert('Incorrect Image Path');
      return
     }
     
    img=document.getElementById('ImageAdd').value.substring(document.getElementById('ImageAdd').value.lastIndexOf('\\')+1,document.getElementById('ImageAdd').value.length);
     
    img=img.substring(img.lastIndexOf('/')+1,img.length);
     
    document.getElementById('ImageAddTB').value=img;
     if (
    img.length<4){ return; }
     for (
    i=0;i<ImgAry.length;i++){
      if (
    img==ImgAry[i]){
       
    alert('This Image is already available');
       return;
      }
     }
     
    ImgAry[ImgAry.length]=img;
     
    PreloadImages();
    }

    function 
    Selects(){
      
    Sels=document.getElementsByTagName('BODY')[0].document.getElementsByTagName('SELECT')
     for (
    i=0;i<Sels.length;i++){
      
    Sels[i].style.width=SelWidth+'px';
      
    Sels[i].options.length=1;
      for (
    i1=0;i1<ImgAry.length;i1++){
       
    Sels[i].options[i1+1]=new Option(ImgAry[i1],ImgAry[i1],true,true);
      }
      
    Sels[i].selectedIndex=0;
     }
    }

    function 
    ChangeImageDo(){
    for (
    i=0;i<Sels.length;i++){
      if (
    Sels[i].selectedIndex<1){
       
    alert("All Images must be selected");
       return;
      }
    }
    for (
    i=0;i<Sels.length;i++){
      if (
    Sels[i].selectedIndex){
       
    window.top['RHPage'].Imgs[i].src=ImgPath+Sels[i].options[Sels[i].selectedIndex].value;
      }
    }
    }


    //-->
    </script>
    </head>

    <body onload="PreloadImages();" >

    LH Frame<br>
    <select size="1" >
    <option value="">Select Image</option>
    </select>
    <br>
    <br>
    <select size="1">
    <option value="">Select Image</option>
    </select>
    <br>
    <br>
    <select size="1">
    <option value="">Select Image</option>
    </select>
    <br>
    <br>
    <select size="1">
    <option value="">Select Image</option>
    </select>
    <br>
    <br>
    <select size="1">
    <option value="">Select Image</option>
    </select>
    <br>
    <br>
    <input type="button" name="" value="Change Images" onclick="javascript:ChangeImageDo();" >
    <br>
    <br>
    Remove code below if you dont need it
    <br>
    Add an Image <input type="file" id="ImageAdd" value="Add Image" style="width:40px;" onchange="javascript:AddImage();">
    <br>
    <input id="ImageAddTB" style="width:150px;">
    <br>
    <br>


    </body>

    </html> 

    PHP Code:
    home.htm

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var 
    SelectsSet='';
    var 
    SelAry=new Array();

    function 
    Images(){
    Imgs=document.getElementsByTagName('BODY')[0].document.getElementsByTagName('IMG')
    }



    //-->
    </script>

    </head>

    <body onload=" Images();" >
    <center>
    RH Frame<br>
    <table cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td><img src="pics/Blank.gif" width="50" height="50"></td>
      </tr>
      <tr>
        <td><img src="pics/Blank.gif" width="50" height="50"></td>
      </tr>
      <tr>
        <td><img src="pics/Blank.gif" width="50" height="50"></td>
      </tr>
      <tr>
        <td><img src="pics/Blank.gif" width="50" height="50"></td>
      </tr>
      <tr>
        <td><img src="pics/Blank.gif" width="50" height="50"></td>
      </tr>
    </table>
    </center>
    </body>

    </html> 
    Attached Files Attached Files


Bookmarks

Posting Permissions

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