I'm using OnePageScroll.js for my Drupal website but somehow the Javascript file isn't doing anything. Everything is perfectly imported, even the .js file. I put an alert box in it and it works but somehow he doesn't do the rest.
Link to OnePageScroll.js
<section class="page1">
<div class="page_container">
<h1>One Page Scroll</h1>
</div>
</section>
<section class="page2">
<div class="page_container">
<h1>One Page Scroll2</h1>
</div>
</section>
When I open it in a simple .html file then I have result but when I upload it to my server to my Drupal website then it doesn't do anything. I noticed the JS file doesn't add the extra class to certain divs..
edit:
The jQuery files I added:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
I would say you have not linket the jQuery files correctly. Plain alert works even if you do not have jQuery linked because it is plain javascript. Try to alert the following in order to find out:
alert($("div:first").text());
Related
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 am developing using jQuery mobile and it has a multipage template as below.
I feel that writing html content inside the same html is bloated.
As such, i would like to separate the content in different html and include standalone html page. It should be mobile browser proven. What is the best practice on this and how it could be done?
Note: I do not expect server side scripting (eg: PHP) to solve this problem. It should be done solely on client side without any templating engine. Something like angularJS ng-include.
Sample of what i expect
<div data-role="page" id="foo1">
<html-include src="foo1.html"></html-include>
</div>
Mobile html multipage
<div data-role="page" id="foo1">
<!-- Content 1 here -->
</div>
<div data-role="page" id="foo2">
<!-- Content 2 here -->
</div>
<div data-role="page" id="foo3">
<!-- Content 3 here -->
</div>
<div data-role="page" id="foo1" data-url="foo1.html">
</div>
And use javascript like so:
$('[data-url]').each(function (k,elem){
$(elem).load(elem.data('url'));
});
This will find all elements that have data-url as attribute, and load that page in AJAX, takes the html received and put in it the corresponding html element.
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.
I am looking at using Angular JS to mamange my HTML builds more effectively and am trying my hand at templating some of my HTML. However, it doesn't seem to work? I have;
<div class="container">
<div ng-include='"templates/menu.html"'></div>
<div class="row">
<div class="col-xs-12">
<h1>Hello, baby!</h1>
<p>This is the first ever Angular JS I have ever done.</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="_includes/scripts/bootstrap.min.js"></script>
<script src="_includes/scripts/angular.js"></script>
Then I created a folder called, templates, where I have placed a HTML file, called menu, containing a navigation ul saving his obviously as menu.html. When I view index.html in my browser the menu is not rendered. Any help welcome. Thanks
Updated answer (summary of discussion below).
Working example in: http://jsfiddle.net/uo04c05h/
Angular should be started by ng-app directive
<div ng-app class="container">
Path to files is relative to the file where angular is initiated
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.