Centering a form in a div
I'm trying to center the form's text boxes, but I can't crack this one. This is the css I have and it's just not working for me. I haven't quite mastered the art of positioning. Can anyone help? Also, take a look at the box shadow input. Do you see anything wrong because I don't see the effect working. Thank you in advance.
In case you were wondering this is how I'm attempting to do it. I put the form in a div, but there's got to be a better way.
Boom! Sorry. Feel free to criticize my work. this is my first for pay site. I need all the help I can get and well you've pretty much given me all the help. Thanks Nancy!
Similar Messages
-
Centering with CSS inside a div box
Am subbing on a job, would appreciate help:
I am trying to center the three columns inside the address
box at the bottom
of the page.
http://www.mariagrist.net/dev/motors/bodyshop.htm
It should look just like the box at the bottom of the main
page
http://www.mariagrist.net/dev/motors/default.html
but with content centered.
I copied the divs from the default.htm but am changing them
in order to try
to center the content. So far I have only made it worse
because now the
columns are all on top of each other.
ThanksThanks heaps, that's exactly what I wanted it to do.
Aren't these forums just magnificent.
"Osgood" <[email protected]> wrote in
message
news:[email protected]...
> Pixel Warrior wrote:
>
>> Am subbing on a job, would appreciate help:
>> I am trying to center the three columns inside the
address box at the
>> bottom of the page.
>>
>>
http://www.mariagrist.net/dev/motors/bodyshop.htm
>>
>> It should look just like the box at the bottom of
the main page
>>
http://www.mariagrist.net/dev/motors/default.html
but with content
>> centered.
>> I copied the divs from the default.htm but am
changing them in order to
>> try to center the content. So far I have only made
it worse because now
>> the columns are all on top of each other.
>> Thanks
> First off you need to change all thress <div
class="address_item_content
> divided"> to <div class="address_item_content">
Just drop the 'divided'
> part.
>
> Next you need to wrap the three newly nmed <divs>
'address_item_content'
> <divs> in another wrapper. See the code below
(scroll down) I've named it
> 'addressHolder'
>
> Find your .address_item_content css and make sure it
looks the same as
> this:
>
> .address_item_content {
> float: left;
> width: 115px;
> padding-left: 30px;
> margin-top: 16px;
> font-size: 11px;
> border-left: 1px solid #000;
> }
>
> add the addressHolder css to your stylesheet.
>
> #addressHolder {
> width: 438px;
> margin: 0 auto;
> }
>
>
>
> Heres the section of code starting and ending with the
> 'address_box_content' <div>
>
> Note to get rid of the 1px solid dividing line on the
left of the first
> 'address_item_content' <div> use some inline css
styling
> 'style="border-left: none;" plus <br style-"clear:
both;"> has been
> inserted after the 'addressHolder'<div> to pull
the 'address_box_content'
> <div> around the three addresses.
>
>
> CODE
>
> <div id="address_box_content">
> <div id="addressHolder">
> <div class="address_item_content" style="border-left:
none;">
> <div id="content_title">DERWENT PARK</div>
> 8c Lampton Ave<br>
> Ph: 03 6211 0660<br>
> </div>
>
> <div class="address_item_content">
> <div id="content_title">DEVONPORT</div>
> 6-8 Victoria Pde<br>
> Ph: 03 6420 4531<br>
> </div>
>
> <div class="address_item_content">
> <div id="content_title">BURNIE</div>
> 60-65 Marine Tce<br>
> Ph :03 6430 2440<br>
> </div>
> </div><!-- end addressHolder -->
> <br style="clear: both;">
> </div><!-- end address_box_content -->
> -
I put a Spry Tabbed Panel obj in my site at...how I centered it, to the container div width?
I put a Spry Tabbed Panel obj in my site at
http://l-web-dev.net/
how I centered it, to the container div width?Add this to your document:
<style type="text/css">
<!--
#content .story .myTabbedPanels {
margin-right: auto;
margin-left: auto;
width: 550px;
-->
</style>
Then change the following line
<div class="story" style="width:550px;">
to
<div class="story myTabbedPanels">
At a later stage you could add the style rules for myTabbedPanels to /styles/css-styles.css after having removed it from this document.
That is it.
Ben -
Padding and Centering Issues with and within div's
I uploaded the page and css files to my server. The page file is http://www.wlvs.com/untitled-1.html and the css file is http://www.wlvs.com/test.css I am using these file to try-out styles. The background div (backgnd) will ultimately be an image but for now I'm just using a color. The "wraper" has an image that I gave a padding to at the top and bottom and for some reason it is showing a dark blue color. - I thought it would allow the background color to show through - shouldn't it??
The other issue is centering the logo in the "header". I suppose I could use <center> but I am trying to figure out what is the css code for doing it. Nothing seems to work. I was able to center the "wraper" image but could not do the logo.
Any help would be much appreciated...I uploaded the page and css files to my server. The page file is http://www.wlvs.com/untitled-1.html and the css file is http://www.wlvs.com/test.css I am using these file to try-out styles. The background div (backgnd) will ultimately be an image but for now I'm just using a color. The "wraper" has an image that I gave a padding to at the top and bottom and for some reason it is showing a dark blue color. - I thought it would allow the background color to show through - shouldn't it??
No because padding creates the space between the edge of the element and its content and in your case this is covered by background image;
However, if you apply margin-top and margin-bpttom then you should get the space you are talking about.
To try it use this code:
.wrap {
height: 1113px;
width: 740px;
top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
background-image: url('images/TBarn04.jpg');
margin-top: 20px;
margin-bottom: 20px;
hth -
Submit form in a div to a cfdiv
Hi all,
I have a page with a search form at the top, and the search
results at the bottom. I would simply like to have the form, which
is currently in a div, submit to the search results cfdiv. I know I
could put the form and search results together in a cfdiv and it
would submit to itself, but I'd like to avoid refreshing the form.
This seems like it should be a piece of cake, but I can't seem to
find any example of how to do it. Anyone know how?
Thanks,
Russlook up ColdFusion.navigate() function in the cfml reference
or livedocs.
Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/ -
Insert PHP-form into XHTML-div
Maybe a noobish question but i cannot find the solution on the web...
I have a XHTML based index.html.
I use Spry tabbed panels.
In 1 Panel (Contact Panel) i like to have a email form displayed.
How do i show my Form.php inside this div?
I want the Content div to display the php form without putting the php code in the div.
Header
Menu
Content [here do i want to display the form]
FooterBest to use an external PHP page and link the form to it. Something like:
<form action="php/sendform.php" method="post" name="contactForm" id="contactForm">
Then lay the form out the way you want in the DIV. -
Centering HTML form on Android [subject edited by moderator]
How do I get a form to 'centre' on android device.
Website is http://www.parsonsreviewservices.co.uk.
I am using CS6/CC.
I assume its something to do with when I first set up the table.
If so how do i correct this?
And more importantlt....have I given enough information in my question?
Cheers,
AndySorrry, no android to test with, but how does it work if you specify a px width in your site-styles.css (line 275)
#form-android form table {
display: block; margin-left: auto;
margin-right: auto;
width: 250px; -
I'm new to java programming. My program is up and running, however when I load it, the form loads in the top left corner. I'm using a form with the contents in a FlowLayout. Any advice on how to get the form to load in the center of the screen.
Thanks,I have done a helper class you can use if you want to.
import java.awt.Dimension;
import java.awt.Component;
* This class is a Util for awt Component and could be
* used to place them in center of an other.
* @author <a href="mailto:[email protected]">Bo Regnlin</a>
* @version 1.0
public class ComponentUtil
* Use this static method if you want to center
* and set its propsion compared to the size of
* the current users screen size.
* Valid percent is between +-(0-100) minus is treated
* as plus, bigger than 100 is always set to 100.
*@param component The component you want to center and set size on.
*@param percentOfScreen The percent of the current screensize you want
* the component to be.
public static void centerComponentInWindow(Component component, int percentOfScreen)
if(percentOfScreen < 0)
centerComponentInWindow(component, - percentOfScreen);
return;
if(percentOfScreen > 100)
centerComponentInWindow(component, 100);
return;
double percent = percentOfScreen / 100.d;
Dimension dimension = component.getToolkit().getScreenSize();
component.setSize((int)(dimension.getWidth()*percent),
(int)(dimension.getHeight()*percent));
centerComponentInWindow(component);
* Use this static method if you want to center a component in Window.
*@param component The component you want to center in window.
public static void centerComponentInWindow(Component component)
Dimension dimension = component.getToolkit().getScreenSize();
component.setLocation((int)((dimension.getWidth()-component.getWidth())/2),
(int)((dimension.getHeight()-component.getHeight())/2));
component.validate();
component.repaint();
* Use this static method if you want to center
* a component over an other component.
*@param parent The component you want to use to place it on.
*@param toBeCentered The component you want to center.
public static void centerComponentInComponent(Component parent, Component toBeCentered)
toBeCentered.setLocation((int)parent.getX() + (int)((parent.getWidth()-toBeCentered.getWidth())/2),
(int)parent.getY() + (int)((parent.getHeight()-toBeCentered.getHeight())/2));
toBeCentered.validate();
toBeCentered.repaint();
} -
Centering a Horizontal CSS only, jQuery, or Spry navigation bar within a Div
Hello all. I need a solution for centering a horizontal style nav bar whether it be css only, jQuery or Spry based. I've been trying to use widgets from the adobe widget browser or other ones I've been able to find online. I have been able to get the graphic that goes behind the links to span the entire width of the Div, but I can't move the actual links to the center of the screen and get it to stay in the middle like the rest of the elements do when you resize the page. The links always stay anchored to the left side of the page. I've been able to move them all the way to the right side of the page through a certain css change, but that is not what I'm looking for. Do I need to resize the Div, or add a div within the div? Do I need to split the horizontal width of the single div into three div's and put the nav bar into the middle one? If that is the solution, how do I add the div's next to each other, I tried adding a div within the div, but nothing really appears to show up, so that must essentially be a wrong way of going about it.
Well anyways, I need some advice, somebody please lead me in the right direction on how to get this right. In the div above the one I'm trying to make this happen in, I have a flash object and it just centers itself perfectly with the div and moves with the rest of the page fluidly when you resize. And the same goes for a div right above that which contains the company logo.
Thanks for help in advance.This is what I mean by the dotted lines not lining up evenly at the ends.
Here is the source code for the page, followed by the css:
<!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>
<meta name="description" content="Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultant, Community Engagement" />
<meta name="keywords" content="Common,Wealth,Web,Solution,Design,Graphic,Development,Interactivity,services,fla sh,php,javascript,ajax,professional,Caleb Wright, Peter Wallis,artist,video,multimedia,production,search engine optimization,SEO,video production design" />
<meta http-equiv="Content-Type" content="text
/html; charset=UTF-8" />
<title>Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultation, Community Engagement</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="PNGfix.css" />
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
#hornav ul li { padding: 0 0 0 10px; }
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
#wrapper-body, #wrapper-1, #wrapper-2, #wrapper-3 { height: 1%; }
</style>
<![endif]-->
<script type="text/javascript" src="scripts.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
#apDiv1 {
position:absolute;
width:1844px;
height:43px;
z-index:1;
left: 64px;
top: 253px;
body {
background-color: #FFF;
</style>
<link href="SpryAssets/SpryAccordion_flexible.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
color: #00F;
</style>
<style type="text/css">
#menu {
width: 700px;
margin: 0 auto;
#menu ul {
padding: 0;
margin: 0;
text-align:center;
list-style:none
#menu li{
padding: 0;
margin: 0;
display:inline;
margin-right: -2px;
#menu a {
background-color:#66F;
padding: 6px 15px;
color: #fff;
text-decoration: none;
#menu a:hover {
background-color:#39C;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<link href="CSSOnlyMenu4/css/menu4.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141545: #OAWidget */
#menu4 ul {
font-family: Verdana, Geneva, sans-serif;
font-size: 30px;
letter-spacing: -3px;
border-top:5px dotted #003399;
border-bottom:5px dotted #003399;
margin:20px;
#menu4 ul li a{
color: #003399;
padding: 10px 5px 10px 10px;
width: 170px;
#menu4 ul li a:hover span.title{
color:#00adef;
#menu4 ul li a span.text{
font-family: Georgia, serif;
font-size: 13px;
color:#c7e7f3;
/* EndOAWidget_Instance_2141545 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141545" binding="#OAWidget" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="wrapper-body">
<div id="wrapper-1">
<div id="branding">
<h1>
<div>
<p><img src="images/lorentzpaintinglogo_cropped2.png" width="317" height="110" alt="Lorenz Painting Co." longdesc="http://www.lorenzpainting.com" /></p></div>
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="250" id="FlashID" title="Lorenz Painting Co Flash Widget">
<param name="movie" value="LorentzBanner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="LorentzBanner.swf" width="700" height="250">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</h1>
<div>
<div id="menu4">
<ul>
<li><a href=""> <span class="title">Home</span> <span class="text">Why us?</span> </a> </li>
<li><a href="">Services<span class="text">What we do</span> </a> </li>
<li><a href=""> <span class="title">Testimonials</span> <span class="text">What they say</span> </a> </li>
<li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li>
</ul>
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
<div></div>
</div>
<div id="wrapper-2">
<div id="content-top" class="png"></div>
<div id="wrapper-3">
<div id="content-1">
<div class="content-wrap">
<p>Home</p>
<p>Contact</p>
</div>
</div>
<div id="content-2">
<div class="content-wrap">
stuff
<p> </p>
</div>
</div>
<div id="content-bottom"></div>
</div>
<div id="footer">
<p><strong>Lorentz Painting Co., 2011</strong><strong></strong></p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
jQuery("#jQueryUIAccordion").accordion({
event: "click",
collapsible: false,
autoHeight: true
</script>
</body>
</html>
Be forewarned, there are a bunch of rules in here that don't apply to anything anymore, as it's from a recycled rules from another site I built. Sorry.
I will first put the CSS for the main style sheet, and I will put the CSS for the Horizontal Nav Bar in after.
CSS:
Main style sheet:
@charset "UTF-8";
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #6B6B6B;
background: #8D927C url(images/bg_body.jpg) repeat-x;
margin: 0;
padding: 0;
min-width: 800px;
text-align: center;
background-color: #000;
h2, h3, h4
font-size: 16pt;
font-weight: normal;
margin: 15px 0 0 0;
#wrapper-3 p
padding: 0;
line-height: 1.35em;
margin-top: 8px;
margin-right: 0;
margin-bottom: 8px;
margin-left: 0;
#wrapper-3 ul
list-style-type: none;
margin: 8px 0;
padding: 0;
#branding
margin: 0 0 0 0;
@Generic anchor (link) styles
a:link, a:visited
color: #4f4f3f;
a:hover, a:active
color: #000000;
@Inline image styles
img.float-left
float: left;
margin: 0 6px 6px 0;
img.float-right
float: right;
margin: 0 0 6px 6px;
img.border
background: #FFF;
padding: 2px;
border: 1px solid #999;
@Tab navbar styles
#hornav ul
margin: 0;
list-style-type: none;
line-height: normal;
padding: 0;
text-align: center;
margin-bottom: 60px;
font-size: 0.8em;
text-transform: uppercase;
#hornav ul li
display: inline;
margin: 0 2px 0 0;
padding: 3px 0 3px 10px;
#wrapper-body #wrapper-1 #hornav ul li a br {
height: 400px;
#hornav ul li a
text-decoration: none;
margin: 0;
background-repeat: inherit;
background-position: center center;
padding-top: 50%;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
#hornav ul li a:link, #hornav ul li a:visited
color: #3e3f2f;
#hornav ul li a:hover, #hornav ul li a:active
color: #000000;
@Secondary navigation styles
#navcontainer
background: transparent url(images/bg_navlist-top.jpg) no-repeat top center;
margin: 0;
padding: 12px 0 0 0;
#navcontainer ul
margin: 0;
list-style-type: none;
line-height: normal;
padding: 0 0 12px 0;
border-top: 1px solid #FFF;
background: transparent url(images/bg_navlist-bottom.jpg) no-repeat bottom center;
#navcontainer a
display: block;
padding: 3px 6px;
width: 168px;
margin: 0 10px;
background-color: #c4bfac;
border-bottom: 1px solid #FFF;
#navcontainer a:link, #navlist a:visited
color: #FFF;
text-decoration: none;
#navcontainer a:hover
background-color: #90937e;
color: #FFF;
@Masthead text styles
#branding
margin: 0;
padding: 0;
#branding h1
color: #000;
padding: 10px 0 0px 0;
border-top: 4px solid #656e5d;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.3em;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 28px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
margin: 0;
@Layout styles
#wrapper-body
background: transparent url(images/bg_wrapper-body.jpg) no-repeat top right;
width: inherit;
margin: 0;
padding: 0;
#wrapper-1
width: auto;
background: transparent url(images/bg_wrapper-1.jpg) no-repeat;
margin: 0;
padding: 0;
#wrapper-2
width: 45em;
text-align: center;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#wrapper-3
background: url(images/bg_wrapper-3.jpg) repeat-y;
color: #333;
text-align: left;
#content-top
margin: 0;
height: 1em;
background: url(images/bg_content-top.jpg) no-repeat;
font-size: 0;
line-height: 0;
#content-1
float: left;
width: 12em;
font-size: 0.9em;
padding: 0;
margin-top: 2em;
margin-right: 2em;
margin-bottom: 0em;
margin-left: 0em;
#content-2
float: left;
width: 40em;
padding: 0;
font-size: 0.8em;
margin-top: 2em;
margin-right: 0px;
margin-bottom: 0em;
margin-left: 0em;
#content-3
float: left;
width: 250px;
font-size: 10pt;
margin: 0;
padding: 0;
#content-4 {
width: 190px;
padding: 0px;
line-height: 0px;
#content-bottom
clear: both;
height: 1em;
background: url(images/bg_content-bottom.jpg) no-repeat;
font-size: 0;
line-height: 0;
.content-wrap
margin: 0;
padding-top: 0px;
padding-right: 2em;
padding-bottom: 5px;
padding-left: 0px;
#footer p
font-size: .75em;
margin: 12px 0;
p.content-wrap {
font-size: 9pt;
color: #999;
@Blog post styles
.date
float: left;
height: 52px;
width: 52px;
background: url(images/date.png) no-repeat;
margin-right: 10px;
padding-top: 0px;
line-height: normal;
.date .month
display: block;
text-align: center;
color: #FFF;
font-size: 11px;
padding-top: 4px;
text-transform: uppercase;
.date .day
display: block;
text-align: center;
padding-top: 5px;
color: #222;
font-size: 18px;
font-weight: bold;
.meta
display: block;
font-size: 11px;
color: #666;
clear: right;
.blog-entry
clear: both;
padding-top: 2px;
#searchform
margin: 8px 0;
padding: 0;
@Search form styles
#searchform fieldset
margin: 0;
padding: 0;
border: 0;
#searchform label
color: #999;
display: none;
#searchform input
width: 160px;
color: #222;
#searchform #submitquery
display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap p {
line-height: 1.35em;
text-align: justify;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-1 .content-wrap #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent p {
line-height: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #sprytextarea1 span .content-wrap {
font-size: .5em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website label {
display: none;
#website {
display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
font-size: 4em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
font-size: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
font-size: 3em;
.fieldname {
font-size: .9em;
CSS for Horizontal Nav Bar:
#menu4 {
width: 829px;
margin: 0 auto 0 auto;
#menu4 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 30px;
letter-spacing: -3px;
line-height: 1.2em;
border-top:5px dotted #c7e7f3;
border-bottom:5px dotted #c7e7f3;
float:left;
clear:both;
margin:20px;
text-align:center
#menu4 ul li{
float:left;
#menu4 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#66b8d8;
width:170px;
#menu4 ul li a span{
display:block;
#menu4 ul li a span.title{
#menu4 ul li a:hover span.title{
color:#00adef;
#menu4 ul li a span.text{
padding:0px 5px;
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.6em;
color:#c7e7f3;
visibility:hidden;
#menu4 ul li a:hover span.text{
visibility:visible;
Thanks! -
Centering ap div position problem
Hi people, I'm new to dreamweaver and have what seems to be a basic problem but one that I can't fix, even after looking on the forums and web.
My problem is when I go into design mode I can drag my "ap divs" around so they are in the centre of my screen (webpage) and nicely lined up, however once I test the website in any web-browser they are no longer centered and seem to reposition themselves at random. I've included some screen-shots so you can see what I mean.
Website in design view
Website in webbrowser
Here is my code so you can look at it and spot my mistakes.
<title>index</title>
</head>
<style type="text/css" >
body
background-image:url('background.png');
background-repeat:no-repeat;
background-position:50% -2%;
background-color:#D7D7D7;
</style>
<style type="text/css">
#apDiv1 {
position:absolute;
width:578px;
height:57px;
z-index:1;
left: 535px;
top: 1526px;
overflow: hidden;
background-color: #transparent;
color: #F90;
</style>
<style type="text/css">
#apDiv2 {
position:absolute;
width:937px;
height:288px;
z-index:1;
left: 360px;
top: 14px;
overflow: hidden;
background-color: #transparent;
color: #F90;
</style>
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</html>
If you can see the solution to my problem or if there is another/better way of centering text/banners using ap divs, then please let me know. Thanks in advance.The biggest mistake that those new to Dreamweaver make is using Absolutely Positioned <divs>.
Why, because in most instances they will 'restrict' your construction. By their nature being Absolutely Positioned they do NOT move away from the co-ordinates that you give them. What you are seeing is the background image moving, its an illusion.
I would never advise anyone to use AP positioning unless they have a great deal of experience in positioning.
One way to control AP <divs> is to surround them in a 'wrapper' <div> (see code below)
<div id="wrapper">
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</div><!-- end wrapper -->
Then use css to make the wrappers position 'relative' and to center it horizontally using margin: 0 auto (see below)
#wrapper {
position: relative;
width: 578px;
margin: 0 auto;
Your AP <divs> will now take their co-ordinates from the top/left of the 'wrapper' <div>
So alter your left positioning to 0 in your apDiv1 and apDiv2 (see below)
#apDiv1 {
position:absolute;
width:578px;
height:57px;
z-index:1;
left: 0;
top: 1526px;
overflow: hidden;
background-color: #transparent;
color: #F90;
#apDiv2 {
position:absolute;
width:937px;
height:288px;
z-index:1;
left: 0;
top: 14px;
overflow: hidden;
background-color: #transparent;
color: #F90;
As the default position is left you don't really need to declare it but it does no harm if you do. -
Div tag looks different from mac to pc?
I have a very simple page with a background image as a CSS style (centered). I added a Div tag on the top and built a form inside of the div tag. The div tag is set to absolute positioning and looks great in dreamweaver and the pc. I tested it on my mac and the whole div/form moves all the way to the left side of the screen. I appreciate any help.
Try this code instead of what you have now.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Harley-Davidson Police Survey</title>
<style type="text/css">
/**zero out browser defaults**/
* {margin:0; padding: 0; line-height: 1}
body {
background: silver;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
#wrapper{
background: #000 url(http://www.hdpolicesurvey.com/images/purl_background.jpg) no-repeat;
width: 780px;
margin:0 auto; /**centered on screen**/
text-align:left;
color: #fff;
#form {
margin-left: 235px;
width:500px;
font-size: 12px;
padding-top: 120px;
/**Text Styles**/
p {
line-height: 1.5;
margin-top: 1.5em;
margin-bottom: 1em;
</style>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="_mmServerScripts/XMPJS.ashx?XMPJavaScript=Tracking"></script>
<script language="JavaScript" type="text/javascript"> /* Track Current Page Visits */
var obj = new Object(); obj.type = "Page Visit"; XMP_TrackThis(obj, "HarleyPURL", "Page Visit", "Page Visit");
</script>
</head>
<body>
<div id="wrapper">
<div id="form">
<form name="form2" method="POST" action="landing.aspx?rid=testPURL&XMPieOrgBaseURL=http%3a%2f%2fwww.hdpolicesurvey.com%2f" id="form2">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTIzMzY3MzEzNQ9kFgQCBQ8VAQpIYXJsZXlQVVJMZAIGD2QWAmYPFQoDTXMuB01lbGFuaWUIU2hlZmNoaWsWVGV1dGViZXJnIEluY29ycG9yYXRlZAw0MTQtMjA3LTEzNTESMTIyMDAgVy4gV2lydGggU3QuCVdhdXdhdG9zYQJXSQU1MzIyMgpIYXJsZXlQVVJMZGTcAVE098MvJaXoGbNLgITf6vth/g==" />
</div>
<p>* = required fields</p>
<table width="474" border="0">
<tr>
<td valign="top">Title</td>
<td valign="top"><input name="title" type="text" id="title" value='Ms.' size="6" maxlength="6" /></td>
<td> </td>
<td colspan="2" valign="top">First*</td>
<td colspan="3"><span id="sprytextfield5">
<input name="first" type="text" id="first" value='Melanie' />
</span></td>
</tr>
<tr>
<td width="58">Last*</td>
<td width="144"><span id="sprytextfield6">
<input name="last" type="text" id="last" value='Shefchik' />
</span></td>
<td width="32"> </td>
<td width="43" colspan="2">Dept*</td>
<td width="144" colspan="3">
<input name="company" type="text" id="company" value='Teuteberg Incorporated' /></td>
</tr>
<tr>
<td>Phone*</td>
<td><span id="sprytextfield7">
<input name="phone" type="text" id="phone" value='414-207-1351' />
</span></td>
<td> </td>
<td colspan="2">Street</td>
<td colspan="3">
<input name="street" type="text" id="street" value='12200 W. Wirth St.' /></td>
</tr>
<tr>
<td height="24">City</td>
<td><input name="city" type="text" id="city" value='Wauwatosa' /></td>
<td> </td>
<td>ST</td>
<td><input name="state" type="text" id="state" value='WI' size="6" maxlength="2" /></td>
<td> </td>
<td>ZIP</td>
<td><input name="zip" type="text" id="zip" value='53222' size="14" maxlength="10" /></td>
</tr>
</table>
<p><br />
Do you currently employ a motor unit?
<br />
<label>
<input type="radio" name="employ" value="employ_no" id="employ_1" />
yes<br />
<input type="radio" name="employ" value="employ_yes" id="employ_0" />
no</label>
</p>
<p>What brand are you currently using? (Check all that apply)<br />
<label>
<input type="checkbox" name="brand_HD" value="HD" id="brand_0" />
HD</label>
<br />
<label>
<input type="checkbox" name="brand_BMW" value="BMW" id="brand_1" />
BMW</label>
<br />
<label>
<input type="checkbox" name="brand_Honda" value="Honda" id="brand_2" />
Honda</label>
<br />
<label>
<input type="checkbox" name="brand_Kawasaki" value="Kawasaki" id="brand_3" />
Kawasaki</label>
<br />
<label>
<input type="checkbox" name="brand_Other" value="checkbox" id="brand_4" />
Other</label>
</p>
<p>Total Motorcylce Fleet Size:<br />
<label>
<input type="radio" name="fleet" value="fleet1-5" id="fleet_0" />
1-5</label>
<br />
<label>
<input type="radio" name="fleet" value="fleet6-15" id="fleet_1" />
6-15</label>
<br />
<label>
<input type="radio" name="fleet" value="fleet16-25" id="fleet_2" />
16-25</label>
<br />
<label>
<input type="radio" name="fleet" value="fleet26-50" id="fleet_3" />
26-50</label>
<br />
<label>
<input type="radio" name="fleet" value="fleet51" id="fleet_4" />
51+<br />
<br />
</label>
Do you anticipate purchasing new motorcycles in... (Check all that apply)<br />
<label>
<input type="checkbox" name="purchase_3month" value="3month" id="purchase_0" />
within 3 months</label>
<br />
<label>
<input type="checkbox" name="purchase_3to6month" value="3-6month" id="purchase_1" />
3 - 6 months</label>
<br />
<label>
<input type="checkbox" name="purchase_6to12month" value="6-12month" id="purchase_2" />
6 - 12 months</label>
<label><br />
<input type="checkbox" name="purchase_1yearmore" value="1year" id="purchase_3" />
1 year or more</label>
<br />
</p>
<p>
<label> Would you like someone from H-D to contact
you regarding our
2010 products?<br />
<input type="radio" name="contact" value="contact_yes" id="contact_0" />
yes</label>
<br />
<label>
<input type="radio" name="contact" value="contact_no" id="contact_1" />
no<br />
<br />
Would you like to receive a H-D Police motorcycle catalog?<br />
<input type="radio" name="receive" value="receive_yes" id="receive_0" />
yes</label>
<br />
<label>
<input type="radio" name="receive" value="receive_no" id="receive_1" />
no</label>
</p>
<p>
<input onmouseup='XMP_TrackThis(this, "HarleyPURL", "Button", "Performed Action");' type="submit" name="submit" id="submit" value="Submit" />
<label> </label>
<label> </label>
<br />
<br />
<br />
<br />
<br />
</p>
<input type="hidden" name="XMP_SetNewAdors" value="form2" />
</form>
</div> <!--end #form -->
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3");
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4");
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5");
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6");
var sprytextfield7 = new Spry.Widget.ValidationTextField("sprytextfield7");
//-->
</script>
</div>
<!--end #wrapper -->
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
Design View and a CSS Div layout page
There are a few pages l
ike this. I am assuming it is because everything is layed out w
ith div tags, but there mush be a way to correct the desging view. Everything shows up great o
nline. Here is a screenshot:
Here is the code:
<body onload="initHomePage(); addReferToLinks();">
<!-- ################# TOOLBAR ############## -->
<script type="text/javascript" src="/shared_assets/toolbar_v2/toolbar.js"></script>
<!-- end TOOLBAR -->
<img src="/profile/image/logo_linknet.gif" />
<!-- Main div for entire page layout -->
<form name="frmSearch" action="" method="get" title="Resources" class="scopedSearch">
<input class="textInput" name="qt" value="THIS SECTION ONLY" id="searchField" size="20" />
<input class="button" type="submit" value="Search" name="submit" />
<input type=hidden name="col" value="mpr dno dnos1" />
</form>
<div id="main">
<!-- ###################### LEFT NEWS ################################## -->
<div id="newsBox" class="box">
<div class="boxHeader">
<div class="headerLeft"><h2>MP News</h2></div>
<div class="headerRight"><a href="/news/news/index.htm" class="more">more »</a></div>
</div>
<div class="boxContent">
<h3>
<script type="text/javascript">var x=new Date(); document.write(x.toLocaleDateString());</script>
</h3>
<div id="newsContent">
<div class="loading">
Loading...
</div>
</div>
<!-- -->
<h3>My Subscriptions</h3>
<ul style="list-style-type:none;">
<li><a href="http://rss/">Setup Subscriptions - Get Help</a></li>
<li><a href="http://">View Subscriptions</a></li>
</ul>
<!-- MEDIA CENTER -->
<div class="imgFrame"><a href=""><img src="image/mc_logo2.jpg" alt="Media Center" hspace="0" vspace="0" border="0" /></a></div>
<!-- COLUMNS -->
<div class="imgFrame"><a href="http/"><img src="image/columns.gif" hspace="0" vspace="0" border="0" alt="The Northwestern Columns" /></a></div>
</div>
</div>
<!-- #### end LEFT NEWS ########### -->
<!-- ###################### CENTER CONTENT ################################## -->
<div id="content">
<!-- MAIN CONTENT WELL -->
<!-- optional notice (visible only when critical news exists) -->
<div id="alert" class="box highlightBox">
<div class="boxHeader">
<div class="headerLeft"><h2>Important Notice</h2></div>
<div class="headerRight"> </div>
</div>
<div id="alertContent" class="boxContent">
<div class="article">
<a href="" class="headline">Avoid lock out - Install LINK 22.2 now</a>
Users who do not install LINK 22.2 before the version enforcement date of July 31 will be
unable to access their PCs.
</div>
</div>
</div>
<div id="home_page_id">) Home Page</div>
<!-- Activities -->
<div id="activities" class="box highlightBox">
<div class="boxHeader">
<div class="headerLeft">Welcome<span id="username"></span><h2>What would you like to do?</h2></div>
<div class="headerRight"> </div>
</div>
<div class="boxContent">
<div style="width:100%;">
<ul>
<li><a title="Find information and tools for recruiting new representatives" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Recruiting: <select style="font:message-box; width:19em;" onchange="if(this.value){window.navigate(appendReferer(this.value))};">
<option name="selectRecruit" selected="selected">*** make selection ***</option>
<option value="http.htm">Sourcing & Prospecting</option>
<option value="http://.htm">Selecting & Assessing Candidates</option>
<option value="http://_process.htm">Post Acceptance Process</option>
<option value="http">Developing an Internship Program</option>
<option value="http.htm">Tracking Activity, Results & Accountability</option>
<option value="http://.htm">Recruiter Development</option>
</select></a></li>
<li><a href="/objective/mpr_secure/mp_ldorgdev.htm" title="Find information and tools for developing leaders in your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Leadership & Organizational Development </a></li>
<li><a href="/objective/mpr_secure/mp_supvsn.htm" title="Find information and tools for effective supervision" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Supervision</a></li>
<li><a href="/objective/mpr_secure/mp_stfop.htm" title="Find information and tools for managing your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Staffing & Operations</a></li>
<li><a href="/objective/mpr_secure/mp_plnperform.htm" title="Find information and tools for business planning and performance monitoring" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Planning & Performance</a></li>
<li><a href="/objective/mpr_secure/mp_mngmntcompben.htm" title="Find information regarding income, fees, expenses, allowances and benefits" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Management Compensation & Benefits</a></li>
<li><a href="/objective/mpr_secure/mp_repdev.htm" title="Find information and tools regarding mentoring and professional growth" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Representative & Specialist Development</a> </li>
</ul>
<div id="slideshow1" class="activitySlideshow" style="height:212px;">
<img src="image/slideshow_photos/photo06.jpg" />
<img src="image/slideshow_photos/photo07.jpg" />
<img src="image/slideshow_photos/photo08.jpg" />
<img src="image/slideshow_photos/photo09.jpg" />
<img src="image/slideshow_photos/photo10.jpg" />
</div>
</div>
</div>
</div>
<!-- Lower div under activities (2 columns) -->
<div class="leftColumn">
<!-- Events Calendar -->
<div class="box">
<div class="boxHeader">
<div class="headerLeft"><h2>Events Calendar</h2></div>
</div>
<div class="boxContent"><ul>
<li>April 25-30<br />
<a href="http_020110.htm" target="_blank"></a></li>
<li>May 12-14<br />
<a href="http://030510.htm" target="_blank"></a></li>
<li>June 16<br />
<a href="http://.htm" target="_blank">Series conversation</a></li>
</ul>
</div>
</div>
<!-- Spotlight -->
<div class="box">
<div class="boxHeader">
<div class="headerLeft"><h2>Spotlight</h2></div>
<div class="headerRight"> </div>
</div>
<div class="boxContent">
<div class="article">
<!-- Leave "Market volatility resources available" at the top -->
<div class="headline"><a href="http.htm?tern Mutual Association dues decline form available</a> </div>
The $25 association membership fee will be charged to June 30 home
office supply bills. Representatives who wish to decline membership
may submit a <a href="http://.htm" target="_blank">decline
form</a>.
<div class="headline"><a href="http://.htm">Surplus notes information available</a> </div>
Find answers to common questions and hear insights from about the company’s recent surplus notes offering.
<div class="headline"><a href="http://.htm">Stay up to date on 2010 estate tax repeal </a> </div>
Consider the new Estate Tax Repeal page on LINKnet “home base” for information on the 2010 repeal and resources to use when talking to clients about this topic.
<div class="headline"><a href="http/index.htm">Withstanding Market Challenges</a> </div>
Access resources to highlight the company’s strength and stability, find sales strategies and share marketing and market-related materials to help address client concerns.
<div class="headline"><a href="http:///year.htm">Dividend resources available</a> </div>
The Current Year Scale page on LINKnet provides the latest information
and sales support materials based on the 2010 dividend announcement.
<!-- Leave "Market volatility resources available" at the top -->
</div>
</div>
</div>
</div>
<div class="rightColumn">
<!-- Approaching Deadlines -->
<div class="box">
<div class="boxHeader">
<div class="headerLeft"><h2>Approaching Deadlines</h2></div>
</div>
<div class="boxContent">
<ul>
<li>April 30: <a href="http.htm">Submit 2010 Commitment to Excellence Award nbominee</a></li>
<li>May 25: <a href="http.htm">Submit applications for Intern Community Service Award</a></li>
<li>June 30: <a href="http://pdf">Submit 2010 Managers Membership Award Application to NAIFA</a> <img src="/shared_assets/image/doc_icons/pdf.gif" alt="PDF File" /></li>
</ul>
</div>
</div>
<!-- Tech Alerts -->
<div id="techalerts" class="box">
<div class="boxHeader">
<div class="headerLeft"><h2>Priority Tech Alerts</h2></div>
<div class="headerRight"><a href="http://.htm" class="more">more »</a></div>
</div>
<div class="boxContent">
<div class="loading">
Loading...
</div>
</div>
<iframe name="techalerts" src="/statusdisplay/001_summary.htm" onreadystatechange="if(this.readyState=='complete'){this.previousSibling.innerHTML = formatTechAlert(frames['techalerts'].document.body.innerHTML);}"></iframe>
</div>
</div>
</div>Dreamweaver is pretty good these days at showing the page in Design View how it will be viewed when online. HOWEVER having said that it does largely depend on the way you write the css.
I guess for Dreamweaver it's impossible for it to show every concievable way you can write css correctly. Unfortuantely if your css is not compatible with what Dreamweaver likes it won't make a great job of rendering the site correctly in Design View, that's always been the case.
The css is not wrong but I've seen many display issues in Dreameaver Design View caused as a direct result of the css being overly complex to crack simple presentation. I guess it's in the lap of the gods if you are fortunate enough to have found the way to write css that Dreamweaver likes. -
Learning DW and CSS so patience is in order .
I've being reading numerous posts here and on the web about avoiding tables for laying out web pages. I can see the advantages in terms of cleaner codes and easiness of updating and changing sites at a later time. So I started learning about DIV tags (although tables is very easy for me) and have practice a few times with fairly good results, love the absolute positioning with it. Having said that, for the love of me, can't find a way of centering horizontally a page designed with DIV tags (due to ignorance), for example, 1 column/three rows page, after defining styles, size and colors I enclosed everything in another DIV tag, wrapper I think is called, but have not found a way of centering it on the page, text-aligment on the DIV tag only centers the text not the DIV itself, how to go about this? Help is appreciated.love the absolute positioning with it.
Get over it. It's a trojan horse. Absolute positioning is not a general layout method.
To center ANY block (non-absolutely positioned) element, use CSS to give it a width and left/right margins of 'auto'. For example -
<div id="foo">...</div>
That div will be centered with this CSS -
#foo { width:300px; margin:0 auto; }
I think you are on the wrong path already, though. Stick with tables (which you say are very easy for you) UNTIL you a) understand CSS well enough to understand what absolute positioning is and why I say it's bad, and b) understand how to use float, margin, and padding to place things on the page. Then you are ready to move away from tables. -
Site messed up after adding Contact form.
The site is online in its current state: http://www.wientjesvoegwerk.nl/index.html
The site uses (X)HTML, JAVA, PHP and Spry tabbed panels with a CSS layout.
The current state has:
<?php include("mail.php"); ?>
Before the Doctype, etc.
<?php $xajax->printJavascript('xajax/'); ?>
In the header.
But adding:
<?php echo '<div id="contact_result">'.$form.'</div>'; ?>
to the div where i want to put the mailing form results in problems...
If i add that last line my footer will go up to the header. and i dont know why...
The new code from the form that messes up the site is marked in red.
The HTML:
<?php include("mail.php"); ?>
<!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>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Wientjes Voegwerk & Renovatie - Home</title>
<link href="CSS/Style.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="CSS/Style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Language" content="NL" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Wientjes Voegwerk en Renovatie is een voeg- en renovatiebedrijf gespecialiseerd in gevelrenovatie. Dagelijkse werkzaamheden zijn het voegen van nieuwbouwwerk, en alle voorkomende vormen van gevelrenovatie. Ik geef uw woning, garage of schoorsteen de aandacht die het verdient en ben trots op het resultaat van mijn werk!"/>
<meta name="keywords" content="Voegwerk, Renovatie, Reinigen, Impregneren, Muur, Voegen, Steen, Woning, Garage, Schoorsteen, Bedrijf, Gevel, Wientjes, Uitslijten, Kappen, Fundering, Vorstschade, Metselen, Metselwerk, Vocht" />
<meta name="author" content="Rob Nijlaan" />
<?php $xajax->printJavascript('xajax/'); ?>
</head>
<body>
<div id="WContainer">
<div id="WHeader" align="center">
<img src="Pictures/VoegenRenLos.png" width="540" height="58" /><br />
<img src="Pictures/WientLogo.png" width="600" height="136" alt="Wientjes Voegwerk & Renovatie" /></div>
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<div class="TabbedPanelsTab" tabindex="0">
<style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
<table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr>
<td style="padding-right:0px" title ="Home">
<a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td>
</tr></table>
</div>
<div class="TabbedPanelsTab" tabindex="0">
<style>#Info a{display:block;color:transparent;} #Info a:hover{background-position:left bottom;}a#Info {display:none}</style>
<table id="Info" width=0 cellpadding=0 cellspacing=0 border=0><tr>
<td style="padding-right:0px" title ="Info">
<a href="javascript:TabbedPanels1.showPanel(2);" title="Info" style="background-image:url(Buttons/Info.png);width:172px;height:75px;display:block;"><br/></a></td>
</tr></table>
</div>
<div class="TabbedPanelsTab" tabindex="0">
<style>#Gallerij a{display:block;color:transparent;} #Gallerij a:hover{background-position:left bottom;}a#Gallerij {display:none}</style>
<table id="Gallerij" width=0 cellpadding=0 cellspacing=0 border=0><tr>
<td style="padding-right:0px" title ="Gallerij">
<a href="javascript:TabbedPanels1.showPanel(3);" title="Gallerij" style="background-image:url(Buttons/Gallerij.png);width:172px;height:75px;display:block;"><br/></a></td>
</tr></table>
</div>
<div class="TabbedPanelsTab" tabindex="0">
<style>#Contact a{display:block;color:transparent;} #Contact a:hover{background-position:left bottom;}a#Contact {display:none}</style>
<table id="Contact" width=0 cellpadding=0 cellspacing=0 border=0><tr>
<td style="padding-right:0px" title ="Contact">
<a href="javascript:TabbedPanels1.showPanel(4);" title="Contact" style="background-image:url(Buttons/Contact.png);width:172px;height:75px;display:block;"><br/></a></td>
</tr></table>
</div>
<br />
<br />
<br />
<br />
<br />
<center><footer>Wientjes Voegwerk en Renovatie<br /><br />
tel; 06 - 221 464 28<br /><br />kvk;
</footer></center>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="Home">
<h1>Welkom Bij Wientjes Voegwerk en Renovatie!</h1>
<p>Wientjes Voegwerk en Renovatie is een voeg- en renovatiebedrijf gespecialiseerd in gevelrenovatie.<br />Dagelijkse werkzaamheden zijn het voegen van nieuwbouwwerk, en alle voorkomende vormen van gevelrenovatie.<br />Ik geef uw woning, garage of schoorsteen de aandacht die het verdient en ben trots op het resultaat van mijn werk!<br /><br />Wientjes, J </p>
<h2>Voegen/Renovatie/Reinigen & Impregneren. </h2>
<table border="0" align="right"><center><tr><td>
<a href="Foto/Foto's telefoon1 075.jpg"><img src="Foto/Foto's telefoon1 075.jpg" alt="Muur met Steiger" width="379" height="354" align="right" margin-right="55px"/>
</a></td></tr><tr><td><center>klik op de foto voor een groter voorbeeld</center></td></tr></center></table>
<p>Vaak wordt er bij het kopen van een woning weinig aandacht besteed aan het voegwerk. Er wordt alleen gekeken naar hoe een woning is gebouwd.<br />Een voeg bepaalt echter wel het aanzicht van een woning. Van een goed aangebrachte voeg heeft u uiteraard veel langer plezier. <br />Renovatie bestaat voornamelijk uit het uitslijpen of kappen van het oude voegwerk. Waar nodig het verwijderen van scheuren die zijn ontstaan door:</p>
<ul>
<li>
<p>
Verzakking van de fundering
</p>
</li>
<li>
<p>
Slecht voegwerk
</p>
</li>
<li>
<p>
Vorstschade
</p>
</li>
<li>
<p>
Doorhangen of ontbreken van ...
</p>
</li>
</ul>
<p>Bij gevelvervuiling van uw woning kunnen er problemen ontstaan die het wooncomfort negatief kunnen beïnvloeden.<br />Wanneer de voeg is aangetast of het metselwerk is door vorstschade beschadigd, kunnen er vochtproblemen in huis ontstaan.<br />Mos en alg hechten zich goed aan beschadigde stenen en voegwerk. <br /><br />Door middel van impregnering wordt een woning waterafstotend gemaakt.<br />Dit betekent dat het voeg- en metstelwerk jarenlang wordt beschermd tegen weersinvloeden. <br />Ook is impregnering beter voor de isolatie van de woning.</p>
<p align="left"><img src="Pictures/TelnrLos.png" width="525" height="49" align="top"/></p>
</div>
<div class="TabbedPanelsContent" id="Info">
test2
</div>
<div class="TabbedPanelsContent" id="Gallerij">
test3
</div>
<div class="TabbedPanelsContent" id="Contact">
<?php echo '<div id="contact_result">'.$form.'</div>'; ?>
</div>
</div>
` </div>
</div>
<div id="WFooter" align="center">
<footer>Wientjes Voegwerk & Renovatie , 03- '02 » Site by ; <b>Rob Nijlaan</b> » Problemen of vragen over deze site? - <b><a href="mailto:[email protected]">[email protected]</a></b></footer>
</div>
</div>
</body>
</html>
</
The CSS:
@charset "utf-8";
/* CSS Document */
html,body {
height:100%; /* needed for container min-height */
width:100%;
background: #FFFFFF url(../Pictures/Background.png) no-repeat center;
color:#000;
h1{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color: #595999;
font-weight: bold;
font-style:italic;
font-size: 250%;
h2{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color: #595999;
font-weight: bold;
font-size: 200%;
p{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-size: 110%;
footer{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-size: 70%;
#WContainer{
position:absolute;
margin:0 auto;
width:80%;
background:none;
height:auto;
height:100%;
min-height:100%;
margin-left: 10%;
margin-right: 10%;
#WHeader{
height: 195px;
width:100%;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 10px;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 172px;
height: 75px;
background-color: #FFF;
position: relative;
border-top: solid 0px #FFF;
border-right: solid 0px #FFF;
border-left: solid 0px #FFF;
border-bottom: solid 0px #FFF;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsContentGroup {
margin-left: 220px;
width: auto;
height: auto;
min-height:50%;
max-width:83%;
min-width:500px;
padding: 20px 20px 20px 20px;
border-left: solid 1px #999;
border-bottom: solid 2px #999;
border-top: solid 1px #999;
border-right: solid 2px #999;
#WFooter{
clear:both;
height: 30px;
margin-top:1px;
Also i use "SpryTabbedPanels.js", for the html.
The Contact form: (adjusted to hide critical info from forum users)
<?php
require_once('phpmailer/class.phpmailer.php');
require_once('xajax/xajax_core/xajax.inc.php');
$form = '<form id="ContactForm">
<div class="container">
<label class="contactlabel">Ùw Naam<br /><input name="name" type="text" class="input" /></label>
<label class="contactlabel">Uw Email Adres:<br /><input name="email" type="text" class="input" /></label>
<label class="contactlabel">Uw Telefoonnummer:<br /><input name="phone" type="text" class="input" /></label>
Typ hier uw bericht:<br />
<textarea name="msg" cols="1" rows="1"></textarea><br />
<input type="button" id="subbtn" class="btn" value="Submit" onclick="xajax_myFunction(xajax.getFormValues(\'ContactForm\'));" />
<div id="form_msg"></div> //this div will contain error messages
</div>
</form>';
function myFunction($get) {
global $form, $error;
$error = '';
$objResponse = new xajaxResponse();
$show_form = true;
if (!empty($get['email']) && !empty($get['phone']) && !empty($get['msg']) && !empty($get['name'])) {
if (preg_match("/^[\w-]+(\.[\w-]+)*@([0-9a-z][0-9a-z-]*[0-9a-z]\.)+([a-z]{2,4})$/i", trim($get['email']))) {
$email = preg_replace("/\r\n/", "", $get['email']);
$from = preg_replace("/\r\n/", "", $get['name']);
$name = $get['name'];
$phone = $get['phone'];
$msg = $get['msg'];
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->Host = "mail.YOURHOST.com";
$mail->SMTPAuth = true;
$mail->Username = "USERNAME";
$mail->Password = "PASSWORD";
$mail->From = $get['email'];
$mail->FromName = $get['name'];
$mail->AddAddress("[email protected]");
$mail->AddReplyTo($email, $from);
$mail->Subject = "Er is een bericht verzonden vanuit Wientjesvoegwerk.nl";
$mail->IsHTML(true);
$mail->Body = "Name: $name <br/> Email: $email <br/> Phone: $phone <br/> Message: $msg";
if ($mail->Send()) {
$error = "Success! Dank u voor uw interesse! Er wordt zo spoedig mogelijk contact met u opgenomen.";
$show_form = false;
} else {
$error = "Er is een probleem ontstaan tijdens het verzenden, probeert u het a.u.b. nog eens.";
$show_form = true;
} else {
$error = "Het ingevoerde email adress is onjuist. Probeert u het a.u.b. nog eens.";
$show_form = true;
} else {
$error = "Vul a.u.b. alle nodige velden in!";
$show_form = true;
if (!$show_form) {
$objResponse->assign('contact_result', 'innerHTML', $error);
} else {
$objResponse->assign('form_msg', 'innerHTML', $error);
return $objResponse;
$xajax = new xajax();
$xajax->registerFunction('myFunction');
$xajax->processRequest();
?>
Also "class.phpmailer.php" and "xajax.inc.php" are obviously needed as well as some other files from those packages.
THE BIG PROBLEMS:
1. Adding the form to a div (into content div of Spry tabbed panels) results in wrong apearance.
Footer is put to top.
2. Adding the form to a div results in broken functions.
Buttons in the Spry tabs dont work anymore.
3. Java is messed up.
in top screen you read: printJavascript('xajax/'); ?>
in lower screen in content div: test2 test3 (text from the 2nd and 3rd Content area of Spry, just so its filled with something) and '.$form.' '; ?>
SOLUTIONS ASKED:
1. Please help me with the contact form so it will work on my page and no error remains. Im not that good in Java...
2. Please help me solving the problem with the footer. I dont have any clue anymore why this happens. And why no problems occur without the mail form.
3. Can anyone tell me why the buttons also lose function? It looks like a similar problem as the footer.
In short: HELP!Thank you for pointing me in the right direction. I must honestly say im a hobby programmer that has the capability to learn fast.
A few weeks ago i only knew html, actionscript, etc. I never worked with xhtml, javascript, css, etc. untill now.
But with some help i managed to resolve ALL problems so far, exept 2...
My site has no errors anymore all files are validated 100%!
The only 2 problems now are;
1. The use of <li> for Spry tabs. They make the buttons have a dot in front of them. I hope this can be changed into something that removes the
list dots/numbers.
So from this:
button
to this:
button
2. I like to use this email form from: http://www.webbyzone.com/2010/01/10/make-xajax-phpmailer-contact-forms-work/
The code is embedded in my site but doesnt work at all. Please take a look at it... -
On a form w Validation, how to redirect to a custom page
Hi. I have created a form in Dreamweaver CS5 that uses spry validation successfully. Once the form is submitted, the user is redirected to the home page. But I don't want that redirect.
My question is, how can I have the validated page redirect to a custom thank you page I designed? I don't know the exact code/syntax to write to make it do what I want and, even if I had the code, I wouldn't know exactly where it should be placed. Please help if you can. Here's the source code. )BTW, when I use Dreamweaver Behaviors to add a URL redirect, it ignores the required validation and simply allows you to click the submit button and redirect.) Many thanks!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="../_css/main.css" rel="stylesheet" media="screen, projection">
<link href="../_css/forms.css" rel="stylesheet" media="screen, projection">
<title></title>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!-- **** I think the line of code for the redirect is here??...I just don't know how to write the code to redirect to the page I want ***** -->
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
</script>
</head>
<body>
<header id="pageHeader">
<a href="../index.htm"><img src="../_images/logo.gif" width="170" height="91" alt="HMN logo" id="logo"></a>
<img src="../_images/tagline.png" width="296" height="92" alt="HMN tagline" id="tagline">
</header>
<nav id="mainNav">
<ul>
<li><a href="../index.htm">Home</a></li>
<li><a href="../press.htm">Press</a></li>
<li><a href="../about.htm">About</a></li>
<li><a href="../contact.htm">Contact</a></li>
</ul>
</nav>
<br class="clear">
<div class="headerContact">
</div>
<article>
<!-- The file webformmailer.php sits on the web server at godaddy.com in case that matters -->
<section id="Request">
<p id="intro">To request your link for the downloadable <span id="highlight">Media Kit</span>, please provide the following information:</p>
<form name="Request" method="post" action="../../webformmailer.php"> <p id="formCaption">Fields marked with * are required.</p>
<p><span id="sprytextfield1">
<label for="first_name">First Name:*</label>
<input type="text" name="first_name" id="first_name">
<span class="textfieldRequiredMsg">(required)</span></span></p>
<p><span id="sprytextfield2">
<label for="last_name">Last Name:*</label>
<input type="text" name="last_name" id="last_name">
<span class="textfieldRequiredMsg">(required)</span></span></p>
<p><span id="sprytextfield3">
<label for="company">Company:*</label>
<input type="text" name="company" id="company">
<span class="textfieldRequiredMsg">(required)</span></span></p>
<p>
<label for="address">Address:</label>
<input type="text" name="address" id="address">
</p>
<p>
<label for="address_2">Address 2:</label>
<input type="text" name="address_2" id="address_2">
</p>
<p>
<label for="city">City:</label>
<input type="text" name="city" id="city">
</p>
<p>
<label for="state">State:</label>
<input type="text" name="state" id="state">
</p>
<p>
<label for="zip">Zip:</label>
<input type="text" name="zip" id="zip">
</p>
<p><span id="sprytextfield4">
<label for="email">Email:*</label>
<input type="text" name="email" id="email">
<span class="textfieldRequiredMsg">(required)</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span> </p>
<p>
<input name="submit" type="image" id="submit" onClick="MM_goToURL('parent','media_kit_download.htm');return document.MM_returnValue" src="../_images/btn_submit.png">
</p>
<p> </p>
</form>
<p>
</p>
</div>
</div>
</section>
</article>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {validateOn:["blur"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {validateOn:["blur"]});
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "email", {validateOn:["blur"]});
</script>
</body>
</html>Thanks for replying. The URL you've bolded is actually the correct page I'd like the redirect to go to when the form is successfully submitted after validation. But for some reason, that URL request is being ignored and the redirect brings me back to the index page in the root directory. I don't see anywhere in the code that makes the request to do that. Unless that's a default behavior if I've gotten the redirect wrong?
I don't know if this is helpful, but there is also a .js file that Dreamweaver created and attached to the above HTML source file. The .js file appears to have all the spry code validation including code for features and widgets I'm not even using. I searched through the code several times trying to identify where there might be a redirect to the index page but didn't recognize anything that made sense to me. Here is the complete, unedited file:
// SpryValidationTextField.js - version 0.38 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.Widget.BrowserSniff();
Spry.Widget.ValidationTextField = function(element, type, options)
type = Spry.Widget.Utils.firstValid(type, "none");
if (typeof type != 'string') {
this.showError('The second parameter in the constructor should be the validation type, the options are the third parameter.');
return;
if (typeof Spry.Widget.ValidationTextField.ValidationDescriptors[type] == 'undefined') {
this.showError('Unknown validation type received as the second parameter.');
return;
options = Spry.Widget.Utils.firstValid(options, {});
this.type = type;
if (!this.isBrowserSupported()) {
//disable character masking and pattern behaviors for low level browsers
options.useCharacterMasking = false;
this.init(element, options);
//make sure we validate at least on submit
var validateOn = ['submit'].concat(Spry.Widget.Utils.firstValid(this.options.validateOn, []));
validateOn = validateOn.join(",");
this.validateOn = 0;
this.validateOn = this.validateOn | (validateOn.indexOf('submit') != -1 ? Spry.Widget.ValidationTextField.ONSUBMIT : 0);
this.validateOn = this.validateOn | (validateOn.indexOf('blur') != -1 ? Spry.Widget.ValidationTextField.ONBLUR : 0);
this.validateOn = this.validateOn | (validateOn.indexOf('change') != -1 ? Spry.Widget.ValidationTextField.ONCHANGE : 0);
if (Spry.Widget.ValidationTextField.onloadDidFire)
this.attachBehaviors();
else
Spry.Widget.ValidationTextField.loadQueue.push(this);
Spry.Widget.ValidationTextField.ONCHANGE = 1;
Spry.Widget.ValidationTextField.ONBLUR = 2;
Spry.Widget.ValidationTextField.ONSUBMIT = 4;
Spry.Widget.ValidationTextField.ERROR_REQUIRED = 1;
Spry.Widget.ValidationTextField.ERROR_FORMAT = 2;
Spry.Widget.ValidationTextField.ERROR_RANGE_MIN = 4;
Spry.Widget.ValidationTextField.ERROR_RANGE_MAX = 8;
Spry.Widget.ValidationTextField.ERROR_CHARS_MIN = 16;
Spry.Widget.ValidationTextField.ERROR_CHARS_MAX = 32;
/* validation parameters:
* - characterMasking : prevent typing of characters not matching an regular expression
* - regExpFilter : additional regular expression to disalow typing of characters
* (like the "-" sign in the middle of the value); use for partial matching of the currently typed value;
* the typed value must match regExpFilter at any moment
* - pattern : enforce character on each position inside a pattern (AX0?)
* - validation : function performing logic validation; return false if failed and the typedValue value on success
* - minValue, maxValue : range validation; check if typedValue inside the specified range
* - minChars, maxChars : value length validation; at least/at most number of characters
Spry.Widget.ValidationTextField.ValidationDescriptors = {
'none': {
'custom': {
'integer': {
characterMasking: /[\-\+\d]/,
regExpFilter: /^[\-\+]?\d*$/,
validation: function(value, options) {
if (value == '' || value == '-' || value == '+') {
return false;
var regExp = /^[\-\+]?\d*$/;
if (!regExp.test(value)) {
return false;
options = options || {allowNegative:false};
var ret = parseInt(value, 10);
if (!isNaN(ret)) {
var allowNegative = true;
if (typeof options.allowNegative != 'undefined' && options.allowNegative == false) {
allowNegative = false;
if (!allowNegative && value < 0) {
ret = false;
} else {
ret = false;
return ret;
'real': {
characterMasking: /[\d\.,\-\+e]/i,
regExpFilter: /^[\-\+]?\d(?:|\.,\d{0,2})|(?:|e{0,1}[\-\+]?\d{0,})$/i,
validation: function (value, options) {
var regExp = /^[\+\-]?[0-9]+([\.,][0-9]+)?([eE]{0,1}[\-\+]?[0-9]+)?$/;
if (!regExp.test(value)) {
return false;
var ret = parseFloat(value);
if (isNaN(ret)) {
ret = false;
return ret;
'currency': {
formats: {
'dot_comma': {
characterMasking: /[\d\.\,\-\+\$]/,
regExpFilter: /^[\-\+]?(?:[\d\.]*)+(|\,\d{0,2})$/,
validation: function(value, options) {
var ret = false;
//2 or no digits after the comma
if (/^(\-|\+)?\d{1,3}(?:\.\d{3})*(?:\,\d{2}|)$/.test(value) || /^(\-|\+)?\d+(?:\,\d{2}|)$/.test(value)) {
value = value.toString().replace(/\./gi, '').replace(/\,/, '.');
ret = parseFloat(value);
return ret;
'comma_dot': {
characterMasking: /[\d\.\,\-\+\$]/,
regExpFilter: /^[\-\+]?(?:[\d\,]*)+(|\.\d{0,2})$/,
validation: function(value, options) {
var ret = false;
//2 or no digits after the comma
if (/^(\-|\+)?\d{1,3}(?:\,\d{3})*(?:\.\d{2}|)$/.test(value) || /^(\-|\+)?\d+(?:\.\d{2}|)$/.test(value)) {
value = value.toString().replace(/\,/gi, '');
ret = parseFloat(value);
return ret;
'email': {
characterMasking: /[^\s]/,
validation: function(value, options) {
var rx = /^[\w\.-]+@[\w\.-]+\.\w+$/i;
return rx.test(value);
'date': {
validation: function(value, options) {
var formatRegExp = /^([mdy]+)[\.\-\/\\\s]+([mdy]+)[\.\-\/\\\s]+([mdy]+)$/i;
var valueRegExp = this.dateValidationPattern;
var formatGroups = options.format.match(formatRegExp);
var valueGroups = value.match(valueRegExp);
if (formatGroups !== null && valueGroups !== null) {
var dayIndex = -1;
var monthIndex = -1;
var yearIndex = -1;
for (var i=1; i<formatGroups.length; i++) {
switch (formatGroups[i].toLowerCase()) {
case "dd":
dayIndex = i;
break;
case "mm":
monthIndex = i;
break;
case "yy":
case "yyyy":
yearIndex = i;
break;
if (dayIndex != -1 && monthIndex != -1 && yearIndex != -1) {
var maxDay = -1;
var theDay = parseInt(valueGroups[dayIndex], 10);
var theMonth = parseInt(valueGroups[monthIndex], 10);
var theYear = parseInt(valueGroups[yearIndex], 10);
// Check month value to be between 1..12
if (theMonth < 1 || theMonth > 12) {
return false;
// Calculate the maxDay according to the current month
switch (theMonth) {
case 1: // January
case 3: // March
case 5: // May
case 7: // July
case 8: // August
case 10: // October
case 12: // December
maxDay = 31;
break;
case 4: // April
case 6: // June
case 9: // September
case 11: // November
maxDay = 30;
break;
case 2: // February
if ((parseInt(theYear/4, 10) * 4 == theYear) && (theYear % 100 != 0 || theYear % 400 == 0)) {
maxDay = 29;
} else {
maxDay = 28;
break;
// Check day value to be between 1..maxDay
if (theDay < 1 || theDay > maxDay) {
return false;
// If successfull we'll return the date object
return (new Date(theYear, theMonth - 1, theDay)); //JavaScript requires a month between 0 and 11
} else {
return false;
'time': {
validation: function(value, options) {
// HH:MM:SS T
var formatRegExp = /([hmst]+)/gi;
var valueRegExp = /(\d+|AM?|PM?)/gi;
var formatGroups = options.format.match(formatRegExp);
var valueGroups = value.match(valueRegExp);
//mast match and have same length
if (formatGroups !== null && valueGroups !== null) {
if (formatGroups.length != valueGroups.length) {
return false;
var hourIndex = -1;
var minuteIndex = -1;
var secondIndex = -1;
//T is AM or PM
var tIndex = -1;
var theHour = 0, theMinute = 0, theSecond = 0, theT = 'AM';
for (var i=0; i<formatGroups.length; i++) {
switch (formatGroups[i].toLowerCase()) {
case "hh":
hourIndex = i;
break;
case "mm":
minuteIndex = i;
break;
case "ss":
secondIndex = i;
break;
case "t":
case "tt":
tIndex = i;
break;
if (hourIndex != -1) {
var theHour = parseInt(valueGroups[hourIndex], 10);
if (isNaN(theHour) || theHour > (formatGroups[hourIndex] == 'HH' ? 23 : 12 )) {
return false;
if (minuteIndex != -1) {
var theMinute = parseInt(valueGroups[minuteIndex], 10);
if (isNaN(theMinute) || theMinute > 59) {
return false;
if (secondIndex != -1) {
var theSecond = parseInt(valueGroups[secondIndex], 10);
if (isNaN(theSecond) || theSecond > 59) {
return false;
if (tIndex != -1) {
var theT = valueGroups[tIndex].toUpperCase();
if (
formatGroups[tIndex].toUpperCase() == 'TT' && !/^a|pm$/i.test(theT) ||
formatGroups[tIndex].toUpperCase() == 'T' && !/^a|p$/i.test(theT)
return false;
var date = new Date(2000, 0, 1, theHour + (theT.charAt(0) == 'P'?12:0), theMinute, theSecond);
return date;
} else {
return false;
'credit_card': {
characterMasking: /\d/,
validation: function(value, options) {
var regExp = null;
options.format = options.format || 'ALL';
switch (options.format.toUpperCase()) {
case 'ALL': regExp = /^[3-6]{1}[0-9]{12,18}$/; break;
case 'VISA': regExp = /^4(?:[0-9]{12}|[0-9]{15})$/; break;
case 'MASTERCARD': regExp = /^5[1-5]{1}[0-9]{14}$/; break;
case 'AMEX': regExp = /^3(4|7){1}[0-9]{13}$/; break;
case 'DISCOVER': regExp = /^6011[0-9]{12}$/; break;
case 'DINERSCLUB': regExp = /^3(?:(0[0-5]{1}[0-9]{11})|(6[0-9]{12})|(8[0-9]{12}))$/; break;
if (!regExp.test(value)) {
return false;
var digits = [];
var j = 1, digit = '';
for (var i = value.length - 1; i >= 0; i--) {
if ((j%2) == 0) {
digit = parseInt(value.charAt(i), 10) * 2;
digits[digits.length] = digit.toString().charAt(0);
if (digit.toString().length == 2) {
digits[digits.length] = digit.toString().charAt(1);
} else {
digit = value.charAt(i);
digits[digits.length] = digit;
j++;
var sum = 0;
for(i=0; i < digits.length; i++ ) {
sum += parseInt(digits[i], 10);
if ((sum%10) == 0) {
return true;
return false;
'zip_code': {
formats: {
'zip_us9': {
pattern:'00000-0000'
'zip_us5': {
pattern:'00000'
'zip_uk': {
characterMasking: /[\dA-Z\s]/,
validation: function(value, options) {
//check one of the following masks
// AN NAA, ANA NAA, ANN NAA, AAN NAA, AANA NAA, AANN NAA
return /^[A-Z]{1,2}\d[\dA-Z]?\s?\d[A-Z]{2}$/.test(value);
'zip_canada': {
characterMasking: /[\dA-Z\s]/,
pattern: 'A0A 0A0'
'zip_custom': {}
'phone_number': {
formats: {
//US phone number; 10 digits
'phone_us': {
pattern:'(000) 000-0000'
'phone_custom': {}
'social_security_number': {
pattern:'000-00-0000'
'ip': {
characterMaskingFormats: {
'ipv4': /[\d\.]/i,
'ipv6_ipv4': /[\d\.\:A-F\/]/i,
'ipv6': /[\d\.\:A-F\/]/i
validation: function (value, options) {
return Spry.Widget.ValidationTextField.validateIP(value, options.format);
'url': {
characterMasking: /[^\s]/,
validation: function(value, options) {
//fix for ?ID=223429 and ?ID=223387
/* the following regexp matches components of an URI as specified in http://tools.ietf.org/html/rfc3986#page-51 page 51, Appendix B.
scheme = $2
authority = $4
path = $5
query = $7
fragment = $9
var URI_spliter = /^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/;
var parts = value.match(URI_spliter);
if (parts && parts[4]) {
//encode each component of the domain name using Punycode encoding scheme: http://tools.ietf.org/html/rfc3492
var host = parts[4].split(".");
var punyencoded = '';
for (var i=0; i<host.length; i++) {
punyencoded = Spry.Widget.Utils.punycode_encode(host[i], 64);
if (!punyencoded) {
return false;
} else {
if (punyencoded != (host[i] + "-")) {
host[i] = 'xn--' + punyencoded;
host = host .join(".");
//the encoded domain name is replaced into the original URL to be validated again later as URL
value = value.replace(URI_spliter, "$1//" + host + "$5$6$8");
//fix for ?ID=223358 and ?ID=223594
//the following validates an URL using ABNF rules as defined in http://tools.ietf.org/html/rfc3986 , Appendix A., page 49
//except host which is extracted by match[1] and validated separately
* userinfo= (?:(?:[a-z0-9\-\._~\!\$\&\'\(\)\*\+\,\;\=:]|%[0-9a-f]{2,2})*\@)?
* host= (?:((?:(?:[a-z0-9][a-z0-9\-]*[a-z0-9]|[a-z0-9])\.)*(?:[a-z][a-z0-9\-]*[a-z0-9]|[a-z])|(?: \[[^\]]*\]))
* pathname= (?:\/(?:[a-z0-9\-\._~\!\$\&\'\(\)\*\+\,\;\=\:\@]|%[0-9a-f]{2,2})*)*
* query= (?:\?(?:[a-z0-9\-\._~\!\$\&\'\(\)\*\+\,\;\=\:\@\/\?]|%[0-9a-f]{2,2})*)?
* anchor= (?:\#(?:[a-z0-9\-\._~\!\$\&\'\(\)\*\+\,\;\=\:\@\/\?]|%[0-9a-f]{2,2})*)?
var regExp = /^(?:https?|ftp)\:\/\/(?:(?:[a-z0-9\-\._~\!\$\&\'\(\)\*\+\,\;\=:]|%[0-9a-f]{2,2})*\@)?(?: ((?:(?:[a-z0-9][a-z0-9\-]*[a-z0-9]|[a-z0-9])\.)*(?:[a-z][a-z0-9\-]*[a-z0-9]|[a-z])|(?:\[[^ \]]*\]))(?:\:[0-9]*)?)(?:\/(?:[a-z0-9\-\._~\!\$\&\'\(\)\*\+\,\;\=\:\@]|%[0-9a-f]{2,2})*)*( ?:\?(?:[a-z0-9\-\._~\!\$\&\'\(\)\*\+\,\;\=\:\@\/\?]|%[0-9a-f]{2,2})*)?(?:\#(?:[a-z0-9\-\._ ~\!\$\&\'\(\)\*\+\,\;\=\:\@\/\?]|%[0-9a-f]{2,2})*)?$/i;
var valid = value.match(regExp);
if (valid) {
//extract the address from URL
var address = valid[1];
if (address) {
if (address == '[]') {
return false;
if (address.charAt(0) == '[' ) {
//IPv6 address or IPv4 enclosed in square brackets
address = address.replace(/^\[|\]$/gi, '');
return Spry.Widget.ValidationTextField.validateIP(address, 'ipv6_ipv4');
} else {
if (/[^0-9\.]/.test(address)) {
return true;
} else {
//check if hostname is all digits and dots and then check for IPv4
return Spry.Widget.ValidationTextField.validateIP(address, 'ipv4');
} else {
return true;
} else {
return false;
2.2.1. Preferred
x:x:x:x:x:x:x:x, where the 'x's are the hexadecimal values of the eight 16-bit pieces of the address.
Examples:
FEDC:BA98:7654:3210:FEDC:BA98:7654:3210
1080:0:0:0:8:800:200C:417A
Note that it is not necessary to write the leading zeros in an
individual field, but there must be at least one numeral in every
field (except for the case described in 2.2.2.).
2.2.2. Compressed
The use of "::" indicates multiple groups of 16-bits of zeros.
The "::" can only appear once in an address. The "::" can also be
used to compress the leading and/or trailing zeros in an address.
1080:0:0:0:8:800:200C:417A --> 1080::8:800:200C:417A
FF01:0:0:0:0:0:0:101 --> FF01::101
0:0:0:0:0:0:0:1 --> ::1
0:0:0:0:0:0:0:0 --> ::
2.5.4 IPv6 Addresses with Embedded IPv4 Addresses
IPv4-compatible IPv6 address (tunnel IPv6 packets over IPv4 routing infrastructures)
::0:129.144.52.38
IPv4-mapped IPv6 address (represent the addresses of IPv4-only nodes as IPv6 addresses)
::ffff:129.144.52.38
The text representation of IPv6 addresses and prefixes in Augmented BNF (Backus-Naur Form) [ABNF] for reference purposes.
[ABNF http://tools.ietf.org/html/rfc2234]
IPv6address = hexpart [ ":" IPv4address ]
IPv4address = 1*3DIGIT "." 1*3DIGIT "." 1*3DIGIT "." 1*3DIGIT
IPv6prefix = hexpart "/" 1*2DIGIT
hexpart = hexseq | hexseq "::" [ hexseq ] | "::" [ hexseq ]
hexseq = hex4 *( ":" hex4)
hex4 = 1*4HEXDIG
Spry.Widget.ValidationTextField.validateIP = function (value, format)
var validIPv6Addresses = [
//preferred
/^(?:[a-f0-9]{1,4}:){7}[a-f0-9]{1,4}(?:\/\d{1,3})?$/i,
//various compressed
/^[a-f0-9]{0,4}::(?:\/\d{1,3})?$/i,
/^:(?::[a-f0-9]{1,4}){1,6}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:){1,6}:(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:)(?::[a-f0-9]{1,4}){1,6}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:){2}(?::[a-f0-9]{1,4}){1,5}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:){3}(?::[a-f0-9]{1,4}){1,4}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:){4}(?::[a-f0-9]{1,4}){1,3}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:){5}(?::[a-f0-9]{1,4}){1,2}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:){6}(?::[a-f0-9]{1,4})(?:\/\d{1,3})?$/i,
//IPv6 mixes with IPv4
/^(?:[a-f0-9]{1,4}:){6}(?:\d{1,3}\.){3}\d{1,3}(?:\/\d{1,3})?$/i,
/^:(?::[a-f0-9]{1,4}){0,4}:(?:\d{1,3}\.){3}\d{1,3}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:){1,5}:(?:\d{1,3}\.){3}\d{1,3}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:)(?::[a-f0-9]{1,4}){1,4}:(?:\d{1,3}\.){3}\d{1,3}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:){2}(?::[a-f0-9]{1,4}){1,3}:(?:\d{1,3}\.){3}\d{1,3}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:){3}(?::[a-f0-9]{1,4}){1,2}:(?:\d{1,3}\.){3}\d{1,3}(?:\/\d{1,3})?$/i,
/^(?:[a-f0-9]{1,4}:){4}(?::[a-f0-9]{1,4}):(?:\d{1,3}\.){3}\d{1,3}(?:\/\d{1,3})?$/i
var validIPv4Addresses = [
//IPv4
/^(\d{1,3}\.){3}\d{1,3}$/i
var validAddresses = [];
if (format == 'ipv6' || format == 'ipv6_ipv4') {
validAddresses = validAddresses.concat(validIPv6Addresses);
if (format == 'ipv4' || format == 'ipv6_ipv4') {
validAddresses = validAddresses.concat(validIPv4Addresses);
var ret = false;
for (var i=0; i<validAddresses.length; i++) {
if (validAddresses[i].test(value)) {
ret = true;
break;
if (ret && value.indexOf(".") != -1) {
//if address contains IPv4 fragment, it must be valid; all 4 groups must be less than 256
var ipv4 = value.match(/:?(?:\d{1,3}\.){3}\d{1,3}/i);
if(!ipv4) {
return false;
ipv4 = ipv4[0].replace(/^:/, '');
var pieces = ipv4.split('.');
if (pieces.length != 4) {
return false;
var regExp = /^[\-\+]?\d*$/;
for (var i=0; i< pieces.length; i++) {
if (pieces[i] == '') {
return false;
var piece = parseInt(pieces[i], 10);
if (isNaN(piece) || piece > 255 || !regExp.test(pieces[i]) || pieces[i].length>3 || /^0{2,3}$/.test(pieces[i])) {
return false;
if (ret && value.indexOf("/") != -1) {
// if prefix-length is specified must be in [1-128]
var prefLen = value.match(/\/\d{1,3}$/);
if (!prefLen) return false;
var prefLenVal = parseInt(prefLen[0].replace(/^\//,''), 10);
if (isNaN(prefLenVal) || prefLenVal > 128 || prefLenVal < 1) {
return false;
return ret;
Spry.Widget.ValidationTextField.onloadDidFire = false;
Spry.Widget.ValidationTextField.loadQueue = [];
Spry.Widget.ValidationTextField.prototype.isBrowserSupported = function()
return Spry.is.ie && Spry.is.v >= 5 && Spry.is.windows
||
Spry.is.mozilla && Spry.is.v >= 1.4
||
Spry.is.safari
||
Spry.is.opera && Spry.is.v >= 9;
Spry.Widget.ValidationTextField.prototype.init = function(element, options)
this.element = this.getElement(element);
this.errors = 0;
this.flags = {locked: false, restoreSelection: true};
this.options = {};
this.event_handlers = [];
this.validClass = "textfieldValidState";
this.focusClass = "textfieldFocusState";
this.requiredClass = "textfieldRequiredState";
this.hintClass = "textfieldHintState";
this.invalidFormatClass = "textfieldInvalidFormatState";
this.invalidRangeMinClass = "textfieldMinValueState";
this.invalidRangeMaxClass = "textfieldMaxValueState";
this.invalidCharsMinClass = "textfieldMinCharsState";
this.invalidCharsMaxClass = "textfieldMaxCharsState";
this.textfieldFlashTextClass = "textfieldFlashText";
if (Spry.is.safari) {
this.flags.lastKeyPressedTimeStamp = 0;
switch (this.type) {
case 'phone_number':options.format = Spry.Widget.Utils.firstValid(options.format, 'phone_us');break;
case 'currency':options.format = Spry.Widget.Utils.firstValid(options.format, 'comma_dot');break;
case 'zip_code':options.format = Spry.Widget.Utils.firstValid(options.format, 'zip_us5');break;
case 'date':
options.format = Spry.Widget.Utils.firstValid(options.format, 'mm/dd/yy');
break;
case 'time':
options.format = Spry.Widget.Utils.firstValid(options.format, 'HH:mm');
options.pattern = options.format.replace(/[hms]/gi, "0").replace(/TT/gi, 'AM').replace(/T/gi, 'A');
break;
case 'ip':
options.format = Spry.Widget.Utils.firstValid(options.format, 'ipv4');
options.characterMasking = Spry.Widget.ValidationTextField.ValidationDescriptors[this.type].characterMaskingFormats[ options.format];
break;
//retrieve the validation type descriptor to be used with this instance (base on type and format)
//widgets may have different validations depending on format (like zip_code with formats)
var validationDescriptor = {};
if (options.format && Spry.Widget.ValidationTextField.ValidationDescriptors[this.type].formats) {
if (Spry.Widget.ValidationTextField.ValidationDescriptors[this.type].formats[options.format] ) {
Spry.Widget.Utils.setOptions(validationDescriptor, Spry.Widget.ValidationTextField.ValidationDescriptors[this.type].formats[options.format]) ;
} else {
Spry.Widget.Utils.setOptions(validationDescriptor, Spry.Widget.ValidationTextField.ValidationDescriptors[this.type]);
//set default values for some parameters which were not aspecified
options.useCharacterMasking = Spry.Widget.Utils.firstValid(options.useCharacterMasking, false);
options.hint = Spry.Widget.Utils.firstValid(options.hint, '');
options.isRequired = Spry.Widget.Utils.firstValid(options.isRequired, true);
options.additionalError = Spry.Widget.Utils.firstValid(options.additionalError, false);
if (options.additionalError)
options.additionalError = this.getElement(options.additionalError);
//set widget validation parameters
//get values from validation type descriptor
//use the user specified values, if defined
options.characterMasking = Spry.Widget.Utils.firstValid(options.characterMasking, validationDescriptor.characterMasking);
options.regExpFilter = Spry.Widget.Utils.firstValid(options.regExpFilter, validationDescriptor.regExpFilter);
options.pattern = Spry.Widget.Utils.firstValid(options.pattern, validationDescriptor.pattern);
options.validation = Spry.Widget.Utils.firstValid(options.validation, validationDescriptor.validation);
if (typeof options.validation == 'string') {
options.validation = eval(options.validation);
options.minValue = Spry.Widget.Utils.firstValid(options.minValue, validationDescriptor.minValue);
options.maxValue = Spry.Widget.Utils.firstValid(options.maxValue, validationDescriptor.maxValue);
options.minChars = Spry.Widget.Utils.firstValid(options.minChars, validationDescriptor.minChars);
options.maxChars = Spry.Widget.Utils.firstValid(options.maxChars, validationDescriptor.maxChars);
Spry.Widget.Utils.setOptions(this, options);
Spry.Widget.Utils.setOptions(this.options, options);
Spry.Widget.ValidationTextField.prototype.destroy = function() {
if (this.event_handlers)
for (var i=0; i<this.event_handlers.length; i++) {
Spry.Widget.Utils.removeEventListener(this.event_handlers[i][0], this.event_handlers[i][1], this.event_handlers[i][2], false);
try { delete this.element; } catch(err) {}
try { delete this.input; } catch(err) {}
try { delete this.form; } catch(err) {}
try { delete this.event_handlers; } catch(err) {}
try { this.selection.destroy(); } catch(err) {}
try { delete this.selection; } catch(err) {}
var q = Spry.Widget.Form.onSubmitWidgetQueue;
var qlen = q.length;
for (var i = 0; i < qlen; i++) {
if (q[i] == this) {
q.splice(i, 1);
break;
Spry.Widget.ValidationTextField.prototype.attachBehaviors = function()
if (this.element) {
if (this.element.nodeName == "INPUT") {
this.input = this.element;
} else {
this.input = Spry.Widget.Utils.getFirstChildWithNodeNameAtAnyLevel(this.element, "INPUT");
if (this.input) {
if (this.maxChars) {
this.input.removeAttribute("maxLength");
this.putHint();
this.compilePattern();
if (this.type == 'date') {
this.compileDatePattern();
this.input.setAttribute("AutoComplete", "off");
this.selection = new Spry.Widget.SelectionDescriptor(this.input);
this.oldValue = this.input.value;
var self = this;
this.event_handlers = [];
this.event_handlers.push([this.input, "keydown", function(e) { if (self.isDisabled()) return true; return self.onKeyDown(e || event); }]);
this.event_handlers.push([this.input, "keypress", function(e) { if (self.isDisabled()) return true; return self.onKeyPress(e || event); }]);
if (Spry.is.opera) {
this.event_handlers.push([this.input, "keyup", function(e) { if (self.isDisabled()) return true; return self.onKeyUp(e || event); }]);
this.event_handlers.push([this.input, "focus", function(e) { if (self.isDisabled()) return true; return self.onFocus(e || event); }]);
this.event_handlers.push([this.input, "blur", function(e) { if (self.isDisabled()) return true; return self.onBlur(e || event); }]);
this.event_handlers.push([this.input, "mousedown", function(e) { if (self.isDisabled()) return true; return self.onMouseDown(e || event); }]);
var changeEvent =
Spry.is.mozilla || Spry.is.opera || Spry.is.safari?"input":
Spry.is.ie?"propertychange":
"change";
this.event_handlers.push([this.input, changeEvent, function(e) { if (self.isDisabled()) return true; return self.onChange(e || event); }]);
if (Spry.is.mozilla || Spry.is.safari) {
//oninput event on mozilla does not fire ondragdrop
this.event_handlers.push([this.input, "dragdrop", function(e) { if (self.isDisabled()) return true; self.removeHint();return self.onChange(e || event); }]);
} else if (Spry.is.ie){
//ondrop&onpropertychange crash on IE
this.event_handlers.push([this.input, "drop", function(e) { if (self.isDisabled()) return true; return self.onDrop(e || event); }]);
for (var i=0; i<this.event_handlers.length; i++) {
Spry.Widget.Utils.addEventListener(this.event_handlers[i][0], this.event_handlers[i][1], this.event_handlers[i][2], false);
// submit
this.form = Spry.Widget.Utils.getFirstParentWithNodeName(this.input, "FORM");
if (this.form) {
// if no "onSubmit" handler has been attached to the current form, attach one
if (!this.form.attachedSubmitHandler && !this.form.onsubmit) {
this.form.onsubmit = function(e) { e = e || event; return Spry.Widget.Form.onSubmit(e, e.srcElement || e.currentTarget) };
this.form.attachedSubmitHandler = true;
if (!this.form.attachedResetHandler) {
Spry.Widget.Utils.addEventListener(this.form, "reset", function(e) { e = e || event; return Spry.Widget.Form.onReset(e, e.srcElement || e.currentTarget) }, false);
this.form.attachedResetHandler = true;
// add the currrent widget to the "onSubmit" check queue;
Spry.Widget.Form.onSubmitWidgetQueue.push(this);
Spry.Widget.ValidationTextField.prototype.isDisabled = function() {
return this.input && (this.input.disabled || this.input.readOnly) || !this.input;
Spry.Widget.ValidationTextField.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.ValidationTextField.addLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('load', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('load', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onload', handler);
Spry.Widget.ValidationTextField.processLoadQueue = function(handler)
Spry.Widget.ValidationTextField.onloadDidFire = true;
var q = Spry.Widget.ValidationTextField.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen; i++)
q[i].attachBehaviors();
Spry.Widget.ValidationTextField.addLoadListener(Spry.Widget.ValidationTextField.processLoa dQueue);
Spry.Widget.ValidationTextField.addLoadListener(function(){
Spry.Widget.Utils.addEventListener(window, "unload", Spry.Widget.Form.destroyAll, false);
Spry.Widget.ValidationTextField.prototype.setValue = function(newValue) {
this.flags.locked = true;
this.input.value = newValue;
this.flags.locked = false;
this.oldValue = newValue;
if (!Spry.is.ie) {
this.onChange();
* save the state of the input (selection and value) so we can revert to it
* should call this just before modifying the input value
Spry.Widget.ValidationTextField.prototype.saveState = function()
this.oldValue = this.input.value;
this.selection.update();
Spry.Widget.ValidationTextField.prototype.revertState = function(revertValue)
if (revertValue != this.input.value) {
this.input.readOnly = true;
this.input.value = revertValue;
this.input.readOnly = false;
if (Spry.is.safari && this.flags.active) {
this.input.focus();
if (this.flags.restoreSelection) {
this.selection.moveTo(this.selection.start, this.selection.end);
this.redTextFlash();
Spry.Widget.ValidationTextField.prototype.removeHint = function()
if (this.flags.hintOn) {
this.input.value = "";
this.flags.hintOn = false;
this.removeClassName(this.element, this.hintClass);
this.removeClassName(this.additionalError, this.hintClass);
Spry.Widget.ValidationTextField.prototype.putHint = function()
if(this.hint && this.input && this.input.type == "text" && this.input.value == "") {
this.flags.hintOn = true;
this.input.value = this.hint;
this.addClassName(this.element, this.hintClass);
this.addClassName(this.additionalError, this.hintClass);
Spry.Widget.ValidationTextField.prototype.redTextFlash = function()
var self = this;
this.addClassName(this.element, this.textfieldFlashTextClass);
setTimeout(function() {
self.removeClassName(self.element, self.textfieldFlashTextClass)
}, 100);
Spry.Widget.ValidationTextField.prototype.doValidations = function(testValue, revertValue)
if (this.isDisabled()) return false;
if (this.flags.locked) {
return false;
if (testValue.length == 0 && !this.isRequired) {
this.errors = 0;
return false;
this.flags.locked = true;
var mustRevert = false;
var continueValidations = true;
if (!this.options.isRequired && testValue.length == 0) {
continueValidations = false;
var errors = 0;
var fixedValue = testValue;
//characterMasking - test if all characters are valid with the characterMasking (keyboard filter)
if (this.useCharacterMasking && this.characterMasking) {
for(var i=0; i<testValue.length; i++) {
if (!this.characterMasking.test(testValue.charAt(i))) {
errors = errors | Spry.Widget.ValidationTextField.ERROR_FORMAT;
fixedValue = revertValue;
mustRevert = true;
break;
//regExpFilter - character mask positioning (additional mask to restrict some characters only in some position)
if (!mustRevert && this.useCharacterMasking && this.regExpFilter) {
if (!this.regExpFilter.test(fixedValue)) {
errors = errors | Spry.Widget.ValidationTextField.ERROR_FORMAT;
mustRevert = true;
//pattern - testValue matches the pattern so far
if (!mustRevert && this.pattern) {
var currentRegExp = this.patternToRegExp(testValue.length);
if (!currentRegExp.test(testValue)) {
errors = errors | Spry.Widget.ValidationTextField.ERROR_FORMAT;
mustRevert = true;
} else if (this.patternLength != testValue.length) {
//testValue matches pattern so far, but it's not ok if it does not have the proper length
//do not revert, but should show the error
errors = errors | Spry.Widget.ValidationTextField.ERROR_FORMAT;
if (fixedValue == '') {
errors = errors | Spry.Widget.ValidationTextField.ERROR_REQUIRED;
if (!mustRevert && this.pattern && this.useCharacterMasking) {
var n = this.getAutoComplete(testValue.length);
if (n) {
fixedValue += n;
if(!mustRevert && this.minChars !== null && continueValidations) {
if (testValue.length < this.minChars) {
errors = errors | Spry.Widget.ValidationTextField.ERROR_CHARS_MIN;
continueValidations = false;
if(!mustRevert && this.maxChars !== null && continueValidations) {
if (testValue.length > this.maxChars) {
errors = errors | Spry.Widget.ValidationTextField.ERROR_CHARS_MAX;
continueValidations = false;
//validation - testValue passes widget validation function
if (!mustRevert && this.validation && continueValidations) {
var value = this.validation(fixedValue, this.options);
if (false === value) {
errors = errors | Spry.Widget.ValidationTextField.ERROR_FORMAT;
continueValidations = false;
} else {
this.typedValue = value;
if(!mustRevert && this.validation && this.minValue !== null && continueValidations) {
var minValue = this.validation(this.minValue.toString(), this.options);
if (minValue !== false) {
if (this.typedValue < minValue) {
errors = errors | Spry.Widget.ValidationTextField.ERROR_RANGE_MIN;
continueValidations = false;
if(!mustRevert && this.validation && this.maxValue !== null && continueValidations) {
var maxValue = this.validation(this.maxValue.toString(), this.options);
if (maxValue !== false) {
if( this.typedValue > maxValue) {
errors = errors | Spry.Widget.ValidationTextField.ERROR_RANGE_MAX;
continueValidations = false;
//an invalid value was tested; must make sure it does not get inside the input
if (this.useCharacterMasking && mustRevert) {
this.revertState(revertValue);
this.errors = errors;
this.fixedValue = fixedValue;
this.flags.locked = false;
return mustRevert;
Spry.Widget.ValidationTextField.prototype.onChange = function(e)
if (Spry.is.opera && this.flags.operaRevertOnKeyUp) {
return true;
if (Spry.is.ie && e && e.propertyName != 'value') {
return true;
Maybe you are looking for
-
SCCM 2012 R2 ADR issue with proxy authentication
Hi, We're migrating SCCM 2007 to SCCM 2012 R2. In SCCM 2007, the proxy server is configured with user authentication, and this works. In SCCM 2012 R2, the Software Update Point is installed locally and connected with a local WSUS 4.0 (Server 2012) We
-
After running our InfoPackage to extract master data text (such as 0item_categ text) using the default settings for a full extraction. We notice that the double byte characters are displayed as # symbols. We verified the R/3 and our BW/BI systems do
-
Hi all, I administer large number of OS X 10.4.10 servers across our organization. We are currently moving towards OD/AD integration with them. With some of them I have no problems, with others number of different issues. Not able to mount network ho
-
Hello experts, while creating Shopping cart, in detail of item - Source of supply tab contains Contract and PIR details. These details dose not contains Price column. I want to show price column in Source of supply tab. Is it possible? Thanks in adva
-
Invoice number / sales order number
Hi, Given an invoice number, which tables can I query / join et cetera to obtain the sales order number, basically how are SO and invoice numbers related. Thanks