tushar707

I have solved both problems just today for my website. I will help you out. Okay as far as the loading content into iframe. here it is. <iframe src="thing.html" name="content"></iframe> The name is the important part. now in the link do this: <a href="homepage.html" target="content"> the target and name should be the same. to auto adjust the height. go here: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm (Id and name are two different commands for iframe) I used this to solve the auto adjust the height, and it works great with almost every browser. IE, Firefox have given me no problems.

please close the topic as I have solved it.

Hello, I have an iframe that changes its content according to the menu. How do I have the iFrame adjust its height according to content? Also how do I have the content area where the iframe is located to adjust its height according to the iframe? -tushar

Hello, I have made a website at my-prana.com/test which has a menu on the left. When someone clicks on a link, I want only content to load on the right. I dont want the whole page to load again. the content will be on php pages, which will be called by the link to load when it is clicked. I posted this on the javascript topic, but they told me to come here. I have never used ajax, so please let me know what I need to do to make this possible. Here is the code for my menu.php: <dl id="menu"> <dt onclick="javascript:montre('smenu1');"><a href="index.php">Home</a></dt> <dt onclick="javascript:montre('smenu2');"><a href="#">Our Programs</a></dt> <dd id="smenu2"> <ul> <li><a href="#">Sous-Menu 2.1</a></li> <li><a href="#">Sous-Menu 2.2</a></li> <li><a href="#">Sous-Menu 2.3</a></li> </ul> </dd> <dt onclick="javascript:montre('smenu3');"><a href="#">Resources</a></dt> <dd id="smenu3"> <ul> <li><a href="#">Newsletters</a></li> <li><a href="#">My Articles </a></li> <li><a href="#">Useful Links </a></li> </ul> </dd> <dt onclick="javascript:montre('smenu4');"><a href="#">Upcoming Events</a></dt> <dd id="smenu4"> <ul> <li><a href="#">Sous-Menu 4.1</a></li> <li><a href="#">Sous-Menu 4.2</a></li> </ul> </dd> <dt onclick="javascript:montre('smenu5');"><a href="#">Testimonials</a></dt> <dt onclick="javascript:montre('smenu6);"><a href="#">About Me</a></dt> <dt onclick="javascript:montre('smenu7');"><a href="#">Contact Us</a></dt> </dl>

I am a little confused. if you check out my-prana.com/test you will see that there is a menu on the left and space for content on the right. the content will be on different pages, but when someone click on the menu, on the content should be loaded again. I am little confused how to use what you told me mainewoods. Can you tell me exactly what to do on my menu.php file which I have included below. The php include command i want to use for the content is: <?php include("content.php"); ?> if this is the link <dt onclick="javascript:montre('smenu1');"><a href="#">Home</a></dt> What do I need to do to it exactly. i am new to this, so all the help is appreciated.

okay. I dont think that innerHTML is going to work anymore, Because my menu is a little different. innerHTML is not working anymore. Is there a doOnClick thing for javascript that I can use to change the content. There is an example of this at my-prana.com. I really hope you can help me out with that. Also, using javascript, can I put phpinclude within it? Here is my menu.php <dl id="menu"> <dt onclick="javascript:montre('smenu1');"><a href="#">Home</a></dt> <dt onclick="javascript:montre('smenu2');"><a href="#">Our Programs</a></dt> <dd id="smenu2"> <ul> <li><a href="#">Sous-Menu 2.1</a></li> <li><a href="#">Sous-Menu 2.2</a></li> <li><a href="#">Sous-Menu 2.3</a></li> </ul> </dd> <dt onclick="javascript:montre('smenu3');"><a href="#">Resources</a></dt> <dd id="smenu3"> <ul> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> </ul> </dd> <dt onclick="javascript:montre('smenu4');"><a href="#">Upcoming Events</a></dt> <dd id="smenu4"> <ul> <li><a href="#">Sous-Menu 4.1</a></li> <li><a href="#">Sous-Menu 4.1</a></li> </ul> </dd> <dt onclick="javascript:montre('smenu5');"><a href="#">Testimonials</a></dt> <dt onclick="javascript:montre('smenu6);"><a href="#">About Me</a></dt> <dt onclick="javascript:montre('smenu7');"><a href="#">Contact Us</a></dt> </dl>

is there any way I can do a php include command within innerhtml, because I am sort of new to this include command and am not sure what you mean by urlencode() or htmlentities()

okay. That works fine. However, can I attached php include within? Also, I am having another problem. I cannot attach a style within it. What should I do. I am looking for total flexibility. If innerHTML cannot give me that, do you have any other recommendations?

If I just type in text, and nothing else it works perfectly the way I want to. However, whenever I have html imbeded in the innerhtml command nothing works. Am I using the quotations right? For example this works: <li><a href="#" onclick="document.getElementById('content').innerHTML = 'This is a test';">Home</a> </li>[ But this does NOT: <li><a href="#" onclick="document.getElementById('content').innerHTML = '<strong><em>This is a test</em></strong>';">Home</a> </li>[

Hello, I decided to start a new post because it was not related to the other topic. I am having trouble using innerHTML. How do I use php include command within innerHTML? How do i use HTML within innerHTML? Whenever I just copy and paste the html, it doesn't work! Any help will be appreciated. Like can I do this <li><a href="#" onclick="document.getElementById('content').innerHTML = '<?php include("test.php"); ?>';">Home</a> </li> Or this? <li><a href="#" onclick="document.getElementById('content').innerHTML = '<strong><em>This is a test</em></strong>';">Home</a> </li>[ Because when I do it doesn't work.

is there a substitute to "innerHTML" because include doesn't slow the website

can you post how you use html within includes, because I dont seem to be able to do it. Like can you post your include command with the sample content?

anybody else who can help me?

thats not fixing the problem.

sorry to post so many things but also my css menu works fine in firefox but looks terrible in IE. whats up with that! any help will be appreciated.

okay there is a huge problem onclick="document.getElementById('content').innerHTML = 'CONTENT';" In that command, I cannot enter any html in the content area! I cannot stylize text or even enter php include command!

okay. I think I fixed the problem, but have another problem. In this: onclick="document.getElementById('content').innerHTML = 'CONTENT';" The area where it says CONTENT can I include a php include command there?

the problem seems to be with the css not the php i think. I will do what you told me and paste it here.

the error is not fixed. I think it is a css issue because if I copy and paste the menu instead of php include function the same error happens.

Is that the problem? for some reason it looks like its more than just that.

thats not in the menu.php code above. I dont see it. i dont know what you are talking about.

Hey guys, I finished making my menu in a sepearte html file and it looks like this: However when I copy and paste it into my index file it starts to look like this!: this is my code for my menu: <!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" xml:lang="en"> <head> <title>My Prana</title> <style type="text/css"> body { font-family: VladimirScrD; font-size: 24px; } #nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; float : left; width : 149px; } #nav li { /* all list items */ position : relative; float : left; line-height : 29px; margin-bottom : -1px; width: 144px; } #nav li ul { /* second-level lists */ position : absolute; left: -999em; margin-left : 144px; margin-top : -1.20em; } #nav li ul ul { /* third-and-above-level lists */ left: -999em; margin-top : -29px; } #nav li a { width: 5em; w\idth : 5em; display : block; color : #1463a5; font-weight : 300; text-decoration : none; border : none; background-image: url(images/button.jpg); padding-top: 0; padding-right: 0em; padding-bottom: 0; padding-left: 1em; } #nav li a:hover { color : white; background : url(images/button_rollover.jpg); } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } #content { margin-left : 6em; } </style> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> </head> <body> <ul id="nav"> <li><a href="#">Home</a> </li> <li><a href="#">Our Programs</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <li><a href="#">Resources</a> <ul> <li><a href="#">My Articles</a></li> <li><a href="#">Newsletters</a></li> <li><a href="#">Useful Links</a></li> </ul> </li> <li><a href="#">Events</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">About Me </a></li> <li><a href="#">Contact Us </a> </li> </ul> <p> </p> </body> </html> can someone help me where I went wrong! I really need this.

anybody that can help me?

the div thing works for the content. However the menu has a huge problem! This is how it should look like (the tabs are long and sub menu is attached to main menu): This is how it looks like when I do the include command: (the menu has tabs that are too short): Please help why is this happening when the css is the same. Here is the code Index.php (had to save is as .php because .html would not work at all) <html> <head> <title>My Prana</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { font-family: VladimirScrD; font-size: 24px; background-color: #0066FF; } #nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; float : left; width : 149px; } #nav li { /* all list items */ position : relative; float : left; line-height : 29px; margin-bottom : -1px; width: 144px; } #nav li ul { /* second-level lists */ position : absolute; left: -999em; margin-left : 144px; margin-top : -1.20em; } #nav li ul ul { /* third-and-above-level lists */ left: -999em; margin-top : -29px; } #nav li a { width: 5em; w\idth : 5em; display : block; color : #1463a5; font-weight : 300; text-decoration : none; border : none; background-image: url(images/button.jpg); padding-top: 0; padding-right: 0em; padding-bottom: 0; padding-left: 1em; } #nav li a:hover { color : white; background : url(images/button_rollover.jpg); } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } #content { margin-left : 1px; } .style1 { font-family: Tahoma; font-size: 12px; color: #593D00; } .style2 {color: #996600} </style> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls.onmouseover=function() { this.className+=" sfhover"; } sfEls.onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="959" height="860" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td colspan="5"> <img src="images/index_01.jpg" width="959" height="214" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/index_02.jpg" width="959" height="26" alt=""></td> </tr> <tr> <td height="528" colspan="2" background="images/index_03.jpg"> <img src="images/index_03.jpg" width="2" height="486" alt=""></td> <td width="153" height="528" valign="top" bgcolor="54b4e5"> <div align="center"> <?php include("menu.php"); ?></div></td> <td width="803" height="528" valign="top" bgcolor="b9d7ee"><pre><div id="content" name="content">content</div></pre></td> <td width="1" height="528" background="images/index_06.jpg"> <img src="images/index_06.jpg" width="1" height="486" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="images/index_07.jpg" width="1" height="91" alt=""></td> <td colspan="4"> <img src="images/index_08.jpg" width="958" height="16" alt=""></td> </tr> <tr> <td height="74" colspan="3" bgcolor="75c0ea"> <div align="center" class="style2"><span class="style1">My Prana, Inc., 5 North Street, Newtonville, MA 02460.<br> www.my-prana.com; Phone: (617) 939-7626; Fax: (617) 558-9846</span></div></td> <td rowspan="2"> <img src="images/index_10.jpg" width="1" height="75" alt=""></td> </tr> <tr> <td colspan="3"> <img src="images/index_11.jpg" width="957" height="1" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="153" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="803" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> Menu.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>My Prana</title> </head> <body> <ul id="nav"> <li><a href="#" onclick="document.getElementById('content').innerHTML = 'click here for the content';">Home</a> </li> <li><a href="#" onclick="document.getElementById('content').innerHTML = 'This is the our programs page.';">Our Programs</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <li><a href="#">Resources</a> <ul> <li><a href="#">My Articles</a></li> <li><a href="#">Newsletters</a></li> <li><a href="#">Useful Links</a></li> </ul> </li> <li><a href="#">Events</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">About Me </a></li> <li><a href="#">Contact Us </a></li> </ul> </body> </html> The css is the same that was in the original menu.html file!

thanks for the quick reply. you were so helpful!