I put my callback call directly in the kendo datasource example and I am unable to get this to render. What am I missing?
The datasource will not load and I keep getting a type error. Any help would be appreciated.
This is the code that I entered into a kendo dojo.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datasource/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div class="demo-section k-header wide">
<div id="products"></div>
</div>
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="../content/web/foods/#= ImageURL #.jpg" alt="#: ProductName # image" />
<h3>#:Description#</h3>
<p>#:kendo.toString(CurPrice, "c")#</p>
</div>
</script>
<script>
$(function() {
var template = kendo.template($("#template").html());
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "//justclickzmedia.net/Search/Get/?callback=callback&query=coach+handbag",
dataType: "jsonp"
}
},
requestStart: function() {
kendo.ui.progress($("#products"), true);
},
requestEnd: function() {
kendo.ui.progress($("#products"), false);
},
change: function() {
$("#products").html(kendo.render(template, this.view()));
}
});
dataSource.read();
});
</script>
<style>
#products {
padding: 10px;
margin-bottom: -1px;
/* height: 510px;
overflow: auto;*/
}
.product {
float: left;
position: relative;
width: 111px;
height: 170px;
margin: 0;
padding: 0;
}
.product img {
width: 110px;
height: 110px;
}
.product h3 {
margin: 0;
padding: 3px 5px 0 0;
max-width: 96px;
overflow: hidden;
line-height: 1.1em;
font-size: .9em;
font-weight: normal;
text-transform: uppercase;
color: #999;
}
.product p {
visibility: hidden;
}
.product:hover p {
visibility: visible;
position: absolute;
width: 110px;
height: 110px;
top: 0;
margin: 0;
padding: 0;
line-height: 110px;
vertical-align: middle;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,0.75);
transition: background .2s linear, color .2s linear;
-moz-transition: background .2s linear, color .2s linear;
-webkit-transition: background .2s linear, color .2s linear;
-o-transition: background .2s linear, color .2s linear;
}
.k-listview:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</div>
</body>
</html>
This isn't an answer for the OP but in case someone comes here getting "TypeError - kendo.data.DataSource is not a constructor." check to see if you're accidentally including kendo.core.min.js instead of kendo.ui.core.min.js
Related
I'd like to be able to take any div, no matter it's background color and give it a slight change in color, either darker or lighter depending on my situation
Currently, I can do it with css but then I have to pick the color. I want it for an unknown colored or white or black button.
function theFunction(){
console.log("woho");
}
body {
display: flex;
gap: 5px;
align-items: center;
height: 100vh;
justify-content: center;
margin: 0; }
.button1 {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
border-radius: 130px;
cursor: pointer;
font-weight: 500;
font-size: 50px;
font-family: "Lexend", sans-serif;
user-select: none;
background-color: #0084ff;
transition: background-color 0.2s ease; }
.button1.selected {
background-color: #0077e6;
color: white; }
.button1:hover {
background-color: #006acc;
color: white; }
.button1:active {
background-color: #99ceff;
color: black; }
.text {
text-align: center; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Perfect Button</title>
<link rel="stylesheet" href="index.css" />
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght#100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet" />
</head>
<body>
<div class="button1" onclick="theFunction()">
<div class="text">Click Me</div>
</div>
<div class="button1 selected" onclick="theFunction()">
<div class="text">Click Me</div>
</div>
<script src="index.js"></script>
</body>
</html>
To do it for any background color of any div use:
$--color: #0084ff;
$--black: black;
$--white: white;
$--background-active: ligther($--color, 30%);
body {
display: flex;
gap: 5px;
align-items: center;
height: 100vh;
justify-content: center;
margin: 0;
}
#mixin backgroundLigthen($--color, $--percentage) {
background-color: lighten($--color, $--percentage);
$--background: lighten($--color, $--percentage);
#include adjust-text-color($--background);
}
#mixin backgroundDarken($--color, $--percentage) {
background-color: darken($--color, $--percentage);
$--background: darken($--color, $--percentage);
#include adjust-text-color($--background);
}
#mixin adjust-text-color($--background) {
#if (lightness($--background) < 50%) {
color: $--white;
} #else {
color: $--black;
}
}
.button1 {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
border-radius: 130px;
cursor: pointer;
font-weight: 500;
font-size: 50px;
font-family: "Lexend", sans-serif;
user-select: none;
background-color: $--color;
transition: background-color 0.2s ease;
#if (lightness($--color) > 50%) {
color: $--white;
}
&.selected {
#include backgroundDarken($--color, 5%);
}
&:hover {
#include backgroundDarken($--color, 10%);
}
&:active {
#include backgroundLigthen($--color, 30%);
}
}
.text {
text-align: center;
}
For a scss example: https://jsfiddle.net/gu2r4jqk/7/
I have an issue with Dompdf not positioning images correct.
The output in browser is ok, but the images are to close to the title in the PDF.
They should also render over the blue bar. I thought this should be possible with either a negative margin-top or a position absolute. But from what I read is that position:absolute inside a position:relative container is (still) not working.
HTML and expected output:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
#page { margin: 0px; }
body
{
font-family: 'Lato';
font-size: 13px;
margin: 0px;
padding: 0px;
}
.container
{
padding: 0px 30px;
}
.top_container
{
position: relative;
}
.subgroep
{
color: #2e4660;
font-weight: 700;
padding-top: 30px;
}
.top_container .balk_blauw
{
/*position: absolute;*/
/*bottom: 0px;*/
/*left: 0px;*/
height: 60px;
width: 100%;
background: #2e4660;
margin-top: -60px;
}
.top_container .images
{
position: relative;
z-index: 99;
}
.top_container .images img
{
width: 230px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="top_container">
<div class="container">
<div class="subgroep">Wijnklimaatkast</div>
<div class="images">
<img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
<img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
</div>
</div>
<div class="balk_blauw"></div>
</div>
</body></html>
PDF renders as follows:
Screenshot
PHP Code:
$dompdf_options = new \Dompdf\Options();
$dompdf_options->set('isRemoteEnabled', true);
$dompdf_options->set('chroot', $dirname);
$dompdf = new \Dompdf\Dompdf($dompdf_options);
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream();
This is an issue with how Dompdf aligns element within a line box. There is an ongoing effort to address the issue (WIP).
With the current release you can work around the issue by moving your image block down using relative positioning. You'll also want to set z-indexing a bit differently to better accommodate how Dompdf renders elements.
Try the following:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
#page { margin: 0px; }
body
{
font-family: 'Lato';
font-size: 13px;
margin: 0px;
padding: 0px;
}
.container
{
padding: 0px 30px;
z-index: 99;
}
.top_container
{
position: relative;
}
.subgroep
{
color: #2e4660;
font-weight: 700;
padding-top: 30px;
}
.top_container .balk_blauw
{
/*position: absolute;*/
/*bottom: 0px;*/
/*left: 0px;*/
height: 60px;
width: 100%;
background: #2e4660;
margin-top: -60px;
}
.top_container .images
{
position: relative;
top: 40px;
z-index: 99;
}
.top_container .images img
{
width: 230px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="top_container">
<div class="container">
<div class="subgroep">Wijnklimaatkast</div>
<div class="images">
<img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
<img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
</div>
</div>
<div class="balk_blauw"></div>
</div>
</body></html>
Follow your issue for updates
I'm documenting my API created using Spring Boot 2.4.3 using springfox-swagger 3.0.0. So I have the below page now.
My client wants to change the Swagger UI logo to their own. I'm not able to do so. I have searched and found few solutions and it is not working.
Added the below custom code under /resource/static/swaggercustm.css. But no changes.
.swagger-ui img {
content: url('/static/css/mylogo.png');
width: 140px;
height: 40px;
}
Imported swagger-ui.css to local and triede modifying image path. But this also didn't help.
Can somebody please help me here to just modify the logo? How to override the logo properties?
Unfortunately, There is no Configuration available in Springfox library to Customise UI elements CSS and Icons.
If you want your own customised Swagger Page then create a static HTML page and disable usage of auto-generated swagger page from Springfox.
Since its HTML, you can change ICONS and the look of it however you want.
resources/static/new_swagger.html
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui.css" >
<link rel="icon" type="image/png" href="./swagger-favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="./swagger-favicon-16x16.png" sizes="16x16" />
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body
{
margin:0;
background: #fafafa;
}
.top-nav-bar{
position: fixed;
top: 0;
z-index: 99;
width: 100%;
overflow: hidden;
background: #333;
padding: 15px;
}
.nav-bar-icon{
margin-top: 1px;
float: left;
display: block;
text-decoration: none;
}
.nav-bar-title{
float: left;
display: block;
text-decoration: none;
margin-top: 7px;
margin-left: 10px;
font-size: 18px;
color: #ffffff;
font-family: sans-serif;
}
.nav-bar-select{
width: 30%;
float: right;
font-family: sans-serif;
display: inline-block;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border-radius: 2px;
border: none;
background: #fafafa;
color: #3b4151;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
select.classic {
background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
background-size: 5px 5px, 5px 5px, 3.5em 3.5em;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="top-nav-bar">
<a class="nav-bar-icon"><img src="swagger-favicon-32x32.png"></a>
<a class="nav-bar-title"><b>X name</b></a>
<select class="classic nav-bar-select" id="service-selector" onchange="changeSwaggerUI()">
<option value="./swagger.json">X service</option>
</select>
</div>
<div style="margin-top: 100px" id="swagger-ui"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-bundle.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-standalone-preset.js"> </script>
<script>
function changeSwaggerUI(){
let selected_service_swaggerURL = document.getElementById("service-selector").value;
loadUI(selected_service_swaggerURL);
}
function loadUI(swaggerJsonURL){
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
url: swaggerJsonURL,
validatorUrl: "",
dom_id: '#swagger-ui',
deepLinking: true,
docExpansion: 'none',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
CustomTopbarPlugin
],
layout: "StandaloneLayout"
});
// End Swagger UI call region
window.ui = ui
}
function CustomTopbarPlugin() {
// this plugin overrides the Topbar component to return nothing
return {
components: {
Topbar: () => null
}
}
}
window.onload = function() {
loadUI("./swagger.json");
}
</script>
</body>
</html>
I'm making an image slider, and everything works so far but my previous and next buttons are not centering vertically on the main image. I'm trying to make it responsive as well.
I tried everything but I don't know what I'm missing. The absolute position with top: 50% doesn't seem to do the trick. Here's the codepen.
$('#imgDetail li img').click(function(){
$('#unidoor').attr('src',$(this).attr('src'));
});
$('#next').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:first').attr('src')): $('#unidoor').attr('src',nextSrc);
});
$('#prev').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:last').attr('src')): $('#unidoor').attr('src',nextSrc);
});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
#unidoor {
position: relative;
width: 90%;
margin: 0 auto;
display: block;
}
#prev {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-10%, -50%);
}
#next {
position: absolute;
top: 50%;
right: 10%;
transform: translate(-10%, -50%);
}
/* .previous {left: 10%;}
.next {right: 10%;} */
/* .prev-next-button a {
position: absolute;
left: 20%;
top: 20%;
} */
#imgDetail ul {
margin: 0 auto;
display: block;
width: 50%;
}
.thumb {
width: 25%;
height: auto;
margin: 15px 5px 0 5px;
}
#imgDetail li {
display: inline; margin-right: 10px;
}
#imgDetail a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
#imgDetail a:hover {
background-color: #7bbe9a;
color: white;
opacity: 1;
}
.previous {
background-color: #fff;
opacity: 0.5;
color: black;
}
.next {
background-color: #fff;
opacity: 0.5;
color: black;
}
/* .round {
border-radius: 50%;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="imgDetail">
<br>
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="unidoor" />
‹
›
<ul>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="thumb" /></li>
</ul>
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>
Hello there you can wrap the <div id="imgDetail"> in an outer div class for instance <div class="slideshow-container"> and then add your CSS which would look like this:
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
You can get the changes on codepen. Happy coding :)
I want a Kendo List View for showing images, so
Here is my KendoUI list view, but the values which I am fetching from controller is not binding in template.please help..
<div id="example">
<div class="demo-section">
<div id="listView"></div>
<div id="pager" class="k-pager-wrap"></div>
</div>
#section scripts{
<script src="~/scripts/kendo/kendo.all.min.js"></script>
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="#= Title #" alt="#: Title # image" />
<h3>#:Title#</h3>
</div>
</script>
<script>
$(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/my/thumbnail",
dataType: "json"
}
},
pageSize: 15,
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#template").html())
});
});
</script>
}
<style scoped>
.demo-section {
margin: 20px auto;
border: 0;
background: none;
width: 577px;
}
#listView {
padding: 10px;
margin-bottom: -1px;
min-width: 555px;
min-height: 510px;
}
.product {
float: left;
position: relative;
width: 111px;
height: 170px;
margin: 0;
padding: 0;
}
.product img {
width: 110px;
height: 110px;
}
.product h3 {
margin: 0;
padding: 3px 5px 0 0;
max-width: 96px;
overflow: hidden;
line-height: 1.1em;
font-size: .9em;
font-weight: normal;
text-transform: uppercase;
color: #999;
}
.product p {
visibility: hidden;
}
.product:hover p {
visibility: visible;
position: absolute;
width: 110px;
height: 110px;
top: 0;
margin: 0;
padding: 0;
line-height: 110px;
vertical-align: middle;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,0.75);
transition: background .2s linear, color .2s linear;
-moz-transition: background .2s linear, color .2s linear;
-webkit-transition: background .2s linear, color .2s linear;
-o-transition: background .2s linear, color .2s linear;
}
.k-listview:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</div>
and here is my data ,
Items: [,…]
0: {ID:148, Name:Thumbnail, Profiles:null, ContentID:0, Title:http://img.youtube.com/vi/wLbA9Dsnyik/0.jpg,…}
1: {ID:149, Name:Thumbnail, Profiles:null, ContentID:0, Title:http://img.youtube.com/vi/wLbA9Dsnyik/0.jpg,…}
2: {ID:150, Name:Thumbnail, Profiles:null, ContentID:0, Title:http://img.youtube.com/vi/wLbA9Dsnyik/2.jpg,…}
3: {ID:151, Name:Thumbnail, Profiles:null, ContentID:0, Title:http://img.youtube.com/vi/FjBwQtSEGEw/0.jpg,…}
Now these data is not getting bind in template.
Please update the = sign to : sign in the template. Please see below:
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="#: Title #" alt="#: Title # image" />
<h3>#:Title#</h3>
</div>
</script>