I am facing conflict issues in both functionalities. If I use the //for slider code above then, lightbox works and easyslider wont work and vice-versa. What is the solution to get it done ?
I am using following code in the header
//for lightbox
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
//for slider
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
Related
I have done everything according to the documentation provided on https://fullcalendar.io/docs/google-calendar
I created a new calendar for this specific purpose.
I have purposely left the API key and calendarID blank
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<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>
<script src='fullcalendar/gcal.js'></script>
<script>
$(function () {
$('#calendar').fullCalendar({
googleCalendarApiKey: '',
events: {
googleCalendarId: ''
}
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Solved Check comments for answer
I am trying to use bootstrap-select with my angular project but it does not appear at all.
My dependencies after installing the bootstrap-select package with bower:
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-material/angular-material.min.css">
And for the js files:
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-aria/angular-aria.min.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script type="text/javascript" src="bower_components/angular-material/angular-material.min.js"></script>
This is the only rule that is applied to the select item from the bootstrap-select css stylesheet.
select.bs-select-hidden, select.selectpicker {
display: none !important;
}
Is some of the other packages breaking it?
Thank you
My versions angular:1.6.2, bootstrap:3.3.7, bootstrap-select:1.12.2
I had the same problem recently, what i did was:
1) Download Bootstrap-select from SilvioMoreto Git;
2) Copy the bootstrap-select.js from bootstrap-select/js;
3) Paste the file in your project javascripts directory;
4) Link path to the file in your project header;
It worked for me, hope it helps!
I'm using kalendae calendar in my site.When there are no other stylsheets other than kalendae's stylesheet and script src then it works properly.But when i add all of them then it behave abnormally.I also tried removing all the links one by one to see what is causing the problem but could not figure it out.It only works normally when i remove all the stylesheets and script src.Here are the two images that will make my question clear.
When i remove all stylesheets and script src
After adding them
And here are the stylesheets and script src.I'm really sorry for using so many bootstrap link but some were not doing the tasks i wanted so i added so many of them.
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="js/wheelnav.min.js"></script>
<script src="js/wheelnav.js"></script>
<script src="js/raphael.icons.min.js"></script>
<script src="js/raphael.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/Livie_ccs1.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
Please help.
Here is the code for kalendae
<html>
<head>
<title>JavaScript calendar</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
</head>
<body>
<div class="auto-kal" ></div>
</body>
</html>
Here is the fiddle link. https://fiddle.jshell.net/qyf96yrk/.
The Kalandae is not appearing on the fiddle though i have added the link.Also the src code is very long.That is the reason why i was not adding my code.Sorry for the onconvenience
I am able to use some of the bootstrap elements but not all.
I have tried this, but I get an error for some of the elements attributes saying not a valid attribute for that element.
<head runat="server">
<title></title>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
</head>
in the head try this:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head >
and
before closing the body try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
why the Jquery?
because without the Bootstrap does not work
I using below code to add export functionality in datatable. i am unable to see export button, i am using master page. can anybody give some valuable remarks
$(document).ready(function () {
$('#tblOscarNominees').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[4, "desc"]],
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}
]
}
Below is the reference i set in master page
<link href="DataTables/media/css/TableTools_JUI.css" rel="stylesheet" type="text/css" />
<link href="DataTables/media/css/TableTools.css" rel="stylesheet" type="text/css" />
<link href="DataTables/css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script src="../DataTables/js/jquery.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.editable.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.jeditable.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery-ui.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
<script src="DataTables/media/js/TableTools.js" type="text/javascript"></script>
<script src="DataTables/media/js/ZeroClipboard.js" type="text/javascript"></script>