I am trying to make buttons and the "dot-menu" in slick slider visible.
My example in jsfiddle looks OK, though the "dot-menu" underneath the items is missing: my slick example
In "real live" my implementation looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></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.9.0/slick.min.js"></script>
<style >
.variants {
cursor: pointer;
border: 1px solid #CDCDCD;
width: 192px;
height: 223px;
float: left;
}
</style>
</head>
<body>
<div class="variants-container">
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
</div>
<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.9.0/slick.min.js"></script>
<script type="text/javascript">
$('.variants-container').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
</script>
</body>
</html>
There are buttons on top of the item set instead of a nice round buttons valigned and on top of the left item.
Desired implementation:
How can I acchive the desired state of the buttons and also show dot indicators on the bottom of each set?
The below code works as your expecting, the problem was you're including the jquery files twice, once in the head and once at the end of the body. Also you forgot to include the "slick-theme.css" after "slick.css"
To get the dots at the bottom of the carousel, according to the docs, simply add dots: true in settings
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<style>
html,
body {
padding: 20px;
background-color: #CCC;
}
.variants {
cursor: pointer;
border: 1px solid #CDCDCD;
width: 192px;
height: 223px;
float: left;
}
</style>
</head>
<body>
<div class="variants-container">
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></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.9.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.variants-container').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
dots: true
});
});
</script>
</body>
</html>
Related
I created a processing JS code in an external IDE from my HTML and I want to put it on my HTML page. I went through many tutorials but I could not figure out why I have the following problem.
My 600x600 project should look like this:
Working
When I embed it on my website it looks like this:
Not Working
This is my HTML:
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="https://mhs-robotics.com/style/point-counter.css">
<script type="text/javascript" src="https://mhs-robotics.com/java/processing.js"></script>
</head>
<body>
<center>
<canvas id="can" width="10px" height="10px" data-processing-sources="https://mhs-robotics.com/java/counter.pde"></canvas>
</center>
</body>
This is my CSS:
#can {
width: 600px;
hight: 600px;
margin: auto;
border: 5px solid black;
}
I fixed it
I added:
void setup() {
size(600, 600);
}
I'm trying to learn Kendo and want to a basic DateTimePicker using Kendo UI Core. I've added the following links to the head and code from the example but it only returns a basic input box with no datepicker or anything else. It seems like I'm missing a script or something. Anyone have any ideas on some help?
<head runat="server">
<script src="Kendo/js/jquery.min.js"></script>
<script src="Kendo/js/kendo.core.min.js"></script>
<script src="Kendo/js/kendo.core.min.js"></script>
<script src="Kendo/js/kendo.datepicker.min.js"></script>
<script src="Kendo/js/kendo.datetimepicker.min.js"></script>
<script src="Kendo/js/kendo.popup.min.js"></script>
<script src="Kendo/js/kendo.timepicker.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="example">
<div id="to-do">
<input id="datetimepicker" />
</div>
<script>
$(document).ready(function () {
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value: new Date()
});
});
</script>
<style>
#to-do {
height: 52px;
width: 221px;
margin: 30px auto;
padding: 91px 0 0 188px;
}
#to-do .k-datetimepicker {
width: 200px;
}
html.k-material #to-do {
height: 55px;
width: 260px;
padding: 87px 0 0 150px;
}
html.k-material #to-do .k-datetimepicker {
width: 240px;
}
</style>
</div>
</form>
</body>
You need to include kendo.calendar.min.js and kendo.popup.min.js before kendo.datepicker.min.js. The full list of JavaScript files requirements is available here.
I have been making some graphs using dc.js and i am plotting some manufacturers in a row-chart against their count. when manufacturer increase in number the row width becomes really small and hard to distinguish.
I tried to use overflow : scroll in css but it also scrolls the scale with the graph.
There is a way to do this. I have 4 files, index.html, iframe.html, iframe.css, and iframe.js. Here is my setup. In index.html I had:
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<script type="text/javascript" src="d3.v3.min.js"></script>
<script type="text/javascript" src="crossfilter.js"></script>
<script type="text/javascript" src="dc.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="dc.css">
<link type="text/css" rel="stylesheet" href="iframe.css">
</head>
<body>
<iframe class="iframe" src="iframe.html"></iframe>
<script type="text/javascript" src="iframe.js"></script>
</body>
</html>
in iframe.html I had:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v3.min.js"></script>
<script type="text/javascript" src="crossfilter.js"></script>
<script type="text/javascript" src="dc.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="dc.css">
</head>
<body>
<div id="rowChart"></div>
<script type="text/javascript" src="iframe.js"></script>
</body>
</html>
in iframe.css I had:
.iframe {
width: 800px;
height: 200px;
border: none;
}
in iframe.js I had:
var data = [];
for (var i = 1; i < 10; i++) {
data.push({
val: i
});
}
var ndx = crossfilter(data);
var dim = ndx.dimension(function(d) {
return d.val;
});
var group = dim.group().reduceSum(function(d) {
return d.val;
});
rowChart = dc.rowChart("#rowChart");
rowChart.width(800)
.height(400)
.margins({top: 10, right: 40, bottom: 30, left: 40})
.dimension(dim)
.group(group)
.elasticX(true)
.gap(1)
.x(d3.scale.linear().domain([-1, 10]))
.transitionDuration(700);
dc.renderAll();
In this setup I had all 4 files in the same level in my directory.
I am using JS plumb 1.5.5, the basic case is working fine on chrome, IE 10 and mozilla. But i am getting the ERROR : 'jsPlumb.Endpoints[...]' is null or not an object , when running the same on IE version 8.0.7600.16385. I tried debugging the javascript and found that the error is happening because _jsPlumb.getRenderMode() is undefined. I tried setting the renderMode to VML and SVG but still i get the same error. I have to support this on IE8 as well. The sample code thats throwing the error is shown below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta http-equiv="Cache-Control" Content="no-cache">
<!-- library scripts -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.jsPlumb-1.5.5.js"></script>
<script type="text/javascript" src="js/jquery.contextMenu.js"></script>
<script type="text/javascript" src="js/wfeditor.js"></script>
<style>
.item {
border: 1px solid black;
background-color: #ddddff;
width: 100px;
height: 100px;
}
#state1 {
left: 100px;
top: 100px;
}
#state2 {
left: 250px;
top: 100px;
}
#state3 {
left: 100px;
top: 250px;
}
</style>
</head>
<body>
<div id="state1" class="item"></div>
<div id="state2" class="item"></div>
<div id="state3" class="item"></div>
</body>
<script type="text/javascript">
jsPlumb.ready(function() {
jsPlumb.makeSource($('.item'), {
connector: 'StateMachine'
});
jsPlumb.makeTarget($('.item'), {
anchor: 'Continuous'
});
});
</script>
</html>
I am using jquery.simplemodal 1.3.5 (i tried older versions)
the close button doesnt close the modal in firefox (i tried IE and it work fine)
this is the test page i am using:
<html>
<head>
<title>Untitled Page</title>
<style>
#simplemodal-overlay {
background-color:#000;
cursor:wait;
}
#simplemodal-container a.modalCloseImg {
background: url(../images/modal_close.png) no-repeat;
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:15px;
right:18px;
cursor:pointer;
}
.modala
{
width: 372px;
height: 206px;
background: url(../images/modal.png) no-repeat;
}
</style>
</head>
<body>
test page
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/include/jquery.simplemodal-1.3.5.js" type="text/javascript"></script>
<script type="text/javascript">
$("body").click(function() { $.modal("<div class=\"modala\"><h1>SimpleModal</h1></div>", {overlayClose: true} ); });
</script>
</body>
</html>
what can be the problem? is it a known problem with simplemodal and FF?
simplemodal is a deprecated library. You better use something like http://docs.jquery.com/UI/Dialog