Hello!
I am developing my personal website!
And I am trying to implement it with JS completely. which means I need the page to be one front end page.
But the back-end pages would be the ones which do the work and calculations!
In other words and more explaination:
I would like to have one "index.php" page that contains only a nav bar which handles the mission.
Once the page load it loads with the content of "home.php" (the landing page) if the "contact" tab is clicked then I would like to load the "ContactMe.php" page content.
I have done this already! but the problem is:
"home.php" uses alot of javascript functions and jquery plug-ins. when I load it, it looks messy that you think the JS is disabled in your machine
Note: the loading has been done with those methods: .load(), $.ajax! -> same results!
The conclusion:
* "home.php"
* "ContactMe.php"
* "About.php"
Is it possible to load those pages in the "index.php" and still have their JS functions function correctly and display as if they were accessed individually?
The goal that I am trying to achieve is that I make my whole website for the visitor as "One Page Site"! I am challenging myself with it though!
Thank you in advance for your informative posts!
Please Note that I have only put the <html><head><body> tags in the index.php and removed them from the back-end pages such as home.php, contactme.php and about.php! for that sake that it works correctly! but with no hope!
Overview for the problem I sake help with!
file -> index.php
- <html>
<
head>
// includes all CSS files
// includes jQuery framework!
//includes all my JS custom functions!
<title>INDEX.PHP</title>
// THEN ?
<script type="text/javascript">
$(function(){
$(
".NavBarTab#contact").click(function(){
$(
".GeneralContent").load('contactme.php');
});
});
</script>
</head>
<body>
<div class="Navi">
<div class="NavBarTabs">Home</div>
<div class="NavBarTabs" id="contact">Contact me</div>
<div class="NavBarTabs">About</div>
</div>
<div class="GeneralContent">
//content!
</div>
</body>
</html>
File -> contactme.php
- // No <html><head><body> tags at all! nor js codes embedded !
<div id="FormToggle"> // note: toggle which means there is an effect function I made in my index.php imported JS files!
// some elements and events to be clicked to fire an ajax call!
</div>
Your help is greatly appreciated!