I have a static form whose code is bellow. Basically I would like to style it with Twitter-bootstrap. Thus I was wondering how to implement it under Xampp. I have placed the bootstrap folder under Xammp/htdocs/MyLocalHostWebsiteFolderName/bootstrap, added a class to the form HTML code but bootstrap was not compiled with the form.
cAN YOU HELP ME BREATH SOME LIFE IN THAT BEATEN UP CODE?
<html>
<head>
<title>Limited Sampling Strategies for AUC estimation</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".msg_body").hide();
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(600);
});
});
</script>
</head>
<body>
<center>
<form action="form.php" class="form-horizontal" target="results" enctype="multipart/form-data" method='post'>
<h1>Limited Sampling Strategies for AUC estimation</h1>
<table border=0>
<tr valign="top">
<td>
<table border=1>
<caption>Data</caption>
<tr>
<th>Concentrations</th>
<td> <input type="file" name="concentrations" size="20"></td>
</tr>
<tr>
<th>Times</th>
<td> <input type="file" name="times" size="20"></td>
</tr>
<tr>
<th>Covariates</th>
<td> <input type="file" name="covariates" size="20"></td>
</tr>
</table>
<br>
</td>
</table>
</form>
</center>
</body>
</html>
Solved my problem. The form code should call bootstrap library before the HTML code otherwise the CSS classes are not recognized. Putting your form HTML code in the bootstrap folder alone is not enough. The structure goes like this
<!DOCTYPE html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<center>
<form class="form-inline" action="form.php" target="results" enctype="multipart/form-data" method='post'>
</form>
</center>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Related
Does any one know how to make a conditional hide with amp-selector in email? on buttons like these? So I have 3 of these buttons next to each other, menu 1, menu 2 and menu 3. So if I click menu1, I only want the content to show that links to menu 1.. If I click menu2 I want to only show the content from menu2 and so forth.
<table>
<tr>
<th on="tap:menu1.hide;tap:menu1.toggleVisibility" class="bg-indigo-500 hover:bg-indigo-600 rounded" style="mso-padding-alt: 12px 48px;">
<a class="block text-white text-sm leading-full py-12 px-48 no-underline">Menu 1</a>
</th>
</tr>
</table>
<amp-selector id="menu1" layout="container" hidden>
<amp-selector id="hide1" layout="container" name="single_image_select" >
<ul>
<li>
<p option="1" select> MENU1 </p>
</li>
<li>
<p option="2" hidden> HEJ2 </p>
</li>
<li option="na" disabled>None of the Above</li>
</ul>
</amp-selector>
</amp-selector>
You can use actions and events in AMP Email to achieve this. See this URL for detail.
Below is a tested code for the same:
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden} </style>
<style amp-custom>
/* any custom styles go here. */
.hideme {
visibility:hidden
}
</style>
</head>
<body>
<button value="menu1" on="tap:menu1.toggleVisibility,menu2.hide,menu3.hide">menu1</button>
<button value="menu1" on="tap:menu2.toggleVisibility,menu1.hide,menu3.hide">menu2</button>
<button value="menu1" on="tap:menu3.toggleVisibility,menu1.hide,menu2.hide">menu3</button>
<div id="menu1">
<h3>
Menu1
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
<div id="menu2" hidden>
<h3>
Menu2
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
<div id="menu3" hidden>
<h3>
Menu3
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
</body>
</html>
Working Example in AMP Playground
I have an ionic 1 app that I'm working on updating.
One of the new requirements is that I add an 'x' on the right side of an input field.
I've tried a number of things and this is the closest I think I've gotten to the right implementation, but still doesn't work.
Any thoughts?
<form action="">
<input type="text" onfocus="this.placeholder = ''" style="border-top:none; border-left:none; border-right:none; border-bottom:solid gray 3px; background:transparent; margin-left:auto; margin-right:auto; text-align:center; font-size:1.2em; margin-bottom:20px; color:#acb2b4;" placeholder="{{profileEdit.userName}}" ng-model="profileEdit.theUserName">
<i class="icon ion-close" style="font-size:14px;" item-right></i>
</form>
You can use the list and item classes, along with item-icon-right class to achieve what you are looking for. Here is a working sample:
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input X Icon</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Input X Icon On Right</h1>
</ion-header-bar>
<ion-content>
<form>
<div class="card list">
<div class="item item-icon-right">
<input type="text" placeholder="Placeholder Goes Here">
<i class="icon ion-close"></i>
</div>
</div>
</form>
</ion-content>
</body>
</html>
I have Question about component art grid.
Have anyone struggled with the selecting of a single row where your attribite is AllowMultipleSelect="false" but you are still able to select Multiple rows.
I just can't seem to get around this because I only want the selected row highlighted with what ever color the selectedRowCssClass color is.
Here is my front end code:
<%# Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<base target="_self" />
<title>iView Trend Data</title>
<link href="Assets/OldCss/gridStyle.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="ParamA" runat="server" />
<asp:HiddenField ID="ParamB" runat="server" />
<table style="width:100%; Height:100%;" >
<tr>
<td>
<ComponentArt:CallBack id="CallBack1" CacheContent="false" width="100%" Height="100%" runat="server">
<Content>
<ComponentArt:Grid ID="Grid1"
CssClass="Grid"
runat="server"
RunningMode="Client"
ShowFooter="false"
ImagesBaseUrl="~/Assets/Image/Grid/"
Sort="DateTime"
ScrollBar="Auto"
ScrollTopBottomImagesEnabled="true"
ScrollTopBottomImageHeight="2"
ScrollTopBottomImageWidth="16"
ScrollImagesFolderUrl="~/Assets/Image/Grid/"
ScrollButtonWidth="16"
ScrollButtonHeight="17"
ScrollBarCssClass="ScrollBar"
ScrollGripCssClass="ScrollGrip"
ScrollBarWidth="16"
ScrollPopupClientTemplateId="ScrollPopupTemplate"
Width="760"
Height="618"
AllowTextSelection="false"
AllowHorizontalScrolling="True"
AllowMultipleSelect="false"
PageSize="30"
ShowHeader="true"
ShowSearchBox="true"
SearchOnKeyPress="true"
Visible="true"
AllowVerticalScrolling="False"
GroupingNotificationText="">
<Levels>
<ComponentArt:GridLevel
DataKeyField="DateTime"
ShowTableHeading="False"
ShowSelectorCells="False"
HeadingCellCssClass="HeadingCell"
HeadingCellHoverCssClass="HeadingCellHover"
HeadingCellActiveCssClass="HeadingCellActive"
HeadingTextCssClass="HeadingCellText"
DataCellCssClass="DataCell"
RowCssClass="DataRow"
SelectedRowCssClass="SelectedRow"
SortAscendingImageUrl="asc.gif"
SortDescendingImageUrl="desc.gif"
ColumnReorderIndicatorImageUrl="reorder.gif"
SortedDataCellCssClass="SortedDataCell"
SortImageWidth="14"
SortImageHeight="14"
AllowGrouping="false"
AlternatingRowCssClass="AlternatingRow">
<Columns>
<ComponentArt:GridColumn DataField="DateTime" Width="100" FormatString="yyyy-MM-dd HH:mm" Visible="false"/>
</Columns>
</ComponentArt:GridLevel>
</Levels>
<clienttemplates>
<ComponentArt:ClientTemplate Id="ScrollPopupTemplate">
<table cellspacing="0" cellpadding="2"
border="0" class="ScrollPopup">
<tr>
<td style="width:50px;">
<div style="font-size:10px;font-family:MS Sans Serif; text-overflow:ellipsis; overflow:visible;">
<nobr>## DataItem.GetMember("DateTime").Text ##</nobr>
</div>
</td>
</tr>
</table>
</ComponentArt:ClientTemplate>
</clienttemplates>
</ComponentArt:Grid>
</Content>
<LoadingPanelClientTemplate>
<table width="100%" align="center" style="position:relative;top:250px">
<tr>
<td style="color:#cee820" align="right">Loading..</td>
<td align="left"> <img src="./images/ajax-loader.gif" width="48" height="48" border="0"/></td>
</tr>
</table>
</LoadingPanelClientTemplate>
</ComponentArt:CallBack>
</td>
</tr>
</table>
</form>
</body>
</html>
I had a similar problem, which turned out to be because values of the DataKeyField had spaces in them.
I want my iFrame window to show the URL I enter from the Form Text box, To that I want the iframe src="" to be changed to the form field input. How can I do that? Here is a sample code that I intent to use.
<html>
<head>
<title>Blah.</title>
<link href="style.css"rel="stylesheet" type="text/css" />
</head>
<body>
<form>
Enter URL: <input type="text" />
<input type="submit" value="GO" />
</form>
<iframe src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
Try this.
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
I'm porting our existing web application from Wicket 1.4 to 1.5. In the app there are two template pages which are children of a base page. The templates are named secure and unsecure, and they define pages for authenticated and unauthenticated users. Any pages in the app inherit from these templates. In Wicket 1.4 this set up worked fine without any problems.
After porting to Wicket 1.5 I get the following error:
Unable to find component with id 'PageTitle' in [HtmlHeaderContainer]
'PageTitle' is a Wicket Label and is used dynamically build the page title in the base page, it is positioned in the <head> tag of the base page mark up. What I've discovered is that the <head> mark up is being rendered twice, so I presume I get the error because Wicket creates the PageTitle once and then tries to create it again (The <head> is defined in the base page mark up only).
The quick and dirty fix is to move the PageTitle to the templates (duplicated code). Is there a better way to solve this problem?
Hopefully my description is clear enough, however, I can supply a code example if needed.
The <head> tag should only be used once in page markup. This means that if you have a <head> tag in a base page, no page that extends it should include it. Further, no component should use the <head> tag.
Instead, use the <wicket:head> tag to include any additional content that is not included in your base page. Wicket will use the <wicket:head> tag to dynamically inject content into the <head> tag that is rendered and delivered to the browser.
OK as requested here's a code sample. BasePage.java:
public class BasePage extends WebPage
{
public BasePage()
{
this(new PageParameters());
}
public BasePage(PageParameters parameters)
{
add(new Label("PageTitle", "Gosh Wicket version migration is hard work"));
}
...
}
BasePage.html (doctype etc., removed):
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title wicket:id="PageTitle">Page title goes here</title>
<!-- This comment will appears in both the headers I see in the source, therefore this header is rendering twice-->
<link type="text/css" rel="stylesheet" href="css/application.css" />
<script type="text/javascript" src="js/rollover.js"></script>
<script type="text/javascript" src="js/menus.js"></script>
</head>
<wicket:child/>
</html>
UnSecureTemplate java:
public class UnSecureTemplate extends BasePage
{
public UnSecurePageTemplate()
{
super(new PageParameters());
}
public UnSecureTemplate(PageParameters parameters)
{
super(parameters);
Label footerText = new Label("footerText", footerComesFromAPropertiesFile);
add(footerText);
//Instance variables here defined in BasePage
// Header bar links - left
Link<Object> hdrHome = addLink("hdrHome", HomePage.class);//this method is in BasePage in case you're wondering
hdrHome.add(new Image("mgrLogo", new ContextRelativeResource(poLogoUrl)));
// Header bar links - Right
ExternalLink hdrCorporate = new ExternalLink("hdrCorporate", anExternnalLink);
hdrCorporate.add(new Image("operatorLogo", new ContextRelativeResource(opLogoUrl)));
add(hdrCorporate);
}
UnSecureTemplate.html:
<wicket:extend xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<body id="body" onload="preloadImages(); return true;">
<div class="centerbody">
<a name="top"></a>
<div id="mast">
<a wicket:id="hdrHome" title="home page">
<img wicket:id="mgrLogo" id="mgr-logo" src="images/logoShort.png" width="171" height="45" wicket:message="alt:remon.logoAltText" />
</a>
<a wicket:id="hdrCorporate" title="Web Site">
<img wicket:id="operatorLogo" id="po-logo" src="images/logoNoStrapline.png" height="45" wicket:message="alt:remon.logoAltText" />
</a>
</div>
<div id="mainmenubar" style="width: 100%">
<div class="menubaritem" style="width: 171px;">
</div>
<div class="menubaritem" style="width: auto; border-right: none;">
</div>
</div>
<div id="mainpanel">
<div id="leftnav">
<p> </p>
</div>
<div id="rightpanel">
<wicket:child/>
</div> <!-- right panel -->
</div> <!-- main panel -->
<div id="footer" style="height:15px;">
<span><span wicket:id="footerText">Footer Text</span></span>
</div>
<div id="footerspacer">
</div>
</div> <!-- centre body -->
</body>
</wicket:extend>
}
An application page, LogIn.java:
public class Login extends UnSecureTemplate
{
public Login()
{
this(new PageParameters());
}
public Login(PageParameters pageParameters)
{
super(pageParameters);
String welcomeResourceString = stringObtainedFromPropertiesFile;
add(new Label("welcome", welcomeResourceString));
add(new Label("loginHeader", thisAlsoComesFromPropertiesFile);
LoginForm form = new LoginForm("loginform", new SimpleUser(), pageParameters);
form.add(new FeedbackPanel("feedback"));
add(form);
}
...
}
LogIn.html:
<wicket:extend xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<h2 wicket:id="welcome">Welcome to the Application</h2>
<div style="margin: 20px 150px 20px 150px; text-align: center;">
<p wicket:id="loginHeader"></p>
<form wicket:id="loginform" id="loginform" >
<table style="display: table; border: 0px; margin: auto;" wicket:message="summary:loginTableSummary">
<tr style="display: table-row;">
<td class="login" colspan="2"><span wicket:id="feedback">Feedback</span></td>
</tr>
<tr style="display: table-row;">
<td class="login">
<label for="username"><wicket:message key="username">Username</wicket:message></label>
</td>
<td class="login">
<input wicket:id="username" id="username" type="text" name="user" value="" size="30" maxlength="50"/>
</td>
</tr>
<tr style="display: table-row;">
<td class="login">
<label for="password"><wicket:message key="password">Password</wicket:message></label>
</td>
<td class="login">
<input wicket:id="password" id="password" type="password" name="pswd" value="" size="30" maxlength="16"/>
</td>
</tr>
<tr style="display: table-row;">
<td class="login"> </td>
<td class="login"><input class="btn" type="submit" name="Login" value="Login" wicket:message="title:loginButtonTitle"/></td>
</tr>
</table>
</form>
</div>
</wicket:extend>