Extending the portable version

jdc20181 edited this page Oct 3, 2017 · 7 revisions

Version 1.3.0 will include some changes - Coming soon

The New Portable version was released not too long ago, and I want to get more features, but there isn't much I can include, since the respo itself is always changing. Remember to only use the portable version, don't use other script files, or CSS files throughout the respo. All Code presented is code within the project, and is licensed under the MIT license.

You will need to complete The Basic Setup before continuing, and it is also assumed you completed it.

Features:

Adding a Loader

Basic knowledge of 'CSS' & 'JS' arerequired to properly set this up.

A Loader is more of a visual context not really doing anything, at least for this project.

The animation is done in 'CSS' while the delay, and the showing of the page is controlled in 'JS'

Step 1 Add the initalizing JS

The following script will take care of the overall loading of the page. And will be the only JS needed.

<script> var myVar; function loader() { myVar = setTimeout(showPage, 3000); } function showPage() { document.getElementById("loader").style.display = "none"; document.getElementById("myDiv").style.display = "block"; } </script>

Important Best practice is placing it near the closing of the body tag in your HTML.

Step 2 Adding some HTML

You need to call the loader() Function into your HTML like this:

<body onload="function()">

After this you want to add this:

<div id="loader"></div>

This initializes the loader.

Next, you want to add this and end it right before the script that intializes the loading.

<div id="myDiv">

Step 3 Adding the Styling

Because there are options with the css, it isn't posted here. You can use the default version - by linking to the following : http://jdc20181.github.io/SpeedTest/Release/loader.css

You can also use the code from this file by going to the Release Folder, and finding the loader.css file.

Adding IP

The IP Feature in SpeedTest was removed, and replaced with a external libary -

I take no responsibilty for this code, I did not create the code that shows your IP, and do not warrant any information collected from the third party resource.

You need to add this where you want it showed on the page.

`<script type="text/javascript"> var userip; </script>

<script type="text/javascript" src="https://l2.io/ip.js?var=userip"></script> <script type="text/javascript"> document.write("Your IP is :", userip); </script>`

DO NOT merge the scripts, keep them in two different ones, I assume this is how it is suppose to be, as it is the exact thing that was presented on the third party site.

Formatting for Mobile Users

This will not be hard but - use media queries.

SpeedTest uses a certain configuration, and it will depend on your overall design.

You can find out about responsive media querires by going here

If you are using Self hosted wordpress and other platforms, your site should automatically be responsive.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.