This is my code. It turns my text box into a date picker.
<script type="text/javascript" src="{{MEDIA_URL}}template/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}template/js/jquery-ui-all.min.js"></script>
<script type="text/javascript">
$(function() {
$("#start_date").datepicker();
$("#end_date").datepicker();
});
</script>
Where do I put the ui-lightness folder? It contains the images and js of the theme. Right now, the images and CSS are blank on my page.
You can place it anywhere you like, but you need to link the the CSS file to have it affect your page.
You need the default CSS
<link type="text/css" rel="stylesheet" href="Content/jquery-ui.css" %>" />
And the control specific files as well, for instance the dialog would need.
<link type="text/css" rel="stylesheet" href="Content/ui.dialog.css" %>" />
Related
It is my first time using bootstrap 3, what I want to do is to make a header so that I will just call the file whenever I will create a new page but the problem is that when I created a folder and inside is index.php when I put the code from the original file it didn't work.
Here is the image of what I did
Here is the image of the original
Here is the code in html (only the link and script)
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="vendor/chart.js/Chart.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
I don't clearly get it, I mean I accessed the file path and try to recode it but still it won't show the design and functions in jquery, I hope someone can explain me since I am new to this.
add / to all src or href. it's different between /vendor and vendor.
you need to access file at root but not page/vendor
I have done jquery code in an aspx page. Now I want to move the code to Report-Filter.js file. I tried to move and execute. But it doesn't work.
This is my code;
<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/Report-Filter.js"></script> -------> // code
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/ReportsSalesAll-style.css" rel="stylesheet" />
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
<script src="js/Accordian-Hide-Show.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Moved code to Report-Filter.js file
})
</script>
But I didn't get the output. What I did wrong in my code.
There is no need to write script tags in .js file remove script tags from js file
<script type="text/javascript">
$(document).ready(function () {
// Moved code to Report-Filter.js file
})
</script>
Should be
$(document).ready(function () {
// Moved code to Report-Filter.js file
})
Also it would be better to place the link of file just before close of body tag
I'm not entirely sure what you are trying to do, but I'm going to assume some things.
What I think you need is
Create a new file and put the javascript code in there with respects
to what Leopard says.
Reference your new javascript file in your code as shown in your
question. Be sure to reference this AFTER you reference the JQuery
libraries.
Test your code. For example, by putting an alert in your Javascript
file somewhere. Like this: alert("test");
Some general tips:
Always put the CSS references before the JS references (Preferably in
the head of the document). This way the page won't stutter visually
while loading, because the elements put on the screen will already be
styled.
Always put the scripts you are referencing below your HTML elements.
This way the page won't take too long to display, because the scripts
won't load beforehand, but afterwards (which is correct anyway,
because your code run's after the document has finished loading)
Eventually it should look something like this:
Javascript file (js/new-javascript-file.js):
$(document).ready(function () {
alert("test");
})
Html / CSHtml / Aspx file (not sure what you are using):
<link href="css/jquery-ui.css" rel="stylesheet" />
<link href="css/ReportsSalesAll-style.css" rel="stylesheet" />
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/Report-Filter.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/Accordian-Hide-Show.js"></script>
<script src="js/new-javascript-file.js"></script>
when my index at here
the script url was
<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
<script type="text/javascript" src="../jquery.fullPage.js"></script>
when i move the index file to front folder > untitled 3
which is here
and the url change to
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script type="text/javascript" src="jquery.fullPage.js"></script>
but it dint work.
Even the link use browse and select the script file and url given by the system
help~
is that any setting need to change
I'm using a time picker but I can't get to make the buttons show. Here's how the timepicker looks.
Here's how I render it.
<input type="text" class="form-control timepicker appt_time" style="width:200px;">
<script>
$('.timepicker').timepicker();
</script>
Here's how I set them in my header
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-datepicker.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-timepicker.css">
<script type="text/javascript" src="/content/script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-timepicker.js"></script>
I got the css files and the js files for the timepicker
Here.
Any ideas what's causing this? Thanks!
You have got css and js files but you've missed to capture the glyphicons.
The glyphicons are responsible for showing the buttons on the timepicker.
If you can inspect your developer tools on your buttons you can see that the images seems to be missing.
Here is what i've found on the site that you have picked timepicker
Include the glyphicons png file on your site to get the images work perfect.
Hope this helps
Try script as...
<script type="text/javascript">
$("input[id$='timepicker']").timepicker({
minuteStep: 5,
showInputs: false,
disableFocus: true
});
</script>
Give an id , say id="timpick" and in call as $('#timpick').timepicker(options);
I have a code like this: http://codepad.org/0j9m2Xdw
These files:
<link href="js/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<script src="js/jtable/jquery.jtable.min.js" type="text/javascript"></script>
are in 100% in correct location. I run google-chrome with --allow-file-access and --allow-file-access-from-files parameters. Even that I still get a blank page when I try to access my index.html location, which is: file:///home/myusername/code/web/index.html
What's wrong?
JTable needs also jQueryUI, try this :
<script src="js/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<!-- JqueryUI -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js " type="text/javascript"></script>
<!-- Include one of jTable styles. -->
<link href="js/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
See this jsfiddle demo