I'm trying to use slick carousel to slide the year of a calendar but I can't make it work.
Here's what I want to make slide:
And this is my code:
document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML="<div>"+year+"</div><div class='slick'>"+meses[month-1]+"</div><div class='slick'><a style='color: #cccccc;' onclick='mostrarCalendario("+prevYear+","+prevMonth+")'><</a></div><div class='slick'><a style='color: #cccccc;' onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>></a></div><div class='slick'>"+meses[month-3]+"</div><div class='slick'>"+meses[month+1]+"</div><div class='slick'>"+meses[month-2]+"</div><div class='slick'>"+meses[month]+"</div>";
And when I use this part on my code, this don't work...
$('.slick').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 5,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
I wanted that when I click on < or > make the month to slide, but I can't.
Thank u very much.
Here I have the PHP code where is the library:
<!DOCTYPE html>
<html lang="es">
<head>
<script src="js/semanal.js"></script>
<script src="slick/slick.min.js"></script>
<link rel="stylesheet" href="slick/slick.css">
<meta charset="utf-8">
</head>
<body>
<center>
<table id="calendar">
<p>
<caption></caption>
<thead>
<tr>
<th>LUNES</th><th>MARTES</th><th>MIERCOLES</th><th>JUEVES</th><th>VIERNES</th><th>SABADO</th><th>DOMINGO</th>
</tr>
</thead>
<tbody>
<script>mostrarCalendario(actual.getFullYear(),actual.getMonth()+1);</script>
</tbody>
</table>
</center>
</body>
<script src="js/semanal.js"></script>
</html>
As you are appending you html with javascript, it may be that when slick loads, the content is not available yet, try putting $('.slick').slick() inside a setTimeOut() function. Also you have this line twice <script src="js/semanal.js"></script> and the second time it should be before the closing body tag, so fix that and also consider moving the rest of the scripts there (before the closing body tag).
EDIT
You need to put all your slides inside a single .slick element so you need to do something like this. Look at the changes i made to your markup
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="slick/slick.css">
</head>
<body>
<center>
<table id="calendar">
<caption>
<div class="slick"></div>
</caption>
<thead>
<tr>
<th>LUNES</th><th>MARTES</th><th>MIERCOLES</th><th>JUEVES</th><th>VIERNES</th><th>SABADO</th><th>DOMINGO</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</center>
<script src="slick/slick.min.js"></script>
<script src="js/semanal.js"></script>
<script>mostrarCalendario(actual.getFullYear(),actual.getMonth()+1);</script>
</body>
</html>
I moved this to different lines for readability, look that i removed the slick classes and made it find slick class and not caption tag
document.getElementById("calendar").getElementsByClass("slick")[0].innerHTML="<div>"+year+"</div>"+
"<div>"+meses[month-1]+"</div>"+
"<div><a style='color: #cccccc;' onclick='mostrarCalendario("+prevYear+","+prevMonth+")'><</a></div>"+
"<div><a style='color: #cccccc;' onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>></a></div>"+
"<div>"+meses[month-3]+"</div><div class='slick'>"+meses[month+1]+"</div><div class='slick'>"+meses[month-2]+"</div>"+
"<div>"+meses[month]+"</div>"
Related
In the same page I want to put multiple full calendars. The problem is that for each calendar (100 calendar in my page) the calendar js scripts are reloaded each time (full calendar.js, moment.js, jquery.js) and that is very bad for the loading speed. Is there a way to say to the navigator or the code : keep the first loading in memory and reuse it instead of reload new scripts.
There is the idea of my code :
page1.php :
<tbody>
<tr>
<th scope="row">Monday</th>
<td >
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="page2.php?cell=140?day=Monday"> </iframe>
</div>
</td>
and my page2.php :
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="js/basket.full.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src='fullcalendar-3.9.0/lib/jquery.min.js'></script>
<script src="js/bootstrap.min.js"></script>
<script src='fullcalendar-3.9.0/lib/moment.min.js'></script>
<script src='fullcalendar-3.9.0/fullcalendar1.min.js'></script>
<link href='fullcalendar-3.9.0/fullcalendar1.min.css' rel='stylesheet' />
<link href='fullcalendar-3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header:false,
defaultView: 'agendaDay',
aspectRatio: 1,
slotEventOverlap:false,
slotLabelFormat: 'H',
defaultDate: <?php echo json_encode($result[$dayNumber]); ?>,
allDaySlot:false,
navLinks: false, // can click day/week names to navigate views
editable: false,
eventLimit: false, // allow "more" link when too many events
eventRender:
function(event, element) {
element.find('.fc-title').append("<br/>" + event.activity);
},
views: {
agendaDay: {
minTime: "09:00:00",
maxTime: "19:00:00",
}},
eventSources: [
{
url: 'event.php?cell=<?php echo json_encode($cell);?>', // use the `url` property
textColor: 'black'
}]
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
I'm trying to center a couple of images in a carousel with slickJS, however it is not properly centering the images due to the left offset being wrong. Anyway to fix this? Any recommendations of a JavaScript carousal that actually does the job? I pulled the code directly from the slick website and it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="/app/source/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/app/source/slick/slick-theme.css"/>
<style>
</style>
</head>
<body>
<div class="center">
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/app/source/slick/slick.min.js"></script>
<script type="text/javascript">
//straight from the website
$(document).ready(function(){
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>
Result:
As you can see it is not aligning to the center properly and you can even see alittle of the 4th slide even though it is set to show only 3 slides. Any help is greatly appreciated!
The reason you are seeing the partial views of the edge images is because you have centerMode enabled in your setting, either remove it or set it to false to get rid of that edge view. Additionally, its not that the divs are taking up unequal widths, its that the images inside them are floating to the left, so it looks like there is extra space to the right, after the last image. To fix this just center the image withing its parent div using margin:auto.
$(document).ready(function() {
$('.center').slick({
//centerMode: true,
//centerPadding: '160px',
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
//centerMode: true,
//centerPadding: '140px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
//centerMode: true,
//centerPadding: '40px',
slidesToShow: 2
}
}
]
});
});
img{
margin:auto;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="center">
<div><img src="http://loremflickr.com/320/240?1" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?2" alt="shrimp"></div>
<div><img src="http://loremflickr.com/320/240?3" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?3" alt="shrimp"></div>
<div><img src="http://loremflickr.com/320/240?4" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?5" alt="shrimp"></div>
</div>
I have the following code and after pressing a button that invokes the $("#proxy_history_dialog").dialog({ line - I keep getting the error Uncaught TypeError: $(...).dialog is not a function.
I searched for a solution and most answers are pointing to jquery includes block. I tried to change jquery versions multiple times without any luck.
What am I missing out here?
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>
Optimize Proxies
| Upstream Commerce</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/tables_style.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>
<script type="text/javascript"
src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<style type="text/css">
tfoot {
display: table-header-group;
}
</style>
</head>
<body>
<img id="loader" src="/static/img/loader_animation_large.gif"
style="
width:36px;
height:36px;
display: none;
position:absolute;
top:50%;
left:50%;
margin-top:-18px;
margin-left:-18px;"/>
<p>Logout | Home</p>
<div id="title">
<b style="font-size:200%" ;>Optimize proxies<br></b>
</div>
<div id="proxy_history_dialog" title="Proxy history" style="display:none;">
</div>
<table id='p_table-id' class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Site name</th>
<th>Site id</th>
<th>Extraction rate</th>
<th>Proxy</th>
<th>Proxy duration</th>
<th>Proxy history</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Site name</th>
<th>Site id</th>
<th>Extraction rate</th>
<th>Proxy</th>
<th>Proxy duration</th>
<th>Proxy history</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><span>hp</span></td>
<td><span>2198</span></td>
<td><span>95.2%</span></td>
<td><span>brazil</span></td>
<td><span>0 days</span></td>
<td>
<button id="2198" class="get-proxy-history">history</button>
</td>
</tr>
<tr>
<td><span>amazon_hp</span></td>
<td><span>2199</span></td>
<td><span>99.8%</span></td>
<td><span>all_std.proxymesh</span></td>
<td><span>422 days</span></td>
<td>
<button id="2199" class="get-proxy-history">history</button>
</td>
</tr>
<tr>
<td><span>bestonix</span></td>
<td><span>-104</span></td>
<td><span>93.3%</span></td>
<td><span>shader_us</span></td>
<td><span>225 days</span></td>
<td>
<button id="-104" class="get-proxy-history">history</button>
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$(".get-proxy-history").click(function () {
var uri = "manage/optimize_proxies/get_proxy_history/" + $(this).attr("id") + "/";
var result = api_get(uri, false, 'POST');
$("#proxy_history_dialog").html(result[0]);
$("#proxy_history_dialog").dialog({
resizable: true,
width: "auto",
height: "auto",
autoResize: false,
modal: false,
draggable: true
});
});
///////////////////////////////////////////////////////////////////
// Setup column search - add a text input to each footer cell
$('#p_table-id tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#p_table-id').DataTable({
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]],
"buttons": [],
paging: false,
fixedHeader: true
});
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
</script>
</body>
</html>
put line
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
after
<script type="text/javascript" src="/static/script/api_recs.js"></script>
like:
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/tables_style.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
note:
if this way does not work then chech api_recs.js
It seems, the error is happening with your DataTables inclusion/version. I have tried with jQuery version 1.8.0 and DataTables version 1.10.1 and everything seems to be working fine for me.
Working Fiddle: https://jsfiddle.net/mnexvzgx/
Note: I have commented out your API call and replaced the result with a dummy value.
Hope this helps!
I am using the jQuery DataTable for creating a web page. I have a use case where the page opens with the table already populated. Now, there is a form in the page where he can put some filters and refresh the table. Also, more importantly for each row, I can expand to see more details as explained here.
In my case, as soon as the data is reloaded after the form is submit, the details button which would expand each data row stops working. It gives the following error:
jquery.dataTables.min.js:120 Uncaught TypeError: Cannot read property '_detailsShow' of undefined
I am reloading thee table by first clearing, destroying and then calling the DataTable method. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../../static/css/chosen/bootstrap-chosen.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(
function ()
{
var dashboard_table_id = "#example";
function destroy_existing_data_table()
{
var existing_table = $(dashboard_table_id).dataTable();
if (existing_table != undefined)
{
existing_table.fnClearTable();
existing_table.fnDestroy();
}
}
function create_dashboard_table()
{
var data_table = $(dashboard_table_id).DataTable({
"data": [{
"dt_RowId": 10,
"column1": "delhivery",
"column2": "CRP12345",
"column3": "1122",
"column4": "One expanded row"
}, {
"dt_RowId": 2,
"column1": "delhivery",
"column2": "CRP12345",
"column3": "1122",
"column4": "Other expanded row"
}],
"columns": [
{"className": "select-checkbox", orderable: false, "data": null, "defaultContent": ""},
{"class": "details-control", "orderable": false, "data": null, "defaultContent": ""},
{"data": "column1"},
{"data": "column2"},
{"data": "column3"}
],
"buttons": {},
"dom": 'lBfrtip',
"select": {
"style": 'multi',
"selector": 'td:first-child'
},
"oLanguage": {"sSearch": ""},
"order": [[2, 'asc']],
"bLengthChange": false,
"pageLength": 25
});
// adding event listener for opening and closing details
$(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',
function ()
{
var tableRow = $(this).closest('tr');
var row = data_table.row(tableRow);
if (row.child.isShown())
{
tableRow.removeClass('details');
row.child.hide();
}
else
{
var rowData = row.data();
tableRow.addClass('details');
row.child("Hello there, this is the expanded view I am referring to....").show();
}
});
}
$("#example-form-submit").click(function (event)
{
event.preventDefault();
destroy_existing_data_table();
create_dashboard_table();
});
create_dashboard_table();
});
</script>
<style>td.details-control {
background: green;
cursor: pointer;
}
tr.details td.details-control {
background: blue;
}</style>
</head>
<body>
<div class="main-content lfloat">
<div class="container" style="width: 100%;">
<label for="example-form-submit" class="col-md-2 control-label"></label>
<div class="col-md-2">
<button type="submit" id="example-form-submit" class="btn btn-primary">Refresh and try to expand</button>
</div>
<div>
<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th></th>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
Can some one please point out what I am doing wrong. Thanks a ton in advance. This has been bugging me for some time now.
JSFiddle : Credits: #Edis Golubich
it works for me. just remove the latest click event handler by add .off before add the new one.
$(dashboard_table_id).find('tbody').off('click', 'tr td.details-control');
$(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',function(){...});
The issue is that the data_table object is not getting 'updated' when using jQuery.on() via delegated event handling.
Try this: https://jsfiddle.net/f5mdcrup/4/
What I did was declare data_table outside of the function. The scope will be different in this case.
Following code works for me
$(dashboard_table_id).find('tbody').off('click', 'tr td.details-control');
$(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',function(){
//Action To perform
});
My code:
<html>
<head>
<link rel="stylesheet" type='text/css' href='../style.css'>
<link rel="stylesheet" type='text/css' href='//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick.css'>
<link rel="stylesheet" type='text/css' href='//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick-theme.css'>
</head>
<body>
<div class="slideCont">
<div class="slider-info">
<div>Info</div>
<div>Info2</div>
<div>Info3</div>
<div>Info4</div>
</div>
<div class="slider-img">
<div>Img</div>
<div>Img2</div>
<div>Img3</div>
<div>Img4</div>
</div>
</div>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=jquery&file=jquery.min.js"></script>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=jquery-migrate&file=jquery-migrate.min.js"></script>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick.min.js"></script>
<script>
$(document).ready(function(){
$('.slider-info').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-img'
});
$('.slider-img').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-info',
dots: true,
centerMode: true,
focusOnSelect: true
});
});
</script>
</body>
</html>
This is meant to be like the Slider Syncing sample on here: http://kenwheeler.github.io/slick/ (near the bottom of the examples)
My code can be seen live here: http://new.unreal-designs.co.uk/portfolio/ but the each slide is full width, rendering it rather useless.
Style.css only contains basic stuff that shouldn't effect the slider in any way.
Ok, so after playing around I think I've found the issue. Slick isn't changing the height of the slides to fit the content, thus the slide fills the page -.-
Not sure how to fix this though in JS.