I just use Theme Roller and download the theme I couldn't implement it
I have tried to import files, however while I add an input for date picker it is still only textbox... How to use this I only need "Datepicker" What am I doing wrong ?
Appreciate any help.
<html>
<head>
<script src="~/Content/jquery.js"></script>
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Content/jquery-ui.min.js"></script>
<link href="~/Content/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="~/Content/jquery-ui.theme.min.css" rel="stylesheet" />
<title>Test</title>
</head>
<body>
<div>
<input id="date" type="text" />
</div>
</body>
</html>
<script>
$(function() {
$('#date').datepicker();
});
</script>
These are enough to make the custom ThemeRoller work(and of course add the images)
<link href="~/jquery-ui.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Hope it will help to others who is seeking for jQuery UI Custom ThemeRoller Implementation.
Related
I am working on a new project on React JS. I decide to use a HTML & CSS free theme template for my project. I found the two best theme templates for the frontend (visible to the public) and the admin panel (CMS). I add both the css and js script link to my React project. When I start the project, the design of the frontend becomes buggy. I cannot get the actual design of the template. It has completely changed my design. When I commented the admin theme css & js, then i get actual output of the frontend and vice versa. If I activate css & js for both the frontend and the admin then the design get buggy. Can anyone please suggest me how to solve this issue?
index.html
Frontend CSS
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/socicon/css/socicon.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/slick/slick.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/unicore/css/style.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/dropdown-menu/style.light.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/mob-slider/style.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/mob/css/mbr-additional.css" type="text/css" />
Frontend JS
<script src="%PUBLIC_URL%/frontend/assets/web/assets/jquery/jquery.min.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/smooth-scroll/SmoothScroll.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/slick/slick.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/unicore/js/script.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/dropdown-menu/script.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/formoid/formoid.min.js"></script>
Backend CSS
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/vendors/mdi/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/vendors/css/vendor.bundle.base.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/css/style.css" />
Backend JS
<script src="%PUBLIC_URL%/backend/assets/vendors/js/vendor.bundle.base.js"></script>
<script src="%PUBLIC_URL%/backend/assets/vendors/chart.js/Chart.min.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/off-canvas.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/hoverable-collapse.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/misc.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/dashboard.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/todolist.js"></script>
Can anyone provide me the solution for this? How can i manage both template theme for my single project?
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>
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">
Error I recieve:
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'
The minute I apply the links for the fullcalendar, modals break.
Any reason for this?
I also did verify modals only broke when the javascript/stylesheets were added [I tested the calendar without and modal ran]
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
If I define my calendar links before all my bootstrap it breaks the calendar saying it isn't supported as well.
So something with bootstrap and the fullcalendar either fights or overwrites each other.
My other local files
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<script src="CSS/font-awesome-free-5.0.6/on-server/js/fontawesome-all.js"></script>
<link href="CSS/bootstrap-theme.css" rel="stylesheet" />
<link href="CSS/bootstrap-theme.min.css" rel="stylesheet" />
<link href="CSS/bootstrap.css" rel="stylesheet" />
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/maxcdn.bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/ajax.jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/JavaScript.js"></script>
<link href="CSS/Main.css" rel="stylesheet" />
<script src="Scripts/Splitter.js"></script>
<link href="CSS/Oxygen.css" rel="stylesheet" />
<link href="CSS/passionOne.css" rel="stylesheet" />
<link href="CSS/netdna_3.2.0_bootstrap.min.css" rel="stylesheet" />
<link href="CSS/4.2.0_font-awesome.min.css" rel="stylesheet" />
I think i remember having this issue a long time ago. I actually went into my conflicting file and looked for similar words. I think I would try naming everything in full calendar that is named modal, to modaltwo. Just a find and replace on the entire file. See if that works for you.
So a warning to people like me who like to call modal.show() from vb.net code... the required lib jquery file can't be referenced with fullcalendar.
The bootstrap jquery files are all you need.
At this very moment I can't determine why the lib jquery file caused this bootstrap modal javascript break.
so I did the following links for fullcalendar [plus all my bootstrap files]:
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script> <!-- need to calendar title -->
<%--<script src='lib/jquery.min.js'></script>--%>
<script src='fullcalendar.min.js'></script>
so that I could use a javascript function call to show a modal like so
<script type="text/javascript">
function openmodal() {
$('#myModal').modal('show');
}
</script>
I Have Problem With ext-3.3.1 Tree.
I use it in my project but sometimes the browser show this error and fail to load the page.
I take a picture of the errors and It's here and the html is here.
I really think it made by a bug ! anyone can help?
I hope you can help me it really made me mad.
Kind regards
The order of javascript file included in Head tag is important. the order should be like the following:
<script type="text/javascript" src="../../resources/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../resources/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../resources/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../resources/ext/resources/css/xtheme-gray.css" />
<link rel="stylesheet" href="../../resources/openlayers/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="../../resources/app/theme/style.css" type="text/css" />
<script src="../../resources/openlayers/build/OpenLayers.js"></script>
<script src="../../resources/geoext/build/GeoExt.js"></script>