The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> troubles in implementing iframe to my existing layout
morry
post May 25 2022, 02:43 PM
Post #1





Group: Members
Posts: 1
Joined: 25-May 22
Member No.: 28,367



i am very much a hobbiest coder and just learning things as i go along. been working on a site for fun and i realized i wanted to use iframes on pages where i want users to call up lots of new information like articles/about pages/etc without making duplicate pages.... i already have the whole layout for a homepage but now im having trouble with the iframe i want to implement. there are two sidebars and a center box for the main content- which is where i want users to call information to by clicking whatever hightlighted links on the sidebars- filling up the main content box entirely and overwriting the base information in that box.

apologies this post will be LONG because i am adding the code i have, the website is live on neotcities but i havent added this newer code since it doesnt work. still feel free to look at it there too if you need.

Here is the css (there is specific information for the iframe too):
CODE

            :root {

                /* applies to all areas */
                --font-family: monospace;
                --font-size: 14px;
                --line-height: 1.3em;
                --font-color: #504538;
                --link-color: #a26955;
                --link-text-decoration: none;

                /* main content (between sidebars) */
                --content-padding: 25px;
                --content-bg-color: #e6ded7;

                /* header */
                --header-height: 90px;
                --header-background: url('c_assets/outlet_gradient.png');
                --header-margin-bottom: 0px;

                /* sidebar */
                --sidebar-margin: 10px;
                --sidebar-width: 250px;
                --sidebar-padding: 10px;
                --sidebar-bg-color: #e6ded7;

                /* footer */
                --footer-height: 30px;
                --footer-bg-color: #e6ded7;

                /* navbar */
                --navitems-alignment: center;
                --space-between-navitems: 20px;
                --navbar-margin-bottom: 10px;
                --nav-bg-color: #e6ded7;

                /* container */
                --container-width: 1000px;
                --container-bg-color: #b79a75;

                /* controls the gap between the content and the footer */
                --row-gap: 5px;

                --sidebar-height: 100%;
                --sidebar-overflow: auto;
                --background-color: #b79a75;
            }

            html,
            body {
                margin: 0;
                padding: 0;
                background-color: var(--background-color);
                font-family: var(--font-family);
                font-size: var(--font-size);
                line-height: var(--line-height);
                color: var(--font-color);
            }

            body a {
                color: var(--link-color);
                font-weight: bold;
                text-decoration: var(--link-text-decoration);
                
            }

            #main-container {
                max-width: var(--container-width);
                margin: 0 auto;
                background-color: var(--container-bg-color);
                
            }

            iframe {
                display: block;
                width: 100%;
                height: 100%;
                border: none;
            }

            .flex {
                display: flex;
                margin-bottom: var(--row-gap);
            }

            .content-wrap {
                margin-top: var(--content-margin-top);
            }

            #content-container {
                width: 60%;
                margin-bottom: var(--row-gap);
                background-color: var(--content-bg-color);
                border: solid;
                border-bottom-color: #504538;
                border-width: 4px;
            }

            #left-sidebar {
                width: var(--sidebar-width);
                margin-right: var(--sidebar-margin);
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
                background-color: var(--sidebar-bg-color);
                border: solid;
                border-bottom-color: #504538;
                border-width: 4px;
            }

            #right-sidebar {
                width: var(--sidebar-width);
                margin-left: var(--sidebar-margin);
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
                background-color: var(--sidebar-bg-color);
                border: solid;
                border-bottom-color: #504538;
                border-width: 4px;
            }

            #header-contained {
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                background-image: var(--header-background);
                background-position: center center;
            }

            #footer {
                height: var(--footer-height);
                text-align: center;
                color: var(--font-color);
                background-color: var(--footer-bg-color);
            }

            #header-full {
                display: none;
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                background-image: var(--header-background);
                background-position: center center;
            }

            #navbar-contained {
                margin-bottom: var(--row-gap)
            }

            #navbar-full {
                display: none;
            }

            .nav {
                margin-left: 0;
                text-align: var(--navitems-alignment);
                margin-top: 0;
                margin-bottom: var(--navbar-margin-bottom);
                padding-top: 1em;
                padding-bottom: 1em;
                background-color: var(--nav-bg-color);
                border: solid;
                border-bottom-color: #504538;
                border-width: 4px;
                
            }

            .nav li {
                display: inline-block;
                padding-right: var(--space-between-navitems);
            }

            .wrapper {
                padding: var(--content-padding);
                padding-top: var(--sidebar-padding);
            }

            .sidebar-wrapper {
                padding: var(--sidebar-padding);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
            }

            .footer-wrapper {
                padding: 5px;
            }

            @media only screen and (max-width: 800px) {
                .flex {
                    flex-wrap: wrap;
                }

                #left-sidebar {
                    width: 100%;
                    display: block;
                    order: 2;
                    margin-right: 0;
                    margin-bottom: 10px;
                }

                #right-sidebar {
                    width: 100%;
                    display: block;
                    order: 3;
                    margin-left: 0;
                }

                #content-container {
                    width: 100%;
                    display: block;
                    order: 1;
                    margin-bottom: 10px;
                }

            }


And the HTML for the homepage:
CODE
<!DOCTYPE html>


<html>
    
<head>
    <title>Coffini Outlet</title>

   <link rel="stylesheet" href="coffini_style.css">
    
</head>
        <div id="header-full" style="display: block;"></div>
        <div id="navbar-full" style="display: block;">
            <ul class="nav">
                <li><a href="https://morrysillusion.net/">Morrysillusion.net</a></li>
                -
                <li><a href="https://morrysillusion.net/coffini_outlet/coffini.html">Back</a></li>
                -
                <li><a href="/coffini_outlet/about_c.html" target="iframe_abt">About the name</a></li>
                -
                <li><a href="https://archiveofourown.org/users/morrysillusion/works">AO3</a></li>
            </ul>
        </div>
        <div id="main-container">
            <div id="header-contained" style="display: none;"></div>
            <div id="navbar-contained" style="display: none;">
                <ul class="nav">
                    <li><a href="/index.html">Home</a></li>
                </ul>
            </div>
            <div class="content-wrap flex alignment">
                <div id="left-sidebar">
                    <div class="sidebar-wrapper">
                        <p><strong><u>Contact:</u></strong></p>
                        <p>I made this blog because I like talking about things I like. Feel free to hit me up to chat!</p>
                        <p><a href="https://twitter.com/morrysillusion/">- Twitter</a></p>
                        <p><a href="https://morrysillusion.tumblr.com/">- Tumblr</a></p>
                        <p>- mkc@morrysillusion.net</p>
                        <p>- ask about discord!</p></div>
                </div>
                <div id="content-container">
                    
                    
                    <div class="wrapper"><p><strong>Welcome to the Coffini Outlet!</strong> This is my little space to blab about things I like. Really, this is a "general" fandom oriented blog for anything that doesn't have a fan page/shrine!</p>
                    
                    <p>Below you will find links to the most recent posts (newest on top), where I may talk about a thing I consumed recently, or may be analysing the thing I consumed. All 'reviews' will be the title of the media as it is, anything with a 'subtitle' of sorts is an analysis/ramble about the thing!</p>
                    
                    <p>Check the right sidebar for older posts, which get archived after the year is over.</p>
                    <h2 text align="center">MAY 2022</h2>
                        <p text align=center>[tba]</p>
                     <iframe src="about_c.html" name="iframe_abt" title="Iframe About"></iframe></div>
                </div>
                <div id="right-sidebar">
                    <div class="sidebar-wrapper"><p><u><strong>Archive:</strong></u></p>
                        <p>Links will go here.</p>
                        <p>post #</p>
                        <p>post #</p>
                        <p>post #</p>
                        <p>post #</p>
                        <p>post #</p>
                    </div>
                </div>
            </div>
            <div id="footer" style="display: none;">
                <div class="footer-wrapper">footer</div>
            </div>
        </div>


Additionally, one of the example pages I want to call to the main content box. i stripped it down as i assumed thats how it should be for calling into into an iframe (since i just need the text, not a whole formatted page)
CODE
<!DOCTYPE html>


<html>
    
<head>
    <title>Coffini Outlet</title>

   <link rel="stylesheet" href="coffini_style.css">
    
</head>
<body>
    <p>Welcome to my little ramble corner for things I like. You may be wondering where I got the name- its really just something that stuck after I used it on tumblr a while back.</p>
                    <p>Around 2016 or so, I wasn't really sticking with any one name online. On tumblr, it was common to have "canon URLs" aka, URLs that were exact to a thing that you liked (character name, series name, location from a thing, etc). I was hopping around all kinds of URLs due to that and eventually changed it from what it was to "coffini".</p>
                    
                    <p>The word comes from an episode of Regular Show, <a href="https://regularshow.fandom.com/wiki/Rigby%27s_Graduation_Day_Special">the season 7 finale episode.</a> During it, Mordecai goes out of his way to try and get a fictional soda called Coffini. It's a coffee soda.</p>
                    <center><img src="c_assets/coffini_can1.png"></center>
                        <p>So there's a little bit of trivia for you. I just happened to use that word as my tumblr url for some time, until I picked up my own original name... The shows and episode are one of my favorites and it felt appropriate to reference something I liked when I brought up this page again. </p></body>


I put the <iframe> in the main content div of my homepage, and i wanted to figure out a few key things:
- i want to have various links be called into the same box (about page, an article, etc), if im going in the wrong direction to do that/need to know something about that id love to know.
- i want to have the iframe take up the entire 'main content' box, and fit the style/color of it (right now, its at the bottom, and is also the same color as the site background)
- when i load up the page, the content of the iframe is *already there*, when its supposed to only appear when the "about the name" link is clicked... and i dont understand why that is since all examples show it appearing after a link is clicked.

i know i have a lot of questions here, so feel free to point me off site to guides etc. i just havent found clear answers to these problems im having, its hard for me to understand it out of context of what im specifically working on.

This post has been edited by morry: May 25 2022, 02:44 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 25 2022, 05:29 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Well, I don't see any iframe at all, neither at your site nor in the HTML you posted. sad.gif

I don't fully understand what your problem is (since I can't see it). But I can say one thing. For this to work you also need the original content of the content box to be in a separate document that's loaded in the iframe initially.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 26 2022, 08:45 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ May 26 2022, 12:29 AM) *

Well, I don't see any iframe at all, neither at your site nor in the HTML you posted. sad.gif

It's there:

QUOTE
CODE
<iframe src="about_c.html" name="iframe_abt" title="Iframe About"></iframe>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 26 2022, 09:19 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(morry @ May 25 2022, 09:43 PM) *

i wanted to use iframes on pages where i want users to call up lots of new information like articles/about pages/etc without making duplicate pages

IFRAME's create various problems, as described here: https://htmlhelp.com/faq/html/frames.html#frame-problems (the page is about the old FRAMESETs, but most of it applies to IFRAME's as well).

It's much more practical to use PHP includes on the server. That way you as the author can use the same inclusion file(s) for duplicate content, but the site visitors will only see a single, finished page. I don't know if Neotcities support PHP, though (all paid hosts do).

QUOTE

I put the <iframe> in the main content div of my homepage, and i wanted to figure out a few key things:
- i want to have various links be called into the same box (about page, an article, etc), if im going in the wrong direction to do that/need to know something about that id love to know.

I assume you mean you want multiple links load their pages inside the IFRAME element? That's done using the TARGET attribute on the links, with the same value as the IFRAME's NAME attribute. The basic IFRAME functionality is explained here: https://htmlhelp.com/reference/html40/special/iframe.html (HTML5 adds lots more).

QUOTE
- i want to have the iframe take up the entire 'main content' box,

The IFRAME element needs to be given a suitable WIDTH and HEIGHT, perhaps using percent values? I haven't looked closely at the code example yet, so I can't advice further.

QUOTE

and fit the style/color of it[/b] (right now, its at the bottom, and is also the same color as the site background)

The actual IFRAME element is invisible, unless you give it a border. The framed pages (the pages loaded inside the IFRAME) need to be styled independently, the parent page's styling won't affect them. However you could let each framed page use the same external CSS file as the parent page.

QUOTE
- when i load up the page, the content of the iframe is *already there*, when its supposed to only appear when the "about the name" link is clicked... and i dont understand why that is since all examples show it appearing after a link is clicked.

The IFRAME's default page is defined by the SRC atribute. If you leave it empty no default page will be loaded, but I'm not sure if an empty SRC value is valid HTML. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 26 2022, 10:06 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Well, includes are great, but if you are still learning HTML it can be a little daunting. And it would require more than simple includes since the content is supposed to change.

Actually, I think static pages would be sufficient for this. You don't need to type that whole page again and again. You save the markup as a template and just need to type different content in the content box.

And there's always the hide/show tricks with JS/CSS. That would be my second choice.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 26 2022, 10:07 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ May 26 2022, 03:45 PM) *

QUOTE(pandy @ May 26 2022, 12:29 AM) *

Well, I don't see any iframe at all, neither at your site nor in the HTML you posted. sad.gif

It's there:

QUOTE
CODE
<iframe src="about_c.html" name="iframe_abt" title="Iframe About"></iframe>



I'm sorry. I must have been temporarily blind. Well, to start with you need to place the IFRAME in the content box. And remove the text you have there. Instead you put that text in a separate page that you load in the IFRAME.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 27 2022, 12:21 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



If you do want to use IFRAMEs there are two ways to do it, one Good and one Bad.

The Good way is to let each content page contain an iframe, which embeds the nav menu or footer page. This avoids most of the problems mentioned in the FAQ page I linked to above. The links in the embedded nav menu page will need to use

CODE
target="_top"

or

CODE
target="_parent"

in order to open each link as a parent page, and not inside the iframe.

The Bad way is to use a common parent page with the nav menu, footer, and an iframe that embeds the different content pages. This results in all the problems the FAQ describes.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 27 2022, 08:11 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



But the content page will still be orphant if found through a SE for instance. No navigation.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 28 2022, 11:28 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ May 28 2022, 03:11 AM) *

But the content page will still be orphant if found through a SE for instance. No navigation.

Not if the content page is the parent page. Its framed nav page would be loaded automatically.

In contrast, if the nav page was found through a SE it would indeed be orphaned, but that situation could be avoided with robots directives like NOINDEX, FOLLOW. And even if a user somehow arrived on an orphaned nav page, it would at least be full of links. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 28 2022, 02:30 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Of course. I was ditzy. Been that a lot in this thread, it seems. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 05:25 AM