My source is an xml file, and I'm willing to use the layout MIXED_HIERARCHY_RIGHT_LINKS.
The default layout preserves the lines order, but MIXED_HIERARCHY_RIGHT_LINKS doesn't: the 1st line is displayed on top, then lines are enumerated bottom-up. As a result, the alphabetical order is broken.
Could you fix this behaviour? Thanks in advance!
index.html
<!DOCTYPE html><html>
<head>
<script src="getorgchart/getorgchart.js"></script>
<link href="getorgchart/getorgchart.css" rel="stylesheet" />
</head>
<body>
<div id="people">
<script type="text/javascript">
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
primaryFields: ["name", "service", "title", "phone"],
layout: getOrgChart.MIXED_HIERARCHY_RIGHT_LINKS,
dataSource: "init-from-xml.xml",
expandToLevel: 4
});
</script>
</div>
</body>
</html>
init-from-xml.xml
<?xml version="1.0" encoding="utf-8" ?>
<people>
<person name="Met" title="" phone="" image="" service="">
<person name="Jamez" title="" phone="" image="" service=""></person>
<person name="Kirk" title="" phone="" image="" service=""></person>
<person name="Lars" title="" phone="" image="" service=""></person>
<person name="Rob" title="" phone="" image="" service=""></person>
</person>
</people>
Please download the latest version 2.4.6 the issue has been addressed
Related
I am developing a dashboard website in NodeJS and MongoDB. In one of the page, I have to open an image in the modal window. Following is the code of that page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tor Modal Check</title>
<link rel="stylesheet" href="css/style.default.css" type="text/css" />
<link rel="stylesheet" href="css/responsive-tables.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="js/modernizr.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="js/responsive-tables.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<style type="text/css">
body .modal {
width: 650px;
margin-left: -325px;
}
</style>
</head>
<body>
<div class="mainwrapper">
<div class="rightpanel">
<ul class="commentlist">
<% tor.forEach(function(t){ %>
<li>
<img src="images/screenshot/<%= t.screenshot %>" alt="" style="width: 60px;" class="pull-left" />
<div class="comment-info">
<h4><%= t.url %></h4>
<p><strong>Comments: </strong><%= t.comments %></p>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#<%= t.modalid %>">Show Screenshot</button>
<!-- Modal -->
<div class="modal fade" id="<%= t.modalid %>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><%= t.url %></h4>
</div>
<div class="modal-body">
<img src="images/screenshot/<%= t.screenshot %>" height="100%" width="100%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<% }) %>
</ul>
</div>
</div>
</body>
The problem that I am facing is that not all "View Screenshot" are clickable. After digging a lot, I figure it's because of "rightpanel" div class.
/*** MAIN PANEL ***/
.rightpanel { margin-left: 260px; background: #f7f7f7; }
.rightpanel:after { clear: both; content: ''; display: block; }
If I remove margin-left: 260px; everything works as expected.
Any idea why this is happening and how to overcome it?
PS. This is not the complete code. Only the code that is significant for this question.
EDIT 1:
It works perfectly fine when i change margin-left: 260px to margin-left: 150px.
Bootstrap modals are already centered and have three sizes (300px for .modal-sm, 600px (default) and 900px for .modal-lg). But, if you need the width to be exactly 650px, you should set the width of .modal-dialog, not .modal. For example:
#media (min-width: 768px)
.modal-dialog {
width: 650px;
}
I am trying to display a table data using vaadin-grid, embedded within a paper-header-panel element. The data is supposed to come from a Rest call. The Rest client used is and I am binding the last-response attribute with the 'items' attribute of the vaadin-grid. When I am inspecting the HTML using firebug, I am able to see the table is properly getting created, but in the frontend nothing is getting visible.
Below is my custom element: 'aws-api-gateway-call'
<template>
<iron-ajax
auto
url="{{url}}"
handle-as="json"
last-response="{{handleResponse}}">
</iron-ajax>
<vaadin-grid items="{{handleResponse}}" selection-mode="multi">
<table>
<colgroup>
<col name="fileName">
<col name="titleName">
<col name="artist">
<col name="albumName">
<col name="action">
</colgroup>
<thead>
<tr>
<th style="z-index: 10">MP3 File Name</th>
<th>Title Name</th>
<th>Artist Name</th>
<th>Album Name</th>
<th>Action</th>
</tr>
</thead>
</table>
</vaadin-grid>
</template>
<script>
Polymer({
is: "aws-api-gateway-call",
properties : {
hostname:{
value: 'test',
notify: true
},
stage:{
value: 'test',
notify: true
},
method:{
value: 'test',
notify: true
},
url:{
computed: 'computeUrl(hostname, stage, method)'
}
},
computeUrl: function(hostname, stage, method){
console.log('URL to call-->' + [hostname, stage, method].join('/'))
return [hostname, stage, method].join('/')
}
});
</script>
And, here is my :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>An Web-app to customize MP3 songs' metadata</title>
<link rel="shortcut icon" href="img/vector-black-ipod-10170961.jpg" />
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.js"></script>
<script type="text/javascript" src="bower_components/prefixfree/prefixfree.js"></script>
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="elements/api_calls.html">
<link rel="stylesheet" href="css/main.css">
</head>
<body class="fullbleed layout vertical">
<paper-header-panel class="flex">
<div class="paper-header ipodHeaderPanel">My Ipod Customizer Application</div>
<div class="content">
<aws-api-gateway-call
hostname="https://<acct-id>.execute-api.us-west-2.amazonaws.com"
stage="mp3file"
method="MP3MetadataReadMicroService">
</aws-api-gateway-call>
</div>
</paper-header-panel>
</body>
</html>
Can you please help me understand the issue? And how to fix it?
I had the same problem with paper-scroll-header-panel and vaadin-grid. I found two causes/solutions for this:
A quick inspect revealed the page-scroll-header-panel had a height of 0px. Making sure that the pager-scroll-header-panel height was 100% fixed it:
.max-height {
height: 100%;
}
<paper-scroll-header-panel fixed class="max-height">
</paper-scroll-header-panel>
The paper-scroll-header-panel will create a mainContainer div and height: with position:'absolute' to place it's contents (which vaadin-grid might not like).
If the height is not your problem then try to override the position of the mainContainer to 'relative' to diagnose:
#mainContainer.paper-scroll-header-panel {
position: relative !important;
}
Disclaimer: Try to stay away from the !important clause, it usually causes huge negative impact on the style sheet’s maintainability. Inspect the mainContainer closely first since height:0 is usually the cause for this kind of things.
Hope this helps!
I'm trying to use WinJS SplitView in my Windows Universal App.
I created new project and added code from this example: http://try.buildwinjs.com/
So my HTML looks like that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- App1 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body class="win-type-body">
<div id="app">
<div class="splitView" data-win-control="WinJS.UI.SplitView">
<!-- Pane area -->
<div>
<div class="header">
<button class="win-splitviewpanetoggle"
data-win-control="WinJS.UI.SplitViewPaneToggle"
data-win-options="{ splitView: select('.splitView') }"></button>
<div class="title"><h3 class="win-h3">SplitView Pane Area</h3></div>
</div>
<div class="nav-commands">
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
</div>
</div>
<!-- Content area -->
<div class="contenttext"><h2 class="win-h2">SplitView Content Area</h2> </div>
</div>
</div>
</body>
</html>
When running the app almost everything works good. The only problem is with menu items (SplitViewCommand). They are not displayed.
When checking HTML WinJS.UI.SplitView and WinJS.UI.SplitViewPaneToggle is processed correctly but WinJS.UI.SplitViewCommand is not processed. It looks like app doesn't know what WinJS.UI.SplitViewCommand is.
Check your version of WinJS library in base.js file. WinJS.UI.SplitView is avaliable in WinJS 4.0 and above, but support for WinJS.UI.SplitViewCommand object starts from WinJS 4.2.
I would like to use Unitegallery carrousel with some pictures who's urls are in a view. I tried the following :
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='unitegallery/themes/carousel/ug-theme-carousel.js'></script>
<xp:this.data>
<xp:dominoView var="view4" databaseName="pictures.nsf"
viewName="pictures3" keys="demo">
</xp:dominoView>
</xp:this.data>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery}").unitegallery({
gallery_theme: "carousel",
tile_width: 60, //tile width
tile_height: 60, //tile height
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div id="gallery" style="display:none;">
<xp:repeat id="repeat6" rows="30" var="pictureData" value="#{view4}">
<xp:text escape="false" id="computedField11">
<xp:this.value><![CDATA[#{javascript:var thisPicture= pictureData.getColumnValue("bigPicture");
dezeAfbeeldingen ="<img src='"+thisPicture+"'data-image='"+thisPicture+"'style='height: 60px;width: 60px;'></img>";
return dezeAfbeeldingen;}]]></xp:this.value>
</xp:text>
</xp:repeat>
</div>
</xp:panel>
The result : nothing is displayed.
In Google chrome console I get an error : "Uncaught Error: The item should not be image type " and at the right side unitegallery.min.js:4"
The repeat is run , the pictures are found , but don't display and give this error.
When I replace the repeat with "hardcoded " image references everything seems to work....
EDIT
thisPicture is in fact the complete url of the picture so for example :
server/product/picture.nsf/O/unid/$File/picturename.jpg
HTML output :
<!DOCTYPE html>
<html lang="nl">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/2Eabootstrap/xsptheme/xsp.css&2Eabootstrap/bootstrap311/css/bootstrap.min.css&#Da&2Eabootstrap/xpages300.css.css">
<script type="text/javascript">var dojoConfig = {locale: 'nl-nl'};</script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.9.4/dojo/dojo.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.nl-nl/#Iq.js"></script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspClientDojo")</script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/bootstrap311/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/xpages300.js"></script>
<link rel="stylesheet" type="text/css" href="/web/web.nsf/bootstrap.min.css">
<script type="text/javascript" src="/web/web.nsf/JQueryXSnippet"></script>
</head>
<body class="xsp tundra">
<form id="view:_id1" method="post" action="/web/web.nsf/test_unite_gallery2.xsp" enctype="multipart/form-data">
<script src="unitegallery/js/unitegallery.min.js" type="text/javascript"></script><link href="unitegallery/css/unite-gallery.css" rel="stylesheet" type="text/css"><script src="unitegallery/themes/carousel/ug-theme-carousel.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(
function() {
x$("gallery").unitegallery({
gallery_theme: "carousel",
tile_width: 60, //tile width
tile_height: 60, //tile height
});
}
);
</script>
<div id="gallery" style="display:none;"><div id="view:_id1:repeat6">
<span id="view:_id1:repeat6:0:computedField11"><img src='server/product/picture.nsf/O/unid/$File/picturename1.jpg'data-image='server/product/picture.nsf/O/unid/$File/picturename1.jpg'style='height: 60px;width: 60px;'></img>
</span>
<span id="view:_id1:repeat6:1:computedField11"><img src='server/product/picture.nsf/O/unid/$File/picturename2.jpg'data-image='server/product/picture.nsf/O/unid/$File/picturename2.jpg'style='height: 60px;width: 60px;'></img>
</span>
etc for other pictures
</div>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!e4h2ba0vbj!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
</body>
</html>
EDIT2
More details about the error I get in chrome console :
"Uncaught Error: The item should not be image type " and at the right side unitegallery.min.js:4"
when I click on the arrow I get more details :
fillItemsArray # unitegallery.min.js:4
runGallery # unitegallery.min.js:4
UniteGalleryMain.run # unitegallery.min.js:4
jQuery.fn.unitegallery # unitegallery.min.js:9
(anonymous function) # test_unite_gallery2.xsp:23
n.Callbacks.j # jquery-1.11.0.min.js:2
n.Callbacks.k.fireWith # jquery-1.11.0.min.js:2
n.extend.ready # jquery-1.11.0.min.js:2
K # jquery-1.11.0.min.js:2
Under resources there's a red 1 behind unitegallery.min.js , and gives the same error message for it (The item should not be image type).
EDIT3
When I have a look at the difference of the html generated by the repeat or the hard coded picture references I see that there's a double " (good) and a ' (bad) for the img and src tags. How can I change that ?
This should work:
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
$("#gallery").unitegallery({
gallery_theme: "carousel",
tile_width: 60, //tile width
tile_height: 60, //tile height
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div id="gallery" style="display:none;">
<xp:repeat rows="100" var="pictureData" value="#{view4}" removeRepeat="true">
<xp:image url="#{javascript:pictureData.getColumnValue("bigPicture")}">
<xp:this.attrs>
<xp:attr name="data-image"
value="#{javascript:pictureData.getColumnValue("bigPicture")}">
</xp:attr>
</xp:this.attrs>
</xp:image>
</xp:repeat>
</div>
</xp:panel>
You get the error "The item should not be image type" because unitegallery doesn't like the <div>s and <span>s within <div id="gallery"> ... </div>. There have to be only <img>s.
As you showed in your question your rendered html looks like this
<div id="gallery" style="display:none;">
<div id="view:_id1:repeat6">
<span id="view:_id1:repeat6:0:computedField11">
<img src='server/product/.../picturename1.jpg'
data-image='server/product/.../picturename1.jpg'>
</img>
</span>
...
</div>
</div>
You get rid of repeat-div with repeat's attribute removeRepeat="true".
You can avoid computed field's span with <xp:image ... />. Set the additional attribute "data-image" as an additional attribute.
Unitegallery doesn't like ids with ":" in it like they get rendered by XPages. That's why embed html <div id="gallery" to define the place for Unitegallery carrousel. As it's already client side html you can address it direct in your client side code with $("#gallery").
The code above renders the gallery-div with nested repeat to just
<div id="gallery" style="display:none;">
<img src='server/product/.../picturename1.jpg'
data-image='server/product/.../picturename1.jpg'>
</img>
...
</div>
and this works well for Unitegallery.
I have googled for this and I am not an expert on it either. I tried the following code thinking I am doing it right to implement a simple autocomplete textbox. But does not work. Here is the code. If anyone would help out what could be wrong with it, that will be a big help. My textbox simply does not return any autocomplete suggestions when I try it.
Thanks.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="jquery.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--<link href="jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />--%>
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
$(function () {
$("#TextBox1").autocomplete
({
source: ["Joe", "John", "Jack", "Ben", "Bell", "Steve", "Scott"] // simple list of strings
});
});
</script>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
There is no reference for jquery ui library in ur code
TRY TO ADD THIS :
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>