I'm new to PHP and i use the include function to include a header file that has my db connections and my menu. On a body page I'm using a iframe to include a aside that needs to go on many different pages. The issue arises when i hit click on one of the hyperlinks of the aside that is in the IFRAME it will take me to the proper page BUT will RE-include the header in that portion of the code. I was wondering if there is any alternatives OR ways to insure the header doesn't reload in my iframe. Here is a copy of my code.
Main PAGE
<?php
include_once("include/header.php");
?>
<div id="content">
<div id="left" class="sidebar">
<iframe src="aside.php" height="550" frameborder="0" width="210" scrolling="no" allowtransparency="true" rel="nofollow"></iframe>
</div>
Aside page
<div class="imgholder">
<p class="employeename">Pablo Israel Penaloza</p>
<img src="img/Pablo-Peñaloza.jpg" width="202" height="150" class="imgemployee">
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>Informacion Personal</li>
<li>Contacto</li>
<li>Contact de Emergencia</li>
<li>Dependientes</li>
<li>Imigracion</li>
<li>Deberes</li>
<li>Salario</li>
<li>Supervisor</li>
<li>Calificaciones</li>
<li>Membresias</li>
</ul>
</div>
<!--End sidebarmenu1-->
</div>
Thank you
You'll need to use javascript for the detection, or make separate URLs for pages that will be included in the iframe. This should help you:
Check if site is inside iframe
To not use an iframe would be best.
It's much easier if you just use include(). You can make the content that would reside in the iframe inside of a scrolling DIV instead. Modern sites do this and update the <div> with AJAX.
To make it scroll
<div style='width:210px;height:550px;overflow:auto'>
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/aside.php'); ?>
</div>
Static
<div style='width:210px;height:550px;'>
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/aside.php'); ?>
</div>
Related
I'm developing a web-based application using Framework7 (http://www.idangero.us/framework7/).
I'm doing well but now that I have come to integrate my login/member system I have encountered a problem with hyperlinks.
I've spent couple of hours trying to figure it out but have still come up short.
Basically I have three links:
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<div class="content-block-inner">
Hello <?php echo htmlentities($_SESSION['user']['username'], ENT_QUOTES, 'UTF-8'); ?>, secret content!<br />
Memberlist<br />
Edit Account<br />
Logout
</div>
</div>
</div>
Memberlist.php and edit_account.php do not work but logout does.
Visiting the files directly in my browser (eg domain.com/memberlist.php) loads the file. They just do not load from this page so something is clearly wrong with it.
I've tried to include target="_self" and use other styles of linking content as explained in the Framework7 documentation but there is nothing about the problem I'm experiencing.
it important to write exact page name in data-page attribute value
<div class="page" data-page="about">
After digging around some more in the documentation I was able to solve my issue.
Linking in Framework7 requires every page linked to to have some specific code for parsing over AJAX.
<!-- That is all we have in about.html file -->
<div class="page" data-page="about">
... About page content goes here
</div>
I've been trying to learn most of this as I go so as with previous questions I've posed some of this may seem simplistic or blatantly over my head - with that said I learn best through peer explanation/example/advice so thanks in advance.
I have used what I've learned here so far to build the basic structure of my personal website. The concept is an right aligned accordion menu that remains from page to page while the content and backgrounds in the area to the left will change based on the menu selection - fundamentally like frames or iframes used to look.
THE PROBLEM:
I have some js knowledge and I know that I can cycle some of the content out via getElementById but as these will be in a gallery I didn't want to drag my speed down by loading 54+ images in the background. I also know that I can just make the thumbnails in the sidebar link with php and just load the page entirely but as I don't want the menu to change I've been trying to figure out the best method to go about this. So far I've heard mention of PHP, JQuery and AJAX (which I know by name but is new to me). Below is an example of the code and what I want to do:
<body>
<div id="all">
<div id="live-area">
<?php include("blog.php") ?>
</div>
<div id="side-bar-area">
<div id="sidebar-header">
<h3>Title</h3>
<h1>Title</h1>
</div>
<div id="nestedAccordion">
<h2>Portfolio</h2>
<div>
<h3>Branding</h3>
<div>
<ul>
<li class="thumbs">
<img src="images/thumbs/example1.jpg"/>
<img src="images/thumbs/example2.jpg"/>
<img src="images/thumbs/example3.jpg"/>
<img src="images/thumbs/example4.jpg"/>
<img src="images/thumbs/example5.jpg"/>
<img src="images/thumbs/example6.jpg"/>
<img src="images/thumbs/example7.jpg"/>
<img src="images/thumbs/example8.jpg"/>
<img src="images/thumbs/example9.jpg"/>
</li>
</ul>
</div>
<h2>Blog</h2>
<div>
<ul style="margin:0px;">
<li>entry 1</li>
<li>entry 2</li>
</ul>
</div>
<h2>About</h2>
<div>
<ul style="margin:0px;">
<li>About</li>
<li>Resume</li>
<li>Accolades</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
Based on the above, what I want is that whenever any of the items in the menu such as <img src="images/thumbs/example1.jpg"/> are selected it will change the content of <?php include("blog.php") ?> without reloading the page.
Firstly, is this doable? And secondly, does anyone have advice for a novice in terms of this - either basic tutorials or a how-to for the layman?
As you added jquery to your tags, you could use AJAX to perform a server side request and load the new content and replace the existing one.
$.ajax({
url: 'http://example.org/other-page.php',
dataType: 'html'
})
.done(function(data) {
// Assuming the request returns HTML, replace content
$('#live-area').html(data);
});
Try this,
In html,
<div id="live-area">
<?php include("blog.php") ?>
</div>
<li class="thumbs">
<img src="images/thumbs/example1.jpg"/>
<img src="images/thumbs/example2.jpg"/>
<img src="images/thumbs/example3.jpg"/>
<img src="images/thumbs/example4.jpg"/>
</li>
In script,
<script>
$('.thumbs a').click(function(){
var page = $( this ).attr('data-page');
$.ajax({
type:'POST',
url:page,
success: function(response){
$('#live-area').html(response);
}
});
})
</script>
We are currently building a mobile website using Jquery Mobile (1.1.0) and are using a multi-page template. We are using PHP to call MYSQL for dynamic content and have hit a brick wall with a certain object. When trying to call a simple image, it will not display. In viewing the source, it shows the correct image file name, however, it does not display. When removing Jquery Mobile, the image returns fine so I'm positive our variable is correct.
The code below is basically what we are using to call and echo out. ($data is an array with the page detail).
<div data-role="page" id="page">
<div data-role="header" data-position="fixed" class="header">
<div> PHONE NUMBER GOES HERE</div>
</div>
<div data-role="content">
<div class="logo">
<img src="img/logo.png" />
</div>
<h1>Page Title</h1>
<p>:: <span><?php echo $data['img']; ?></span> :: </p>
</div>
</div>
As stated previously, this code produces results in the page source but on the actual page it outputs <span> :: :: </span>. If anyone can help it would be much appreciated.
try:<img src="image_location/<?php echo '.$data['img'].'; ?>"/>
Place the PHP code inside
<div data-role="page" id="page">
// php code here
<!-- All the HTML goes here -->
</div><!-- End of #page -->
Its needed as the page content is loaded using jQuery AJAX call. In that case whatever code is there outside <div data-role="page" id="page"> will not get executed in the AJAX call.
Hi I was wondering what php code I can use that would allow my page to contain more than one image that changes. I would like the php code to output the HTML tag. Can anyone help me with this? Thanks!
you need to output all images to the browser from PHP, then use Javascpt to change the pictures. PHP is for server side scripts, the change you are talking about requires Client Side procxessing, ie Javascript. Do a search for jQuery image changer for some ideas
The kind of mechanism you are referring to is often called a slideshow or a carousel, and it is done with javascript. Google "jQuery slideshow" or "jQuery carousel" and you'll find plenty of those.
If you need something simple, I suggest you the tiny the jQuery plugin tiny carousel.
Scroll to the How To section to know how to set it up.
Then, to change the images with php, you will need to do something like this:
<div id="slider-code">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php foreach(glob('slideshow/*.jpg') as $imagePath): ?>
<li><img src="$imagePath" /></li>
<?php endforeach; ?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
I'm creating a website for a kiosk. I've got 3 divs on one page, everytime when a div is clicked, next div shows up using a photoslide, and the previous div hides away.
My problem is that when the welcome screen (first div) is showing (the whole page/div is an a tag), the status bar down the bottom shows the linking address all the time. I posted another post, people told me it is not possible to hide the status bar.
So my question is how do I set the cursor to be off screen/off set, so the status bar only shows when a visitor is interacting with the screen.
Can I set the cursor offset using javascript, html/css or php? Any code/suggestions is appreciated.
Thanks!
Here is my html page below or see http://jsfiddle.net/EXfnN/8/
<div id="item1" class="item">
<div class="content">
<a href="#item2" class="panel">
<video id="my_Video" width="100%" height="100%" preload="auto" autoplay loop>xxxxxx
</video>
</a>
</div>
</div>
<div id="item2" class="item">
<div class="content">
<div id="back">
<ul id="awesome-menu">
<li>
ABC
</li>
<li>
National
</li>
<li>
Other
</li>
</ul>
</div>
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img src="images/thankyou.jpg" alt="Thank you" /></div>
</div>
I'd suggest that if you're using JavaScript for this, that you don't need ANCHOR tags because you've already negated the need for them.
I'd suggest changing to adding click events to the div tags and storing additional application data on "data-" attributes and reading those with JavaScript instead.
This workaround eliminates a few problems like the one above.
you could make the first element a div only (without the a tag) catch the onclick event and then redirect via javascript (or do whatever action the a tag has)?