I have been trying to come up with a special 2 column layout.
Basically these are the requirements
Fixed width and centered
Height 100%
Header and Footer always visible
2 column content ( Main - Right )
Main column scroll on overflow
Right column fixed
Here is the code I have so far. I just haven't been able to center
the entire layout.
Live at www.onlinesportcenter.com
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SPECIAL 2 COLUMN LAYOUT</title>
<style type="text/css">
body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
background:#fff;
font-family:arial, verdana, sans-serif;
font-size:76%;
overflow: hidden;
}
* html body {
padding:120px 0 20px 0;
}
#header {
position:absolute;
top:0;
left:0;
width:1004px;
height:119px;
overflow:auto;
background:#73a2bd;
border-bottom:1px solid #35759a;
text-align:center;
}
* html #header {height:120px;}
#header p {
color:#fff;
margin:2px 0 0 0;
}
#header ul {
clear:both;
text-align:center;
border-top:1px solid #73a2bd;
}
#header ul {
margin:0;
padding:0;
list-style-type:none;
background:transparent;
height:3em;
}
#header ul li {
display:inline;
color:#73a2bd;
}
#container {
font-family: Arial, sans-serif;
font-size: 1.2em;
position:fixed;
top:120px;
left:0;
bottom:20px;
right:0;
background:#fff;
padding:0;
width:1004px;
}
* html #container {
height:100%;
width:1004px;
}
#container img {margin:5px;}
#main {
width:774px;
height:100%;
float:left;
overflow:auto;
}
#right {
width:228px;
height:100%;
float:right;
border-left:1px solid #73a2bd;
border-right:1px solid #73a2bd;
}
#footer {
position:absolute;
bottom:0;
left:0;
width:1004px;
height:19px;
overflow:auto;
text-align:center;
background:#73a2bd;
border-top:1px solid #35759a;
}
* html #footer {height:20px;}
#footer p {
color:#fff;
margin:2px 0 0 0;
}
</style>
</head>
<body>
<div id="header">
<p>HEADER</p>
</div>
<div id="container">
<div id="main">
<p>
MAIN
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
</div>
<div id="right">
<p>
RIGHT
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
</div>
</div>
<div id="footer">
<p>FOOTER</p>
</div>
</body>
</html>
Wrap all top-level elements (header, container and main) in another div, give it a set width and a the following margin: "margin:0 auto;"
EDIT: I take my words back. I misunderstood your initial problem. For header and footer you need to wrap them in a absolute positioned div anchored to the top or bottom. Make sure those elements have width to 100%. Then set margin to "0 auto" for inside elements. I'll post a JS Fiddle example in a sec.
EDIT 2: Here's what I got so far: http://jsfiddle.net/NfSKf/
Related
<form action="/users/student/update" method="POST">
<div class="personal">
<h3 style="padding: 0 22px;">PERSONAL DETAILS</h3>
<hr style="width: 25%; margin-left: 0; border: 1px solid black;">
<label for="name" class="d">Name :</label>
<input id="name" type="text" value= profileInformation.Name name="Name">
<hr>
<label for="email" class="e">Email :</label>
<input id="email" type="email" value="profileInformation.email" name="email">
<hr>
</div>
<hr style="border: 2px solid black;">
<input class="btn" type="submit" value="Submit">
</form>
In this code, profileInformation is a data object, and name and email are variables in it. I want to use them as default values. Right now, it is being printed as ProfileInformation.name and not the value. Please help.
You cannot do that in HTML. You need javascript for that.
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("name").value = profileInformation.name;
document.getElementById("email").value = profileInformation.email;
});
const profileInformation = {
name: "some name",
email: "test#gmail.com"
};
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("name").value = profileInformation.name;
document.getElementById("email").value = profileInformation.email;
});
<form action="/users/student/update" method="POST">
<div class="personal">
<h3 style="padding: 0 22px;">PERSONAL DETAILS</h3>
<hr style="width: 25%; margin-left: 0; border: 1px solid black;">
<label for="name" class="d">Name :</label>
<input id="name" type="text" name="Name">
<hr>
<label for="email" class="e">Email :</label>
<input id="email" type="email" name="email">
<hr>
</div>
<hr style="border: 2px solid black;">
<input class="btn" type="submit" value="Submit">
</form>
I have created a view which is rendered in the kendo window. I have the cancel button on the view. I would like to close the window When I click the cancel button. I have written the code to do it. But nothing seems happening.
Please see the code and screen shot below
Kendo window code
$("#contextMenu").kendoContextMenu({
target: "#grid",
alignToAnchor: false,
select: function (e) {
var selectedItem = e.item; // check this item is add or edit and then open the kendo window
if ($(selectedItem).text() == 'Add' || $(selectedItem).text() == 'Edit') {
var accessWindow = $("#addEdit").kendoWindow({
actions: {}, /*from Vlad's answer*/
draggable: true,
height: "700px",
modal: true,
resizable: false,
title: "Add new User",
width: "800px",
visible: false,
}).data("kendoWindow").center().open();
$("#btnCancel").click(function () {
$(this).closest("[data-role=window]").data("kendoWindow").close();
});
$("#language").kendoDropDownList({
filter: "startswith",
dataTextField: "LanguageDescription",
dataValueField: "LanguageCode",
dataSource: language
//dataSource: {
// type: "odata",
// serverFiltering: true,
// transport: {
// read: {
// url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
// }
// }
//}
});
$("#country").kendoDropDownList({
filter: "startswith",
dataTextField: "CountryDescription",
dataValueField: "CountryCode",
dataSource: country
//dataSource: {
// type: "odata",
// serverFiltering: true,
// transport: {
// read: {
// url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
// }
// }
//}
});
}
}
});
The view that is rendered in the kendo window
<div id="addEdit" style="width 100%; height 100%; background-color #fff;">
<div class="demo-section k-content">
<ul class="fieldlist">
<li>
<label for="simple-input" >Employee Number</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">ForeName</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">ForeName</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Surname</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Preferred Name</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input" class="form-horizontal">Language</label>
<input id="language" class="form-horizontal" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Country</label>
<input id="country" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Time Zone</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Domain</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Network Id</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Email Address</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Status</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<button id="btnCancel" class="k-button">Cancel</button>
<button class="k-button k-primary">Save</button>
</li>
</ul>
<style>
.fieldlist {
margin: 0 0 -2em;
padding: 0;
}
.fieldlist li {
list-style: none;
padding-bottom: 2em;
}
.fieldlist label {
display: block;
padding-bottom: 1em;
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
color: #444;
}
</style>
</div>
</div>
This has been resolved. I had to add the following jquery to fix it
$("#btnCancel").click(function () {
$(this).closest("[data-role=window]").data("kendoWindow").close();
});
Am working on a windows store javascript application. The application will be using data from azure. When I tried to port the azure connectivity sample to a navigation template, the list view displayed the entire columns from the table. I used the same data read code from the sample. The html page and css were identical to the sample.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--head segment-->
<title>QuickStart</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<script type="text/javascript" src="/MobileServicesJavaScriptClient/MobileServices.js"></script>
<!-- QuickStart references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/pages/Advertisement/advertisement.js"></script>
<link href="/pages/Advertisement/advertisement.css" rel="stylesheet" />
</head>
<body>
<!--body segment-->
<div style="margin: 50px 10px 10px 50px" id="overalldiv">
<div style="display: -ms-grid; -ms-grid-columns: 1fr 1fr; -ms-grid-rows: auto 1fr;">
<div style="-ms-grid-column-span: 2; margin: 0px 0px 20px 0px;">
<div style="color: #0094ff; font-size: 8pt">WINDOWS AZURE MOBILE SERVICES</div>
<div style="color: #808080; font-size: 32pt">Sample</div>
</div>
<div style="-ms-grid-row: 2; -ms-grid-column: 1;">
<div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
<div style="-ms-grid-column: 1;" class="tasknumber">
1
</div>
<div style="-ms-grid-column: 2">
<strong>Insert a TodoItem</strong><br />
<span style="font-size: small">Enter some text below and click Save to insert a new todo item into your database</span>
</div>
</div>
<div style="margin: 5px 0px 0px 72px; -ms-grid-column: 2">
<input type="text" id="textInput" />
<button id="buttonSave" style="margin-left: 5px">Save</button>
</div>
</div>
<div style="-ms-grid-column: 2; -ms-grid-row: 2;">
<div style="display: -ms-grid; -ms-grid-rows: auto 1fr">
<div style="-ms-grid-row: 1">
<div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
<div style="-ms-grid-column: 1; float: left;" class="tasknumber">
2
</div>
<div style="-ms-grid-column: 2">
<strong>Query and Update Data</strong><br />
<span style="font-size: small">Click refresh below to load the unfinished TodoItems from your database. Use the checkbox to complete and update your TodoItems</span>
</div>
</div>
<div style="margin: 5px 0px 0px 72px">
<button id="buttonRefresh">Refresh</button>
</div>
</div>
</div>
<div id="TemplateItem" data-win-control="WinJS.Binding.Template">
<div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
<input class="itemCheckbox" type="checkbox" data-win-bind="checked: complete; dataContext: this" />
<div style="-ms-grid-column: 2; -ms-grid-row-align: center; margin-left: 5px" data-win-bind="innerText: text">
</div>
</div>
</div>
<div id="listItems" style="-ms-grid-row: 2; margin: 20px 0px 0px 0px; -ms-grid-row-align: stretch"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: TemplateItem, layout: {type: WinJS.UI.ListLayout} }">
</div>
</div>
</div>
</div>
</body>
</html>
The actual sample project displayed only the text field from the azure database table as shown in the below diagram.
But in my case all the column fields are getting displayed
How am I supposed to display only the required content and how am I supposed to do the formatting for the listview contents. I wanted to display the contents in the following manner
1
ab
2
drag
3
dragon
4
arm
..
..
..
Have you set the itemTemplate for the ListView? You need to tell the ListView how to display each item of the itemDataSource
I have closed "Current Users" portlet from the demo installation and now can't open it back -- there is no such a portlet in a list.
How one can have it back on page?
Thanks.
The "Current Users" portlet is in fact just a "Web Content Display" portlet that's been renamed. So if you add a "Web Content Display" portlet on to your page and set then find the piece of Web Content called: "Welcome Login" (it's ID on mine was 10232, but this may be different for you) and set that as the content to be displayed you'll get it back. Or you can add a new piece of web content with the code below:
<p><style type="text/css"> .loginuser { margin-top:5px; width:100%; display:block; text-decoration:none; padding: 2px; padding-bottom: 10px; } .loginuser h2 { margin:0; font-size:14px; /*text-align:center;*/ } .loginuser a { display:block; padding-left: 20px; margin-left: 95px; margin-top: 2px; } .loginuser img { padding:2px; margin-right: 5px; } .loginuser:hover { background-color: #CED9E2; /*cursor:pointer;*/ } .express_login { background: url("/html/icons/login.png") no-repeat; } .public_pages { background: url("/html/themes/classic/images/common/view_tasks.png") no-repeat; } </style></p>
<form name="loginadmin" method="post" action="/web/guest/home">
<input type="hidden" value="58" name="p_p_id" /> <input type="hidden" value="1" name="p_p_lifecycle" /> <input type="hidden" value="view" name="p_p_mode" /> <input type="hidden" value="maximized" name="p_p_state" /> <input type="hidden" value="/login/login" name="_58_struts_action" /> <input type="hidden" value="bruno#7cogs.com" name="_58_login" /> <input type="hidden" value="bruno" name="_58_password" />
<div title="Login: bruno#7cogs.com, Password: bruno" class="loginuser">
<div style="float: left; padding-right: 4px;" class="user-profile-image"><img width="80" class="avatar" alt="" src="/image/user_portrait?screenName=bruno&companyId=10112&t=1228845375900" /></div>
<h2>Bruno (Admin)</h2>
<div>The admin has full control over the entire portal, allowing modification and creation of users, communitities, and roles. <a class="public_pages" href="/web/bruno">View bruno's public page</a> <a onclick="document.loginadmin.submit();return false;" class="express_login" href="#">Login as bruno</a></div>
</div>
</form>
<form name="loginrich" method="post" action="/web/guest/home">
<input type="hidden" value="58" name="p_p_id" /> <input type="hidden" value="1" name="p_p_lifecycle" /> <input type="hidden" value="view" name="p_p_mode" /> <input type="hidden" value="maximized" name="p_p_state" /> <input type="hidden" value="/login/login" name="_58_struts_action" /> <input type="hidden" value="richard#7cogs.com" name="_58_login" /> <input type="hidden" value="richard" name="_58_password" />
<div title="Login: richard#7cogs.com, Password: richard" class="loginuser">
<div style="float: left; padding-right: 4px;" class="user-profile-image"><img width="80" class="avatar" alt="" src="/image/user_portrait?screenName=richard&companyId=10112&t=1228845375871" /></div>
<h2>Richard Publisher</h2>
<div>Richard has article submission rights for the content management system. <a class="public_pages" href="/web/richard">View richard's public page</a> <a onclick="document.loginrich.submit();return false;" class="express_login" href="#">Login as richard</a></div>
</div>
</form>
<form name="loginmichelle" method="post" action="/web/guest/home">
<input type="hidden" value="58" name="p_p_id" /> <input type="hidden" value="1" name="p_p_lifecycle" /> <input type="hidden" value="view" name="p_p_mode" /> <input type="hidden" value="maximized" name="p_p_state" /> <input type="hidden" value="/login/login" name="_58_struts_action" /> <input type="hidden" value="michelle#7cogs.com" name="_58_login" /> <input type="hidden" value="michelle" name="_58_password" />
<div title="Login: michelle#7cogs.com, Password: michelle" class="loginuser">
<div style="float: left; padding-right: 4px;" class="user-profile-image"><img width="80" class="avatar" alt="" src="/image/user_portrait?screenName=michelle&companyId=10112&t=1228845375823" /></div>
<h2>Michelle Editor</h2>
<div>Michelle has control over the staging and layout of all articles as well as publishing rights for workflow and the content management system. <a class="public_pages" href="/web/michelle">View michelle's public page</a> <a onclick="document.loginmichelle.submit();return false;" class="express_login" href="#">Login as michelle</a></div>
</div>
</form>
<form name="loginjohn" method="post" action="/web/guest/home">
<input type="hidden" value="58" name="p_p_id" /> <input type="hidden" value="1" name="p_p_lifecycle" /> <input type="hidden" value="view" name="p_p_mode" /> <input type="hidden" value="maximized" name="p_p_state" /> <input type="hidden" value="/login/login" name="_58_struts_action" /> <input type="hidden" value="john#7cogs.com" name="_58_login" /> <input type="hidden" value="john" name="_58_password" />
<div title="Login: john#7cogs.com, Password: john" class="loginuser">
<div style="float: left; padding-right: 4px;" class="user-profile-image"><img width="80" class="avatar" alt="" src="/image/user_portrait?screenName=john&companyId=10112&t=1228845375887" /></div>
<h2>John Regular User</h2>
<div>John is a user with minimum rights within the portal.
<div><a class="public_pages" href="/web/john">View john's public page</a> <a onclick="document.loginjohn.submit();return false;" class="express_login" href="#">Login as john</a></div>
</div>
</div>
</form>
Hope this helps!
I am not able to display html content in Browser Field. I used UTF-8 encoding method. This is my HTML content
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'><html><head><title></title></head><body><p><strong>WELCOME … </strong></p>
<p style="text-align: center;"><span style="color: #003366;">WARNING! - Your life may never be the same after downloading this cool 'know yourself' tool… and it's fun!</span></p>
<p><span style="color: #003366;"><strong><em>Understand your relationships with your friends & family!</em></strong></span><br /><br /><span style="color: #003366;">Why can't I relate to my parents?</span><br /><span style="color: #003366;">Why do I argue with my best friend?</span><br /><br /><span style="color: #003366;"><em><strong>Find your Love-Match – in your fantasy or for real!</strong></em></span><br /><br /><span style="color: #003366;">Is my boyfriend/girlfriend right for me?</span><br /><span style="color: #003366;">How does my personality affect my sex-life?</span><br /><br /><span style="color: #003366;"><em><strong>Compare your personality with your favorite celebrity or sports star!</strong></em></span><br /><br /><span style="color: #003366;">What about …</span><br /><span style="color: #003366;">Paris Hilton? Tom Cruise? Hannah Montana? Justin Bieber? Taylor Swift?</span><br /><span style="color: #003366;">Mick Jagger? Ronaldo? or Justin Timberlake? … to name a few! </span><br /><span style="color: #003366;">More than 500 Musicians/Pop Stars, Sports Stars, Celebrities, Film Stars etc. online…! </span><br /><br /><span style="color: #003366;"><em><strong>Make the right career choice!</strong></em></span><br /><br /><span style="color: #003366;">What type of job will suit me best?</span><br /><br /><br /><span style="color: #003366;"><strong>It’s all about … </strong></span><strong><span style="color: #ffcc00;">p</span><span style="color: #ffcc00;">ersonalit</span><span style="color: #ffcc00;">y</span><em><span style="color: #003366;">, </span></em><span style="color: #ff0000;">personality</span><em><span style="color: #003366;">, </span></em><span style="color: #3366ff;">per</span><span style="color: #3366ff;">sonality</span><span style="color: #003366;">!</span></strong><br /><br /> <br /><span style="color: #003366;">Simply <strong>answer 15 questions</strong> and '<span style="color: #ff0000;">click</span>' to generate a report that gives you a <strong>unique personality profile</strong> including your <span style="text-decoration: underline;"><strong>individual</strong></span> combination of </span><strong><span style="color: #ffcc00;">YELLOW</span></strong><span style="color: #003366;">, </span><strong><span style="color: #ff0000;">RED</span></strong><span style="color: #003366;"> and </span><strong><span style="color: #3366ff;">BLUE</span></strong><span style="color: #003366;"> personality traits. </span><br /><br /><span style="color: #003366;"><strong>Press the '</strong></span><strong><span style="color: #3366ff;">HELP</span></strong><span style="color: #003366;"><strong>' function if you want to read more about the different personality types and our system of color coding.</strong></span><br /><span style="color: #003366;"><strong>Complete your test, then you can check your <span style="color: #ff0000;">celebrity love match</span> and check your personality with your friends, family and your choice of over 500 stars we have already listed online.</strong></span><br /><br /><span style="color: #003366;"><strong>And what about <span style="color: #ff0000;">your sexuality</span>??? … and </strong></span><strong><span style="color: #3366ff;">career choice</span></strong><span style="color: #003366;"><strong>???</strong></span><br /><br /><span style="color: #003366;"><strong>You can do 10 tests/reports and comparisons with family and friends <span style="color: #ff0000;">PLUS unlimited celebrity comparisons … DO IT NOW!</span></strong></span><br /><br /><span style="color: #003366;"><strong>This system is so simple, <span style="color: #ff0000;">quick</span>, easy and </strong></span><strong><span style="color: #3366ff;">accurate</span></strong><span style="color: #003366;"><strong> - it will amaze you!</strong></span><br /><br /></p>
<p style="text-align: center;"><span style="color: #003366;"><strong>LET THE FUN BEGIN … Go test yourself!</strong></span><br /><br /><img title="Take the test" src="http://www.personality-abc.frankmanson.com/website/admin/UserFiles/Image/Sales/take-the-test-sml.gif" alt="Take the test" width="150" height="88" /></p></body></html>
And this is my code
contentField=new BrowserField();
contentField.displayContent(content,"http://localhost");
I dont know what is the problem.
Try the following.
BrowserFieldConfig config = new BrowserFieldConfig();
HttpHeaders headers = new HttpHeaders();
headers.addProperty(HttpHeaders.HEADER_CONTENT_TYPE, HttpHeaders.CONTENT_TYPE_TEXT_HTML);
headers.addProperty(HttpHeaders.HEADER_ACCEPT_CHARSET, "UTF-8");
config.setProperty(BrowserFieldConfig.HTTP_HEADERS, headers);
BrowserField contentField = new BrowserField(config);
this.add(contentField); // add to screen
contentField.displayContent(content,"http://localhost"); // content -> your HTML content