I am trying to do a very simple example of datepicker field.
{ name: 'p_ManagerDateApproved', width: 80, editable: true, editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); } } },
Firebug says "TypeError: $(...).datepicker is not a function
...Init: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); } } }
Everything else in my grid seems to work ok. Can anyone give me an idea of how to go about solving this, I am not sure where to start.
I wasnt able to post this in a comment so here is my code I probably should have posted this first sorry
<head>
<style>
#gbox_grid{display:none;}
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:blue;}
a:active {color:yellow;}
.readonly {background-color: WhiteSmoke !important;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQgrid - ASPX</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<!--<script src="http://asp2d:1138/jquery-1.8.3.js"></script>-->
<!--<script src="http://asp2d:1138/jquery-ui-1.9.2.custom.js"></script>-->
<script type="text/javascript" src="http://asp2d:1138/grid.locale-en.js"></script>
<script type="text/javascript" src="http://asp2d:1138/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://asp2d:1138/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://asp2d:1138/ui.jqgrid.css" />
<script>
$(function () {
Related
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>
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 trying to animate an object with snap.svg, it's showing but not scaling.
Here's my code.
It works only if I generate the object with code but not working with loaded svg objects.
Why it's not being animated on hover?
<html>
<head>
<title></title>
<script type="text/javascript" src="snap.svg.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#svg {
width : 600px;
height : 600px;
}
</style>
</head>
<body>
<svg id="svg"> </svg>
</body>
<script type="text/javascript">
var paper = Snap("#svg");
Snap.load("balls.svg" , function(d){
var icon = d.select('#round_ball');
var back = d.select('#background');
paper.append(d);
back.attr({
fill : '#000000'
});
icon.hover(function(event) {
this.animate({
transform : "t110,150",
filter: f
}, 200, mina.easeout);
}, function(event) {
this.animate({
transform : "t0,0"
}, 200, mina.easeout);
});
});
</script>
</html>
Below is my code. All JS files are loading properly and no JS error but Google Map is not getting displayed in browser. I checked on all browser but nothing worked for me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%#page
language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%
String contextPath = request.getContextPath();
%>
<html>
<head>
<title>home</title>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
width : 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="<%=contextPath%>/script/jquery.ui.map.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#map_canvas').gmap().bind('init', function (ev, map) {
$('#map_canvas').gmap('addMarker', { 'position': '57.7973333,12.0502107', 'bounds': true }).click(function () {
$('#map_canvas').gmap('openInfoWindow', { 'content': 'Hello World!' }, this);
});
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<form:form method="post" id="searchTweetForm" action="home.do">
<div id="map_canvas"/>
</form:form>
</body>
</html>
Your css is incorrect, the map doesn't have a size. The map is :
<div id="map_canvas"/>
Change:
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
width : 100%;
}
</style>
To:
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
width : 100%;
}
</style>
(or change the div to match that used in the css).
working example
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