I am building a webpage that loads the functional scripts ( e.g. script.js ) during onload. This script have functionalities such as timer, and user activity tracking ( Tracking whether user is on Page, Inactive on the page). If the user is actively on the page for 10 seconds, It will show a pop out survey window and allow users to fill in similar like this
How could I finish this by just using JavaScript to load the HTML and CSS of this pop out window from a source?
For example:
popUpWindow.html
<div>
<form> ... </form>
</div>
I imagine that these codes can be inserted into the webpage's DOM and shows up when necessary like this:
webpageScript.js
// functionalities for user and timer tracking here
function loadPopOutWindow() {
// download the html and css source files of the window
// include the tags of html file into webpage's html
document.getElementById("body").innerHTML = ...;
}
webpage.html
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
// Webpage's contents
// pop out window
<div>
<form> ... </form>
</div>
// apply the style of the pop out window
<style .. ></style>
</body>
</html>
I tried to google search around to figure out other ways to implement this. I am not suggesting to use ways like load it using other language like PHP. If my idea is impossible, I also seen there are ways to do this using jQuery but is it possible to include jQuery codes using vanilla javascript?
Note: My webpage is built with HTML, CSS and vanilla javascript
If I import a website using the < link > tag, will I be able to display it's contents into some element of my HTML page? The website I am trying to access has it's X-Frame-Options set to 'DENY'.
As per my understanding, such websites cannot be framed to prevent clickjacking. At I higher level, I believe this is a security restriction set to the website which I cannot modify at my end.
What I am currently trying is this:
<!DOCTYPE html>
<html>
<body>
<div id="thisdiv">Hi</div>
<script>
// Handle Loaded Templates.
function templatesLoaded(event) {
console.log('Templates loaded.');
}
// Handle Errors.
function templatesFailed(event) {
console.log('Templates could not be loaded.');
}
</script>
<link rel="import" href="https://someurl" onload="templatesLoaded(event)" onerror="templatesFailed(event)">
</body>
</html>
I wish to know whether there is any way I can display the contents of the website into some element on my page in the templatesLoaded method.
Open for any suggestions. Thank you :)
You can use iframe tag to display another webpages to your webpage.
See this link... http://www.w3schools.com/tags/tag_iframe.asp
I found a website that has the same header for all the pages which never reloads when navigating through pages. After header loads once, it stays in place and the rest of the layout (content and footer) loads from page to page. Its pretty much like when you have a frameset but its not.
Mouse hover the upper menu and click on any item and you will see what I mean.
What is this technique called? I would like to know the name so I can research about it and learn it.
Thank you.
After reviewing the website you submitted I was able to find a javascript file, which as many people suggested uses ajax to load the contents into the page without reloading it, after the webpage is loaded the script triggers a hashchange which changes the url to match the one you clicked on using window.history.pushState as suggested by #escapedcat , the javascript also handles the animation and changes the classes of certain elements in the webpage to reflect it's state (updating, etc..)
The code is uglified but you can still see how this is done
link
edit
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 1</title>
</head>
<body>
<header>
<nav>Link</nav>
</header>
<div id="content">
this is the default content
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$('nav a').on('click', function(e){
e.preventDefault();
console.log('test');
$.get(this.href, function(data){
$('#content').html(data);
console.log(this);
history.pushState({foo:'bar'}, 'second page', 'page.html');
});
});
</script>
</body>
</html>
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 2</title>
</head>
<body>
This is page 2
</body>
</html>
The above changes the url, you still have to do further development of the code to get full functionality i.e.(back button)
you can refer to Page not reloading via 'back' when using pushState() / onpopstate to add this kind of functionality
edit:
The pushState() method
as the documentation states the pushState method recieves 3 arguments, a state object containing serialized information associated with the new history entry, the page title, and the page url, each time a user navigates to a new history entry the popstate method is fired and the state changes to represent the current state
The technique is called a "Single page application" (a.k.a. SPA).
You can create a SPA using any framework or library you wish (e.g. AngularJS, ReactJS, jQuery, etc) as long as you follow some guidelines.
A single-page application (SPA) is a web application or web site that
fits on a single web page with the goal of providing a more fluent
user experience similar to a desktop application. In a SPA, either all
necessary code – HTML, JavaScript, and CSS – is retrieved with a
single page load, or the appropriate resources are dynamically
loaded and added to the page as necessary, usually in response to user
actions.
Assuming that we're not loading all of the content in advance, the basic guidelines are:
When the server loads the page for the first time, you decipher the URL and return the appropriate page. The page should contain an identical template for all pages, while only a dedicated part of the html file is reserved for the dynamic content.
For example, all pages in my website should return the same header and load the same javascript files, the part that changes is only my #content element which contains the html of that specific page, according to the URL.
When the user clicks an internal link you perform the following operations:
Prevent the link from navigating, using event.preventDefault()
Change the URL yourself, using the history API (history.pushState(stateObj, title, path))
Load the content using Ajax and replace the the existing content with the new one.
Listen to popState events to detect change in the URL due to the use of the back and forward buttons. (window.addEventListener('popstate', handler))
Load content according to the new URL.
Note: The server needs to provide the content (without the rest of the template) using Ajax.
Concerning the "How", that is completely up to you as long as you understand the workflow of a SPA.
The technology used is Angular JS. If you want to learn this technology you can
use http://www.w3schools.com/angular/ or http://www.tutorialspoint.com/angularjs/
.If you want to see the page souce code you can right click and then go to inspect and right click and then go to inspect view page source. By Inspecting you will see the real time changes that are happening in the backend.
Im not sure how this person does it but how you could make this is:
When an user clicks on a menu item load the content with ajax (no refresh)
$(document).ready(function(){
$("menu-item").click(function(){
$("#content").load("something");
});
});
You can update the url with :
window.history.replaceState(“object or string”, “Title”, “/another-new-url”);
this updates the url without a refresh
If a user lands on a specific url you can pass the required data based on the url to load the right content.
You can use Meteor.js too.
Their own website is built using meteor.js and you can clearly see the functionality you want on that website.
You can achieve same by the a layers in css (click here to know more)
For the site you suggested there will be three layers
Image
Header(which will scroll down on mouse hover)
The Background image (That is Hidden by the Header)
I've come across a strange problem with jQuery mobile - If i have an anchor link to the same page, then the javascript on the page is not run after clicking the link and returning to the same page.
For example (test.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.1/jquery.mobile.structure-1.4.1.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
alert('hello');
</script>
</head>
<body>
<div style="height: 1000px">
test
</div>
</body>
</html>
... "hello" alert is shown the first time, but after clicking the "test" link (to go back to the same page), the alert doesn't happen.
If I remove the reference to jquery mobile js then it does work as expected, showing "hello".
Does anyone know what's going on here?
jQuery mobile loads internal links via AJAX.
Try changing your anchor to:
<a data-ajax="false" href="test.html?dosomething=1">test</a>
Documentation - Linking Pages:
Default link behavior: Ajax
To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's href to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.
If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.
I created an index.html page that have 3 different tabs. With the function tabs() of jQuery UI I want to load an html page with Ajax. Every HTML page use jQuery library, so every page have this code:
<link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
If I click on a tab the page is loaded but the JavaScript function of the page doesn't work!
So can I load in a tab a new complete HTML page (HTML+JS)?
two possibilities:
1) if you need jquery-ui in each tab, it's better to load it when initalizing your tabs.
2) use following to load your javascript files:
$.getScript("js/jquery-ui-1.8.5.custom.min.js");
and for css:
$.get("css/redmond/jquery-ui-1.8.5.custom.css", function(css) {
$("head").append(""+css+"");
});
Edit: You never load a complete new html page with ajax tabs - you only load a code snippet which is included in your existing html page. Use Firebug for Mozilla Firefox to see what happens ;o)
Ok, the problem is to understand what the tabs do. With Ajax I can load some content in a tab.
If I declare a <div> for a tab, Ajax loads the content in that <div> so I can't load a new complete HTML page becouse the DOM after the load have two open <html><head> ecc.
So now I understand the function of the Ajax in the tab, and the load of complete HTML page is a big mistake!
Thanks Tobias.