I am kinda new to programming, I wanted to make this example run on my php page http://jsfiddle.net/N78hs/2138/ but it just doesnot work for me
I've tried to create a .js file in (root/js) folder and call it on my php page but it didnot work for me.
here you can find head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
and here is the body
<body>
<div id="fullcalendar"></div>
</body>
thank you in advance
I think you did not connect all js and css libraries.
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="http://qtip2.com/static/javascripts/libs/jquery.fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://qtip2.com/static/stylesheets/libs/jquery.fullcalendar.css">
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
you have to include it in head part of your html. or on the bottom of the body tag.
you just need to add you file in head section
<html>
<head><title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="~/js/my.js"></script>
</head>
<body>
<div id="fullcalendar"></div>
</body>
</html>
Related
Sorry if I am asking a silly question. I just now starting with TinyMCE. I googled it and found examples where they all say to include in tinymce.js. I did that but I am getting a wired screen (as shown below. can anyone please help me, what I am missing
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.2.4.js"></script>
<script src="tinymce.js"></script>
<script src="theme.js"></script>
<!-- Just be careful that you give correct path to your tinymce.min.js file, above is the default example -->
<script>
tinymce.init({selector:'textarea'});
</script>
</head>
<body>
<textarea>Your content here</textarea>
</body>
</html>
This structure is working for me with TiniMCE 4.5.1:
Head:
<link rel="stylesheet" href="lib/tinymce/skins/lightgray/skin.min.css" />
<link rel="stylesheet" href="lib/tinymce/skins/lightgray/content.min.css" />
<script type="application/javascript" src="lib/jquery/jquery-min.js"></script>
<script type="application/javascript" src="lib/tinymce/tinymce.min.js"></script>
Directories:
\lib
\jquery
jquery-min.js
\tinymce
tinymce.min.js
\plugins
\advlist
\anchor
\...a lot of plugins
\skins
\lightgray
content.min.css
skin.min.css
\fonts
tinymce.ttf + woff
tinymce-small.ttf + woff
\themes
\modern
theme.min.js
Hope this help!
I hope this is not a stupid question/issue. I am trying to use fullcalendar for the first time. I am running this from flask on a local server. Here is the code I am attempting to use, based on examples I have found from some googling:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script>
$(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
So when I run that, it just gives me nothing.Am I missing a resource?
You never load the fullcalendar into the div. Do it like this:
<!DOCTYPE html>
<html>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
This way you load it as soon as the document is ready.
Can you check your css link? I think It should end with fullcalendar.min.css not fullcalednar.min.css.
I would need help on attaching my .js document to my html document so that jQuery works on it, at the moment only normal JS is working.
This is the html document header (called "3i.html"):
<!PROCTYPE <!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
<script type="text/javascript" src="3i.js"></script>
</head>
The javascript file is called "3i.js".
Javascript commands like "alert" or "prompt" work fine, I just can't find a way to make jQuery code work.
Help is very much appreciated
Include the jQuery library and your .js file just before closing the body.
<!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="3i.js"></script>
</body>
</html>
I am attempting to add some simple jQuery through an external file. I would like the code to remain in the external .js file. I'm using Dropbox so I can test my site locally, and I am almost certain JavaScript works through this method, but I don't know about the jQuery library. I can't seem to get any feedback through trial and error. Here is the simple form of the code I'm attempting.
The HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel='stylesheet' type='text/css' href='style.css'/>
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>
<body>
<div id='container'>
<div class='menu'>
<h2>Title of menu/h2>
</div>
<div class='panel'>
<p>
Some text here
</p>
</div>
</div>
</body
This is the entire .js file so far. Does this need to be defined as a function and then added into the HTML? Is it a scope issue?
$(document).ready(function(){
$('.menu').click(function(){
$('.panel').slideToggle('slow')
})
})
You load your file before the library your file is using. Change the two <script> lines so that jQuery is loaded first:
Change
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
You need to add your code after the jQuery inclusion..
So swap these lines
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
That is because your code uses jQuery, so you need to load jQuery before you can use the $.
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!