I am trying to show two spark line graphs using jQuery Sparklines but for some reason i only shows me one, this is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.sparkline.min.js"></script>
</head>
<body>
<div id="graphs">
<span id="sparkline"></span>
<br>
<span id="sparkline2>"></span>
</div>
</body>
<script>
$("#sparkline").sparkline([74.82290216,
74.82290216,
48.70129726,
70.77921869,
72.07791995,
69.15584211,
74.05548778,
76.91853079,
70.24792886,
80.34237956], {
type: 'line',
width: '100',
height: '50'
});
$("#sparkline2").sparkline([74.82290216,
74.82290216,
48.70129726,
70.77921869,
72.07791995,
69.15584211,
74.05548778,
76.91853079,
70.24792886,
80.34237956], {
type: 'line',
width: '100',
height: '50'
});
</script>
</html>
As you can see i have two spans with two different id's and still i get only the first one.
I even tried to load to the same span but it makes no difference.
Thanks
Related
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>
I'm using a calendar app to connect multiple different calendars. The way they show the calendar is not really suitable for me so I've been trying to change the JavaScript but as soon as I try to call another version, even if it is exactly the same the calendar don't show, so is there some way to use my own JavaScript? I've tried contacting the creator of the app but no luck.
Working code
<script type='text/javascript' src='https://panel.bed-booking.com/widget/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='https://panel.bed-booking.com/widget/main_full.js?ver=20180768'></script>
<div id='bb-calendar-0'>
<center>
<img style='width:50px !important; height:50px !important;' src='https://panel.bed-booking.com/widget/gfx/loader.gif' alt='' /><br/>
<a href='http://bed-booking.com' style='color:#73b819 !important' rel='nofollow'>BedBooking</a>
</center>
</div>
<script type='text/javascript'>
jQuery(document).ready(function() {
new CalendarFull(
'0097661bc090e1ca78b844285df5a9c1',
'0',
'bb-calendar-0',
{
normal: '7dbb2c',
reserved: 'fb1643',
nextMonth: 'ecf5e1',
font:'81817f',
width: 450,
lang: 'en',
showBBLink: 'none'
}
);
});
</script>
Test code with javascript at http://yourjavascript.com/31631229421/main-full.js
<script type='text/javascript' src='https://panel.bed-booking.com/widget/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='http://yourjavascript.com/31631229421/main-full.js'></script>
<div id='bb-calendar-0'>
<center>
<img style='width:50px !important; height:50px !important;' src='https://panel.bed-booking.com/widget/gfx/loader.gif' alt='' /><br/>
<a href='http://bed-booking.com' style='color:#73b819 !important' rel='nofollow'>BedBooking</a>
</center>
</div>
<script type='text/javascript'>
jQuery(document).ready(function() {
new CalendarFull(
'0097661bc090e1ca78b844285df5a9c1',
'0',
'bb-calendar-0',
{
normal: '7dbb2c',
reserved: 'fb1643',
nextMonth: 'ecf5e1',
font:'81817f',
width: 450,
lang: 'en',
showBBLink: 'none'
}
);
});
</script>
working fiddle
https://jsfiddle.net/0gk6L9pr/
test fiddle
https://jsfiddle.net/xq1t6ujv/
Next time, please make your code more readable, one giant blob of code doesn't help anyone (especially yourself, because you are the one that has to work with it).
The error is in the link you provided, because it doesn't contain anything? Just compare these two:
http://yourjavascript.com/64351117249/main-full.js
https://panel.bed-booking.com/widget/main_full.js?ver=20180768
One is completely empty and the other actually has something you can use.
I'm now make a some circle in the html. however I can't handle circles.js library.
Library URL : https://github.com/lugolabs/circles
My source code is below.
<!doctype html>
<html>
<head>
<script src="circles.js"></script>
<script>
Circles.create({
id: 'circles-1',
percentage: 43,
radius: 60,
width: 10,
number: 7.13,
text: '%',
colors: ['#D3B6C6', '#4B253A'],
duration: 400
})
</script>
</head>
<body>
<div id="canvas">
<div class="circle" id="circles-1"></div>
</div>
</body>
</html>
Actually, I didn't learn how to use the javascript in the html. So I was in a trouble by using javascript. how know solve that? or give advices to study the javascript?
So I'm adding an Elessar slider (found at https://github.com/quarterto/Elessar) to a website I'm working on. However I wanted to use more than one instance of it. The problem is that if I attempt to add a duplicate of the slider div, or more than two, only the last one will function (the others act like empty containers). I have sifted through similar questions in stack exchange, and so far the question
jQuery sliders: only last slider working on page with multiple sliders
is the closest to my issue. I've tried to fix my problem by
1) Copying and pasting the function statement for each div with their own unique variable,
2) Inserting the script
$( ".slider1" ).clone().appendTo( ".slider1" );
to the existing script to clone the same div more than once (a resolution suggestively found in the link above), and
3) Including the script
$(document).ready(function()
{
$('new').append("<div class='slider1'>"+r+"</div>");
});
in the existing script to append the slider properties to a new div.
But none of these have had luck. The existing html is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Elessar Slider</title>
<script type="text/javascript" src="../../JS/jquery/jquery.js"></script>
<script src="../../elessar/dist/elessar.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../elessar/elessar.css">
<script src="../../elessar/moment/moment.js"></script>
<script src="stylesheet" src="../../elesser/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../elesser/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../../elesser/bootstrap/dist/css/bootstrap-responsive.css">
<style>
body {
font-family: Arial, sans-serif;
}
h1, h2 {
font-family: Arial, sans-serif;
font-weight: 100;
}
h1 {
font-size: 60px;
}
.elessar-handle {
opacity: 0.1;
}
header .pull-right {
margin: 10px 0 0 10px;
padding: 9.5px;
}
</style>
</head>
<body>
<!--Div to be copied--!>
<div style="width: 650px;">
<div class="slider1" class="container" role="main"></div>
</div>
<!----!>
<script>
var r = new RangeBar({
min: moment().startOf('day').format('LLLL'),
max: moment().endOf('day').format('LLLL'),
valueFormat: function (ts) {
return moment(ts).format('LLLL');
},
valueParse: function (date) {
return moment(date).valueOf();
},
values: [
[
moment().startOf('day').format('LLLL'),
moment().startOf('day').add(1, 'hours').format('LLLL')
],
[
moment().startOf('day').add(1.5, 'hours').format('LLLL'),
moment().startOf('day').add(3.5, 'hours').format('LLLL')
],
],
label: function (a) {
return moment(a[1]).from(a[0], true);
},
snap: 1000 * 60 * 15,
minSize: 1000 * 60 * 60,
barClass: 'progress',
rangeClass: 'bar',
allowDelete: true,
});
$('[role=main]').prepend(r.$el).on('changing', function (ev, ranges) {
$('pre.changing').html('changing ' + JSON.stringify(ranges, null, 2));
}).on('change', function (ev, ranges) {
$('pre.changing').after($('<pre>').html('changed ' + JSON.stringify(ranges, null, 2)));
});
</script>
</body>
</html>
The rest of the slider function is found within elessar.js linked at the top. I'm grateful for any help with this!
add different role attribute.
<body>
<div style="width: 650px;">
<div class="slider1" class="container" role="main"></div>
</div>
<div style="width: 650px;">
<div class="slider2" class="container" role="main1"></div>
</div>
</body>
Fiddle
To clarify: the role attribute in the demo isn't important, I'm just using it as a selector. When you copy the div you end up with two elements with the same role, and jQuery selects both. You could use classes instead.
(I have tightened up my original example)
I'm trying to invoke modal dialogs from within a tabbed UI, and I'm confused about the behavior I'm seeing. The first time I display the UI, my dialog behaves as expected, I can pull the data out of the fields, everything's wonderful.
tabtest2.html:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabtest 2</title>
<link rel="stylesheet" type="text/css" href="js/css/smoothness/jquery-ui-1.7.2.custom.css" media="screen"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var tabs = $('#tabs').tabs({
load: function(event, ui)
{
initializeUI();
}
});
});
function initializeUI()
{
jQuery("#button1").click(function()
{
$(initializeUI.win).dialog("open");
});
$(initializeUI.win) = jQuery("#window1");
//instantiate the dialog
$(initializeUI.win).dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Create Agent',
overlay: { opacity: 0.5, background: 'black'},
buttons:
{
"Check Text 1": function()
{
var t1 = $("#text1");
alert("text 1 = " + t1.val());
},
"Close": function()
{
$(initializeUI.win).dialog("close");
}
}
});
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Tab1</li>
<li>Google</li>
</ul>
</div>
</body>
</html>
And tab1.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tab 1</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
</head>
<body>
<button id="button1" class="ui-button ui-state-default ui-corner-all">Button 1</button>
<div id="window1" style="display:none">
<form>
<fieldset>
<label for="text1">Text 1</label>
<input type="text" name="text1" id="text1" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
</body>
</html>
This allows the dialog to (apparently) work on repeated tab selections, but when I try to change the contents of the text field and examine it, I get the old value (the value from the first invocation)!! It's as if I have created a new copy of the dialog and it's fields, but the original text field is sitting there unseen in the original dialog window, returning it's old results.
Obviously, there's a paradigm for handling these dialogs, divs and tabs that I haven't grasped yet. Anyone care to point out my errors?
In your example you are using the same remote content twice and more importantly, using the same ID in both tabs. After the content of the second page is loaded into the DOM, you will have two divs with the same ID. Since an ID is supposed to be unique on a page, the "old" values may simple be the values of the first div that javascript happens to find in the DOM.
You also appear to have two buttons with the id "button1"; one inside the modal div and one outside. This may also cause problems.
Using FireBug, I see that I create a new 'dialog' DIV element everytime I call InitializeUI(). So deleting the old DIVs seems to give me the desired results:
function initializeUI()
{
jQuery("#button1").click(function()
{
initializeUI.win.dialog("open");
});
initializeUI.win = jQuery("#window1");
// remove old 'dialog' DIV elements
$('div[role="dialog"]').each(function() {
$(this).remove();
});
//instantiate the dialog
$(initializeUI.win).dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Create Agent',
overlay: { opacity: 0.5, background: 'black'},
buttons:
{
"Check Text 1": function()
{
var t1 = $("#text1");
alert("text 1 = " + t1.val());
},
"Close": function()
{
initializeUI.win.dialog("close");
}
}
});
}