I'm making todo web application. If i run only date picker code it will run but when I combine with other html code it doesn't work
It only displays
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--datepicker-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset("css/todolist/datepicker.css") }}">
<input type="text" class="form-control" data-toggle="datepicker">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script href=" {{ asset('/js/todolist/datepicker.js') }}"}}></script>
<script>
$(function() {
$('[data-toggle="datepicker"]').datepicker({
autoHide: true,
zIndex: 2048,
});
});
</script>
When I click on input field field it should display date.
You're incorrectly importing the datepicker.js script. It should be src not href. It is also possible that you might have some errors in the syntax for your templating language, but I'm not sure what you're using so I can't be 100% confident about that. I think it needs to be like this,
<script src="{{asset('/js/todolist/datepicker.js')}}"></script>
But definitely it needs to be src and not href. If I reproduce your code and substitute the Github pages script from that repository, it works fine.
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
Definitely don't use the Github pages URL though--it shouldn't be used as a CDN. I'm just using it as an example that proves that your problem is with the way you're importing that script.
Your code contains syntax error - use src to import datepicker plugin.
<script src="{{ asset('/js/todolist/datepicker.js') }}"}}></script>
Here you can find workable example of your plugin (I used CDN instead of GitHub),
$(function() {
$('[data-toggle="datepicker"]').datepicker({
autoHide: true,
zIndex: 2048,
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fengyuanchen/datepicker#0.6.5/dist/datepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/#fengyuanchen/datepicker#0.6.5/dist/datepicker.min.css" rel="stylesheet">
<div clas="container">
<input type="text" class="form-control" data-toggle="datepicker">
</div>
Related
<link rel="stylesheet" href="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<link rel="stylesheet" href="mileTracker.css">
<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"></script>
<script src="mileTracker.js"></script>
<header data-role="header" data-theme="b">
<h1>Tracker</h1>
</header>
This is code that I have and I just can't seem to get the theme to be applied to the html code.
I have found a solution that allows for the set-up to work, the css links were added after the jQuery mobile css link.
Also when using the jQuery links, the mobile css file was placed first followed by the 2 javascript files, first the jquery.min.js then the jquery.mobile.1.4.5.min.js.
With the js files they were added after the css and in the order listed below.
Also I used a local deployment.
<link rel="stylesheet" type="text/css"
href="jQuery/jquery.mobile-1.4.5/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.mobile-1.4.5.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
I want to make a calendar view in javascript. I'm using this plugin, but the theme won't show, just trying to use standard theme. Does anyone know why?
https://fullcalendar.io/docs/theming
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
<script>
$(function() {
$('#calendar').fullCalendar({
themeSystem : "standard",
dayClick: function() {
alert('a day has been clicked!');
}
})
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
https://jsfiddle.net/03d1ahwy/
The problem is that
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
must be changed to
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css" media="print">
(i.e. you must add the attribute media="print" to the link tag)
otherwise you'll always get the print layout, even on-screen. See here for more details about the "media" attribute.
Once you add that, it tells the print CSS to only take over when the user is trying to print the page, and lets the standard theme be used in the in-browser version.
Demo: https://jsfiddle.net/40f1z3ts/
P.S. If you just want to use the standard theme, you don't actually need to write themeSystem : "standard", in your code at all - this is the default value, so you can just omit it.
P.P.S. Of course if you want to use any other themes you have to set the theme system appropriately and include the relevant CSS files in your page.
looks like you are having problems with the libraries
download full calendar from here:
https://fullcalendar.io/download
make a folder and name it "lib" add fullcalendar.min.css, fullcalendar.print.min.css and moment.min.js inside it and use the next headers
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='lib/fullcalendar.min.css' rel='stylesheet' />
<link href='lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/fullcalendar.min.js'></script>
Edit:
for bootstrap 4 theme add:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
for jquery-ui theme add:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
I am trying to add bootstrap popover on my page.
I have following code
$("#s1").popover({ placement: 'top' }).popover("show");
I have added following files to my page
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap.css.map
<link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap-theme.css.map
<link href="vendor/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.js" type="text/javascript"></script>
It was working fine some time ago. But I am not sure maybe some files I added or removed but now it's not working. Any help will be appreciated. Thanks
You are loading jQuery twice and v1.4.1 is ancient and not supported by bootstrap.js. You need to use at least v 1.11.1
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
I am a novice with jquery and am having great trouble implementing fancy box. I've followed all of the instructions according to the user guide and have scoured the internet for many examples. I'm tying it into code-igniter so not sure if that is making a difference.
I am trying to just use it for a simple - click a link and show a text box with content and hyperlinks.
I have all of the files in a folder called 'fancybox' in my applications folder.
Here is my header:
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
content:kljsadlkfajsdlfkjasdflkjads;
});
</script>
and here is the html view:
<div class="resources">
<a class="fancybox" rel="group" href="#">test</a>
</div>
thanks for the help
If you want fancybox to automatically find the element to show, put the id of that element in the href attribute.
Show box 1
<div style="display:none"><div id="box1">I am in fancybox!</div></div>
And the javascript:
$(document).ready(function() {
$("a.fancybox").fancybox();
});
If you want to manually show a fancybox dialog, just call it:
$("#box1").fancybox();
The error is in how you are calling fancybox. You've got the syntax wrong.
You need to pass your options as an object.
e.g
// Override content
$(".fancybox").fancybox({
content: "kljsadlkfajsdlfkjasdflkjads"
});
Further examples are shown in the docs