This my code.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="~/Style/fullcalendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/Custom/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/Custom/moment.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
})
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Doing with asp.net MVC project.It nothing show.What happen and what need more in my code?I just follow do with FullCalendar Basic Usage .Thanks.
Related
I have this weird bug. If I add box2dweb to my list of javascripts. My bootstrap tooltip will no longer accept HTML. I have this code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<button class="btn-sm btn-primary col" id="btn-test" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<font size='30'>Tooltip</font> <u>with</u> <b>HTML</b>">Test</button>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/external/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/external/box2d.min.js"></script>
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
It doesn't render the HTML in the tooltip as HTML. But if I remove the script line which is embeding box2dweb it will work.
Is there a way to fix this?
Box2DWeb: Github
Make sure that you include
<script type="text/javascript" src="js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/external/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/external/box2d.min.js"></script>
in <head> tag
and
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
outside <body> tag.
Can someone help me with this code. Is there any problem? Because I'm not able to display the calendar when I'm running it.
<!DOCTYPE html>
<html>
<head>
<link href="CSS/Master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Holder"></div>
<div id="Datepicker1"></div>
</div>
<script type="text/javascript">
$(function() {
$("#Datepicker1").datepicker({
numberOfMonths:3
});
});
</body>
</html>
As mentioned in the comments, you haven't included jQuery or jQuery UI, and your HTML closing tags are incorrect. If you view the source of the demo on the jqueryui site, you will find the code is a little different you yours.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
To implement this into your code, it would be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="CSS/Master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="holder"></div>
<div id="datepicker1"></div>
<script type="text/javascript">
$(function() {
$("#datepicker1").datepicker({
numberOfMonths:3
});
});
</script>
</body>
</html>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
You have to include jQuery and jQuery UI (I changed a few things in your markup as well):
<!DOCTYPE html>
<html>
<head>
<!-- <link> doesn't need a closing tag -->
<link href="CSS/Master.css" rel="stylesheet" type="text/css">
<!-- include the jQuery UI style sheet -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- include jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="Datepicker1"></div>
<script type="text/javascript">
$(function() {
$("#Datepicker1").datepicker({
numberOfMonths: 3
});
});
</script>
</body>
</html>
I am very new to web development. I am trying to use jquery to show slider on the web-page. However, I am not able to see the silder on the web-page. I tried debugging the code via. firebug. However, I don't see any error over there. Can somebody please tell me on what I am missing possibly?
I am using Linux - Fedora core 16 and Firefox- 38.0.5 to run this code
index.html
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
Here is the jqueryTutorial.js file.
(function() {
$("#slider").slider();
})();
There are no errors in the firebug console.
Here is the screen shot.
Finally, I did the following from the source - jquery slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Now, I see the following error on the firebug.
ReferenceError: $ is not defined
$(function() {
index.html (line 11, col 2)
Try this:
jQuery(document).ready(function () {
(function() {
$("#slider").slider();
})();
});
EDITED:
Ok , the issue comes from the tags.
You wrote this:
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
And you HAVE to write this:
<!DOCTYPE html>
<html>
<head>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
</head>
<body>
<div id="slider"> </div>
</body>
</html>
;-)
EDITED AGAIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
jQuery(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Include your <script> tags before closing body tag </body>. Moreover you have some mistakes in your markup, like the <title> should be inside <head> tag( for heading use <h1> upto <h7> tags ). Like this:
<!DOCTYPE html>
<html>
<head>
<title>"My Page"</title>
</head>
<body>
<h1>hello jQuery</h1>
<div id="slider"></div>
<!-- load scripts -->
<script src="jquery-2.1.4.min.js">
</script>
<script src="js/jquery-ui.js">
</script>
<script src="js/jqueryTutorial.js">
</script>
</body>
</html>
And your javascript will simply be:
$('#slider').slider();
if that doesn't works try:
$(document).ready( function () {
$('#slider').slider();
}
Because if you include them at beginning, whole HTML document will not be completely loaded at the time the scripts get executed, so the script won't be able to find elements.
And I don't think .slider() gives you what you want. I suggest you learn more first. Try www.codecademy.com
I am new to qunit.I am running simple testcase in qunit.but nothing is getting displayed on screen.
This is HTML Runner:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
This is MyJsSourceCode.js
var ArthimeticOperations = {
addTwoNumbers : function (number1, number2) {
return number1 + number2;
}
}
This is MyJsUnitTests.js
test('Addition Test', function () {
strictEqual(ArthimeticOperations.addTwoNumbers(3, 5), 8, "Tested the addition functionality");
});
Try swapping the source code and test code includes... my guess is that your tests start running before the source code is included in the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<!-- SWAP THESE TWO...
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
Like so:
-->
<script src="MyJsSourceCode.js"></script>
<script src="MyJsUnitTests.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
I need display youtube videos when click an image, it displays youtube videos as new popup.
Here is my code:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title> - jsFiddle demo</title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"> </script>
<link href="jquery-ui.css" type="text/css" rel="stylesheet">
<script src="youtubepopup.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("a.youtube").YouTubePopup({ autoplay: 0 });
});
</script>
</head>
<body>
<a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU" title="jQuery YouTube Popup Player Plugin TEST">Test Me</a>
</body>
</html>
when click an image it didn't change anything.
Can anyone help me?
Thank you!!!
Try this
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title> - jsFiddle demo</title>
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"> </script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="http://lab.abhinayrathore.com/jquery_youtube/jquery.youtubepopup.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("img.youtube").YouTubePopup({ idAttribute: 'id' ,'clickOutsideClose': true,});
});
</script>
</head>
<body>
<img id="4eYSpIz2FjU" class="youtube" title="..." src="http://img.youtube.com/vi/4eYSpIz2FjU/1.jpg">
</body>
</html>
DEMO