I am trying to achieve the same effect as this website.
You will notice that the url changes and the content changes when you scroll, however when I inspect the requests being made in the console I cannot see a new AJAX request being made to get the new html content. I cannot figure out how this content is being loaded.
It appears the "page change" is just a javascript scrolling effect, and the javascript also changes the URL. If you notice, go to the about section and refresh that url, and the page isn't found.
Any guidance on how this can be achieved would be greatly appreciated. I have read through the javascript source code on the page, but as it is minified I am still struggling to understand how it all works. Perhaps I should be using html5's history state.
My current project is set up like this:
The index.html file looks like this:
<body>
<header>
<img src="homeLogo.png">
</header>
<div id="scene">
<h3>Home page</h3>
<div class="bgImage"></div>
</div>
<footer>
Footer
</footer>
</body>
the tress/index.html file looks like this:
<body>
<header>
<img src="homeLogo.png">
</header>
<div id="scene">
<h3>Trees</h3>
<div class="bgImage trees"></div>
</div>
</div>
<footer>
Footer
</footer>
</body>
urban/index.html is the same as tress/index.html apart from the div within the div with id scene.
Based on how the project is set up I am wondering how I can update the content page with the different html files.
Take a look at the History API, specifically at the function:
window.history.pushState({ your_data:"whatever"}, "title", newUrl);
https://developer.mozilla.org/en-US/docs/Web/API/History_API
There are excellent third party libraries that can help you easily build a cross-browser solution, although modern browsers follow the standard decently.
The rest of your problem is just dynamically adding content, that may come from an ajax request or not.
Related
I need to embed a marketo form onto a github page, essentially host it there, then iframe it into another piece of software I'm using. The iframing in afterwards is striaght forward as the software does that. But I cant work out how to actually embed it on github.
Go to the Marketo form
Grab the form embed code
Grab the munchkin tracking code too. Not 100% essential but needed if you want web page tracking on the Github page the form will live on.
Drop code in a Div section.
From my code example you could replace 132 (with your actual form ID)
And replace 111-AAA-111 wit your Munchkin ID.
Example
<div data-role="page" id="page_1">
<div data-role="header">
<h1>Test form. Embedded</h1>
</div>
<div data-role="main" class="ui-content">
<script src="//app-abj.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_123"></form>
<script>MktoForms2.loadForm("//app-abj.marketo.com", "111-AAA-111", 123);</script>
</div>
<div data-role="footer">
<h1>Footer: text</h1>
</div>
</div>
In my project, which is a simple HTML/Javascript project. I am including pages into the index page for easier read-ability. This is a Tabbed page. So each Tab has a included html page.
JavaScript:
<script>
$(function () {
$("#Startup").load("Startup.html");
$("#Continuous").load("Continuous.html");
});
</script>
The Tabs look like this:
<div id="tab1" class="tab-pane active" style="max-width:100%;">
<div id="Startup"></div>
</div>
<div id="tab2" class="container tab-pane fade" style="max-width:100%;">
<div id="Continuous"></div>
</div>
The issue that i am having is there are JavaScript files that are included in the Index page.
The controls as i call them, on the included page do not work. Like it does not even see the JavaScript that is loaded.
I have not tried IFrames yet, however in the future i would like to be able to bring this up on an IPad and i do not think that is compatible or at least is hasn't been in the past.
All script includes and scripting are at the end of the page. I tried moving them to the "Head" section and it does not seem to matter.
My individual pages only have html required for the page so there is not Html, Head and body tags.
Is there something i am missing in these pages or is it just that including an html into another doesn't share resources? And if so is there a way to do this in another way?
Also it is worth saying that this needs to be staight HTML and there will not be server side scripting available.
Thanks for your help!
UPDATE:
I am wondering if this is just a what gets loaded first problem.
I tried loading JQuery then my script above in the header and left the other scripts at the bottom of the page but it still does not work.
Load function of jQuery only loads data from the server (would need a URL to access this page). Load will not serve your local HTML file. As you told there is no server side scripting, load will not work here.
Try adding jquery to your page. Something like this should work. Make sure the files are being served from webserver. You can't just open the index.html file locally in your browser.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Startup").load("Startup.html");
$("#Continuous").load("Continuous.html");
});
</script>
</head>
<body>
<div id="tab1" class="tab-pane active" style="max-width:100%;">
<div id="Startup"></div>
</div>
<div id="tab2" class="container tab-pane fade" style="max-width:100%;">
<div id="Continuous"></div>
</div>
</body>
</html>
You'll get CORS errors if you try to make AJAX calls from a local file. These show up in the developer tools console and look like this:
Access to XMLHttpRequest at 'file:///Users/peterg/tmp/Startup.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, https.
You can use .load() to add html or text to an existing page. It's not a good way to include javascript. See https://api.jquery.com/load/
"When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded."
It does this to reduce the potential for Cross Site Scripting (XSS).
I'm looking into creating browser game development. I have a strong background in C programming (c/c++/c#) and web development (html/css/wordpress/some JS). This area of programming seems like chaos and no one has a firm framework that works well and is good.
I've been exploring at libraries available such as gameQueryJs and other tutorials I've found such as Canvas Tutorial, I keep running into the same issue.
They all just jump STRAIGHT into the code. No pre-set up, how the HTML page should look like, just nothing. They all go BANG, right into the javascript.
Before I get into the javascript I need to set up the web page. I am wondering how such a page would be designed like and how to import scripts correctly.
For example, if I wanted to add jquery and the gamequery libary, would I add it like this?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/jquery.gamequery-0.7.1.js"></script>
<title> GAME TITLE </title>
</head>
<body>
<div id="game-txt">
<h1> GAME TITLE </h1>
</div>
<div id="wrap">
<div id="canvascontainter">
<canvas id="canvas" width="300" height="300"></canvas> -- ignore this, this was when I was playing with the canvas tutorial
</div>
</body>
</html>
<!-- SCRIPT STUFF DOWN HERE? -->
To further explain my issue, here is gameQueryJS's first line of code they introduce to you to use.
var PLAYGROUND_HEIGHT = 250;
var PLAYGROUND_WIDTH = 700;
$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH});
Where does that go? What is the playground id they are manipulating on the page? They just throw that line at you like every other tutorial I've found without explaining anything.
Javascript can be placed in script tags or in a seperate file just like the gameQueryJs libraries that you are loading.
Where you put the script tags is almost entirely up to you, although most people will put them in the section.
Putting them below the closing tag of the page is not correct however. Unfortunately most browsers will accept and execute it even then because they try quite hard to make every page they get served work. For more on where to place script tags check W3Schools
The playground they refer to is an element that you'd have on your page, in their example from lesson one it is a div with the id playground.
Also, if you check the first example that they give you can select Edit with JSFiddle the code they show there should help anwser part of your question as well as add to the lack of information you complained about.
Okay, I'm currently working on a website and I wanted to embed a timeline into each post. I am using WordPress. The timeline I insert would differ from post to post so this timeline cant be inserted into the actual theme I'm using? I'm also very new to PHP, HTML, and JS. But I have searched a ton of forums and cannot for the life of me figure out how to do this. Anyway Here is a link to my timeline. http://derikgrass.com/timeline/xml/2012-2014/pbj/index.html
And here is a link to the timeline embedded on my website using iFrame. http://www.derikgrass.com/events/?p=526
iFrame would work great only that the iframe needs to be much bigger than the timeline itself as the timeline extends when you click on events in the timeline as you can see from the links I provided. Here is the timelines html code:
<meta charset="utf-8">
<title>TimelineXML</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/timelinexml.sleek.css">
<section class="demo">
<p> <br/><br/> </p>
<div class="demo-box">
<div id="my-timeline">
<div class="timeline-html-wrap" style="display: none">
</div>
</div>
</div>
</section>
</div>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via build script -->
<script defer src="js/mylibs/timelinexml.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts -->
I want to embed this directly into specific posts I create. If anyone would be able to help me write the code in order to embed this timeline, I would be EXTREMELY appreciative. Thanks.
I think what you mean is that you just want to put his in your html
<iframe src="http://derikgrass.com/timeline/xml/2012-2014/pbj/index.html" scrolling="no" height="400" width="900"> </iframe>
And change the width.
But you should go to the source (so follow that link) and you'll see he uses a nice js file to make it work. If you do that you'll see he's using this script:
http://codecanyon.net/item/jquery-timelinexml/1448100
I don't like scripts from there seeing I believe they are funky websites, but hey, it's your computer and server. You decide.
I'm sure I remember doing this once but can't remember how.
What I'm trying to do is write a navbar in html in one place and have every page take the html code from the file and add it to the page when the page loads. PHP doesn't work (I suspect I need a server for PHP to work which I don't even intend to use)
Something like:
Navbar file:
<div>
other code...
</div>
Main webpage file:
<html>
<header>
</header>
<body>
</body>
<div>
put navbar file code here...
</div>
</html>
<iframe src="file_with_only_div_content.html" allowtransparency="true" frameborder="0"></iframe>
You mean http://en.wikipedia.org/wiki/Server_Side_Includes server side includes?
<!--#include virtual="../quote.txt" -->
Are these even supported anymore?
In order for a web server to recognize an SSI-enabled HTML file and therefore carry out these instructions, either the filename should end with a special extension, by default .shtml, .stm, .shtm, or, if the server is configured to allow this, set the execution bit of the file.