18 Replies Latest reply on Aug 26, 2007 8:22 PM by gidgetnc

    Iframe help needed

    gidgetnc
      I need to create a scrolling Iframe where text changes when a link is clicked like seen here - example
      Here is the link to my current page - page I need to add Iframe to
      I need to keep the background image & just change the text when each side menu link is selected. I have each of the separate text files saved as html . Here is what I have so far:
      to create the Iframe -
      <iframe><img src="images/menu_Shape-2.jpg" name="menu" width="318" height="413" alt=""></iframe></td>

      To create links to change text -
      <a href="antipasto.html" target="menu"></a>
      <div id="menuframe">
      <iframe
      id="menu"
      name="menu"
      src="antipasto.html"
      frameborder="0"
      marginwidth="0"
      marginheight="0"
      topmargin="0"
      leftmargin="0"
      scrolling="yes"
      align="top"
      height="413"
      width="318">
      </iframe>
      </div>

      I'm not sure where to place the code & I appear to loose my background image. Any help would be greatly appreciated.
      Thank you.
        • 1. Re: Iframe help needed
          Ben M Adobe Community Professional
          Here is the thing. That website is not doing what you are thinking it is doing. While there is an iframe on the page, they are using them inefficiently. They are actually loading different base pages with different iframes loaded in each one instead of targeting the iframe like you are trying to do.

          In your case, just make the iframe pages with the same background image. Then when you load them they should appear the way you want them to.
          • 2. Re: Iframe help needed
            bregent Most Valuable Participant
            >I'm not sure where to place the code & I appear to loose my background image.

            The iframe will always obscure any background image on the parent page in which it is placed. In the example you gave, the dimmed background image is actually a part of the iframe page that blends in with the parent page to look like it's on top of it.
            http://sandrines.com/content/menus/dinnermenu.html
            Frankly, I find their layout leads to a bit of scrollbar hell. You've got a main scrollbar to navigate and then you have the iframe that traps the content in a small area and forces the visitor to scroll a long way to see everything. The example may look nice, but it's a real usability issue for me. I would make it easier for the visitor my creating a larger menu page.
            • 3. Re: Iframe help needed
              bregent Most Valuable Participant
              Also, do you realize that since your page is created with all images and virtually no text, it will not be indexed by search engines and can't be read by screen assistive devices? What is your reason for using images rather than text. I don't see it serving any useful purpose.
              • 4. Re: Iframe help needed
                gidgetnc Level 1
                My client wants it created this way. She likes the look of it & wants to be able to change the menus easily when needed. On my page the main scrollbar is not needed, so only the iframe must be scrolled & a pdf version of the menu is also provided.
                • 5. Re: Iframe help needed
                  Ben M Adobe Community Professional
                  Have you ever considering upselling your client into using something like Contribute for easy updating?

                  Also just a word of advice. If you want to duplicate their page and make things look a lot cleaner. Try using scrollable div layers with includes as opposed to iframes if you can. It will make your site look better.
                  • 6. Re: Iframe help needed
                    gidgetnc Level 1
                    quote:

                    Originally posted by: SnakEyez02
                    Here is the thing. That website is not doing what you are thinking it is doing. While there is an iframe on the page, they are using them inefficiently. They are actually loading different base pages with different iframes loaded in each one instead of targeting the iframe like you are trying to do.

                    In your case, just make the iframe pages with the same background image. Then when you load them they should appear the way you want them to.


                    Is my code correct for targeting the iframe? And where do I place it?
                    • 7. Re: Iframe help needed
                      gidgetnc Level 1
                      quote:

                      Originally posted by: SnakEyez02
                      Have you ever considering upselling your client into using something like Contribute for easy updating?

                      Also just a word of advice. If you want to duplicate their page and make things look a lot cleaner. Try using scrollable div layers with includes as opposed to iframes if you can. It will make your site look better.


                      I tried to create it with layers & behaviors, but it wasn't working out to well. The layers appeared to "move" in different browsers. Example of code attached.
                      • 8. Re: Iframe help needed
                        Ben M Adobe Community Professional
                        Don't use absolute positioning. You need to use relative positioning.

                        If you are not too familiar with positioning layers what I would recommend for the time being is to make the site for your client using iFrames and then you could be helped here with using layers to make the site work just as a reference for you down the road. I don't want to take up your time too much in learning since you have a deadline to meet for a client.
                        • 9. Re: Iframe help needed
                          GhengisJones
                          quote:

                          Originally posted by: SnakEyez02
                          ...Try using scrollable div layers with includes as opposed to iframes if you can. It will make your site look better.


                          Can you elaborate on how this is done?

                          • 10. Re: Iframe help needed
                            gidgetnc Level 1
                            I tried using the Iframe, but am not doing something right here's the link to my testpage
                            menu page test
                            Please help me fix it.
                            • 11. Re: Iframe help needed
                              gidgetnc Level 1
                              Sorry, forgot to add winelist.html is the file I used for testing & I want it to appear in the iframe when the wine list link is clicked.
                              • 12. Re: Iframe help needed
                                Level 7
                                1) Simply copy & paste this code into your main page between the <body> and
                                </body> tags:

                                <iframe id="menu" name="menu" src="winelist.html" scrolling="auto"
                                height="425px" width="100%" frameborder="0"></iframe>

                                Change the height and width of <iframe> to suit your needs.

                                2) Make the winelist.html page like so (repeat for other menu pages):

                                <body style="background-image:url(your_background_image.png);
                                background-repeat:no-repeat">
                                <h1>Here is the winelist</h1
                                <p>Wine #1</p>
                                <p>Wine #2</p>
                                </body>


                                --Nancy O.
                                Alt-Web Design & Publishing
                                www.alt-web.com




                                "gidgetnc" <webforumsuser@macromedia.com> wrote in message
                                news:faq8ph$464$1@forums.macromedia.com...
                                > Sorry, forgot to add winelist.html is the file I used for testing & I want
                                it to appear in the iframe when the wine list link is clicked.


                                • 13. Re: Iframe help needed
                                  gidgetnc Level 1
                                  Thank you - I'm trying it now. Have to convert my image from a jpg.
                                  • 14. Re: Iframe help needed
                                    gidgetnc Level 1
                                    Added the code but something still isn't working - what am I doing wrong?
                                    test page
                                    • 15. Re: Iframe help needed
                                      gidgetnc Level 1
                                      OK - I got the background image figured out. Had to add
                                      <style type="text/css">
                                      body { background-attachment: fixed; }
                                      </style>
                                      in the head of the winelist.html to keep the background image from scrolling with the text. Well it's in the right place with the right background.

                                      Now I just need to figure out the problem with the link. I want the winelist.html file to appear in the iframe only when the link is clicked. Right now it appears there as default and when the Wine List link is clicked it opens in a new page. How can I correct this?

                                      Here's my test page -
                                      Test Page

                                      Thanks for helping!
                                      • 16. Re: Iframe help needed
                                        Ben M Adobe Community Professional
                                        Without looking through the code I can tell you that you should change the source for the iframe on the main HTML page that you have there so that the wine list does not load if you do not want it to.

                                        Also for the link to the wine list page your target should be the frame name. There is a field for target in the properties window of Dreamweaver for this.
                                        • 17. Re: Iframe help needed
                                          gidgetnc Level 1
                                          quote:

                                          Originally posted by: SnakEyez02
                                          Without looking through the code I can tell you that you should change the source for the iframe on the main HTML page that you have there so that the wine list does not load if you do not want it to.

                                          Please be specific - how do I change this?

                                          quote:

                                          Also for the link to the wine list page your target should be the frame name. There is a field for target in the properties window of Dreamweaver for this.

                                          Duh. I guess I was too busy worrying about the code to look at the properties window - that was a silly mistake. Thanks.

                                          • 18. Re: Iframe help needed
                                            gidgetnc Level 1
                                            Thank you all for your help. Everything is working now & looks good. I'll recap my solution in case anyone else needs iframe help.
                                            To create the iframe -
                                            <iframe id="name" name="name" src="filename.html" scrolling="auto"
                                            height="heightpx" width="widthpx" frameborder="0"></iframe>
                                            The file listed as src= will open in the iframe when the page loads.

                                            then for each file you want to open within the iframe -
                                            <a href="filename.html" target="name"></a>
                                            when linking to the files in the properties box don't forget to enter the name in the target box.

                                            Then for each file you are linking to the target iframe enter the following for the background image to stay the same -
                                            <head>
                                            <title>filename title</title>
                                            <style type="text/css">
                                            body { background-attachment: fixed; }
                                            </style>
                                            </head>

                                            <body style="background-image:url(your_background_image.png);
                                            background-repeat:no-repeat">
                                            <h1>Here is the text</h1
                                            <p>text #1</p>
                                            <p>text #2</p>
                                            </body>

                                            If you want to make the iframe transparent the tutorial links listed in this thread show how, but not all browsers support transparency. Using the background image was a better solution for me. Hope this is helpful to someone else.

                                            Thanks SnakEyez02 & Nancy O for all your help with the code
                                            I greatly appreciate everyones help & patience.