FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Dropdown menu in iframe problem





woundedhealer
I've got a horizontal dropdown menu in an iframe. I've used css for it. My problem is the 2nd and any subsequent items cannot be seen because it drops down lower than the iframe. it isn't practical to enlarge the depth of the iframe.

Is there any code I can use to make the list drop down over the main page?

I really want this type of menu because I'm going to be adding more topics and sub-topics in the future.

Thanks in advance.
JayBee
No.

You cannot escape with any element from an iframe.
You can only use inverse version
menu in main page and content in iframe

but you should still have problems
try UDM4 for this, I hope it solve this problem with some configuration
woundedhealer
What's UDM4?

If there's no way of doing this without having problems, I need to rethink my links. However I do it, I need to use an iframe to make it easier to add new links.
Stubru Freak
Consider using a server-side language like PHP or SSI (server-side includes) for the links. This way you have to update only one file to add a link, and your current problems will be resolved.
If you don't have access to a server-side language, you can still put the links in a javascript file which makes the menu when you open a page.
woundedhealer
I thought it might have been able to be done with javascript, but I don't understand it, nor php.

As much as I would like to learn these, my dyslexia makes them look like something from an alien planet.
Stubru Freak
woundedhealer wrote:
I thought it might have been able to be done with javascript, but I don't understand it, nor php.

As much as I would like to learn these, my dyslexia makes them look like something from an alien planet.


Really? I didn't know that.

You can do it using php this way:
- Rename all files to "something.php"
- Make a file called links.inc and just put the link html in it.
- Put <?php include('links.inc'); ?> wherever you want the links.

If you don't want to rename your files, you can do it using Javascript this way:
- Make a file called links.js with the following content:
Code:
document.write('LINK HTML HERE');

- Put your link html in it. It should be all on one line. You should put a backslash (\) before any real backslash and any single quote (').
- Wherever you want the links, put the following code: <script src="links.js"></script>
woundedhealer
Thanks. I'll try the php way. I think I can make more sense of it than the javascript.

<edit> I've changed my mind. At first glance I thought I understood the php, but I've been sitting here, with my file open, and trying to work out where the code goes - dyslexia raises it's ugly head once again. Embarassed So it's not going to be so easy after all. Crying or Very sad
Stubru Freak
woundedhealer wrote:
Thanks. I'll try the php way. I think I can make more sense of it than the javascript.

<edit> I've changed my mind. At first glance I thought I understood the php, but I've been sitting here, with my file open, and trying to work out where the code goes - dyslexia raises it's ugly head once again. Embarassed So it's not going to be so easy after all. Crying or Very sad


The <?php include('links.inc'); ?> goes wherever the iframe is now.

By the way, do you have a code editor with syntax highlighting? Colours could help to clarify code.
woundedhealer
Quote:
The <?php include('links.inc'); ?> goes wherever the iframe is now.

By the way, do you have a code editor with syntax highlighting? Colours could help to clarify code.
_________________

So it goes in the file which includes the iframe? Does that make sense?

No, I don't have a code editor with syntax highlighting. I think I'll look for one. You're right, colors could help clarify code.

Thank you for being so patient.
Stubru Freak
woundedhealer wrote:
Quote:
The <?php include('links.inc'); ?> goes wherever the iframe is now.

By the way, do you have a code editor with syntax highlighting? Colours could help to clarify code.
_________________

So it goes in the file which includes the iframe? Does that make sense?


It goes in that file, instead of the iframe code.
woundedhealer
I can understand the theory of this now. Now I need to experiment with it until I get it right.
woundedhealer
I am amazed. I got the files done and uploaded them, and the links were there. but I've still got the problem of the second items in the dropddown links are still missing. I'm begining to think there is no way round this problem, so it looks like I'll have to think of an alternative way of doing the links.

I've had a good lesson in php, so that's a plus - thanks teacher Smile
Stubru Freak
woundedhealer wrote:
I am amazed. I got the files done and uploaded them, and the links were there. but I've still got the problem of the second items in the dropddown links are still missing. I'm begining to think there is no way round this problem, so it looks like I'll have to think of an alternative way of doing the links.

I've had a good lesson in php, so that's a plus - thanks teacher Smile


Could you give me a link where I can see the problem?
woundedhealer
The index page is www.celticawen.frih.net/index.php
Stubru Freak
woundedhealer wrote:
The index page is www.celticawen.frih.net/index.php


Where did you put the include? You should put it directly in your page, not in your iframe. Could you show me the code?
woundedhealer
Stubru Freak wrote:
woundedhealer wrote:
The index page is www.celticawen.frih.net/index.php


Where did you put the include? You should put it directly in your page, not in your iframe. Could you show me the code?


That's what I did. I put the code after <body> which is where I had been putting the link for the iframe. I've put:

<div align="center"><?php include('links.inc'); ?>

This code has put in 'Celtic Awen' and the menu bar.
Stubru Freak
woundedhealer wrote:
Stubru Freak wrote:
woundedhealer wrote:
The index page is www.celticawen.frih.net/index.php


Where did you put the include? You should put it directly in your page, not in your iframe. Could you show me the code?


That's what I did. I put the code after <body> which is where I had been putting the link for the iframe. I've put:

<div align="center"><?php include('links.inc'); ?>

This code has put in 'Celtic Awen' and the menu bar.


So what does links.inc contain? It should contain the code in the iframe, not <iframe src='...'>, but
Code:
<div align="center"><a href="http://www.celticawen.frih.net" title="Celtic Awen" id="toplink"></a>
  <img src="../images/celticawen.gif" width="268" height="57" /> <br />

  <br />
  <!-- start menu HTML -->
</div>
<div id="menu">

<ul>
    <li>
      <h2>&nbsp;</h2>
      <ul>
        <li> </li>
      </ul>

    </li>
</ul>   
<ul>
    <li>
      <h2>&nbsp;</h2>
      <ul>
        <li> </li>
      </ul>
    </li>
</ul>   

<ul>
    <li>
      <h2>&nbsp;</h2>
      <ul>
        <li> </li>
      </ul>
    </li>
</ul>    
<ul>
    <li>
      <h2>Home</h2>

      <ul>
        <li><a href="http://www.celticawen.frih.net/index" title="Home">Home</a>
        </li>
      </ul>
    </li>
</ul>

<ul>
    <li>
      <h2>Mythology</h2>

      <ul>
        <li><a href="http://www.celticawen.frih.net/mythology/welsh" title="welsh mythology contents">Welsh</a></li>
        <li><a href="http://www.celticawen.frih.net/mythology/irish" title="irish mythology contents">Irish</a>
          <ul>
            <li><a href="http://www.tanfa.co.uk/css/examples/menu/tutorial-v.asp" title="Coming Soon">Coming
              Soon</a>
              <ul>
                <li><a href="http://www.celticawen.frih.net/mythology/" title="Blank">
                 </a></li>

                <li><a href="http://www.celticawen.frih.net/mythology/" title="Blank">
                  </a></li>
                <li><a href="http://www.celticawen.frih.net/mythology/" title="Blank">
                  </a></li>
                <li><a href="http://www.celticawen.frih.net/mythology/" title="Blank">
                  </a></li>
                <li><a href="http://www.celticawen.frih.net/mythology/" title="Blank">
                  </a></li>
                <li><a href="http://www.celticawen.frih.net/mythology/" title="Blank">

                  </a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
</ul>

<ul>

    <li>
      <h2>Poetry</h2>
     
    <ul>
      <li><a href="http://www.celticawen.frih.net/poetry/" title="Welsh Poetry">This
        Project to</a></li>
      <li><a href="http://www.celticawen.frih.net/poetry/" title="Irish Poetry">Be Worked
        On</a> </li>
      <!-- fully working sample -->
      <ul>

        <li><a href="http://www.celticawen.frih.net/poetry/" title="poetry">
       </a></li>
        <ul>
        </ul>
        </li>
       
      </ul>
      </li>
     
    </ul>
    </li>

</ul>
<ul>
    <li>
      <h2>Contact</h2>
      <ul>
        <li><a href="mailto:earthspirit-@tiscali.co.uk" title="Contact">Contact</a></li>
      </ul>
    </li>
</ul>
 

<ul>
    <li>
      <h2>&nbsp;</h2>
      <ul>
        <li> </li>
      </ul>
    </li>
</ul>   
 <ul>
    <li>
      <h2>&nbsp;</h2>

      <ul>
        <li> </li>
      </ul>
    </li>
</ul>                              
</div>

<div class="adbreak" style="text-align: center; margin: 100px 60px; 0"> </div>


Also you would need to put the CSS styles in an external file and link to it from every file that will include the menu. Do you know how to do this?
woundedhealer
Quote:
So what does links.inc contain? It should contain the code in the iframe, not <iframe src='...'>,


Oops. I misunderstood and put <a href="links.html></a> into links.inc. I know how to do an external css file, so these two items will be my task for tomorrow.
welshsteve
Stubru Freak wrote:
Consider using a server-side language like PHP or SSI (server-side includes) for the links. This way you have to update only one file to add a link, and your current problems will be resolved.
If you don't have access to a server-side language, you can still put the links in a javascript file which makes the menu when you open a page.


I would definitely take this advice and use a PHP include for this.

Read this - http://www.w3schools.com/php/php_includes.asp
woundedhealer
This is disasterous. I put the css into external files and put a link to them into the index.php file. Instead of 'Celtic Awen' and menubar, I had the following:
Warning: main(links.inc) [function.main]: failed to open stream: No such file or directory in /home/woundedh/domains/celticawen.frih.net/public_html/index.php on line 16

Warning: main(links.inc) [function.main]: failed to open stream: No such file or directory in /home/woundedh/domains/celticawen.frih.net/public_html/index.php on line 16

Warning: main() [function.include]: Failed opening 'links.inc' for inclusion (include_path='.:/usr/local/lib/php') in /home/woundedh/domains/celticawen.frih.net/public_html/index.php on line 16

This is line 16: <div align="center"><?php include('links.inc'); ?>

I know I've got the links to the css files right.

I'm wondering if the csshover.htc file is causing problems. This is the code for that.
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
I've got this as an external file and linking it to index.php. It works fine in an index.html file with an iframe. I'm way out of my depth here and more than a little despondant. Crying or Very sad Confused
Stubru Freak
woundedhealer wrote:
This is disasterous. I put the css into external files and put a link to them into the index.php file. Instead of 'Celtic Awen' and menubar, I had the following:
Warning: main(links.inc) [function.main]: failed to open stream: No such file or directory in /home/woundedh/domains/celticawen.frih.net/public_html/index.php on line 16

Warning: main(links.inc) [function.main]: failed to open stream: No such file or directory in /home/woundedh/domains/celticawen.frih.net/public_html/index.php on line 16

Warning: main() [function.include]: Failed opening 'links.inc' for inclusion (include_path='.:/usr/local/lib/php') in /home/woundedh/domains/celticawen.frih.net/public_html/index.php on line 16

This is line 16: <div align="center"><?php include('links.inc'); ?>

I know I've got the links to the css files right.

I'm wondering if the csshover.htc file is causing problems. This is the code for that.
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
I've got this as an external file and linking it to index.php. It works fine in an index.html file with an iframe. I'm way out of my depth here and more than a little despondant. Crying or Very sad Confused


I don't think it has anything to do with the CSS styles. It can't find the links.inc file. You should make sure the links.inc file is in the same directory as your index.php.
woundedhealer
I moved the links.inc file from the links directory to the public_html directory, which is where the index.php page is. Now i've got this on my page:
Parse error: syntax error, unexpected T_STRING in /home/woundedh/domains/celticawen.frih.net/public_html/links.inc on line 1
Quote:
I would definitely take this advice and use a PHP include for this.

Read this - http://www.w3schools.com/php/php_includes.asp

I'm going to have a look next.

I'm spending far to much time trying to sort this out, I think I'm going to have to find a more simple method for links for now, and return to this at a later date. Or get someone to do it for me, which is a bit of a cop out.
welshsteve
Here you go. Ignore the crudeness of the layout, but it's just for demonstration purposes.

Use this theory. All three of these files appear in the same directory

INDEX.PHP
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Using PHP Includes</title>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
   
<link rel="stylesheet" type="text/css" href="mainstyles.css" />
   
</head>

<body>

<div id="header">Header goes here</div>

<div id="nav">
   <p>The menu include should appear below this</p>
   <?php include("menu.php"); ?>
</div>

<div id="content">Content goes here</div>

</body>
</html>


MENU.PHP

Code:

<ul>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
</ul>


MAINSTYLES.CSS
Code:

body
{
   margin-left: auto;
   margin-right: auto;
   width: 780px;
}

#header
{
   width: 100%;
   height: 100px;
   border-bottom: 1px solid #000;
}

#nav
{
   width: 100%;
   height: 70px;
   border-bottom: 1px solid #000;
}

#content
{
   width: 100%;
   height: 400px;
   border-bottom: 1px solid #000;
}

#nav ul
{
   list-style-type: none;
   display: inline;
}

#nav ul li
{
   display: inline;
   width: 100px;
   border-right: 1px solid #000;
   padding-left: 10px;
   padding-right: 10px;
}

#nav ul li a:link, #nav ul li a:visited
{
   text-decoration: none;
   color: #00f;
   width: 100px;
}

#nav ul li a:hover, #nav ul li a:active
{
   text-decoration: none;
   color: #f00;
   width: 100px;
}

Stubru Freak
woundedhealer wrote:
I moved the links.inc file from the links directory to the public_html directory, which is where the index.php page is. Now i've got this on my page:
Parse error: syntax error, unexpected T_STRING in /home/woundedh/domains/celticawen.frih.net/public_html/links.inc on line 1
Quote:
I would definitely take this advice and use a PHP include for this.

Read this - http://www.w3schools.com/php/php_includes.asp

I'm going to have a look next.

I'm spending far to much time trying to sort this out, I think I'm going to have to find a more simple method for links for now, and return to this at a later date. Or get someone to do it for me, which is a bit of a cop out.


Welshsteve is right. If you give me your password I can solve it for you. Don't do this if you don't trust me.
woundedhealer
Welshsteve: Thanks for taking the time to do this. I'm working on it now, in the hope I can manage to sort it out myself.
Quote:
Use this theory. All three of these files appear in the same directory

All of my webpages will have the menubar, does this mean every file has to go into one directory?

I'm downloading Apache and PHP 5 to make it easier to test what I'm doing.

Quote:
Welshsteve is right. If you give me your password I can solve it for you. Don't do this if you don't trust me.

Stubru Freak: I don't think someone who is untrustworthy would spend so much of their time trying to help someone else. I've made so many changes trying to sort this out, so I don't know what sort of mess my files are in right now. I'd be happy for you to take a look to see if you can solve this. meanwhile, I'm going to work on the codes Welshsteve has done - after I've downloaded the Apache server and PHP 5.

I'll pm my password.
[/quote]
Stubru Freak
I've made a few changes:
First, the cause of the error was a ' that you forgot.
Second, links.inc should only contain the div, not the html, head and body elements.

You should rename or remove index.html to see the PHP index page when going to http://www.celticawen.frih.net/.
As you can see on http://www.celticawen.frih.net/index.php , the content is moved to the right. This is probably a problem in your stylesheet. Can you solve that? I'm not good at CSS.
welshsteve
woundedhealer wrote:
Welshsteve: Thanks for taking the time to do this. I'm working on it now, in the hope I can manage to sort it out myself.
Quote:
Use this theory. All three of these files appear in the same directory

All of my webpages will have the menubar, does this mean every file has to go into one directory?

I'm downloading Apache and PHP 5 to make it easier to test what I'm doing.


Why don't you use your frihost account for testing?

The best approach would be to put your includes in a sub-folder of your website root e.g. www.yoursite.com/includes/menu.php

Then use the following:

To include the menu.php from the root of your site use the following:-
Code:

<?php include("include/menu.php"); ?>


To include the menu.php from a page in www.yoursite.com/directory1 use the following:-
Code:

<?php include("../include/menu.php"); ?>


To include the menu.php from a page in www.yoursite.com/directory1/subfolder use the following:-
Code:

<?php include("../../include/menu.php"); ?>


...and so on
woundedhealer
Quote:
You should rename or remove index.html to see the PHP index page when going to http://www.celticawen.frih.net/. As you can see on http://www.celticawen.frih.net/index.php , the content is moved to the right. This is probably a problem in your stylesheet. Can you solve that? I'm not good at CSS.

It's in the centre for me. The links aren't working at all, so I'll check that out later. I'm not too bad at CSS, so I should be able to sort out any problems with that. I'll remove the index.html file and any others which aren't needed.
Quote:
Why don't you use your frihost account for testing?

I do sometimes. The problem with the links.inc file is that I can't edit it in DirectAdmin. Having to upload the file to check it, is time consuming.

I've decided not to go with Apache, I've got a php editor instead, so I can work on a file and check it in the same place. I think it will make it easier for me.

I am so pleased I don't have to have all my files in one directory, that would have made it so confusing.

Stubru Freak & Welshsteve, between you, you've given me plenty to do over the weekend - I'm a slow worker Smile

I might get a book on php tomorrow, probably an 'In Easy Steps'', because it's the only way I'm really going to understand php.
welshsteve
Good luck with it all Smile I'm not brilliant at PHP, but I use a "SAMS Teach Yourself" book as reference.
woundedhealer
welshsteve wrote:
Good luck with it all Smile I'm not brilliant at PHP, but I use a "SAMS Teach Yourself" book as reference.


I've bought In Easy Steps php5. I've got other books in the series and like it very much. The first thing the book said to do was download installApache, PHP5 and MYSQL. I didn't bother with MYSQL at this point. It took me 2 days to get it right, and this morning I finally had the page phpinfo up. Huge cheers for that.

A friend of mine says he did a website for a client with a similar dropdown menu as mine, and he did it using and iframe. As this was about two years ago, he can't remember how he did it, but he was going to try and recreate it yesterday. I hope to hear later today if he was successful. If he is, I shall use it for my website, but I shall also learn PHP. This has given me the motivation to learn. If he isn't successful, I shall of course carry on using php for it.
welshsteve
If your host offer it, and FriHost do Very Happy, I would stick with the PHP method. It's far more accessible and easier to manager than using an iframe.

One advantage of using includes, is that once the page renders, the include code is not dispalyed in the source, instead it's replaced with the code in your include file. It's a far more efficient way of doing things.

Good luck Smile
woundedhealer
welshsteve wrote:
If your host offer it, and FriHost do Very Happy, I would stick with the PHP method. It's far more accessible and easier to manager than using an iframe.

One advantage of using includes, is that once the page renders, the include code is not dispalyed in the source, instead it's replaced with the code in your include file. It's a far more efficient way of doing things.

Good luck Smile


I agree that using includes is more efficiant than iframes. This is what I've been working on, but I hit a problem. I could not manage to include the drop down menu, (menu.php) I kept getting error messages. I then put some links in a table - just one level - tried that instead, and it worked.

For the time being I'm going with this, having a link to each topic and then have a contents page for the different topics, which will take the place of the sub-menus. I'll work on the drop down menu as time allows, so maybe it'll be ready in a couple of years time Smile
Related topics
Dropdown menu won't work
[JS?] variable length of iframe
CSS div alignment issue, IE and FF (newbie problem)
dropdown menus howto?
php dropdown lists with if statements or switch
Internet Explorer 7 (beta 2 preview)
css right align
Toolbars
Free Javascript Menu Builder?
iframe
embedding javascript menu simple problem
Help me create a Dropdown Menu!!
CSS DropDown w/Contact Form GabrielCastillo.net
CSS only dropdown menu--why isn't the menu icon show always?
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.