I recently downloaded the Full Calendar program and was wondering what it requires to be installed on the server to work with JSON feeds. I tried running the json demo provided with the download but it does not fetch any events from the provided php file.
Thanks for any help
I got the same problem, but solving is quite easly, just check that json.html doesn't have headers set up correctly (in fact it doesn't have links to CSS nor JQuery or javascript files), just check that. A copy of my json.html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='../public/js/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../public/js/fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='../public/js/jquery/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='../public/js/jquery/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='../public/js/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: true,
events: "json-events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#loading {
position: absolute;
top: 5px;
right: 5px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>
<p>json-events.php needs to be running in the same directory.</p>
</body>
</html>
it calls a PHP file (json-events.php) so you need be running the example from a webserver that has php installed
It worked for me once I set the timezone correct.
Add this to the json-events.php file:
date_default_timezone_set('America/Los_Angeles');
Related
(workd1.js)
$(function(){
$('#btn').on('click'.getData);
function getData()
{
var target_url='books.xml';
$.ajax({
type:'GET',
dataType:'xml',
url: target_url
}).fail(function(jqXHR, textStatus, errorThrown){
alert('失敗');
}).done(function(data, textStatus, jqXHR){
alert('成功');
console.log(data);
});
}
});
this one html code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input#btn {
font-size: 16px;
margin: 20px 0 20px 20px;
background-color: #5857d4;
border:none;
padding: 10px 24px;
color: #fff;
border-radius: 4px;
}
</style>
</head>
<body>
<p>
<input id="btn" type="button" value="外部データを取得する">
</p>
<div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="workd1.js"></script>
</body>
</html>
i made a simple html code and ajax program to read a xml item and post it to the html folder.
at the html code I made a button type to execute the ajax program but the button cannot be click. I wonder why?
is there anyone know what the reason?
I have converted my .swf to HTML5 using Google Swiffy. But recently one Media Agency says the banners had a problem opening 2 new tabs instead of just one.
This is the code I always used and its having the double tab, the agency says it redirects to a route on the device ex: file:///Users/folder/folder/UNDEFINED and the other one to the DCM server.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
<title>GOOGLE DCM</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>
<script>
swiffyobject = { blablabla swiffy code};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<a href="javascript:window.open(window.clickTag)" style="width:300px; height:250px; display: block; position: absolute; z-index:999;">
<div id="swiffycontainer" style="width: 300px; height: 250px; border:1px solid black; box-sizing: border-box; ">
</div>
</a>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
</body>
</html>
so, I found a solution to this problem in this question
And I'm also not sure if this is correct for a DCM file since I don't know if an exit URL can be defined without a clicktag
[EDIT] The agency now tells me that they don't have the problem of two windows opening, but they got the error that no clicktag was found... and of course. So I don't know what to do here.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>
<style>
#bg-exit {
background-color: rgba(255,255,255,0);
cursor: pointer;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
</style>
<title>GOOGLE DCM</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>
<script>
swiffyobject = { blablabla swiffy code};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="bg-exit">
<div id="swiffycontainer" style="width: 120px; height: 600px; border:1px solid black; box-sizing: border-box; ">
</div>
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
<script>
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
}
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
</script>
</body>
</html>
I really need to fix this as soon as possible, otherwise I'll have to redo 35 banners in GWD in just a few hours so any help will be greatly appreciated. Thanks in advance.
looks like you have a bgExit event but no clicktag ?
var clickTag = "http://www.google.com";
GOOGLE DCM
I'm trying to add the textAngular toolbar at bottom of the texteditor-div. Right now it renders at the top.
I've been trying playin around with the css alot but with no sucess.
JS:
var app = angular.module('myApp', ['textAngular']);
app.controller('AppCtrl', function($scope, $http) {
$scope.htmlcontent = "<h2>New Note...</h2>";
$scope.save =function() {
console.log( $scope.htmlcontent );
$http.post("/Home/SaveWNote", { jsonData: $scope.htmlcontent });
}
});
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular.min.js'></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body ng-app="myApp">
<div ng-controller="AppCtrl">
<div text-angular ng-model="htmlcontent "></div>
<button ng-click="save()">Save</button>
<br/>
Your htmlcontent <pre>{{htmlcontent}}</pre>
</div>
</body>
</html>
PREVIEW:
http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
You can use the attribute ta-target-toolbars on the text-angular directive to have it register with an alternate toolbar:
<div text-angular ta-target-toolbars="toolbar" ng-model="htmlcontent"></div>
<div text-angular-toolbar class="toolbar" name="toolbar"></div>
Here is an example: http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview
The relevant lines of code involcing ta-target-toolbars from textAngular are available here: https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656
you can play a bit with css to move toolbar under text area
please see here http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
.ta-editor {
height: 400px;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin: 20px 0;
position: absolute;
top: 0;
width: 100%;
}
.editor-wrapper {
position: relative;
height: 470px;
}
.ta-toolbar {
position: absolute;
bottom: 0;
width: 100%;
}
I'm playing the the Shadow DOM 101 tutorial at html5rocks.
I'm using Chrome 25.0.1364.172 and
when I try to appendChild to the Shadow DOM root (as shown in the tutorial) I get an
Uncaught Error: NotFoundError: DOM Exception 8.
I guess I'm missing something obvious but I can't figure out what. Here's
the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test the shadow dom</title>
</head>
<body>
<div id="myName">Alon</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script id="myNameTemplate" type="text/x-tmpl-template">
<style>
.outer {
border:2px solid brown;
border-radius: 1em;
background: red;
font-size: 28pt;
width: 12em;
height:2em;
text-align: center;
}
.boilerplate {
color:white;
font-family: sans-serif;
padding:0.5em;
}
.name {
color:black;
background: white;
font-family: "Marker Felt", cursive;
font-size: 45pt;
padding-top:0.2em;
}
</style>
<div class="outer">
<div class="boilerplate">
Hi! my name is
</div>
<div class="name">
alon
</div>
</div>
</script>
<script>
$(document).ready(function(){
var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
console.log(shadow);// I get #shadow-root in the console
var template = $("#myNameTemplate").html();//also tried text(), without jQuery with innerHTML and other options
console.log(template);//I get the content of the template in the console
shadow.appendChild(template); //this part breaks
});
</script>
</body>
</html>
Since my browser doesn't support the new <template> tag shown in the tutorial I changed it to <script type="text/x-tmpl">.
Edit: I get the same error from the console when I try:
shadow.appendChild('<div></div>')
Error: NotFoundError: DOM Exception 8
appendChild() has never worked like that
document.body.appendChild('<div></div>') will give you the same error.
What you want is shadow.innerHTML = template;
You have got some of the markup wrong and a few lines in the script that select the template are incorrect. I have modified the code so it works.
<script id="myNameTemplate" type="text/x-tmpl-template">
...
</script>
to this
<template id="myNameTemplate">
...
</template>
And in your script at the bottom of the page I modified your template var, it was using jQuery for some reason and not querySelector(). So this code below
$(document).ready(function(){
var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
console.log(shadow);// I get #shadow-root in the console
var template = $("#myNameTemplate").html();//also tried text(), without jQuery with innerHTML and other options
console.log(template);//I get the content of the template in the console
shadow.appendChild(template); //this part breaks
});
becomes this
$(document).ready(function(){
var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
var template = document.querySelector("#myNameTemplate");
shadow.appendChild(template.content);
});
Here is the complete markup
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test the shadow dom</title>
</head>
<body>
<div id="myName">Alon</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<template id="myNameTemplate">
<style>
.outer {
border:2px solid brown;
border-radius: 1em;
background: red;
font-size: 28pt;
width: 12em;
height:2em;
text-align: center;
}
.boilerplate {
color:white;
font-family: sans-serif;
padding:0.5em;
}
.name {
color:black;
background: white;
font-family: "Marker Felt", cursive;
font-size: 45pt;
padding-top:0.2em;
}
</style>
<div class="outer">
<div class="boilerplate">
Hi! my name is
</div>
<div class="name">
alon
</div>
</div>
</template>
<script>
$(document).ready(function(){
var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
console.log(shadow);// I get #shadow-root in the console
var template = document.querySelector("#myNameTemplate");//also tried text(), without jQuery with innerHTML and other options
console.log(template);//I get the content of the template in the console
shadow.appendChild(template.content); //this part breaks
});
</script>
</body>
You cannot use anything other than the .content of the template AFAIK because template is a Document Fragment and to access that fragment you are required to select the inner content of the HTML5 element <template>.
The way I look at it is that the <template> tag is basically a static HTML way of creating a document fragment that you can grab with the javascript method querySelector(). You could create the fragment using createDocumentFragment() if you wanted to append the DOM through an extension or whatever but that's another bucket of frogs.
How would I add a progress bar to my website, that looks like the one on this website?
Progress Example
It looks like the Apple one!
<progress max="Maximum Value" value="Initial Value" />
See this for more details.
Note that this only works for browsers that support HTML5.
You can use jQuery instead. There in no restriction of HTML5. Also you can apply styles
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Progressbar - Custom Label</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">Loading...</div></div>
</body>
</html>
Source code available here http://jqueryui.com/progressbar/