I wanted to try using polymer as I'm really excited about Material Design and this seemed a great way to embrace that design philosophy (as well as some other aspects of it, like data binding) so I decided to start swapping in polymer elements for the html ones.
The problem is that after changing inputs, checkboxes, and dropdowns to paper-inputs, paper-checkboxes, and paper-dropdown-menus, the page loads freaking slowly. I'm talking a 1-1.5s load rocketing up to ~9s load times.
Is this normal? Is there any way this can be fixed?
It seems that the polymer demo app topeka loads very quickly, so what steps do I need to take ot make it faster?
Imports:
<link rel="import" href="bower_components/core-icon-button/core-icon-button.html" />
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html" />
<link rel="import" href="bower_components/paper-button/paper-button.html" />
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import" href="bower_components/paper-input/paper-input.html" />
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html" />
<link rel="import" href="bower_components/paper-item/paper-item.html" />
Paper uses:
<td>
<paper-icon-button class="mini" icon="clear"></paper-icon-button>
<paper-input value="<?=ucwords($item['name']) ?>" id="prod<?=$prodID ?>Name" width="150px" />
</paper-input>
</td>
<td>
<paper-dropdown-menu selected="<?=$item['catName'] ?>" valueattr="label">
<?php
foreach ($select_options as $op) {
?>
<paper-item label="<?=$op ?>"></paper-item>
<?php
}
?>
</paper-dropdown-menu>
</td>
<td>
<paper-input multiline maxrows="3" id="prod<?=$prodID ?>Description" value="<?=$item['description'] ?>" layout vertical >
</paper-input>
</td>
<td><paper-input type="number" label="Regular" floatingLabel="true" value="<?=$item['price'] ?>" id="prod<?=$prodID ?>Price" ></paper-input>
<br /><br />
<paper-input type="number" label="Sale" floatingLabel="true" value="<?=$item['sale_price'] ?>" id="prod<?=$prodID ?>SalePrice" ></paper-input>
</td>
<td>
<paper-checkbox data-tip="On Sale" type="checkbox" id="prod<?=$prodID ?>OnSale" <?=$saleChecked ?>></paper-checkbox>
</td>
<td>
<paper-checkbox data-tip="Enabled" id="prod<?=$prodID ?>Enabled" <?=$checked ?> />
</td>
<td><paper-checkbox data-tip="In Stock" id="prod<?=$prodID ?>InStock" <?=$stockChecked ?> /></td>
<td>
<paper-button raisedButton class="colored" onclick="getVals(<?=$prodID ?>)">Update</paper-button>
</td>
</tr>
Try vulcanizing your imports into a bundle using the --csp --inline flags. That should cut down on the number of requests and speed up the load time significantly.
Related
I need a quick help. I stuck on a problem with my jquery datepicker...
My code to insert the datepicker looks like:
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$(".datepicker").datepicker();
});
</script>
Now i want to pop up the datepicker with the following code:
<form action="indexdev.php?s" method="GET">
<table class="table">
<tbody>
<tr>
<td class="col-sm-3">date: <input type="hidden" name="test" value="">
<input type="text" name="s"
class="datepicker hasDatepicker" value="" id="dp"></td>
<td class="col-sm-3"><input type="submit"></td>
<td class="col-sm-3"></td>
</tr>
</tbody>
</table>
</form>
Hopefully you guys can help me... :D Cheers!
Fixed.
My best regards.
Cleaned up a bit of code for the snipet and organized the structure of your cdn imports.
To solve: remove the value and unused css classes of the input.
Added id aproach.
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<table class="table">
<tbody>
<tr>
<td class="col-sm-3">date:
<input type="text" id="dp"></td>
<td class="col-sm-3"><input type="submit"></td>
</tr>
<tr>
<td class="col-sm-3">another date:
<input type="text" class="datepicker"></td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$("#dp").datepicker();
$(".datepicker").datepicker();
});
</script>
I have created two frames with two different forms as shown in link below:
http://demo.4page.info/framedemo/main.html (Please view in IE)
Now, when I click on Get Text button, a predefined value should display in the text box above it, and then when I click on the Copy Here button the same value from textbox1 should display in the text box above it.
So my question is how to access that value in second frames form by clicking copy here button?
Below is my code:
<!--main.html-->
<html>
<head>
<frameset cols="50%, 50%">
<frame name="f1" src="left.html" />
<frame name="f2" src="right.html" />
</frameset>
</head>
</html>
This successfully divides page into two frames.
<!--left.html-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/vbscript">
dim msg
msg="Hello"
function func()
document.form1.text1.value=msg
end function
</script>
</head>
<body>
<form name="form1">
<table align="center" cellspacing="5">
<tr><td><input type="text" name="text1" /></td></tr>
<tr><td><input type="button" value="Get Text" onClick="func()" /></td></tr>
<tr><td><input type="reset" name="reset" value="Reset" /></td></tr>
</table>
</form>
</body>
</html>
left.html is working properly and accessing value on button click.
<!--right.html-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/vbscript">
</script>
</head>
<body>
<form name="form2">
<table align="center" cellspacing="5">
<tr><td><input type="text" name="text2" /></td></tr>
<tr><td><input type="button" value="Copy Here!" onClick="??????" /></td></tr>
<tr><td><input type="reset" name="reset" value="Reset" /></td></tr>
</table>
</form>
</body>
</html>
What do I have to put in right.html?
You can access content of other frames via the frames property of the parent object, so something like this should work:
<script type="text/vbscript">
Sub CopyHere
document.form2.text2.value = parent.frames("f1").document.form1.text1.value
End Sub
</script>
...
<form name="form2">
<input type="text" name="text2" /></td></tr>
<input type="button" value="Copy Here!" onClick="CopyHere()" />
</form>
Note that you may need to adjust your browser's security settings for the code to work.
On a more general note I'd recommend using id attributes instead of name attributes, because the latter is deprecated.
TL;DR: My HTML isn't linking to a stylesheet.
Right off the bat, sorry for so much code.
I have checked other questions, but none had such a strange circumstance as I did.
I have a file, loggedIn.html:
<html>
<head>
<title>Logged in!</title>
<link rel="stylesheet" href="cgi-bin/style.css">
</head>
<body>
You are now logged in!
Logout
</body>
</html>
Which uses the stylesheet style.css:
body { font-family: Georgia, Goudy, Sabon, serif; }
Along with loggedIn.html, index.html uses style.css:
<html>
<head>
<title>Welcome!</title>
<link rel="stylesheet" href="cgi-bin/style.css">
</head>
<body>
<h2>Welcome to That Guy's Fileshare Server!</h2>
<hr/>
Please log in.
<br/>
<form action="cgi-bin/login.php" method="POST">
<p>
<table border="0">
<tr>
<td> <label for="username">Username: </label> </td>
<td> <input type="text" name="username"/> </td>
</tr>
<tr>
<td> <label for="password">Password: </label> </td>
<td> <input type="password" name="password"/> </td>
</tr>
<tr>
<td> <input type="submit" value="Submit"> </td>
</tr>
</table>
</p>
</form>
<br/>
Register
<br/>
Contact information
</body>
</html>
Since both loggedIn.html and index.html use the same stylesheet, shouldn't they both be rendered in Georgia, Goudy, Sabon, or a serif font? Apparently not. The file structure is:
┌ index.html
├ loggedIn.html
└ cgi-bin/
└─────────── style.css
The file structure shouldn't be a problem either, since both .html files are in the same directory and use href="cgi-bin/style.css". I've never had a problem like this before. Very strange!
forgot your type.
Also check the location of the css file.
I believe leaving out the type will cause problems.
<link rel='stylesheet' type='text/css' href='cgi-bin/style.css'/>
Or you can do
<style type="text/css"> #import "cgi-bin/style.css"; </style>
Hi I'm trying to align vertically two elements
The code is
<h:panelGrid columns="2">
<a4j:outputPanel layout="block">
<h:form>
<h:inputText id="text1" label="text1" value="#{opBean1.text}">
<f:validateLength maximum="10" />
<a4j:ajax event="keyup" execute="#this" render="out1" onerror="return false;" />
</h:inputText><br/>
<h:outputText id="out1" rendered="#{not empty opBean1.text}" value="Approved Text: #{opBean1.text}" />
</h:form>
</a4j:outputPanel>
<a4j:outputPanel layout="block">
<h:form>
<h:inputText id="text2" label="text2" value="#{opBean1.text2}">
<f:validateLength maximum="10" />
<a4j:ajax event="keyup" execute="#this" render="out2" onerror="return false;" />
</h:inputText><br/>
<h:outputText id="out2" rendered="#{not empty opBean1.text2}" value="Approved Text: #{opBean1.text2}" />
</h:form>
</a4j:outputPanel>
</h:panelGrid>
As you can see,
the <h:panelGrid> contains two columns.
Each column has a <a4j:outputPanel> element.
The problem is that the vertical size of the <a4j:outputPanel> can change.
(The <h:outputText id="xxx" rendered="#{not empty opBean1.xxx}" value="Approved Text: #{opBean1.xxx}" /> element is only rendered if the xxx value is not empty in the managed bean opBean1)
So if I enter some text in the first a4j panel, it will contain two lines vertically, whereas the other a4j panel will contain only one.
Therefore, the second panel's inputText field will not be aligne anymore with the first panel's text field.
I know this might be hard to understand without any graphical representation, so I'll show you what I mean :
Before entering text:
inputText1 inputText2
After entering text:
inputText1
inputText2
outputText1
I would like it to be:
inputText1 inputText2
outputText1
EDIT (sorry for the identation ... I don´t know how to make it better)
<!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>
<title>Mission Page</title><link type="text/css" rel="stylesheet" href="/FlightFAQ/rfRes/skinning.ecss.jsf?db=eAHjW!XqPQAE!QKS" /><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/jsf.js.jsf?ln=javax.faces&stage=Development"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/jquery.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-base-component.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-event.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/message.js.jsf?ln=org.richfaces"></script><link type="text/css" rel="stylesheet" href="/FlightFAQ/rfRes/msg.ecss.jsf?db=eAHjW!XqPQAE!QKS&ln=org.richfaces" /></head><body><table>
<tbody>
<tr>
<td><div id="j_idt6">
<form id="j_idt7" name="j_idt7" method="post" action="/FlightFAQ/debug.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt7" value="j_idt7" />
<span style="font-weight: bold;">Name: </span><input id="j_idt7:clientName" type="text" name="j_idt7:clientName" onblur="av_aea6d620643bb708da4bf66b58ae27d6(event,"j_idt7:clientName",this)" />
<br /><span class="rf-msg " id="j_idt7:j_idt10"></span><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-6739208697542802203:-2950524051097537124" autocomplete="off" />
</form></div></td>
<td><div id="j_idt11">
<form id="j_idt12" name="j_idt12" method="post" action="/FlightFAQ/debug.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt12" value="j_idt12" />
<span style="font-weight: bold;">Contact: </span><input id="j_idt12:contact" type="text" name="j_idt12:contact" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-6739208697542802203:-2950524051097537124" autocomplete="off" />
</form></div></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-csv.js.jsf?ln=org.richfaces"></script><script type="text/javascript">
//<![CDATA[
window.av_aea6d620643bb708da4bf66b58ae27d6=function(event,id,e,da){var p={da:da,v:[{f:RichFaces.csv.validateRequired,p:{} ,m:{"detail":"name cannot be null","severity":0,"summary":"name cannot be null"} }]};
RichFaces.csv.validate(event,id,e,p);
}
$(document).ready(function() {
new RichFaces.ui.Message("j_idt7:j_idt10",{"forComponentId":"j_idt7:clientName","showSummary":false,"showDetail":true} )
});
//]]>
</script></body>
</html>
I have a table and when I load the page in Firefox or chrome its shifted off the screen to the the right leading to most of the table disappearing, the table should be located in the middle of the screen and seems to be overlapping on the right outside of the page area.
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Small North Run</title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="sponsor.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SMALL NORTH RUN</h1>
</header>
<nav>
<ul id="navlist">
<li>HOME</li>
<li>TRAINING REGIME</li>
<li>FORUM</li>
<li>SPONSOR</li>
<li>CONTACT</li>
</ul>
</nav>
<hr id="hrnav" />
<div id="content">
<p>This page allows you to sponsor a particular runner. Just simply select the name of the runner you wish to sponsor from the drop down list, then enter the amount you wish to donate followed by a brief message for the runner and then your name. Once making a donation the runner you have sponsored will be notified by email that you have made a donation.</p>
<br/>
<br/>
<br/>
<br/>
<form method="post" action="test.php">
<table>
<tr><td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr><td><label>Donation (£):</label></td><td><input type="text" maxlength="9" value="0.00" name="donation"/></td></tr>
<tr>
<td>
<label>Message:</label>
</td>
<td>
<textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea>
</td>
</tr>
</tr>
<tr><td><label>Your Name:</label></td><td><input type="text" maxlength="30" name="donator"/></td></tr>
<tr>
<td>
<tr><td><input id="submit" type="submit" value="Confirm Donation"/></td></tr>
</table>
</form>
</div>
</div> <!-- END WRAPPER -->
</body>
</html>
CSS
#content { text-align: left; margin: 2px; padding: 10px; }
#content p { font: font: 12px/1.5 Verdana, sans-serif; float: left; }
try to add a doctype :
for example, here is the HTML5 doctype
<!DOCTYPE html>
It seems to work fine for me.
Maybe you have a problem in your css?
EDIT:
The float style on your P tag is causing the trouble.
A simple solution could be to use a defloating-break-div (I'm not sure what the proper name is) underneath your P tag:
<div style="float:none;">
<br />
</div>
This causes the rest of your code to resume the normal layout
1) You have some errors in table structure
2) If you need to center table, you can setup it margin-left and margin-right auto.
There is possible table code with align:
<table style='margin: 0 auto;'>
<tr>
<td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr>
<td><label>Donation (£):</label></td>
<td><input type="text" maxlength="9" value="0.00" name="donation"/></td>
</tr>
<tr>
<td><label>Message:</label></td>
<td><textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea></td>
</tr>
<tr>
<td><label>Your Name:</label></td>
<td><input type="text" maxlength="30" name="donator"/></td>
</tr>
<tr>
<td><input id="submit" type="submit" value="Confirm Donation"/></td>
<td> </td>
</tr></table>
If you still have troubles: post somewhere full HTML and CSS code for detailed analysis.