Why isn't the javascript in my html working? - javascript

I'm running it in vscode and when I run my site, the spot where the javascript should be, is just a blank area. I tried a console.log message to test it and that isn't coming through either.
Here's where I'm trying to add a progress bar.
<p class="infoBox">
<h3>Skills</h3>
<h4>Computer Languages</h4>
Java <div id="container"></div></br>
Python</br>
Here's my javascript.
<script type="text/javascript" src="/require.js">
console.log("Hello World!"); // a test for js and it's not showing up in chrome's console
var ProgressBar = require('progressbar.js');
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});
bar.animate(1.0);
</script>
Here's my css.
#container {
margin: 20px;
width: 400px;
height: 8px;
}
Here's what's coming up when I run it.

You mixed something up. if you use <script src=""></script> you tell the browser to import a js library (in your case require.js). The contents between <script> and </script> are then ignored.
If you want to execute javascript code you have two options.
Option 1: Inline Javascript like this:
<script src="require.js"></script>
<script>
console.log("test")
</script>
Option 2: Create your own .js file and extract the code there:
<script src="require.js"></script>
<script src="your_own_js_file.js"></script>

If src is in the tag it will not read its contents. Simply remove the src and it should work.

According to your source variable container is undefined, so you try to set the progress bar to an empty container. So either assign value '#container' to your variable or just replace new ProgressBar.Line(container, with new ProgressBar.Line("#container",
And yes, you need to split and your script like
<script src="/require.js"/>
<script>
Your script here
</script>

Since you are using the id of the div element to render the progress bar, you need to load the javascript code after the window is loaded.
index.js
window.onload = function onLoad() {
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: { width: '100%', height: '100%' },
});
bar.animate(1.0);
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ProgressBar.js - Minimal Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
margin: 20px;
width: 400px;
height: 8px;
}
</style>
</head>
<body>
<p class="infoBox"></p>
<h3>Skills</h3>
<h4>Computer Languages</h4>
<p>Java</p>
<div id="container"></div>
<p>Python</p>
<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/0.5.6/dist/progressbar.js"></script>
<script src="index.js"></script>
</body>
</html>

Related

Open tinymce editor upon clicking icon

Upon loading the page, I wish the tinyMCE editor to be closed. Upon clicking an element (and not the text, thus I don't think I should use inline mode), I wish to open it. I've found a couple ways of doing so. Is there a "right" way, and if so, what is it?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js" type="text/javascript"></script>
<style type="text/css">
#content {height:200px;width:400px;border: 1px solid;}
</style>
<script type="text/javascript">
$(function(){
// Don't want this as I want to edit upon clicking "edit" and not inline
tinymce.init({
selector: '#content',
width : 400,
height: 200,
inline: true,
});
// Don't like this as I think it is ineffient, and the screen flickers
$('#edit').click(function(){
tinymce.init({
selector: '#content',
width : 400,
height: 200
});
});
// Is this how I should do it?
tinymce.init({
selector: '#content',
width : 400,
height: 200,
setup : function(ed) {
ed.on('init', function(e) {
e.target.hide();
});
}
});
$('#edit').click(function(){
//BOth seem to work. What is the right way?
//tinymce.editors['content'].show();
tinymce.get('content').show();
});
});
</script>
</head>
<body>
<div id="content">Initial content goes here</div>
<button id="edit">Edit</button>
</body>
</html>

Polymer 1.x: Wrapping a jQuery range slider inside a Polymer element

I'm trying to wrap the ion.rangeSlider inside a Polymer element but I'm having trouble getting it working in a jsBin.
Here is the documentation.
Here is a working jsFiddle.
Here is my non-working jsBin.
Please show me how to get this working in a jsBin.
http://jsbin.com/dopanumada/1/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
/** /
References:
http://jsfiddle.net/IonDen/qv6yrjrv/
https://github.com/IonDen/ion.rangeSlider#experiments-playground
/**/
body {
margin: 40px 15px;
font-family: Arial, sans-serif;
font-size: 12px;
}
.range-slider {
position: relative;
height: 80px;
}
.extra-controls {
position: relative;
border-top: 3px solid #000;
padding: 10px 0 0;
}
</style>
<div class="range-slider">
<input type="text" class="js-range-slider" value="" />
</div>
<div class="extra-controls">
Placeholder for some buttons to change slider behavior
</div>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
}
});
})();
</script>
<script>
$(document).ready(function () {
var $range = $(".js-range-slider");
$range.ionRangeSlider({
type: "double",
min: 100,
max: 1000,
from: 300,
to: 800
});
});
</script>
</dom-module>
<x-element></x-element>
</body>
Update: It partially works as shown here when I do the following.
Move the second <script> tag outside the Polymer element template and into the main document body (light DOM).
Add the jQuery library resource in the <head>.
Remove the $(document).ready(function(){
But I still need to get it to work with the javascript inside the Polymer element template.
You were close with your partially working example, where you called the ionRangeSlider function in ready. However, you first need to call the jQuery function $() with the slider input as an argument.
ready: function(){
$(this.$.slider).ionRangeSlider({
type: "double",
min: 100,
max: 1000,
from: 300,
to: 800
});
}
Here's a working jsBin

jQuery .animate() only animates in Chrome, instantaneous change in other browsers

I have looked at other posts and there is a running solution involving "event" however I can't see how that fits into my code. As it stands the .animate() function, more specifically the duration functionality, doesn't seem to work unless I use chrome.
Here is my code.
index.html
<title>Quests Development Space</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html"; charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<div id="circle"></div>
javascript.js
$(document).ready(function() {
$("#circle").click(function() {
$(this).animate({
borderRadius:"0px"
}, {
duration: 1600
});
});
});
I have tried iterations without the ",{duration: x}" and just ", 1500" as I have seen it used both ways however neither works in anything except Chrome.
The function turns a circle into a square and still does in all browsers however it is only animated in Chrome.
Edit:
stylesheet.css
#circle {
height: 100px;
width: 100px;
border-radius: 50px;
background-color: blue;
}
Here is the CSS for those who asked though as I said it does work just only animates on Chrome.
Edit 2:
Breaking News!
It seems it is animating however it is "blinking" to border-radius 0 then animating inwards.
Try this code snippet:
$(function() {
$("#circle").click(function() {
$(this).animate({
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
WebkitBorderTopLeftRadius: 0,
WebkitBorderTopRightRadius: 0,
WebkitBorderBottomLeftRadius: 0,
WebkitBorderBottomRightRadius: 0,
MozBorderRadius: 0
}, 1600);
});
});
You need to set all cross browser border radius properties to run it across all the browsers.
Plunker

Raphael. Text using the print (). Why not work?

I want to write text with the print () function. I added cufon file. Unfortunately, the text is not displayed. Why? Please help me.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js" type="text/javascript"></script>
<script src="raphael.js" type="text/javascript"></script>
<script src="harabara.cufonfonts.js" type="text/javascript"></script>
</head>
<body>
<script>
window.onload = function() {
var r = new Raphael('holder', 640, 480);
var font1 = r.getFont("Harabara");
var text1 = r.print(10,100, "click me", font1, 48).attr({"stroke-width": 3, fill: "red", "stroke": "blue"});
};
</script>
<style type="text/css">
#holder { width: 640px; height: 480px; border: 2px solid #aaa; }
</style>
<div id="holder"></div>
</body>
One thing I see right away:
var text1 = r.print(10,100, "click me", font1, 48).attr({"stroke-width": 3, fill: "red", "stroke": "blue"});
returns a Raphael path object. So you need to assign that path to your Raphael paper.
Paper.print() Creates path that represent given text written using
given font at given position with given size. Result of the method is
path element that contains whole text as a separate path.
http://raphaeljs.com/reference.html#Paper.print
Have not tested it yet, but just leaving the code the way you wrote will not print anything to the paper.
One more thing: keep your style tags in your header.

div or span that dynamically/continually changes width

I have the example code from jQuery animate
and I would like to make the div expand automatically based on a counter, based on the time, as the counter or time changes the div gets wider. I can't figure out how to use a variable to replace the width: "70%"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<style type="text/css">
div {
background-color:#bca;width:100px;border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<title></title>
</head>
<body>
<button id="go">» Run</button>
<div id="block">
Hello!
</div>
<script type="text/javascript">
/* Using multiple unit types within one animation. */
$("#go").click(function(){ $("#block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );});
</script>
</body>
</html>
Please sample code to use a variable for width:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<style type="text/css">
div {
background-color:#bca;width:100px;border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<title></title>
</head>
<body>
<button id="go">» Run</button>
<div id="block">
Hello!
</div>
<script type="text/javascript">
var someWidth = "70%";
/* Using multiple unit types within one animation. */
$("#go").click(function(){ $("#block").animate({ width: someWidth, opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );});
</script>
</body>
</html>
You can use relative animation by specifying += as follows
$("#go").click(function(){
$("#block").animate({
width: "+=5%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
This will expand div by 5% every time function is called.Adjust it fit your need.
Rather if you would like to animate on interval basis call this function in setInterval.This will call animate every 2000 milliseconds.
setInterval( function(){
$("#block").animate({
width: "+=5%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
},2000);

Categories

Resources