I am new to Kendo-UI, the below is my sample code to display the data in kendo tree view. The result is coming fine but it is showing arrow symbol when expand and collapse the menu, instead of that i want to make it as a plus(+) and minus(-):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
animation: false,
dataSource: [
{ text: "foo", items: [
{ text: "bar", items: [{text:"car"}] }
] }
]
});
</script>
</body>
</html>
You should be able to customize treeview icons via css:
.k-treeview .k-minus {
background: url('../Images/your_minus_img.png')center center;
}
.k-treeview .k-plus{
background: url('../Images/your_plus_img.png')center center;
}
See a live sample here on Dojo
Related
Suppose the title attribute was used as the text for a tool tip. Is it possible just to change the text, using jQuery?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
I couldn't get it to change with the option as I believe the api says using title is to tell it what the value should be if the title is not there. I got it to work by changing the title to be data-title and gave the title option as a function that returns this value.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
title: function () {
return this.getAttribute('data-title');
}
});
setInterval(function(){
$('[data-toggle="tooltip"]').attr('data-title', Date.now());
}, 1000);
});
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
I am new to web development and am trying to use patternFly Donut chart for my project. But when I try to check it by running as simple HTML it throws below error. Could someone help me with this?
Error image
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
<div id="donut-chart-6" class="example-donut-chart-utilization"></div>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
utilizationDonutChartConfig.bindto = '#donut-chart-6';
utilizationDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
utilizationDonutChartConfig.size = {
width: 200,
height: 171
};
utilizationDonutChartConfig.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
$().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>
Your use of $() is confusing. Commenting out the lines that use it yields a donut chart. It seems like you're trying to load default configurations, but I didn't find any information on the c3 website indicating that it was a jQuery plugin. Perhaps you're misunderstanding what jQuery does? If you're trying to load some sort of default configurations from a form as JSON then you might need to get more creative.
For simplicity, in the example below I've reformatted your data as a single object.
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
<div id="donut-chart-6" class="example-donut-chart-utilization"></div>
<script>
//var c3ChartDefaults = $().c3ChartDefaults();
//var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
utilizationDonutChartConfig = {
bindto : '#donut-chart-6',
data : {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
},
size : {
width: 200,
height: 171
},
tooltip : {
//contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
}
}
var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
//$().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>
var c3ChartDefaults = (<any>$()).c3ChartDefaults();
This worked for me.
I can't find a way to change the drawer hamburger icon. Let's the code doing the talk :
THE CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawer icon color</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
</div>
</body>
</html>
THE OUTPUT
The icon seems to be added dynamically afterwards with colour set to white :
When I change its colour from my chromium console everything's fine.
But if I try using the css class it doesn't work :
.mdl-layout__header .mdl-layout__drawer-button {
color: #000 !important;
}
MY QUESTION
Do I have any other solutions than changing the colour dynamically through the DOM or directly messing with material.min.js?
(Didn't successfully change the colour using javascript neither)
<script type="text/javascript">
document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red";
</script>
Thanks ! ♫♪ I wish you a merry christmas ♫♪♫
this work
.material-icons {
color: red !important;
}
I have added the i-tag from the material icons to your CSS. This is working fine. See snippet:
.mdl-layout__header .mdl-layout__drawer-button i {
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawer icon color</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
</div>
</body>
</html>
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<div id="inc"></div>
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$("#inc").load("header.html");
});
</script>
</body>
</html>
If I copy-paste the content of header.html page after the body, then everything works fine.
when I tried to include the header.html page using .load() function then the CSS won't work properly.
Here is the online sample codepen
if I include the content of div="inc" from an external file like header.html than drop-down menu will overlap each other.
Hope this helps.
Your scripts.js file contains
$(window).load(function(){
"use strict";
// Align Elements Vertically
alignVertical();
alignBottom();
$(window).resize(function(){
alignVertical();
alignBottom();
});
// Isotope Projects
});
The scripts.js file you have provided is trying to add some styling to the header.html.
but it's not doing the expected behaviour because the scripts.js file is loading before the header.html file.
Just add this at the end after your header content
<script src=assets/js/scripts.js></script>
This will let the header.html content load first and than scripts.js
Also here is the github repo code structure
https://github.com/siddhartharora02/jsLoad
Try this
<link href="../assets/css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/smooth-scroll.min.js"></script>
<script src="../assets/js/scripts.js"></script>
For your original issue,
If you want to include html content dynamically, here is a method to do it,
HTML,
<link data-include="includes/header.html">
JS,
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
Hope this will help!
Try this,
Now you can include any partial content as you want.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<link data-include="header.html">
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
});
</script>
</body>
</html>
Try using like this,
$(document).ready(function() {
$.get('header.html').success(function(data){
var headerHTML = data;
$('#inc').html(headerHTML);
});
});
How about this:
Instead of using a load method, use an iframe
<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>
Edit
<iframe id="inc" src="header.html" class="hidden"></iframe>
css
iframe.hidden {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: hidden;
}
iframe.hidden.load {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: block;
}
JS
!!! Here trigger means the trigger when you want it to load such as onClick, onMouseover, etc !!!
Requires jQuery
$('iframe.hidden').trigger(function() {
$(this).addClass('load');
});
I cant seem to see what has changed in the change logs for jquery ui from version 1.8.20 to what I'm now using 1.10.3
I am pulling data dynamically from a database and it replicates tabs as it needs. The tabs don't work, instead it displays all divs open on the page all over the place. So I guess its as if the hide css doesn't work. Tabs do nothing also when you click on them.
It is creating the tabs and also displaying the content. just as i said, the ALL divs show instead of being hidden unless you select a tab. So in turn clicking on the tabs does nothing because everything is already showing.
I think apart of the script that needs changing is here:
<html style="height:100% !important;">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Loading bootstrap css-->
<link type="text/css"
href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
<link type="text/css" rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css">
<!--LOADING SCRIPTS FOR PAGE-->
<link type="text/css" rel="stylesheet" href="vendors/dhtmlxGantt/dhtmlxgantt.css">
<!--Loading style vendors-->
<link type="text/css" rel="stylesheet" href="vendors/animate.css/animate.css">
<link type="text/css" rel="stylesheet" href="vendors/jquery-pace/pace.css">
<!--Loading style-->
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="style-mango.css" id="theme-style">
<link type="text/css" rel="stylesheet" href="css/themes/default.css" id="color-style">
<link type="text/css" rel="stylesheet" href="css/vendors.css">
<link type="text/css" rel="stylesheet" href="css/style-responsive.css">
<link type="text/css" href="vendors/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="shortcut icon" href="images/icons/favicon.ico">
</head>
<!--BEGIN CONTENT-->
<div class="page-content" style="min-height:1400px;">
<div class="col-md-9" id="nfw_body_body" style="height:100%;">
<style>
div.ui-tabs { width:100%; height:80%; min-height:700px; margin:5px; float:left; border:none; }
#tabs .ui-widget-content { border:none; padding:0px; margin:0px; background-color:#fff !important;" }
}
</style>
<script language="javascript">
var dyna_tabs = {
tabs: null,
init: function (id) {
var tabs = $('<div></div>').append('<div id="'+ id + '"></div>');
$('#nfw_body_body').append(tabs);
var list = $('<ul></ul').append('<li></li>');
tabs.append(list);
tabs.tabs();
// remove the dummy tab
tabs.tabs('remove', 0);
tabs.hide();
this.tabs = tabs;
},
add: function (tab_id, tab_name, tab_content) {
if (this.tabs != null) {
if (this.tabs.css('display') == 'none') {
this.tabs.show();
}
var data = $('<div id="'+tab_id+'"></div>').append(tab_content);
this.tabs.append(data).tabs('add', '#' + tab_id, tab_name);
this.tabs.tabs('beforeActivate', '#' + 1);
} else {
alert('Tabs not initialized!');
}
}
};
$(document).ready(function() {
dyna_tabs.init('mytabs');
dyna_tabs.add(
'tabs-' + 1,
' User Details',
'<div id="tabs-1" ></div>'
);
$('#tabs-1').load("content/change_user_details.php?user_id=");
dyna_tabs.add(
'tabs-' + 2,
'Pest Control',
'<div id="tabs-2"><h2>Pest Control</h2></div>'
);
$('#tabs-' + 2).load("content/change_service_details.php?service_id=");
2
dyna_tabs.add(
'tabs-' + 3,
'House Cleaning',
'<div id="tabs-3"><h2>House Cleaning</h2></div>'
);
$('#tabs-' + 3).load("content/change_service_details.php?service_id=);
3
});
</script>
</div>
<!--END CONTENT-->
</div>
<!--END CONTENT-->
<!--START FOOTER -->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<!--loading bootstrap js-->
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="vendors/metisMenu/jquery.metisMenu.js"></script>
<script src="vendors/slimScroll/jquery.slimscroll.js"></script>
<script src="vendors/jquery-cookie/jquery.cookie.js"></script>
<script src="js/jquery.menu.js"></script>
<script src="vendors/jquery-pace/pace.min.js"></script>
<!--LOADING SCRIPTS FOR PAGE-->
<!--CORE JAVASCRIPT-->
<script src="js/main.js"></script>
<script src="js/holder.js"></script>
<!--END FOOTER-- >
This was solved as multiple versions and calls of jquery. Only one can be called.