I'm using mottie virtual keyboard and it's working well.
I created a custom button for language switcher between Arabic and English language, by default it's showing English as a default language.
When this button is clicked it's switching language correctly but not change display name of langSwitcher key.
$("#searchInput").keyboard({
language: 'en',// default language
keyBinding: 'mousedown touchstart',
layout: 'qwerty',
caretToEnd: true,
autoAccept: true,
usePreview: false,
appendLocally: true,
autoAcceptOnValid: true,
display: {
langSwitcher: 'English',
},
container: {theme: 'b', cssClass: 'ui-body'},
});
$.keyboard.keyaction.langSwitcher = function (keyboard) {
if (keyboard.options.language == 'en') {
keyboard.options.display.langSwitcher = "English";
keyboard.options.layout = 'ms-Arabic (102)';
keyboard.options.language = 'ar';
} else {
keyboard.options.display.langSwitcher = 'عربي';
keyboard.options.layout = 'qwerty';
keyboard.options.language = 'en';
}
console.log(keyboard.options.display.langSwitcher);
keyboard.redraw();
};
<link href="https://mottie.github.io/Keyboard/docs/css/bootstrap.min.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/docs/css/font-awesome.min.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/docs/css/jquery-ui.min.css" rel="stylesheet">
<!-- keyboard widget css & script (required) -->
<link href="https://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/css/keyboard-previewkeyset.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/bootstrap.min.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/js/jquery.keyboard.js"></script>
<!-- keyboard extensions (optional) -->
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-previewkeyset.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/layouts/keyboard-layouts-microsoft.min.js"></script>
Search : <input type='text' name='q' id='searchInput' />
I tried to print the display name in console when language changing.
it's changed to the new language and new name but not appear on button text.
How to solve this issue?
If I'm right you have to describe localization to your button:
$(document).ready(function() {
$("#searchInput").keyboard({
language: 'en',// default language
keyBinding: 'mousedown touchstart',
layout: 'qwerty',
caretToEnd: true,
autoAccept: true,
usePreview: false,
appendLocally: true,
autoAcceptOnValid: true,
container: {theme: 'b', cssClass: 'ui-body'},
});
// important part is here!
$.keyboard.language = {
ar: {
display: {
langSwitcher: 'English'
}
},
en: {
display: {
langSwitcher: 'عربي'
}
}
};
$.keyboard.keyaction.langSwitcher = function (keyboard) {
if (keyboard.options.language == 'en') {
keyboard.options.layout = 'ms-Arabic (102)';
keyboard.options.language = 'ar';
} else {
keyboard.options.layout = 'qwerty';
keyboard.options.language = 'en';
}
console.log(keyboard.options.display.langSwitcher);
keyboard.redraw();
};
});
<!DOCTYPE html>
<html>
<head>
<link href="https://mottie.github.io/Keyboard/docs/css/bootstrap.min.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/docs/css/font-awesome.min.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/docs/css/jquery-ui.min.css" rel="stylesheet">
<!-- keyboard widget css & script (required) -->
<link href="https://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/css/keyboard-previewkeyset.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/bootstrap.min.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/js/jquery.keyboard.js"></script>
<!-- keyboard extensions (optional) -->
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-previewkeyset.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/layouts/keyboard-layouts-microsoft.min.js"></script>
</head>
<body>
Search : <input type='text' name='q' id='searchInput' />
</body>
</html>
Sample from documentation
JSBin
Related
I have this code which was working before updated my Kendo version. What I'm trying to do is depending the selected tab option execute some other code, this is what I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script></head>
<body>
<div id="tabs1">
<ul>
<li id="tabs1-user" style="display:none;">Bullets</li>
<li id="tabs1-superUser">Features</li>
<li id="tabs1-details">Details</li>
<li id="tabs1-dashboard">Info</li>
</ul>
</div>
<script>
$(document).ready(function () {
setTabs();
});
function setTabs() {
var t1 = $("#tabs1").kendoTabStrip({
animation: { open: { duration: 0, effects: "fadeIn" }, close: { duration: 0, effects: "fadeOut" } },
select: function (e) {
console.log(e);
if (e && e.item) {
switch (e.item.id) {
case 'tabs1-user': break;
case 'tabs1-details': getDetails(); break;
}
}
}
});
t1.select(0);
$("#tabs1").show();
}
function getDetails() {
console.log('calling method to retrieve details...');
}
</script>
</body>
</html>
Also here is a DOJO
As you can see I expect sending the Id tabs1-details when I click on Details tab but what I'm getting is tabs1-tab-3.
How can I solve this issue? I need to define the tabs name in somewhere else?
It looks like Kendo Tabstrip overrides the ID you created. In this case, my suggestion would be to use the data attribute. Something like data-id. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script></head>
<body>
<div id="tabs1">
<ul>
<li data-id="tabs1-user" style="display:none;">Bullets</li>
<li data-id="tabs1-superUser">Features</li>
<li data-id="tabs1-details">Details</li>
<li data-id="tabs1-dashboard">Info</li>
</ul>
</div>
<script>
$(document).ready(function () {
setTabs();
});
function setTabs() {
var t1 = $("#tabs1").kendoTabStrip({
animation: { open: { duration: 0, effects: "fadeIn" }, close: { duration: 0, effects: "fadeOut" } },
select: function (e) {
console.log(e);
if (e && e.item) {
switch ($(e.item).attr('data-id')) {
case 'tabs1-user': break;
case 'tabs1-details': getDetails(); break;
}
}
}
});
t1.select(0);
$("#tabs1").show();
}
function getDetails() {
console.log('calling method to retrieve details...');
}
</script>
</body>
</html>
With the above code, when you click Details, "calling method to retrieve details..." will be printed in the console log.
I trying to use slider revolution provided by Themepunch on my website (developed in Angular 8) with dynamic data that is coming for a JSON file. Therefore, I have required CSS and js files in the index.html like this
<head>
<meta charset="utf-8">
<title>Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--Css Files-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/css/all.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
//Here is the css files
<link href="assets/css/rs-plugin/css/settings.css" rel="stylesheet">
<link href="assets/css/rs-plugin/css/navigation.css" rel="stylesheet">
<link href="assets/css/owl.carousel.min.css" rel="stylesheet">
<link href="assets/css/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<!-- js Files -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.smartmenus.js"></script>
<script src="assets/js/jquery.smartmenus.bootstrap-4.js"></script>
// Here is the js files
<script src="assets/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/functions.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>
And I use a component to show the slider as a banner. In that component I use asyc call to get the json from the json file and update the array and in the component HMTL I use ngFor loop it bind the array data. However, the silder is not showing any data bacause of the ngFor and if I remove it, then the data will show.
Here is the typescript code
#Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit, AfterViewInit {
constructor(private file: FileService, public translate: TranslateService) { }
#Input() entity: string;
#Input() site;
main_banner: any[] = [];
revSlider: any;
ngAfterViewInit() {
this.initRevolutionSlider();
}
ngOnInit() {
this.file.get(0, 'main_banner').then(r => {
this.main_banner = r;
});
}
get lang(): string {
return this.translate.currentLang == 'ar' ? '_ar' : '_en';
}
identify(index, item) {
return index;
}
counter: number = 0;
initRevolutionSlider() {
if ($('#revolutionSlider').get(0)) {
this.revSlider = $('#revolutionSlider').show().revolution({
sliderType: 'standard',
sliderLayout: 'fullscreen',
delay: 9000,
responsiveLevels: [4096, 1200, 992, 576],
gridwidth: [1100, 920, 680, 500],
gridheight: 740,
disableProgressBar: 'on',
spinner: 'spinner3',
parallax: {
type: "on",
levels: [20, 40, 60, 80, 100],
origo: "enterpoint",
speed: 400,
bgparallax: "on",
disable_onmobile: "off"
},
navigation: {
arrows: {
enable: true
}
},
});
}
}
}
and here is the HTML
<div class="rev_slider_wrapper fullscreen-container">
<div id="revolutionSlider" class="rev_slider fullscreenbanner" data-version="5.4.8" >
<ul>
<li data-transition="fade" *ngFor="let n of main_banner;trackBy:identify;">
<img *ngIf="n.banner" src="{{n.banner}}"
alt=""
data-bgposition="center center"
data-bgfit="cover"
data-bgrepeat="no-repeat"
data-kenburns="on"
data-duration="20000"
data-ease="Linear.easeNone"
data-scalestart="110"
data-scaleend="100"
data-offsetstart="250 100"
class="rev-slidebg" />
<h1 class="tp-caption font-weight-bold text-color-light text-center text-white"
data-x="center"
data-y="center" data-voffset="['-70','-70','-70','-70']"
data-width="['770','770','770','350']"
data-start="1000"
data-paddingtop="['11','11','11','16']"
data-paddingbottom="['11','11','11','16']"
data-fontsize="['50','50','45','35']"
data-lineheight="['56','56','50','40']"
data-transform_in="y:[100%];opacity:0;s:500;"
data-transform_out="opacity:0;s:500;"
style="white-space: normal;">
{{n.name_en}}
</h1>
</li>
</ul>
</div>
</div>
Thanks in advance
I wasn't able to figure out why *ngFor was not working, but I found a work around by following these steps:
Clear everything inside the slider 'ul' and give it an id='rev_slider_ul'
<!--Slider-->
<div class="rev_slider_wrapper">
<div id="rev_slider" class="rev_slider" data-version="5.0">
<ul id="rev_slider_ul">
</ul>
</div>
</div>
Import jquery in .ts file.
declare var jQuery: any;
Define a method to load the slider with configurations
loadSlider(){
return jQuery("#rev_slider").show().revolution({
sliderType: "standard",
sliderLayout: "fullwidth",
scrollbarDrag: "true",
navigation: {
arrows: {
enable: true
},
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
}
},
gridwidth: 1170,
gridheight: 770
});
}
Iterate the object you needed to iterate in ts and form a HTML string with it or keep appending to the slider element.
data.forEach((elem)=>{
jQuery("#rev_slider_ul").append(${elem})
});
Outside and after the forEach loop, load the slider
this.loadSlider()
Hope that helps. Don't see much to explain here, but open to questions if any.
HTML:
<button type="button" class="btn btn-success" style="margin-bottom:14px" id="btnAdd" onclick="modaladdedit('URLToMyController')"><i class="fa fa-plus"> Add New</i></button>
HEAD Tag:
<link rel="stylesheet" href="/Content/themes/base/jquery-ui.min.css" />
<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<link rel="stylesheet" href="/Content/bootstrap.min.css">
<link rel="stylesheet" href="/Content/font-awesome.min.css">
<link rel="stylesheet" href="/Content/ionicons.min.css">
<link rel="stylesheet" href="/admin-lte/css/AdminLTE.min.css">
<link rel="stylesheet" href="/admin-lte/css/skins/skin-black-light.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link href="/Content/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="/Content/datatablefooteredit.css" rel="stylesheet"/>
<script src="/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="/Scripts/jquery.dataTables.min.js"></script>
<script src="/Scripts/dataTables.bootstrap.min.js"></script>
After </body>:
<script src="/Scripts/jquery.slimscroll.min.js"></script>
<script src="/Scripts/fastclick.js"></script>
<script src="/admin-lte/js/adminlte.min.js"></script>
<script src="/admin-lte/js/demo.js"></script>
Scripts after </body>:
$(document).ready(function () {
$('.sidebar-menu').tree()
});
var Popup, table;
$(document).ready(function () {
// Some code here...
});
// Popup Modal Window
function modaladdedit(url){
var formDiv= $('</div>');
$.get(url)
.done(function(response){
formDiv.html(response);
Popup= formDiv.dialog({
autoOpen: true,
resizable: false,
position: 'center',
modal: true,
title: 'Add/Edit Email Data',
height: 500,
width: 600,
close: function (){
Popup.dialog('destroy').remove();
}
});
});
When I click on the button, the dialog window does not popup and I dont get any errors in the console.
I tried everything and nothing worked. I tried changing the order of the css and js file but nothing worked really.
Any help will be much appreciated.
Thank you!
Does this even create a <div>?
$('</div>')
I'm not sure if it self-corrects for you, but the / should be at the end:
$('<div/>')
Additionally, even when you create your formDiv you never append it to the DOM. Probably the ideal place to do that would be in the AJAX callback. Something like this:
formDiv.html(response);
$('body').append(formDiv);
You can append it anywhere you like really, I'm just using the <body> element as an example.
i have made a simple HTML Form. I want to grab some JSON data out of a CouchDB and display it in jqGrid. But all i get is this sh**** Output in Firefox or IE. Output Firefox
It's just one row but i don't know why the list gets so long. I also dont know why some parts are pulled apart (sorry i cant speak good english).
This is how it looks before i start the javascript action and i made a simple red box indicatting where the jqGrid should be: HTML Page before Action
As you can see, my two textboxes get covered by the jqGrid.
I dont know what causes this Problem and i don't have enough Knowledge of all this. Can someone help me ?
Here is my Code:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Testformular</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script type="text/javascript" charset="utf8" src="/DataTables/js/jquery.dataTables.js"></script>-->
<!--<script src="jqgrid/js/minified/jquery-1.11.0.min.js" type="text/javascript"></script>-->
<script src="jqgrid/js/i18n/grid.locale-de.js" type="text/javascript"></script>
<script src="jqgrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.theme.css">
<!--
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>
-->
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css">
<!--<link rel="stylesheet" type="text/css" href="/DataTables/css/jquery.dataTables.css">-->
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index2.js" type="text/javascript"></script>
</head>
<body onLoad="inputonload();">
<div class="page">
<div class="eingabe">
<form name="form" method="post">
<div>
<input class="input" onmouseover="clearOnClickFromkkz()" onmouseout="test()" value="Kundenkürzel" type="text" id="kkz">
</div>
<div>
<input class="input" onmouseover="clearOnClickFrommgr()" onmouseout="manager_updat()" type="text" id="mgr" name="manager" value="Manager">
</div>
</form>
</div>
<table id="Grid1" style="height: 290px; width: 444px"><div id="gridpager"></div></table>
</div>
</div>
</body>
</html>
My Javascript File
function clearOnClickFromkkz() {
if (document.getElementById('kkz').value === "Kundenkürzel") {
document.getElementById('kkz').value = "";
document.getElementById('kkz').style.color = "#000000";
}
}
function clearOnClickFrommgr() {
if (document.getElementById('mgr').value === "Manager") {
document.getElementById('mgr').value = "";
document.getElementById('mgr').style.color = "#000000";
}
}
function inputonload() {
document.getElementById('kkz').style.color = "#A1A1A1";
document.getElementById('mgr').style.color = "#A1A1A1";
}
function manager_updat() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/mgr/_view/by_mgr?key="' + document.getElementById('mgr').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('mgr').value === "") {
document.getElementById('mgr').value = "Manager";
document.getElementById('mgr').style.color = "#A1A1A1";
}
}
function sid_update() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('kkz').value === "") {
document.getElementById('kkz').value = "Kundenkürzel";
document.getElementById('kkz').style.color = "#A1A1A1";
}
}
function test() {
jQuery(document).ready(function () {
var pager = '#gridpager';
jQuery("#Grid1").jqGrid({
url: 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"',
datatype: 'json',
mtype: 'GET',
colNames: ['key', 'value'],
colModel: [{ name: 'key', index: 'key', width: 150 },
{ name: 'value', index: 'value', width: 150}],
sortname: 'id',
pager: '#gridpager',
viewrecoreds: true,
scrollOffset: 0,
imgpath: 'Themes/images'
}).navGrid(pager, {edit: true, add: true, del: true, refresh: true, search: true, position: 'left'});
});
}
And my CSS File:
body{
}
.input {
margin:0px;
font-size:12px;
width:90%;
height:30px;
margin-bottom: 2px;
float:left;
text-align:center;
vertical-align:middle
}
div.eingabe {
width:150px;
float:left;
border: 0px;
padding: 0px;
margin: 0 0 0 0;
}
div.content {
border:1px solid #efeff7;
background-color:#efeff7;
width:650px;
height:100%;
float:right;
}
div.page {
position:absolute;
width:805px;
height:90%;
min-height:600px;
margin-left: 25%;
margin-top:10px;
border: 0px lime solid;
}
First, check that you are getting data. Use the dev console in FF/Chrome/IE you access it with F12, you can see the network tab and check your requests and responses.
Also there you can see any errors on the javascript code, check the console output
I'm having problems correctly displaying my dojox DialogWidget content.
I've created two toolbars and a ContentPane. The idea is to fix one toolbar on the top width fixed size, the other toolbar on the bottom and the ContentPane in the center. In my case I only see the top toolbar and the ContentPane which streches over the remaing space so the bottom toolbar is not seen. The content also displays different in different browsers. I am popping my code below.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main-demo.css" media="screen" />
<link rel="stylesheet" href="medview.css" media="screen" />
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Dialog/Dialog.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="async:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.Toolbar");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.VerticalSlider");
dojo.require("dijit.form.VerticalRuleLabels");
dojo.require("dijit.form.VerticalRule");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.widget.Dialog"
);
dialog = null;
dojo.addOnLoad(function()
{
container = dojo.create("div", {
class : "test",
id : "viewer"
}, dojo.body());
console.debug("Container ID: " + container);
var appLayout = new dijit.layout.BorderContainer({
design : "headline",
style:'width:100%;height:100%',
}, container.id);
content = new dijit.layout.ContentPane({
region:"center",
title : "Viewports",
class : "dhMedViewViewport"
});
appLayout.addChild(content);
viewportContainer = content.domNode;
var imgToolbar_zgoraj = new dijit.Toolbar({
region:"top",
}, "dhmv-toolbar");
imgToolbar_zgoraj.addChild(new dijit.form.Button({
label : "Reset",
showLabel : true
}));
var imgToolbar_spodaj = new dijit.Toolbar({
region:"bottom",
}, "dhmv-toolbar");
imgToolbar_spodaj.addChild(new dijit.form.Button({
label : "Reset",
showLabel : true
}));
appLayout.addChild(imgToolbar_zgoraj);
appLayout.addChild(imgToolbar_spodaj);
appLayout.startup();
dialog = new dojox.widget.Dialog({
sizeToViewport: true,
content : container
});
});
function showDialogTwo() {
dialog.startup();
dialog.show();
}
</script>
</head>
<body class="claro">
<p>
Test dialogBox
</p>
<button id="buttonTwo" dojoType="dijit.form.Button" type="button">
Show me!
<script type="dojo/method" event="onClick" args="evt">
showDialogTwo();
</script>
</button>
</body>