Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
Related
I am trying to reference external js file inside my html as follow, did I miss something? The pie chart is supposed to appear but I am not getting it.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_src
<script src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>
<div><span class="pie">1/5</span></div>
Your code has 4 main problems:
You didn't call jQuery inside the HTML document <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>, that must be called before the plugin
You called twice the plugin: both the minified and not minified version (if available, always request for the minified version since it's lighter)
You requested the plugin over HTTP instead the always better HTTPS
You didn't call the function inside the document with $(".pie").peity("pie")
Here's a working snippet.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://benpickles.github.io/peity/jquery.peity.min.js"></script>
</head>
<body>
<div>
<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span>
</div>
<script>
$(document).ready(function() {
$(".pie").peity("pie");
});
</script>
</body>
</html>
There are three changes to be made in your code.
You need to include jQuery.
You need to call the peity() function on the span.
You need not include both jquery.peity.js and jquery.peity.min.js. Including either one is sufficient.
See code below.
$(document).ready(function() {
$("span.pie").peity("pie");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>
<div><span class="pie">1/5</span></div>
Seems you have missed the JavaScript snippet
1. Loading order Should be changed ,
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("span.pie").peity("pie");
});
</script>
</head>
<body>
<div><span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span></div>
<body>
</html>
In addition to the other answers, your Dojo snippet isn't working because you're trying to load the Peity plugin over HTTP from a page being served over HTTPS. Your web browser console will tell you that the browser blocks loading mixed content from an HTTPS page.
Load peity.js from https://benpickles.github.io/peity/jquery.peity.js. But when you publish your site, download peity.min.js and host it on your own server. Github is not a CDN.
this is a very odd problem indeed and I hope it's simple. I cannot get a simple select and append to work in my html document, but it works when I'm in the chrome browser console.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="/js/script.js"></script>
<script>
$('[data-js="works"]').append("hello");
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
When I put that line of script in the console, hello appears above test. When I just open the page, test is there alone. I was running a script from this page earlier and when I tried to select an element it didn't work. I then went to inline script to see if it would even work there, no. I've seen if it works from inline script without the imported script, also no. Console has no bug information. I can print from that inline script to my console if I want, but this code still isn't running properly.
Doesn't work with my local httpserver and doesn't work just as a locally opened file.
This is because the script is executed before the page is loaded so the target div does not exist yet.
The solution is to wait for the page to be fully loaded before doing something.
The $ function can be used for this. Give it a callback and it will be executed once the page is loaded.
You can also use window.addEventListener("load", callback); that doesn't need jQuery.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script>
$(function(){
$('[data-js=works]').append("hello");
});
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
Another solution can be to insert your script at the end of the page. It is not as neat though in my opinion.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div data-js="works"></div>
test
<script>
$('[data-js=works]').append("hello");
</script>
</body>
</html>
Try the following, hope it will solve your problem
(function($) { // This will solve namespace problem (if any)
// Write your JQuery code here
})(jQuery);
Either you put the .js file at the end of the body or put your JS code between $(document).ready(function(){ //code inside })
I'm trying to install SoundManager's 360Ui player.
But i cant seem to nail it.
This is the jQuery code in my header:
<script type="text/javascript" src="wp-content/themes/medium/includes/js/soundmanager2-nodebug.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/excanvas.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/berniecode-animator.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/360player.js" charset="utf-8"></script>
...
<script type="text/javascript">
//some soundmanager settings
soundManager.url = 'wp-content/themes/medium/swf/';
soundManager.flashVersion = 9;
soundManager.useHTML5Audio = true;
soundManager.debugMode = false;
</script>
And the HTML call:
<div class="ui360">
<!-- dynamically-inserted block -->
<div class="ui">
<canvas class="sm2-canvas"></canvas>
<span class="sm2-360btn"></span>
<div class="sm2-timing"></div>
<div class="sm2-cover"></div>
</div>
<!-- /UI -->
<a href="http://**.**.**.**:8000/live">
</div>
For some reason the small play button appears and a second later disappears.
I'm looking to place the big player demo but i cant seem to
properly initiate that player.
All js files and css files from Demo folder are registered.
My Website
Its supposed to appear on the left panel.
if you examine the firebug console you will see that a GET request to http://tranceil.fm/new/readerPlayer.php return a 301 redirect, that might be causing the issue
I know this was asked a couple of years ago, but I was stuck on the same thing and here is how I solved it.
There is a second CSS file called 360player-visualization.css that you need to include.
<link href="360-player/360player.css" rel="stylesheet">
<link href="360-player/360player-visualization.css" rel="stylesheet">
Then in the HTML, include ui360-vis class name as well.
<div class="ui360 ui360-vis">
</div>
Just as you had it, you should also have a custom CSS to increase the size of the player:
.ui360,
.sm2-360ui {
width:250px;
height:250px;
}
And as you had it, the three required JS files:
<script src="360-player/script/berniecode-animator.js"></script>
<script src="soundmanager2-nodebug-jsmin.js"></script>
<script src="360-player/script/360player.js"></script>
Somehow even the simplest ground up impress.js slide does not work for me :( http://dl.dropbox.com/u/655237/events/GTG.zip … , Always have to use your example.
<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">
<div id="start">
<p style='width:1000px;font-size:80px;
text-align:center'>Creating Stunning Visualizations</p>
<p>Impress.js </p>
</div>
<div id="slide2" data-x="-1200" data-y="0">
<p style='width:1000px;font-size:80px;'>
First Slide Moves From Left To Right</p>
<p>Impress.js </p>
</div>
</div>
<script type="text/javascript">impress().init();</script>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>
And I have the impress.js file under the js directory.Still none of the latest browser show the slides . I am using firefox 16.
You're calling impress before loading the library, try switching the order of your script tags:
<script type="text/javascript" src="js/impress.js"></script>
<script type="text/javascript">impress().init();</script>
Alternatively use a ready handler function to initialise your page scripts, like window.onload or jquery's ready(). For more on this see this question.
Also, going by the impress examples, in the simplest case each step of the presentation should be an element inside the #impress element with a class name of step.
Ok, I made 2 posts about this but somehow I can't get it into my little mind.
So I concluded that if we have something like this:
<script type="text/javascript" src="somefile.js"></script>
<script type="text/javascript">
func1();
</script>
and func1() is defined in somefile.js, it is guaranteed to run when browser reaches that inline .
However, what if I have a big page (not taking into account images etc, just html) that takes a few seconds to load and for DOM to become ready (as I understand the DOM becomes ready when the whole html code has been loaded and parsed) and I want some code to be executed and work on parts of the page that have been loaded while the rest of the big page is still loading?
For example something like:
<div id="div1">Some div where content will be inserted by the inline javascript below</div>
<script type="text/javascript"> notifyPartLoaded("div1"); </script>
^^ Does something like this exist?
I'm not certain what your question is, but a simple way to ensure DOM ready is to place your JavaScript at the bottom of the HTML, just in side the closing </body> tag.
<!doctype html>
<html>
<head>
<title>some title</title>
<!-- this script could go toward the bottom too, but it must be before -->
<!-- your script if your script relies on it -->
<script type="text/javascript" src="somefile.js"></script>
</head>
<body>
<div id="div1">Some div where content will be inserted by the inline javascript below</div>
<!-- your HTML -->
<!-- your HTML -->
<!-- your HTML -->
<!-- Place your script last -->
<!-- ...though it would be better to have it in a separate file -->
<script type="text/javascript"> notifyPartLoaded("div1"); </script>
</body>
</html>
Because your code is after all the other elements, they will exist for manipulation when your code finally loads and runs.