I am trying to implement LoadingBar.js on my website.
I tested a JSFiddle that works fine : https://jsfiddle.net/sg2uz3jx/
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css" />
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<div class="ldBar" data-value="70" style="width:200px;height:100px" data-stroke="yellow" data-preset="line"></div>
But when I copy/paste it inside my website it just makes an empty space and does not show anything.
Here is an example of what it does in my website with source code highlight:
Do you have an idea why it would do that ?
Your snippet works on Vivaldi (which it looks like you're using) and Chrome fine. Without the rest of the code for your page it's hard to say why it isn't showing for you. Try temporarily removing any other scripts one by one that might be interfering with loading-bar.js and work back from there. Or post the full page code for further analysis.....
From what I can see in the image you included in the question, you are including the next plugin library code:
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
Inside the html markup structure where you want to create a progress bar, i.e, you are doing something like this (if we assume you create more than one progress bar):
<html>
<head>
<!-- Here are your head stylesheets and meta-tags -->
</head>
<body>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur</h3>
<br>
<!-- Starts the wrong including of the plugin library -->
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<!-- Ends the wrong including of the plugin library -->
<div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur 2</h3>
<br>
<!-- Starts the wrong including of the plugin library -->
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<!-- Ends the wrong including of the plugin library -->
<div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
</body>
</html>
So, instead of the previous wrong (and maybe multiple including) of the plugin library, you have to put the plugin styleshet on the head tag (Discussion about this) and the plugin javascript file only one time on the body tag. Like on the next example:
<html>
<head>
<!-- Here are your head stylesheets and meta-tags -->
<!-- Include stylesheet of loading-bar plugin -->
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
</head>
<body>
<!-- Include Javascript needed for loading-bar plugin -->
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur</h3>
<br>
<div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur 2</h3>
<br>
<div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
</body>
</html>
If after this, the error persist, then check the developer console in search of some errors and update your question with a more precise explanation.
Related
I'm getting the error shown below from jquery when I try to used from a web page in a nested directory. How do I prevent this error.
This is what the directory structure looks like. (Using <script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script> from the circled index page works)
I've tried referencing jquery using each of these from the circled StartHere.html page:
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
OR
<script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script>
This is the error I'm getting
jquery.min.js:5 GET https://nachc-cad.github.io/fhir-to-omop/pages/navbar/getting-started/start-here/site_libs/jquery-1.11.3/jquery.min.js?_=1646571234525 404
EDIT: Per the question in the comments: I am loading JQuery twice as shown below.
In the main file:
<html>
<head>
<!-- favicon link -->
<link rel="shortcut icon" type="image/x-icon" href="../../../../favicon.ico">
<!-- include lib code -->
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
<div id="headerInclude"></div>
<script>$("#headerInclude").load("/fhir-to-omop/header.html");</script>
</head>
<body>
<div class="container-fluid main-container">
<!-- navbar -->
<div id="navbarInclude"></div>
<script>$("#navbarInclude").load("/fhir-to-omop/navbar.html");</script>
...
</div>
</body>
</html>
And then this exists at the top of the loaded navbar.html:
<!-- navbar -->
<head>
<!-- include lib code -->
<script src="site_libs/jquery-1.11.3/jquery.min.js"></script>
</head>
I want to add carousel on my website but it seems that data-ride isn't highlighted in my code. It is perfectly highlighted in stackoverflow, but not in Notepad++. Lately I've noticed that other data-... attributes aren't highlighted also. I expect there to be carousel, but images are just stacked. Here is the picture https://i.stack.imgur.com/7BFhr.png
<!-- SLIDESHOW-->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<!-- indicators dot nav-->
<!-- wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/tepih1.jpg" alt="tepisi" />
<div class="carousel-caption">
<h1> Tepih1 </h1>
</div>
</div>
<div class="item">
<img src="images/tepih2.jpg" alt="tepisi" />
<div class="carousel-caption">
<h1> Tepih2 </h1>
</div>
</div>
</div>
<!-- controls or next and prev buttons-->
Not sure what you mean about the data-ride attribute not being highlighted by Notepad++. If none of what follows solves your problem, please post a screenshot (the StackOverflow question editor has a toolbar button for uploading a picture).
Suggestions:
(1) Try referencing the bootstrap files from a CDN - that will test that it is not a "can't find the file" problem.
<head>
<!-- Other stuff in head... goes here... -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
(2) do you have any errors in the dev console (F12) ?
If the same code works in place1 but does not work in place2, the problem isn't the code - it's the environment. Most likely, bootstrap files not being found.
(3) For bootstrap 4, you know that you need to load four files, right? (a) The css, (b) jQuery, (c) popper javascript file, and (d) bootstrap js (loaded in that order - at least, the jQuery must be loaded before the bootstrap js files)
My overall intention is to over-ride the .click function of an element with a certain id, so that a button will replace only the contents of a specific element (not the whole page).
I am under the impression that I am running into trouble when embedding the script file, or in some of the coding in the script file.
I have come to this conclusion due to the fact that when my HTML and JS files are pasted into their respective windows on JSFiddle.net, that it works.
However, when I try to run the file from localhost, it is as though my .js file is not over-riding the .click function.
Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="./scripts/navScript.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- COURSES page -->
<div data-role="page" id="noteVote">
<div data-role="header" align="middle" class="header">
<img src="./images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- This is the Navbar -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
</div>
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="coursesContent">
Main section
</div>
<!-- FOOTER -->
<div data-role="footer" class="footer">
SomeText
</div>
</div>
<!-- /COURSES -->
<!-- SEARCH -->
<div data-role="page" id="search">
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="searchContent">
<h1>Search Section</h1>
</div>
</div>
</body>
</html>
I believe I have linked the scripts in the correct order: JQuery, my_custom, JQuery Mobile.
So is it in my custom script that there is the error?
$("#searchButton").click( function() {
$('#coursesContent').html( $('#searchContent').html() )
});
If there is a better/easier way to do this, please let me know.
I have searched the internet for solutions, and I found that the order in which the scripts are loaded is important. I also tried inserting my script code inside a "$(document).bind("mobileinit", function(){ " function, which did not yield the results I'd hoped for.
I'm obviously quite new to JavaScript, and JQuery.
Thanks for your help, people.
You're right - order of the script is important (all lib's have to be loaded before you can refer to them).
You may use alternative javascript for this purpouse:
$(document).ready(function()
{
$(document).on("click","#searchButton",function(e)
{
e.preventDefault();
alert('And now what? Click will not take me anywhere...');
$('#coursesContent').html($('#searchContent').html());
});
});
Try to put this code at the bottom of the page (before </body>) and check browsers console for any other JS errors.
This is working example: http://jsfiddle.net/3Qaq7/1/
I use kleeja upload script and i want to add progressbar when uploading files
I search for this a long time but i can't add this progressbar
I find many exemples with jquery but i can't add them to script
I use css style for the progressbar and javascript codes
In This Exemple when upload complete the dowload links not appear
Please help me to solve this problem
I put these codes in header templates
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript" src="js/script.js"></script> and this one the index_body template
<!--progress bar-->
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
</div>
<!-- /Progress bar -->
js and css folders http://www.gulfup.com/?fkUhK6
I'm new to foundation and I'm trying to make some nice tabs with various content. To do so, I'm using their documentation. However, it doesn't work like it's supposed to do.
Averything works fine, except that that sections don't cover each other. Each section is placed after the other, even when the other is hidden. Here is an example :
As you can see, this is pretty ugly. Here is my code :
<meta name="viewport" content="width=device-width" />
<title>Test Page</title>
<link rel="stylesheet" href="/autoPA/static/css/normalize.css" />
<link rel="stylesheet" href="/autoPA/static/css/foundation.css" />
<link rel="stylesheet" href="/autoPA/static/css/dynamease.css" />
<script src="/autoPA/static/js/vendor/custom.modernizr.js"></script>
</head>
<body>
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title>
Section 1
</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>
Section 2
</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
<!-- Check for Zepto support, load jQuery if necessary -->
<script>
document
.write('<script src='
+ ('__proto__' in {} ? '/autoPA/static/js/vendor/zepto'
: '/autoPA/static/js/vendor/jquery')
+ '.js><\/script>')
</script>
<script src="/autoPA/static/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Do you guys see anything wrong in it ? (Each file included is found, firebug doesn't detect any errors).
Try adding:
<script src="/autoPA/static/js/lib/foundation/foundation.section.js"></script>
...to the bottom of your page.
BTW, I can't get mine to work either :-/
UPDATE: foundation.min.js already contains foundation.section.js My bad!