What are the requirements to add onepagescroll on my website? - javascript

I want to add onepagescroll on my website, I find it difficult to solve this problem, maybe because I am still learning stage.

You have to structure your page like so:
<body>
<div class="main">
<section>...</section>
<section>...</section>
</div>
</body>
Each of those section tags represent a "page", so when you scroll it just scrolls to the next section.
You also have to add jquery, the onepagescroll plugin and a script that calls the plugin on your main element
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> //embed jquery
<script src="path/to/the/plugin/file.js"></script> //embed plugin
<script>
$( document ).ready(function() { //wait for jquery
$('#main').onepage_scroll(); //start the plugin
});
</script>
You may also check the plugins documentation, which was mentioned by Barmar or follow a tutorial to create a demo page.

Related

Javascript function works on JSFiddle but not in my HTML document?

So, I found a code/function I wanted to use on this site here: stackoverflow
I then copied the code from the second answer, did some small changes and tested if it actually worked, and I found out it did not. All of the functions from the link work on JSFiddle tho, but none of them work for me in my html document.
I did < script>, didn't work. I tried to make a separate .js document, but the code was still not working.
<body>
<div id="bokse2"></div>
<div id="boksi"></div>
<script src="test.js" type="text/javascript"></script>
<script>
$(function() {
$('#bokse2').click(function() {
$('#boksi').css('margin-left', '-=10px');
});
});
</script>
</body>
The big box (boksi) should move 10 pixels to the left by clicking on the smaller box (bokse2). Just like it does here: JSFiddle
You are missing the include to the jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

How do I apply loaded javascript and css to .load() content?

I am loading .html content with jquery .load() but the javascript and css is not applied to the one.html/two.html after it is loaded by the .load() function.
Example below:
<head>
<style> styles1 </style>
<link href="stylesheets/style2.css" rel="stylesheet">
<script src="script1.js">
<script>
$(document).ready(function(){
$("button.os").click(function(){
fillmein = $(this).attr("target");
fillmeinfile = $(this).attr("target")+'.html';
$("."+fillmein).load("/contentfolder/"+fillmeinfile);
});
});
...
other scripts
...
</script>
</head>
<body>
<p>the css and any js is applied to this block</p>
<button class="os" target="one">replace</button>
<div class="one">I will be replaced by one.html</div>
<button class="os" target="two">replace</button>
<div class="two">I will be replaced by two.html</div>
</body>
I understand that the one.html/two.html is loaded after the styles and javascript is loaded by the browser but how I get the styles and javascript that is in the <head> to apply to the newly loaded one.html/two.html?
I new to jQuery so let me know how I clarify if needed. thanks!
EDITED
Thanks for providing answers everyone! Updated the code example to clarify what I meant.
copying the <style> and <script> into the one.html and two.html works but if I load the javascript twice it could conflict. for example, having logic that searches $(document), and functions that collapse and expand a section can be called multiple times. Is it possible to have the js and css that was loaded in the main page work on the newly loaded .html files or is there any clean and DRY way to do this?
As suggested by Arun P Johny in his comment
You simply put your CSS inline on the target document and it will be automatically loaded along with the content.
You can write
$('button').on('click','Classname',function(){
//write your structure here
})
This will work for all tags with 'Classname',which are already present or dyanamically added later on.

Wikipedia-like references without JavaScript?

I have a blog with annotated references like [1] that.
[1]Jake Smith. http://example.com ..............
[2].............
I want it so the [1] in the text is an anchor that links to the [1] in the References. I know I could do this by doing something in the text like [1]and then making every list item in the references have an id, , that is, that is,
<ol>
<li id="ref1"></li>
...
</ol>
But that's a lot of work for me to go through all the blog posts. I'm sure I could make a JavaScript or jQuery function to add this functionality, but then it would not work with JavaScript disabled. So is there some other function I don't know? Like some fancy CSS trick, or should I just use JavaScript to do this?
What are your recommendations?
You could have the links inline so it displays normally when the user has JavaScript disabled. With JavaScript on, just style it as a Wikipedia reference.
Demo: http://jsfiddle.net/6A8nX/
Your options are:
A blog plugin that detects this in the content and forms the link and adds the related id to the appropriate element for you when the HTML is being output
A script that runs and does the same thing after the HTML has loaded.
Manually adding the links by hand.
A blog plugin is your best bet, since surely this is a solved problem (though it would depend on your blogging platform, of course).
CSS is for styling, it can't add links/ids.
In addition, remember that if you are ever going to display multiple blog posts on each page, you will want to add the blog id to the anchor as well. Instead of ref1, you'll want:
ref_[blogid]_[refid]
JavaScript and CSS are the way to go, if you cannot do this on the server side. The following will do what you want:
<html>
<head>
<style type="text/css">
ref {
display:none;
vertical-align:super;
font-size:small;
}
references {
display:block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
window.onload = function(){
$("references").append("<ol>");
$("ref").each(function(index) {
$("references").append("<li><a name=\"ref_"+(index+1)+"\">"+$(this).text()+"</a></li>");
$(this).html("["+(index+1)+"]");
$(this).css("display", "inline"); // hides references unless the script runs
});
$("references").append("</ol>");
}
</script>
</head>
<body>
<p>This is a reference.<ref>http://www.google.com</ref></p>
<p>This is a another reference.<ref>http://www.yahoo.com</ref></p>
<references>
</references>
</body>
</html>
CSS is for presentation, and does not provide logic. Javascript is the best answer in this case, because it provides the tools and logic you need to accomplish the task.

Progress image while page is loaded

Before I continue:
I am aware this has been done before.
I searched SO for this before deciding to post this...
Said that, I noticed that in some browsers that have settings to clear cache on every visit to a page, certain parts of my page show with delay. I would like to have a function that will display some animated image until the page is finished loading 100%.
I would like to place it in my header include file once and have it kick in every time a page loads. I think I need it to be implemented in AJAX. I would like this function to be a stand-alone, i.e. not tied to any other functions. Shall I use jQuery? Since jQuery itself requires loading an external file, should I implement it as a simple JS function?
Any feedback would be highly appreciated. Examples would be priceless.
:)
EDIT:
I found a plug-in that does exactly what I need.
With jquery you can do something like this
html
<div id="loader"></div>
$(window).load(function () {
$("#loader").fadeOut();
});
You can incldue a div with a loader (have it fixed, or absolute, whatever you like) and then with $(window).load( callback ); you can detect when the whole page has finished loading so you can hide the loader.
Or with pure JS you can do the same,
window.onload = function() {
document.getElementById('loader').style.display='none';
}
You can use the onLoad attribute for . Do something similar to:
<body onLoad='showLoadingDiv()'>
and make the showLoadingDiv function show a full-page white div with a loading sign.
Another (probably preferred) option is to have a
<div style='background:white; width:100%; height:100%'>LOADING</div>
and hide it as soon as the page completely loads, i.e. under jQuery's $(function() { });
This page includes some AJAX progress images to use.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript">
//window.onload will wait for images
window.onload = function() {
//find element with id='progress' and hide it
$('progress').hide();
}
</script>
</head>
<body>
<img id="progress" src="https://forums.embarcadero.com/servlet/JiveServlet/download/2-21014-135909-1751/progress2.gif" style="display:show;">
<h1="">This is a solar eclipse</h1>
<img src="http://www.zam.fme.vutbr.cz/~druck/eclipse/Ecl2008m/Tse2008_1250_mo1/Hr/Tse2008_1250_mo1.png" width="50%" style="display:show;">
<p>Pretty and large enough to have to wait for</p>
</body>
</html>
I hope this helps

jQuery (and all #links) Breaks When I Make Container/Parent Div .fadeIn on pageload - Why?

Thanks in advance for your help.
So I have a fully functioning page, but when I make the following changes, my jQuery accordion stops working on rollover and all of my navigation links (which point to #sections as it's a single-page scrolling site) stop working completely. Here is the deadly code:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#fadeDiv').fadeIn(3000);
});
});
</script>
</head>
<body>
<DIV ID="fadeDiv" style="display:none;">
... page here ...
</div>
</body>
All functionality which breaks is WITHIN the fadeDiv. It's worth noting that the links (a href="#section") can be IN a div that fades in and will work fine, but will break if, rather, I fade in the containing div of #section.
Weird.
why are you calling the document ready 2?
Does the jquery file pulled in?
your code should look like this
<script type="text/javascript">
$(document).ready(function() {
$('#fadeDiv').fadeIn(3000);
});
</script>
and add this to your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
and i would recomend putting the display none in css

Categories