In the code below, the color box is working and the image showing. When I tried to integrate Jcrop with it, it doesn't.
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
</script>
<script src="../colorbox/colorbox/jquery.colorbox.js" type="text/javascript">
</script>
<script src="../jcrop/js/jquery.Jcrop.js" type="text/javascript">
</script>
<link href="../jcrop/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<link href="../colorbox/example1/colorbox.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function () {
$(".example1").colorbox();
$(document).bind('cbox_complete', function(){
$('#colorbox .example1').Jcrop();
});
});
</script>
</head>
<body>
<p>
<a href="../jcrop/demos/demo_files/flowers.jpg" class="example1">
crop
</a>
</p>
</body>
Remove the script files to the master / parent page, and this should now work..
Related
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>
Here's the HTML for the div i want to fadeIn
and the jQuery code for fading the text in the above div
$(document).ready(function() {
$('#message').fadeIn('fast');
});
<html>
<head>
<title>Band Site| Home</title>
<link rel="stylesheet" href="band.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="message" style="display:none;">welcome to my website</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</body>
</html>
I think fast is too fast. :)
Try it like this:
<!DOCTYPE html>
<html>
<head>
<title>Band Site| Home</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="message" style="display:none;">welcome to my website</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#message').fadeIn(3000);
});
</script>
</body>
</html>
I've removed band.css (since I don't have that file) and I've put jquery code directly into <script> tag so everything is in one place.
Your code is working just fine. Instead of adding 'fast' use some duration.
HTML
<div id="message" style="display:none;">welcome to my website</div>
jQuery
$(document).ready(function() {
$('#message').fadeIn('8000');
});
Fiddle
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.
I have tried to add the fullCalendar jquery to a view in my MVC 4 project. When I try to laod the page there are no errors but the calendar does not appear on the page. I am not sure why it isn't appearing and I have looked at the documentation and it looks like I got everything covered.
Here is my HTML:
#{
ViewBag.Title = "Calendar";
}
<h2>Calendar</h2>
<html>
<head>
<title>Calendar</title>
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/fullcalendar.print.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("/Scripts/moment.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery-ui.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/fullcalendar.min.js")"></script>
<script type="text/javascript">
$("#calendar").fullCalendar({
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
HERE IS MY CSS:
#calendar {
width: 900px;
margin: 40px auto;
}
Add refs to the libs you want to use;
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'>
I've tried using the google api and my own jQuery.js file, and I'm checked it through a lot and my javascript code seems to be good, so I'm guessing it's something obvious between linking jQuery to the web page that I'm missing
Here's the code on JSFiddle
<!DOCTYPE html>
<html>
<head>
<title>COMPUTERS.</title>
<link rel="stylesheet" type="text/css" href="cstyle.css">
<script type="text/javascript" src="cscript.js"></script>
</head>
<body>
<div id="navhead" align="center">
<div id="navleft" class="nav">
<p class="valign">Copyright and Patents</p>
</div>
<div id="navcentre" class="nav" align="center">
<p class="valign">Computer Misuse</p>
</div>
<div id="navright" class="nav">
<p class="valign">Data Protection</p>
</div>
</div>
</body>
</html>
Javascript:
$(document).ready(function(){
$(".nav").mouseenter(function(){
$(this).fadeTo("slow", 1);
});
$(".nav").mouseleave(function(){
$(this).fadeTo("slow", 0.5);
});
});
Where is the jquery.js
Include that in your file to work..
Add this line before your js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Updated Fiddle http://jsfiddle.net/hzE4M/2/
I tried your code in JSFiddle. It works.
$(".nav").mouseenter(function(){
$(this).fadeTo("slow", 1);
});
$(".nav").mouseleave(function(){
$(this).fadeTo("slow", 0.5);
});
http://jsfiddle.net/Alex_Zhe_Han/EmJZQ/
<head>
<title>COMPUTERS.</title>
<link rel="stylesheet" type="text/css" href="cstyle.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="cscript.js"></script>
</head>
your code is ok .just add this line.