Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Im a beginner and fairly new to programming (so please keep your answers simple as possible).
I just heard of HTML5 history API, This API lets you update browser address bar with JavaScript, so you can change the contents of the page according to the URL. (Which I have no idea how to do)
I'm currently using XAMPP as localhost, phpmyadmin as database, and using Notepadd++ as a file editor, viewing and testing my website on Google Chrome.
My questions is, how do I use this new HTML5 History API so that my 3 php files, work seamlessly when navigating between pages using purely PHP or javascript at most.
Best example I can give is exactly how soundcloud can play music seamlessly when navigating between pages.
I would like the same result and the same concept on my 'header', 'Vis1' and 'Vis' php files to work seamlessly when navigating between pages(these pages are listed).
Files I want to work seamlessly when navigating:
Directory: i-neo\htdocs\i-neo\inc..
<?php include ( "./inc/header.inc.php" );?>
<?php include("./inc/vis1.inc.php");?>
<?php include("./inc/vis.inc.php");?>
These same 3 files are included all across the following php pages:
Directory: i-neo\htdocs\i-neo\
'home.php, index.php, msmyg.php, prof.php, nudg.php & frireq.php'
Coding below: vis1.inc.php
<!doctype html>
<html>
<head>
<div id="vinfo">
<meta name="description" content="blah">
<title>blah</title>
<link type="text/css" rel="stylesheet" href="style/style.css">
<div id="wrapper">
<div id="fileWrapper" class="file_wrapper">
<div id="info">
</div>
<label for="uploadedFile">
Drag & drop
</label>
<input type="file" id="uploadedFile">
</input>
</div>
</div>
</div>
</head>
</html>
Code for: vis.inc.php
<!doctype html>
<html>
<footer>
<link type="text/css" rel="stylesheet" href="style/style.css">
<div id="v_wrapper">
<canvas id='canvas' width="1950" height="800"><script
type="text/javascript" src="js/hav.js"></script>
</canvas>
</div>
<div id="c2">
<small>random infowebsite name - Owner</small>
</div>
</footer>
</html>
Code for: header.inc.php
<?php
include ("./inc/connect.inc.php");
session_start();
if (isset($_SESSION['user_login'])) {
$user = $_SESSION["user_login"];
}
else {
$user = "";
}
?>
<!doctype html>
<html>
<head>
<title>i-neo</title>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div class="ineoMenu">
<div id="ineoWrapper">
<div class="logo">
<img src="./img/i-neo.png" />
</div>
<div class="search_ineo">
<form action="search.php" method="GET" id="search">
<input type="text" name="q" size="50"
placeholder="Search" .../>
</form>
</div>
</div>
</div>
<?php
if (isset($_SESSION["user_login"]))
{
echo '
<div id="menu">
Home
Prof
Set
Me
Fr
Nudg
Logout
</div>
';
}
else{
echo'<div id="menu">
<a href="index.php"/>S</a>
L
</div>
';
}
?>
<div id="wrapper">
</html>
<footer>
<div id="c1">
<?php echo "Hedi Bej © i-neo 2015"; ?>
</div>
</footer>
Each of your PHP pages render a full webpage, so you're probably better off just using ordinary links between them.
You could remove all the parts that are the same on each, have the homepage render those and then when an internal link is pressed it could download the relevant section from your server and insert it into the page (using the History API to update the URL). You'd also want to have some way of having the server render the appropriate page in full after following a link to it, possibly by using some kind of server side routing.
To me, it doesn't look like you need to use the History API yet, your website will work fine with hyperlinks.
Related
I am trying to implement a collapsable sidebar with a form (search field and submit button) for my site.
I have referenced as script:
https://code.jquery.com/jquery-1.11.3.min.js
and
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
However in this combination the form just wont submit, instead it seems to apply the get parameters to the URL and then fires preventDefault of some sort.
It seems like I am using an old version of jQuery , however when I tried to update to:
https://code.jquery.com/jquery-3.2.1.min.js
I noticed that my collapsable menu wont work anymore and the complete style is broken. Also I cant put it in a fiddle since they are mostly already using jQuery.
Sample 1 (Collapse works but form not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.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="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
Sample 2 (Form works but Collapse not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.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="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
For the first sample I also tried to declare a input type button instead of submit and trigger it manually using:
$('#submitbutton').click(function() {
$('#myform').submit();
});
Without success.
Thanks in advance!
jquery mobile version 1.4.5 is only locked to certain older jquery versions and have not been tested onto older versions above jquery2.0
Read more about it here if you need to: http://blog.jquerymobile.com/2013/02/20/jquery-mobile-1-3-0-released/.
This would explain why the jqueryversion 3.2.1 doesn't work with your collapsible form.
Meanwhile on the side of the 1.11.3 version, According to the developer console all you have to do is load up your form on a web server instead of loading it locally on your computer (C:/Folder/.html wont work, you need to use browser extensions like https or http)
I hope this helps you as I myself ain't a professional programmer and can't scratch up a working code for you.
It seems like I was misjudging.
With jQuery mobile comes alot of automatically introduced features for e.g. submitting a form in the background using XHR request and not reloading the site.
Imho they should make this a little bit clearer as I had a hard time figuring this issue out. Solution is: for `s or 's you DONT want to be loaded in background, add the tag: data-ajax="false" like so:
<form action="#" method="get" data-ajax="false">
<a href="" data-ajax="false">
Hope this helps someone.
Do you ever look at a code and think it looks so simple?
Like it's just a simple three line code-- "I can't possibly mess this up!", you say, and end up messing it up? Because I did, and it's driving me crazy. Ok not that crazy, but I'm stumped.
I'm making an online portfolio and I wanted it to be multi-paged and realized soon enough that I can't (don't want to) rewrite the header html AND header css into each page. It's not efficient at all.
So I did some research & found W3 Data Includes library
(w3schools.com/lib/w3data.js & w3schools.com/w3css/w3data_includes.asp)
So my header:
https://jsfiddle.net/nsykep2v/
My index with W3 include:
<!DOCTYPE html>
<html lang="en">
<head>
blah blah blah
</head>
<script src="https://www.w3schools.com/lib/w3data.js">
</script>
<body>
<div w3-include-HTML="header.html"></div>
<script>
w3IncludeHTML();
</script>
<div id="blah">
blah blah blah
</div>
</body>
</html>
Don't bother running it, it's just there to give a sense of where I placed the important stuff.
Note:
I move the script tag around & no header shows up
I moved the div around & no header shows up
I merged the the script tag so it has src inside of it & still no
header shows up
They're all in the same file, right next to each other
I did some other stuff but it's basically moving around things and trying different syntax I don't think it's worth mentioning
Let me know if more info is needed.
You obviously have lots of work still to do, but this takes what you had and gets it working -- injecting the separate menu.html into index.html using the stuff you provided:
Answer in Plunker
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div w3-include-html="menu.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
menu.html:
<div class="v_dropdown">
MENU
</div>
<header class="in_dropdown">
<div id="filler_hdr" class="header">
<div id="filler_file"></div>
</div>
<div id="articles_hdr" class="header">
<div id="arcs_tab" class="tab">
<strong>Articles</strong>
</div>
<div id="arcs_file" class="file"></div>
</div>
<div id="projects_hdr" class="header">
<div id="prj_tab" class="tab">
<strong>Projects</strong>
</div>
<div id="prj_file" class="file"></div>
</div>
<div id="photo_hdr" class="header">
<div id="photo_tab" class="tab">
<strong>Photography</strong>
</div>
<div id="photo_file" class="file"></div>
</div>
<div id="blog_hdr" class="header">
<div id="blog_tab" class="tab">
<strong>Blog</strong>
</div>
<div id="blog_file" class="file"></div>
</div>
</header>
Also, make sure that you are serving up your local files using a web server and not file:// URIs when you are developing locally, as the w3data library will not work unless you serve the files from some sort of a web server.
Further, you have some pretty messed up HTML that you started with. Since it seems you are still learning some HTML basics and just trying to dive in, you might want to validate your HTML. One way to do this is by using an online tool like this.
I'm very new to this so forgive me if I don't properly state things. I started learning Selenium using the IDE record tool for Mozilla. It says you can play back the script in IE by setting up the stand alone server. That worked fine but when I play back, I get the message stated in the title along with a pop up with this very long message. Below is the message.
Every line in the script opens up a new browser window with the same message. Very frustrating. Can anyone tell me what I am doing wrong?
Received command response (!=OK/ERROR): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/assets/displayhelpservlet.css" media="all"/>
<script src="/assets/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="/assets/displayhelpservlet.js" type="text/javascript"></script>
<script type="text/javascript">
var json = Object.freeze('{"version":"3.0.1","type":"Standalone","consoleLink":"/wd/hub"}');
</script>
</head>
<body>
<div id="content">
<div id="help-heading">
<h1><span id="logo"></span></h1>
<h2>Selenium <span class="se-type"></span> v.<span class="se-version"></span></h2>
</div>
<div id="content-body">
<p>
Whoops! The URL specified routes to this help page.
</p>
<p>
For more information about Selenium <span class="se-type"></span> please see the
<a class="se-docs">docs</a> and/or visit the <a class="se-wiki">wiki</a>.
<span id="console-item">
Or perhaps you are looking for the Selenium <span class="se-type"></span> <a class="se-console">console</a>.
</span>
</p>
<p>
Happy Testing!
</p>
</div>
<div>
<footer id="help-footer">
Selenium is made possible through the efforts of our open source community, contributions from
these people, and our
sponsors.
</footer>
</div>
</div>
</body>
</html>
Request Data: cmd=getNewBrowserSession&1=*webdriver&2=http%3A%2F%2Ftemplate.ppgtest.local%2FPortal%2FLogin&3=&4=webdriver.remote.sessionid%3D7d276ca5-a3c2-4527-b535-2e38958624ae
<html>
<head>
<title>Quiz Application</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
function ready()
{
if(document.getElementById("rb2").checked)
{
alert("correct");
}else if(document.getElementById("rb1").checked)
{
alert("incorrect");
}
else
{
alert("incorrect");
}
}
function nextPage()
{
window.location = "next.html";
}
</script>
</head>
<body>
<form method="post">
<center><h1>Quiz Application</h1></center><br><br>
<center>What does JVM stands for ?<br><br>
<radiogroup>
<input type="radio" id="rb1"/>Java Vendor Machine<br>
<input type="radio" id="rb2"/>Java Virtual Machine<br>
<input type="radio" id="rb3"/>Java Viral Machine<br>
<input type="submit" id="sub" value="Freeze" onclick="ready();"/><br>
<input type="submit" id="next" value="Next Question" onclick="nextPage();"/></center>
</radiogroup>
</form>
</body>
</html>
Above is my code for redirecting my page to next page after click event.
But it is not redirecting to next page.I went through many questions on stackoverflow as well but didnt succeed.
Please help me .
Thanks in advance.
What are you doing there? If you're doing it with jQuery mobile an example would look like this:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"> </script>
</head>
<body>
<div data-role="page" id="page1">
<p>This is page 1. If you want to go to Page 2 click here.
</div>
<div data-role="page" id="page2">
<p>This is page 2. If you want to go back to Page 1 click here.
</div>
</body>
</html>
Changing a page by function could look like this:
function changePage() {
$.mobile.changePage( "#loginPAGE", { transition: "none", changeHash: true });
}
Here's a pen: http://codepen.io/anon/pen/gaeoQE
Frameworks - Mobile App Development
So like i said in my comment, i would recommend you to use a framework. Since i don't know, how conversant you're in JavaScript and anything else i think you should start with jQuery. For mobile App development it's not one of the best frameworks in my opinion but it's easy to learn and thats important for you to start.
So jQuery is a thing for your website. For your mobile application you need jQuery mobile.
You go to that websites and download both. When your download is finished, you're going to open up your index.html and add the scripts to your <head></head> section so that it looks like the following:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
These things are important. Also the order in which you include the scripts is important.
After adding this to your header, you're able to access a whole bunch of functions. All of the features are testable inside a demo environment which can be found over here: jQuery mobile Demos (1.4.5).
When you have finished that, you're going to copy my code from my pen into your <body></body> and it should work. For changing a page via javascript you can use the function changePage() which i've already posted before.
I hope this will help you, if not please let me know where exactly i can help you.
I found out the solution for my query . i just wrote the following function onClick of a button (input type should be button and not submit then only it will work)
function nextPage()
{
document.location="nextpage.html"; //instead of window.location
}
problem is, that the website is loading like for about 20 second or longer (user-problems preprogrammed)
my solution was to load a pre-site where the user sees a loading screen.
i did this with this html-site but i want to do the same in php.
the test-page is http://kater.selfhost.me/test/
Source Code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("siteLoader").style.display = "none";
document.getElementById("container").style.display = "block";
}
</script>
</head>
<body>
<div id="container" style="display:none">
<div id="body">
<iframe src="http://kater.selfhost.me/stats/skins.php" frameborder="0" height="2000px" width="1024px"></iframe>
</div>
</div>
<div id='siteLoader'>
<div id='siteDetailLoader'>
<img src='ajax_loader.gif' border='0'>
Please wait while the page loads...<br /> <br />
</div>
</div>
</body>
</html>
i tried some workarounds, but after searching & testing for about three hours i give up...
thanks in advance for any help provided! :-D
Adding what I alredy said at your question commentary, I made a code loading this content via AJAX:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
//Load content
loadAjaxContent();
});
function loadAjaxContent()
{
//VERY IMPORTANT: the URL domain MUST HAVE be the same as your request
//that's why I'm not writting the full http://kater.selfhost.me/stats/skins.php
$.ajax({
url: "/stats/skins.php"
}).done(function(data) {
//remove loader
$("#siteLoader").hide();
//put PHP content
$("#ajaxContent").html(data);
});
}
</script>
</head>
<body>
<div id="body">
<div id="ajaxContent" style="width:1024px;"></div>
<div id='siteLoader'>
<div id='siteDetailLoader'>
<img src='ajax_loader.gif' border='0' />
Please wait while the page loads...<br /> <br />
</div>
</div>
This is the most used way to load asynchronous content in the web. But pay attention at this: The http://kater.selfhost.me/stats/skins.php page is made to open as single page in the web, so it has <html> , <head>, <body> , etc.. tags, so..after loading this page into another you'll have two <html>, <body> .. tags in a same page, this is bad, but modern browsers have an awesome common sense and don't bother by this, but you should know that, and be aware.
The actual problem why it isn't loading yet, is this javascript in your content:
<script type="text/javascript"><!--
EXref="";top.document.referrer?EXref=top.document.referrer:EXref=document.referrer;//-->
</script>
I removed that and now works fine. Remember that's a quick fix, I don't know what this JS does.
Why it works in <iframe> and doesn't via AJAX? When you open in <iframe> is like opening in a new browser window..and via AJAX, as I have said, it'll load the page content straight inside your "parent" page.
So, removing this Javascript will work, but awesome further solutions:
If you need to open this page both as content to load (via AJAX), both as single page, you can make two pages.. one for each need.
If you just want to use as content to load, remove <html>, <head>, etc.. tags, and fix Javascript to work inside another page.