Jump to content

Beginner Question: Replacing IFRAME elements?


l2oBiN

Recommended Posts

I am a beginner at web design and I am trying to build a personal website. I am using an IFRAME to load different contents to the body of my webpage when a menu link is clicked. However, I came across a problem where an image gallery viewer (lightbox2) is getting "stuck" in the IFRAME (I would like it to not be stuck in the IFRAME). Trying to find out a bit more about this, it seems that replacing the iframe with a more modern alternative might be at least part of the solution. What are the modern alternatives to IFRAME? I basically want to change the contents of the middle content area of my site.

Link to comment
Share on other sites

The normal approach is to use a server-side language to include the variable part of the content. The most popular language is PHP. In PHP the page would look something like this:

<?php// Select content based on queryif(isset($_GET['p'])) {	switch($_GET['p']) {		case 'about':			 $title = 'About Us';			 $content = 'includes/about.php';		break;		...	}}?><html><head>	<title><?php echo $title; ?></title></head><body>-- Header ---- Menu --<?php include $content; ?>-- Footer --</body></html>

Please check the W3Schools PHP tutorial first and if you still don't understand ask questions here.

Link to comment
Share on other sites

Thank you. Ok I have managed to setup the MSQL+Apache server with MAMP and I have confirmed that PHP works on my computer by running the following .php file as per "Example 1" instructions from the "Your first PHP-enabled page"

<html><head>  <title>PHP Test</title></head><body><?php echo '<p>Hello World</p>'; ?></body></html>

I have then tried running a .php file with the script "FoxyMod" mentions aboveFirstly, line 9 of the script (...) comes up as invalid syntax so I have removed it and tried running it. I just get a readout of the "-- Header -- -- Menu -- -- Footer --". I thought that perhaps replacing the $content with the dir to a html page would display it (see below), but it does not seem to work. Is there a practical example demonstrating the effect? I essentially would like to call a change in div contents through a menu click by loading different html pages...

<?php// Select content based on queryif(isset($_GET['p'])) {	    switch($_GET['p']) {			    case 'about':						 $title = 'About Us';						 $content = 'gallery/gallery.html';			    break;	    }}?><html><head>	    <title><?php echo $title; ?></title></head><body>-- Header ---- Menu --<?php include $content; ?>-- Footer --</body></html>

My current simplified site code

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><div id="wrapper">    <div id="logo"><a href="slideshow/slideshow.html" target="iframe_content"><img src="logo.png" alt="Photography by xxx"></a></div>    <div id="navigation">			  	    <ul>		    <li><a href="gallery/gallery.html" target="iframe_content">gallery</a></li>		    <li><a href="#">technical</a></li>		    <li><a href="#">info</a></li>	    </ul></div><!--/#navigation-->    <div id="content"><iframe name="iframe_content" src="slideshow/slideshow.html" marginwidth=0px marginheight=0px frameborder=0 width=600px height=600px></iframe> <!-- width and height must match #content css-->    </div>  <footer id="footer">© xxx 2013. All rights reserved.</footer></div><!--/#wrapper--></body></html>

Link to comment
Share on other sites

My example was very basic. First of all, since there's no "default" in the switch() statement it will not work if $_GET['p'] isn't set to "about". Append ?p=about to your website's URL and the script should work properly. A second thing to notice is that included files should not contain <html>, <!DOCTYPE>, <body> or other tags and only need the specific HTML that you want to add to that part of the page. Understanding what the script does, rather than just copying it, will help you work on it. As I mentioned, read the W3Schools PHP tutorial so that you can know what the script is doing and how to change it to work on your website.

Link to comment
Share on other sites

My understanding of the script is if the p variable ($p) has been set (ie is <> null) run a switch statement which obtains value from $p and checks it against different cases to determine which code to run. If the $p=='about' then create and assign values to the $title and $content variables. These variables are then called in the <title> and <body> HTML elements. To simplify the example I have modified the code as below...which still does not seem to work =( ???? In addition...a couple of questions..1. Is there a difference between using a ' an a " mark? (thought the " marks are used for declaring string variables but I see sometimes they are used for specifying a variable?)2. I am wondering whether the code does not work because the $title and $content are only available locally thus are not able to be accessed outside of the function (as they are called by the echo)? I tried declaring them as global within the switch function but it was seen as syntax error.3. I have tried including my gallery page directly in the <body> (see below comments) but could only see place marks for the images themselves, the images were not seen at all??? they are clearly there when the html document is viewed separately. 4. What is I would like to include the associated css and Jquiry files and scripts? (I essentially would like to replace IFRAME tags above without being sandboxed so that the Lightbox2 plugin would not be clipped by the IFRAME)

<?php// Select content based on query$p='about'; /* also tried "about" and about (no quotes)*/if(isset($_GET['p'])) {	    switch($_GET['p']) {  			    case 'about':                         $title = 'About Us'; // also tried making global eg global $title='About Us'						 $content ="Number 1";			    break;		    }}?><html><head><title><?php echo $title; ?></title></head><body>-- Header ---- Menu --<?php echo $content; ?> // tried <?php include 'gallery/gallery.html'; ?> but could only see photo place marks-- Footer --</body></html>

Link to comment
Share on other sites

switch is not a function. If this is your whole script, you have no functions of your own, so all your variables exist in the same scope. They should be accessible everywhere. Something else is wrong. The first debugging measure you should try is var_dump($_GET); See what's really in there before you make assumptions about it. Problems with your include statement are probably path related. You can always view source in your browser to see how the document actually got assembled. Included files show up just like copy and paste.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...