Jump to content
Sign in to follow this  
gdust26

Php Solution Similar To Iframe

Recommended Posts

I am brand new to PHP and I've started my first php website! I am really excited and things have been going smoothly as of now. The problem that I am having is I want to create a portfolio page that will be easy to update and add to in the future. I've looked around and found information about iFrames, but I've heard they're not the best practice or a great solution. I want to do it all in PHP if possible, but I guess the idea would be similar to iFrames - when the link is clicked in the left navigation, then it will load that php include on the right. Here's what what's on my portfolio page:- I have a left sidebar navigation (portfolioNav.php).- I have the project file on the right side as an include as well.- I have all the includes (header.php, footer.php, portfolioNav.php, etc) in the main page called portfolio.php. My site:http://ginadust.com/test/portfolio.php Is there a way to link to the different php files in one <a href>? What is the solution? I would really appreciate any help on this, I seem to be at a loss. Thanks in advance!

Share this post


Link to post
Share on other sites

It's just like any other HTML link. It doesn't matter that it goes to a PHP file. PHP is just a way to send dynamic HTML to the browser (in the simplest definition). The include files are one way that PHP can pull in HTML from different sources, but the end result that the browser sees is a single HTML document. If your question is about changing part of the page but not refreshing the entire thing, you need to use ajax to send the request for the new content and have it update the page. The w3schools site has ajax tutorials if you want to look at those.

Share this post


Link to post
Share on other sites

You'll set up the pages the same either way, the question is whether you just link to them normally with a page refresh or use ajax to pull in the new content without refreshing. If you don't care if the page refreshes (which may be better if you want to be able to link to specific pages from outside your site), then just use a regular link.

Share this post


Link to post
Share on other sites

I did a little search and I found this code (from this site - http://www.webmaster...forum91/441.htm) :

A friend of mine is using this JS code in the header: <script language="javascript"> <!-- var state = 'none'; function showhide(layer_ref) { if (state == 'block') { state = 'none'; } else { state = 'block'; } if (document.all) { //IS IE 4 or 5 (or 6 beta) eval( "document.all." + layer_ref + ".style.display = state"); } if (document.layers) { //IS NETSCAPE 4 or below document.layers[layer_ref].display = state; } if (document.getElementById &&!document.all) { hza = document.getElementById(layer_ref); hza.style.display = state; } } //--> </script> and this html code for each division that is to be hidden/shown: <p><a href="#" onclick="showhide('div1');">Show/hide me</a></p> <div id="div1" style="display: none;">This is the content</div> (use different IDs for different DIVisions) The difference between using the css tags 'visibility' and 'block' is that with 'block' the layout will be updated as well.
Is this what you're referring to? I did try this and I was able to set the outer div to display:none; but I am confused about where my <a href="#"> is supposed to link to. When I click on it just opens up the php include and doesn't load in the right hand side of the page. Edited by gdust26

Share this post


Link to post
Share on other sites

Okay so here's my code. I am still trying to figure this all out through trial and error. The JavaScript code in the <head>: <script language="javascript"><!--var state = 'none'; function showhide(layer_ref) { if (state == 'block') {state = 'none';}else {state = 'block';}if (document.all) { //IS IE 4 or 5 (or 6 beta)eval( "document.all." + layer_ref + ".style.display = state");}if (document.layers) { //IS NETSCAPE 4 or belowdocument.layers[layer_ref].display = state;}if (document.getElementById &&!document.all) {hza = document.getElementById(layer_ref);hza.style.display = state;}}//--></script> The portfolio nav in the left side bar: <ul> <li><a href="#div1" onclick="showhide('div1');">Bloom Magazine</a></li> <li><a href="#div2" onclick="showhide('div2');">Bissinger's Chocolatier</a></li> <li><a href="#div3" onclick="showhide('div3');">Lorem Ipsum</a></li> </ul> The right content where each portfolio project should appear: <div id="rightPortfolio"> <div id="div1" frameborder="0" height="100%" width="600"> <? include('portfolio/print/bloomMag/bloomMag.php'); ?> </div> <div id="div2" frameborder="0" height="100%" width="600"> <? include('portfolio/print/Bissingers/bissingers.php'); ?> </div> <div id="div3" frameborder="0" height="100%" width="600"> <? include('portfolio/print/bloomMag/bloomMag.php'); ?> </div> <div id="spacer"> </div> </div> #rightPortfolio is set to display:none; in the CSS. Any help would be greatly appreciated. Thanks!

Edited by gdust26

Share this post


Link to post
Share on other sites

That's a different technique, that loads all of the content on the page to start with and then shows and hides various things that are already on the page. The container, rightPorfolio, needs to always be displayed. The divs inside it, like div1, div2, etc, are what you change between hidden and visible. Each of those divs is one of your "pages", but they're all divs in the same position on the page with only one of them visible at a time. The code to show and hide the layers is very old, it is targeting IE4 and Netscape 4. If you know anyone using either of those browsers, please donate them to a museum as soon as possible. Also, that code is only set up to work with a single element, not toggle more than one thing. Here's a different function to use:

function showhide(id) {   var e = document.getElementById(id);   if(e.style.display == 'block')	 e.style.display = 'none';   else	 e.style.display = 'block';}

Replace the showhide function you're using with that one, delete the global state variable, and make sure all of those divs start hidden using display:none. You can use inline CSS to make the one you want to start with visible: <div id="div1" style="height: 100%; width: 600px; display: block;"> You can delete the frameborder attribute, that doesn't apply to div elements. After you get that working, the next step is to make that function hide all divs before showing the one they clicked on. You'll notice it doesn't do that right now.

Share this post


Link to post
Share on other sites

Thanks! I replaced the JS code that I had previously with the one you provided. Here's what it looks like now: Javascript Code:

<script language="javascript"><!--function showhide(id) {   var e = document.getElementById(id);   if(e.style.display == 'block')		 e.style.display = 'none';   else		 e.style.display = 'block';}--></script>

Here's the code for the portfolio content:

<div id="rightPortfolio">				<div id="div1" style="display:block; height:100%; width:600px;">					<? include('portfolio/print/bloomMag/bloomMag.php'); ?>				</div>				<div id="div2" style="display:none; height:100%; width:600px;">					<? include('portfolio/print/Bissingers/bissingers.php'); ?>				</div>				<div id="div3" style="display:none; height:100%; width:600px;">					<? include('portfolio/print/capstone/capstone.php'); ?>				</div>				<div id="spacer"> </div>			</div>

I would like to have the content displayed content to disappear when the next project is clicked. Right now, you have to click back on the same link for it to disappear. Here's my portfolio nab on the left side:

<ul>					<li><a href="#div1" onclick="showhide('div1');">Bloom Magazine</a></li>					<li><a href="#div2" onclick="showhide('div2');">Bissinger's Chocolatier</a></li>					<li><a href="#div3" onclick="showhide('div3');">Capstone</a></li>				</ul>

I really appreciate your help on this and please let me know what i need to do next. Thank you!!</p>

Edited by gdust26

Share this post


Link to post
Share on other sites

The show/hide function should go through all of the divs you want to hide and hide all of them first, then show the one that needs to be shown. That's not really a show/hide function, instead of toggling an element it should hide everything first, then show the one that was selected.

Share this post


Link to post
Share on other sites

The idea is for it to not toggle. I want to have the portfolio page to show the first project on the page (which it does now), but I want to be able to click on the next project link which will then show the next project in the window and the first project hides. I don't want to have to click back on the first project link for it to go away to a blank screen, then click on the next project and so forth. Is there any way to accomplish this? Thank you!

Share this post


Link to post
Share on other sites

Like I said, the first thing the function needs to do is hide all divs. After all are hidden, then it shows the one they selected.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...