I have a website which consists of 5 different pages.
To maintain the design of all the pages, I copied and pasted the code from the main page to all the other HTML documents to make sure that the Navigation Box and the main divs stay in position.
I've now been asked to implement the design in such a way where when I press a button, the other HTML pages will load dynamically onto my main index page. This way, if I need to change the design of the pages, I only have to change the index page and not have to repeat those changes for every single HTML document I have.
I've tried using Javascript for this, but I can't think of anything that would suffice. I can't understand jQuery at all, if someone has a clear understanding of how to accomplish this task using jQuery or Javascript, could you please explain it to me step by step?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="CSS/Index.css">
</head>
<script src="websitescript.js"> </script>
<body>
<div class="mainwrapper">
<div class="navbox">
<input type="image" id='about' src='images/about.jpg'
onclick="myFunction()"> </a>
<a href="location.html"> <img src='images/location.jpg' class="location">
</a>
<input type="image" id='contact' src='images/contact.jpg'
onclick="myFunction()"> </a>
<a href="inquiries.html"> <img src='images/inquiries.jpg' class="inquiries">
</a>
<a href="employees.html"> <img src="images/employees.jpg" class="employees">
</a>
</div>
<img src="images/duo.jpg" class='logo'>
<div id="header">
</div>
</div>
What you wanna do, is load content using AJAX (XmlHttpRequest). That means, you have just one page with layout, and content/other pages are loaded without the need of reloading the page.
For that, you can use jQuerys .load() function. Tl;dr; what you gonna do, is to have content of the website as simple html files, without layout (header etc), and using ajax you are gonna load it into the page.
Content of your main page index.html could look like this (I removed those images in nav bar)
<div class="mainwrapper">
<div class="navbox" id="js-navigation">
About
Location
Contact
Inquiries
Employees
</div>
<div id="header"></div>
<div id="js-content">
<!-- content will be loaded here -->
</div>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#js-content').load('/about.html');
$('#js-navigation a').click(function(e) {
e.preventDefault();
$("#js-content").load(e.target.href);
})
});
</script>
So in the same folder, you will have those other content files, but without navigation, wrappings header etc. Just plain content like:
<h1>About page</h1>
<p>Lorem Ipsum</p>
Alright so my approach is a bit different as I use PHP but hopefully I am still able to help you with this. I am working on something similar where I have "index" page that includes a nav bar at the top and empty space below it. After I click on something the content of another php file loads into white space, and said another php file is wrapped into a div I can edit with css. To do this I've used this php command:
<div>
<?php
$page = "MainPanel.php"; // my index
if (isset($_GET["page"])) {
$page = $_GET["page"];
}
if ($page == "" or $page == "MainPanel.php") {
$page = "/Main/central.php"; //default page upon running the code.
}
$GLOBALS["page"] = $page;
ob_start();
include($page);
ob_end_flush();
?>
</div>
This should be it. I don't know php very well and one of my collegues suggested to use this but it's relatively small amount of code and it works well.
Related
I'm trying to figure out which is the best architecture for an application created with jQuery Mobile and PHP that uses multiple pages generated with PHP.
I have created two almost similar pages (as an example). Each page has one button (link) that redirects the user to the other page.
That's what the first page looks like:
p1.php
<?php
session_start();
if(!isset($_SESSION['p1'])) $_SESSION['p1']=0;
$_SESSION['p1']=$_SESSION['p1']+1;
?>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-dom-cache="false">
<div role="main" class="ui-content" id="maincontainer_1">
<h1>Page 1 counter: <?echo $_SESSION['p1'];?></h1>
<br>
<a href="p2.php" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-right ui-icon-arrow-r" >Go to page 2</a>
<br>
<a href="" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" >Back</a>
</div>
</div>
</body>
</html>
The page is simple and displays the number of visits the user makes on this page.
The second page is the same as the first, only counting the user's visits to it. That's how it looks:
p2.php
<?php
session_start();
if(!isset($_SESSION['p2'])) $_SESSION['p2']=0;
$_SESSION['p2']=$_SESSION['p2']+1;
?>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page_2" data-dom-cache="false">
<div role="main" class="ui-content" id="maincontainer_2">
<h1>Page 2 counter: <?echo $_SESSION['p2'];?></h1>
<br>
<a href="p1.php" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" >Go to page 1</a>
<br>
<a href="" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l" >Back</a>
</div>
</div>
</body>
</html>
The problem
If the user opens the first page (p1.php) and then he browsing between the two pages, he will see that only on the second (p2.php) increase the number of visits were made made. The first page (p1.php) will always display the same number of visits, even if the two pages should actually display approximately the same number of visits.
This is because of jQuery Mobile. The first page is loaded into DOM and never removed. All other pages loaded by jQuery Mobile (in this case p2.php) are loaded with ajax and doing so the PHP part is executed. But the first page (in this example p1.php) is never loaded again, so the PHP part is executed only once. That's why the number of visits on the first page is not changed.
Note that the contents of the first page isn't removed from the DOM,
only pages loaded in via AJAX. Pages inside a multi-page template
aren't affected by this feature at all - jQuery Mobile only removes
pages loaded via AJAX.
In the same way, if user hit F5 on second page, then jQuery Mobile loads this page (p2.php) as main page. In this case it will increase the number of visits on first page (p1.php) and the number of visits made on p2.php will not change anymore.
Request I need a way to modify the content of a page using PHP without the fear that user will hit F5 or refresh any page and thus this page will become the main jQuery Mobile page and this way it will never be effectively reloaded again.
Note that all pages are loaded by jQuery Mobile by using ajax. jQuery Mobile will strip any page by the header and other stuff and will only load the first DIV marked with date-roll = "page". Only the first page is loaded normally (and only once). So if you're wondering why pages have the same header (even if it's no longer loaded), that's because if the user refresh the page, it's displayed correctly (as jQuery Mobile main page).
Current approach At this time I use a modified script that is loaded on each page. This script removes any page from the DOM to force it to be reloaded when the user visits it again. THis is the script:
// delete old pages
$(document).on("pagecontainerchange.fixcache", $.mobile.pageContainer, function (event, ui) {
if ($.mobile.firstPage.is('[data-dom-cache="true"]') || $.mobile.page.prototype.options.domCache && $.mobile.firstPage.is(':not([data-dom-cache="false"])')) {
$(document).off('pagecontainerchange.fixcache');
} else if (ui.prevPage !== undefined) {
if (!($(ui.toPage).hasClass('ui-dialog') || $(ui.prevPage).hasClass('ui-dialog')) && ui.prevPage.prop("id")!==ui.toPage.prop("id")) {
$.mobile.firstPage.remove();
$(document).off('pagecontainerchange.fixcache');
}
}
});
In this way the example above works correctly.
Doubts. Is this the right way to create a multi-page application using jQuery Mobile and PHP?
Should I only use only AJAX requests as below? This will not (unnecessarily) increase the complexity of the code? (request - process request - json answer - process answer)
$.ajax({
type: "POST",
url: "request.php",
data: {...} ,
success: function(data) {
...
}
});
I think so because there are many distinct requests on a page. A page generated by PHP usually solve through a single access all necessary data. Using multiple AJAX requests will not load the server too much?
Should I use a single AJAX request that fills the entire page?
Really do not know...
I have a banner in a div and I like to place it on home page which automatically reflects on rest of the pages?? Is it possible ?? without placing the code on the each page specifically ??.
Any help would be appreciate :)
If you're using PHP, you can write the whole banner in html, then save it as .php (e.g. banner.php). Then somewhere before the content of each of your pages, use PHP's include
keyword
For each of your page you can write it this way:
<body>
<div id='banner'>
<?php include "/path/to/banner.php"; ?>
</div>
<div id='content'>
<!-- Main content here -->
</div>
</body>
Either this can happen with php as #javiniar-leonard recommends, or you can use css.
In every page the basic structure is the same I guess. So target the div and place the div as background:
.main{
background:url("../your_banner_url.jpg");
}
Hello I have created a website for my school work and I am trying to implement a navigation bar for all the pages of the site. I got it working on all my other pages but there is one page in particular where it the entire navigation bar disappears when the page is loaded. The header section should display the navigation bar while the body loads the prime number table.The page should have a navbar like this.
However the prime number table page will not load the home and back icons.
I cant get the stackoverflow formatter to accept my html code so I have to put a link to it, sorry!.
This is the source code
Headers should not be in the <head> element; instead, they should be at the top of the <body> element. So move this code:
<div class="header">
<div class="container">
<div class="navbar">
<a class="logo" href="http://w3.cnm.edu/~tteichelmann"></a>
<a class="back" href="http://w3.cnm.edu/~tteichelmann/cis1210" onclick="history.back();" value="Back"></a>
</div>
</div>
</div>
Into the body. Also, HTML 5 introduced the <header> element (more here), which is a more syntactical way of defining a header... Consider that an alternative, not a requirement.
Move your div with the class of header outside of the head section of the document. It should be within the body tags.
I try to make some kind of ads rotator as follows:
<html>
<head>
<title></title>
<style>
body {
margin:0;
padding:0;
}
</style>
<script>
function fillBoard() {
s = document.getElementsByClassName('slots');
board = document.getElementById('board');
board.innerHTML = s[0].innerHTML
alert(board.innerHTML);
}
</script>
</head>
<body>
<div id="board" style="width:160px; text-align: center; margin:0">
</div>
<div class="slots" style="display:none">
<!-- THE PROBLEM IS HERE -->
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript">
<!--
hsoub_adplace = 1310003403401506;
hsoub_adplace_size = '125x125';
//-->
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/1/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/2/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/3/" />
</div>
<script>
fillBoard();
</script>
</body>
</html>
In the code above:
There is a div with id board to act as a board that displays contents.
The board should be filled with data supplied from other hidden divs with class name slots using innerHTML property.
To do the above a function named fillBoard() is defined in the head section of the page and then called at the end of it just before closing </body> tag.
What is happening?
The hidden divs slots works fine with divs that contain images. However, in the first div there are a javascript code that should generates ads from an ads network which it does not work.
I expect that the javascript code of the ads network should fill its div with data, then the calling of fillBoard() will just copy its content to the board div. However, this is does not occur!
I need to know how could I overcome this issue?
A live example is found here
You can just show the desired hidden div and it's usually a better practice than copying DOM content. If you make sure to only show one of the hidden divs at a time you can show the image always in the same place.
Try this to show the first "slots" element:
s[0].style.display = 'block';
Ok so after some more digging I've found the issue, although I don't have an easy solution at the moment.
The js file show.js is generating some ad content inside of an iframe for you, which you are placing in the first 'slots' div. Simple enough. When you are setting the content of the board to the content of the first slots class, an iframe is being created in the board div but without the same content.
After some searching it seems that innerHTML of an iframe will not copy the contents of the iframe if it comes from a domain other than the page domain for security reasons.
It seems to me that the solution at this point is to either show and hide the slots divs like Zhertal suggested or you can possible find some other way to physically move the content of the slots div into board, but this may still be a violation of the same security concern. I'm going to keep digging and I'll edit this answer if I find anything more.
Reference SO posts:
Get IFrame innerHTML using JavaScript
Javascript Iframe innerHTML
I have the following div on a page called Transactions.html :
<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>$12.62 - 11/01/2012 - Kelloggs Diner - Brooklyn Ny</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
</div>
</div>
</div>
And when I click the link <a>No</a> I want the whole div to move to another Summary.html page. Any ideas? Thanks
You can do it this way. You need to have a wrapper div tag in-order to select the entire html content.
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('.red').click(function(){
var divData = $('#dataContainer').html();
window.location.href = "summarypage.html?data="+divData+"";
});
});
</script>
<div id="dataContainer">
<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>$12.62 - 11/01/2012 - Kelloggs Diner - Brooklyn Ny</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
</div>
</div>
</div>
</div>
In summary page you need to retrieve the data from the URL. When you run this and click 'NO' link it navigates to summary page and you can see the html values on the summary page URL bar
You can use PHP to retrieve this data using <?php echo $_REQUEST['data']; ?>
You can't - that's not how the web works. Each HTML page is self-contained and encapsulated.
Some sites, like Github, do little tricks with the JavaScript history API and AJAX to make it appear as though a new page is "partially loaded", when in fact it's the same page.
You probably need to use PHP or a server side technology for storing data and that needs complete transformation of your static pages to dynamic PHP pages, that needs lots of work.
By using the html it is not possible to transfer the data from one html file to another html file. use the JQuery to perform the data transfer
By clicking on the button, speficy in which div or place you want the data to display, by using the load() in Jquery you can load the specific data in another page to your page