I have a timeline in google created since a spreadsheet but I can´t include a vertical line to show the current date. Appreciate any help.
The code that is generating the timeline is:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="chart.js"></script>
<script type="text/javascript">
google.charts.load('current');
var myStoredString = '{"containerId": "example3.1",' +
'"dataSourceUrl": "https://docs.google.com/spreadsheets/d/13O7jpSMh1c9GcvP4FeFQr3ehiVYhRRoVGwkSN2SyoAY/edit#gid=0",' +
'"query":"SELECT A,B,D,E",' +
'"chartType": "Timeline",' +
'"options": {' +
' "alternatingRowStyle": true,' +
' "colorByRowLabel": true,' +
'}' +
'}';
function drawVisualization() {
google.visualization.drawChart(myStoredString);
}
google.charts.setOnLoadCallback(drawVisualization);
</script>
<div id="example3.1" style="height: 240px;"></div>
</body>
</html>
Related
code below.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['information technology'],
['web'],
['development']
]
);
var options = {
wordtree: {
format: 'implicit',
// word: ''
}
};
var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
</body>
</html>
issue:
expected three items to be rendered, however, we now have four including an erroneous "technology" while view source indicates correct rendering.
tested browser; firefox and chrome.
Can the following href="#" be called automatically?
<a id="loadBtn" href="#">Do stuff</a></p>
Thanks!
(Update) In the following facebook gallery launcher:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<script type="text/javascript">
$(document).ready(function () {
$('#loadBtn').click(function () {
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
return false;
});
});
</script>
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<p><a id="loadBtn" href="#">Get photo</a></p>
<div id="albumsContainer"></div>
</body>
</html>
Essentially to get to the action faster rather than having msc bits of text to click first.
you can set href attribute with whatever value you want as per below code:
$('#loadBtn').attr('href','#');
Not sure whether the href='#' is just for example purposes or what you're putting in your final code.
(1) If you want to scroll to the top of the page, you can either use $('body').scrollTop(0) or animate it a bit with something like $('html, body').animate( {scrollTop : 0 }, 200); (If you want to animate it, just attach it to #loadBtn's click event and be sure to return false, so the anchor won't jump to the top and override your animation.)
If you want, you can also set window.location.hash so the hash location will be recorded.
(2) If you want to simulate a click on the link, you can use .trigger(), e.g.: $('#loadBtn').trigger('click');
I think following code will work for you:
$("#loadBtn").ready(function(){
$(this).click();
});
Also try this in your onload function:
document.getElementById('yourLinkID').click();
// Automatically href will be called
Thanks for your pointers. It lead me to the idea of just rearranging the javascript so that the code was executed without need to click anything:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<!--p><a id="loadBtn" href="#">Get photo</a></p-->
<div id="albumsContainer"></div>
<script type="text/javascript">
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
</script>
</body>
</html>
I try to use the code from Defining a block helper with Handlebars to create a block helper. http://jsfiddle.net/6Jaya/ by #danii shows that it should work. But it doesn't. I get the following output:
Is this a bug or do I miss something?
app.js
App = Ember.Application.create();
Handlebars.registerHelper('link', function(options) {
var result = '<a href="http://www.example.com">'
+ options.fn(this)
+ '</a>';
console.log(result);
return new Handlebars.SafeString(result);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<script type="text/x-handlebars">
<p>
{{#link}}
<img src="http://placekitten.com/50/50">
{{/link}}
</p>
</script>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/ember.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>
Why don't you just use? Is there a specific reason for this?
Handlebars.registerHelper('link', function(value) {
var result = '<a href="http://www.example.com">'
+ value
+ '</a>';
console.log(result);
return new Handlebars.SafeString(result);
});
I have some text being displayed and I am using the Raphael JS library. I want the 'firstname' text to be size 25px, but it is not working. I am passing in a JS variable to the Raphael part and maybe that is part of the problem. If anyone could help me I would appreciate it.
<html>
<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
var string = "J\no\ne";
</script>
</head>
<body>
Text: <input type="text" id="words" value="" />
<input type="button" value="Animate" onclick="animate()" />
<div id='msg'></div>
<div id='num'></div>
<div id='letters'></div>
<!--<div id="letters2"></div>-->
<div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;">
</div>
<div id="elps" style="margin-left:100px;"/>
<script type="text/javascript"> //all your javascript goes here
var r = new Raphael("draw-here-raphael");
var firstname = r.text(95,100, string).attr({font: "25px"});
var name = r.text(100,100, string);
name.blur(1);
</script>
</body>
</html>
Try var firstname = r.text(95,100, string).attr({"font-size": 25});
Try calling the raphael js file after the jQuery file.
<script src="jquery-1.7.2.js"></script>
<script src="raphael.js"></script>
I'm working on code that will a message for first time visitors using ColorBox. I've been bootstrapping code, and this is what I have so far...
<html>
<head>
<script type="text/javascript">
<script src="../colorbox/jquery.colorbox.js"></script>
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>
<script>
function loadMsg()
{
$(document).ready(function(){
if ($.cookie('newsletter') != '0') {
$.colorbox({href:"newsletter.html"});
$.cookie('newsletter', '1', { expires: 60}); }
}}
</script>
</head>
<body onload="loadMsg()">
<h1>Hello World!</h1>
</body>
</html>
Will this keep the pop-up from showing up a second time. Can you help me figure out what am I missing?
What plugin are you using for cookies? I doubt that $.cookie('newsletter') returns the string value '0' when no cookie exists. I imagine it returns a falsey value. Are you sure it shouldn't be something like this:
if (!$.cookie('newsletter')) {
$.colorbox({href:"newsletter.html"});
$.cookie('newsletter', '1', { expires: 60}); }
}
Or drop the cookie plugin and write your own cookie detecting code. It isn't difficult for a one-off use case such as this.
The code above may be spitting is not a function and is undefined errors.
Here's the updated code that should work today (notice that I'm using the jQuery Cookie library):
<html>
<head>
<script type="text/javascript" src="/js/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/js/jquery-cookie/jquery.cookie.js"></script>
<script type="text/javascript">
function loadMsg(){
jQuery.noConflict();
jQuery(document).ready(function(){
if (!jQuery.cookie('popupcookie')) {
jQuery.colorbox({href:"newsletter.html", width: 640, height: 460});
jQuery.cookie('popupcookie', '1', { expires: 1}); }
})}
</script>
</head>
<body onload="loadMsg()">
<h1>Hello World!</h1>
</body>
</html>
This should get you going. The expiration time is set to 1 day in this example btw.