I am developing a one page website and I would like to load in each section when the window scrolls to that specific section. Now I know you can lazyload images but I want to lazy load the entire section. The only way I think it would be possible is if I put my html code into jQuery then load it in when the scroll position is reached. But I would prefer not to do this.
This is a wordpress website and I am loading each page through into the homepage using
<?php require_once(''); ?>
so my page is layed out something like this
<?php get_header(); ?>
<?php require_once('section_one.php'); ?>
<?php require_once('section_two.php'); ?>
<?php get_footer(); ?>
So could I use php to only load these sections in when the scroll position is reached or is there a better way with jQuery? Also I want web crawlers etc to still be able to see my whole page. So if jQuery is disabled I want the full page to show. Any guidance or tutorials on this would be very helpful thanks
Create a method in controller that will render a sub-view based on the section number and return you the HTML. Or in your case create a file that will accept a GET request with section number, and render the output of needed section file as its done in most PHP frameworks (see below). That way you can make AJAX request when scrolling position is of necessary value, and insert returned HTML into the page.
<?php
$section_number = $_GET['section'];
ob_start();
if(file_exists(__DIR__ . 'section_' . $section_number . '.php')) {
include(__DIR__ . 'section_' . $section_number . '.php');
$var=ob_get_contents();
ob_end_clean();
echo $var;
}
echo '';
Render PHP file into string variable
May I suggest that you load the content and hide it with CSS instead? And then make a scroll spy solution to display the content when the section enters viewport? Why force someone to wait while the contents loads?
Related
I am working on a application where i only need to get wordpress footer
on outside php page i am using below code
<?php require('../wp-blog-header.php'); ?>
<?php wp_footer(); ?>
but it is loading NULL,when i useing below code
<?php require('../wp-blog-header.php'); ?>
<?php get_header(); ?>
<?php wp_footer(); ?>
it loads both header and footer but i want to load only footer please let me know what should i do
Thanks
Refer from this question.
You can use get_footer() function.
<?php
require __DIR__ . '/wp-blog-header.php';
// create false $wp_styles to prevent errors.
$wp_styles = new \stdClass();
$wp_styles->queue = [];
get_footer();
In case that your file is the same location with wp-blog-header.php then use the same path as shown above.
Warning! The result maybe invalid HTML as the elements are closed without open. Example </div> without matched <div>.
Alternative solutions.
Use cURL to fetch your home page and then use PHP Dom to grab only specific HTML part. Ideas: 1, 2
Use AJAX to fetch your home page and then use JS Dom to grab only specific HTML part. (See reference).
These 2 choices, I can't show the code because each WordPress theme use different HTML elements and styles.
I have a webpage with several subdirectories for example /search or /friends. Each of this subpages has its own javascript and css files. Now I want all this pages to have the same topbar so if I wanted to change the topbar I would only have to do this in one single place.
What's the common way of doing this? Simple php drops out because of the several scripts and css files. My idea was to call a php script via ajax on each subpage and append the returning string to the body element with jquery's append method but this doesn't seem very clean to me.
How does facebook handle this? Facebook's topbar doesn't even blink when clicking an internal link.
Thanks.
What about using an header.php in all the pages where you want to show your top bar?
To do this just create a file with top bar and save it as header.php and then in your index.php just place include('header.php'); repeat second step for each page where you want to have your top bar.
header.php
// top bar stuff
echo '<ul><li>Link</li><li>Link</li></ul>'; //etc
Other Pages
<?php
include 'header.php';
?>
We have a school project with HTML/PHP, and we need to create a web page. The problem is there can only be a index (or a main page), the rest of them are small portions of code in other .html documents.
I need to find a way to create a function (I think...) so when I click on one of the links, this will change the <body id>, the <title>, and will load a different content in a <div> (the small portion of code).
Resuming: there are 5 categories, when clicked, each one of them should change the <body id> attribute, the <title>, and load a different .html page in the <div>. I'm sorry if some of you find this offensively lame, but I really need some help with this.
Until now, this is what i have:
<?php
$id0="" . $id1; //default
$id1="home";
$id2="iso";
$id3="lm";
$id4="par";
$id5="itasir";
$id6="fh";
?>
<body id="<?php echo $id0; ?>">
Where $id1-6 should be the categories, and the id0 would be the counter or a pointer of the page that should be loaded. Ex. When I click on the "Par" link, $id0 would change to "" . $id4; and the body would load the id0 which contains id4 now... i think... That should be it.
Thanks...
A few things to read – learning is awesome, but of course just being given the code sucks.
<?php
$id0="" . $id1; //default
$id1="home";
$id2="iso";
$id3="lm";
$id4="par";
$id5="itasir";
$id6="fh";
?>
Would make much more sense as:
<?php
$id = array();
$id[0]="" . $id[1];
$id[1]="home";
$id[2]="iso";
$id[3]="lm";
$id[4]="par";
$id[5]="itasir";
$id[6]="fh";
?>
That way you can easily use numbers to get the one you need.
You are probably going to use variables in the URL using $_GET.
If the URL is http://www.example.com/index.php?page=1, then $_GET['page'] would be equal to 1.
That lets you write some PHP that does different things based on the URL.
You will then likely use file_get_contents (http://php.net/manual/en/function.file-get-contents.php) to load in the contents of the right file.
Easy!
I want to use php to easily maintain my website, but I simply can't figure out the language - I've found some tuts online, and some other questions here, but none help me.
I've divided my site into some .php files, header/footer and such - And using
works fine..
Now I want the content of my site, to update according to which menu I click on at my site.
http://dawtano.com/pp/
If I click on "about" I want the "Hello World" to open inside my content div, but I can't get the right php code to do it.
I think you should do this---
Note: This will only work if the CSS styling are on the current directory! ()
<div>
<?php
$html_page = implode('', file('http://dawtano.com/pp/'));
echo $html;
?>
</div>
Hope this helps!
well currently your links are taking you to a separate page entirely. So why not just code it so that your include file is specific to the page. i.e, on about.php, use something like
include 'about_content.php
in your contetnt div.
If you're looking for your content to load dynamically into the content div you'll need to look into using ajax to fetch the content pages.
One popular way to construct the site is to have a single php script which displays content based upon a $_GET variable like 'page' or 'content', and then make the link as:
'http://dawtano.com/pp/index.php?page=helloworldcontent'
Using this method, you would need to check if the variable ($_GET['page']) is set using isset(), and then make sure the string is safe... as anybody with a browser could just type in some mumbo-magic script and hijack your site:
'http://dawtano.com/pp/index.php?page=somecleaverlycraftedhax'
Once it exists and is safe, add the '.php' to the file name and include that file... if it exists! If it doesn't exist, then you will need some code to handle that, probably by displaying a 'File not Found' message, or redirecting home, or something.
I prefer not to do this because it is a pain to make safe, and I feel like it is pretty ugly. What I do instead is put all the header/footer/navbar/title bar scripts into seperate 'display' functions, and put them in another file.
Then include this file with the function definitions, and call all the 'display' functions to set up the page. So every php script in your site might look like:
<?php
include 'html_display_functions.php';
/* put lines here to parse $_GET and $_POST, session_start()/$_SESSION, etc... */
print_html_pre_content();
print '<p>Hello, world!</p>';
print_html_post_content();
?>
Since every script will have this structure, you can just create a template file once. When you want to create a new page for your site, copy the template, rename the copy to the php filename you want, and add content between the two print functions.
You also keep the ability to modify the header/footer/navbar/title bar for the whole site in a central location, namely the included file with the functions.
You might be looking for some sort of Template Engine which allows you to create your pages out of variable parts. You could have a look at TBS, which is more or less what is suggested by the name. But there is a whole lot more engines out there which could do the job.
If that's already too much over the top, maybe Apache SSI (Server Side Includes) are a try for you.
A little suggestion from my side, I am often using Apaches mod_rewrite in connection with a single controller.php file. Apaches mod_rewrite will then send all request to the controller.php which will fetch the appropriate page parts for the requested page using TBS and return the respective page. So you have the controll of the page in one location only.
To your original question about.php could look like:
<?php
include('header.php');
?>
// original page content as html for about.php
// assuming header ends with the starting div <div> where you like the content to appear
// and footer starts with the closing div </div>
// if you need variable content here, simply use <?php echo $your_variable ?>
<?php
include('footer.php');
?>
The best way would be to use a switch statement:
http://php.net/manual/en/control-structures.switch.php
Something like this:
<?php
include("header.php");
$page = $_GET['page'];
switch($page)
{
case "about":
include "about.php";
break;
case "faq":
include "faq.php";
break;
case "help":
include "help.php";
break;
default:
include "home.php";
}
include("footer.php);
?>
Then just make all of your links look like this:
http://www.example.com/index.php?page=home
Just replace home with the correct page.
ok, the title did not make much sense but this is what i am planning to do. I have designed a template for my website, with head body and div for specific stuff and everything. The website consists of header file, footer file, right-side column, header dropdown menu and a main body which would be present beneath the header dropdown menu, to the left of the right-side column, and above the footer. Right now there is some content is this main body area. What i am trying to achieve is that whenever any link is clicked on any of the other parts of the webpage, i want that content to be displayed in this main body. Right now i am copying this template to each and every page, but I want to keep this standard template as index.php and then replace main body content based on the link clicked. This is a php based website. Are there any examples where i can see how this can be achieved? or is there any standard procedure to do this. Please guide me, Thanks.
Here's a very simple way to do this:
index.php
<?php
function putPage($page) {
// put a list of allowed pages here
$allowed = array('page1', 'page2');
$page = trim($page);
$page = (in_array($page, $allowed)) ? $page : 'home';
echo #file_get_contents('.\html\\' . $page . '.html');
}
?>
<html>
<head>
<title>Title</title>
<!-- put stylesheets, js files, etc. here -->
</head>
<body>
<!-- you can have a nav bar or something here -->
<div class="navbar">
Page 1 Page 2
</div>
<?php putPage($_GET['page']); ?>
<!-- put a footer here -->
</body>
</html>
Then just put .html pages with the contents in an html subfolder.
The script will fetch them and insert them in the body.
There are a few ways you can achieve this. Off hand the two obvious ones I would say are:
Ajax to obtain content with event handlers attached to links/buttons/menus that produce maincontent specific to the request.
This requires server and client side scripting to achieve.
w3 ajax
Or alternatively use mod_rewrite with apache to determine what content to load in index.php page. For example with mod rewrite you may have a link http://www.site.com/subject/content/item# as a link structure. This could translate to www.site.com/index.php?subject=&content=&id= And these GET values would allow you to determine what to display in main content area.
This requires server side scripting and configuration of apache or (any web server with similar functionality to mod_rewrite).
mod_rewrite - apache
I use this:
<?php
$pag = array(1 => 'Home.php', 3 => '2.php');
echo require $pag[(int)#$_GET['p'] | 1];
?>
This is called either a Template View as far as you build your link specific HTML completely in PHP. You create a page layout template containing some wildcards. You load the template into a string and use string replacements or XML functions (more fancy but only suggestive if transformation is more complex).
Otherwise it is called Two Step View where you create the page layout template (as above) and a specific template for the links. Now first load the link specific template, put your dynamic content into (same techniques as above), load the page layout template and put the previous transformed specific template into.