fullcalendar UI not displaying - fullcalendar

I believe i have everything coded right ,as Dreamweaver shows no Syntax errors, however the fullcalendar UI is not displaying either in Dreamweavers' preview pane, it does however display the div, or in Mozilla Firefox.
<!doctype html>
<html>
<head><link rel="stylesheet" href="fullcalendar/fullcalendar.css"/>
<script src="fullcalendar/fullcalendar.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/moment.min.js"></script>
<script> $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});</script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
all files are local
Dreamweaver CC 2014 1.1 and Firefox 36.0.4

You are missing one css file fullcalendar.print.css please include it. you can use the cdn path //cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css
Check console there might be error of jquery not defined. Include the file in that case.
cdn path https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js
For full download fullcalendar Click here..
Include your files in this sequence.
Moment js
jQuery js
Fullcalendar js
P.s: And make sure each of the file is included properly.
I have created a jsfiddle link on the left menu click on external sources. Click here for jsfiddle

Related

ckeditor cdn not working when page loaded from file

I put the following (copied from the cdn website) in a file then opened it in FireFox A textarea is displayed rather than ckeditor. Is that expected behavior?
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
Try this tutorial on how to setup and configure CKEditor in different environments, or get the demos' source code straight from github

iframe with local resource in Electron

I need to render iframe in my Electron application:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe sandbox='allow-scripts' src='frm.html'></iframe>
</body>
</html>
where the frm.html links the local file script foo.js which is part of my Electron application
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="foo.js"></script>
</head>
<body>
<p>Inside iframe</p>
</body>
</html>
When I run the application in Electron I can see this error in devtools console
Not allowed to load local resource: file:///C:/electron/app1/foo.js
Is it possible such scenario in Electron?
This is a security feature of the iframe. Here is a similar question that talks about loading linked files into an iframe: Displaying local htm file in iframe?.
That being said, have you considered using the webview tag instead? http://electron.atom.io/docs/v0.30.0/api/web-view-tag/. The webview tag is very similar to an iframe, but gives you more ability to control the security around it. I tested loading a local file into a webview in the same way you attempt to load frm.html into the iframe and it works flawlessly.

How to detect if JavaScript is disabled using Meteor.com

When using Meteor.com anyone know how to detect if the browser's JavaScript is disabled...
AND show a message to the end user in the browser window, i.e "Turn on JavaScript."
I assume that you have a layout.html or at least a main.html that contains at least a <head>.
A trick is to place <noscript> in the <head> instead of the <body>.
Meteor does not render everything in JS. There are some stuff that get's rendered in an initial page, proof of which can be seen in View Source (CTRL+U).
I'm using the latest Meteor in Chrome, and head tags were not merged. Only this worked for me:
<head>
<noscript>Please enable JavaScript.</noscript>
</head>
<template name="index">
...
</template>
I just used this and it really worked like a charm
<head>
<noscript>
<style>
body {font-size: 32px;text-align: center;line-height: 100vh;}
body:after {content: "Please enable JavaScript";}
</style>
</noscript>
</head>

Why Colobox iframe does not open the page?

I've used colorbox in my project to show some details in a jQuery popup window. But the target page does not appear.
This is the code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/colorbox.css" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".iframe").colorbox({iframe:true, width:"70%", height:"70%"});
});
</script>
</head>
<body>
Click here
</body>
</html>
You can see at Here.
What's the problem ?
You are trying to display google.com in an iframe which is not as easy as with other sides.
It should work the way you did it with almost any other side.
Read this for more information: How to show google.com in an iframe?
I'm not sure with your purpose but if you want to embed google search on your website with iframe, you can try http://www.google.com/custom.
You can see demo here http://jsfiddle.net/devchill/LVunZ/
Click here
$(".iframe").colorbox({iframe:true, width:"70%", height:"70%"});

Can I see dynamically-generated CSS source in Chrome DevTools?

I loaded a Javascript widget that outputs HTML, CSS, and additional Javascript.
The source of the page (test.html) is just
<!DOCTYPE html>
<html lang="en">
<head>
<title>Widget Test</title>
</head>
<body>
<div id="widget"></div>
<script type="text/javascript" src="http://widgets.some.site/render?element_id=widget_id&customer_id=999999&gallery=22222&widget_config=769792669" async="async">
</script>
</body>
</html>
The script executes and generates a widget. I can see the HTML nodes in the Element tab of Chrome DevTools. When inspecting a particular element, the inspector says that its style is located at test.html:239, but when I click on the link, it shows me the source page again.
When I load the page in Firebug, clicking on the line number sends me to an internal version of the stylesheet maintained by Firefox. Is there a way Chrome DevTools does this as well? I like Firebug's output of dynamically generated CSS, since I can copy and paste very easily.
No, you won't be able to see the source, as for dynamically generated <style> tags it is not stored anywhere and is thrown away right after parsing, unlike for the external or inline stylesheets, which have the underlying source text (in the foo.css file or in the loaded document <style> tag, respectively).
You are navigated to the document, since you cannot see the stylesheet itself, and it is the DevTools' best effort in this case.

Resources