I am developing a form for the 5 main browsers and want to know a little more about CSS vendor prefixes. The form looks different in firefox, i would usually move the div with top and left CSS but just want to tweak firefox.
From what i have read -moz-margin-start: 10em; seems to be a way of moving the div but doesn't work. How do I move the div in only firefox using css?
I have a list of prefixes here http://peter.sh/experiments/vendor-prefixed-css-property-overview/ and use https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-margin-start as well.
p.s. i read that using Grunt stops the need for using CSS Vendor prefixes, is it worth setting up?
<!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" xml:lang="en" lang="en">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="blueprint/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="blueprint/blueprint/src/typography.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--<link rel="stylesheet" type="text/css" href="blueprint/blueprint/ie.css" />-->
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection">
<![endif]-->
</head>
<body>
<div class="container showgrid">
<h2><center>Research Request Form</center></h2>
<div>
<input type="text" class="span-4" id="listcode">
</div>
<div>
<input type="text" class="span-4" id="sourceCode">
</div>
<div>
<input type="text" class="span-7" id="division">
</div>
<div class="span-24" id="wrap2">
<input type="text" class="span-23" id="projectName">
</div>
<div class="span-4">
<div class="span-4" id="interestCodes">
<p>
<input class="span-4" id="interestCodes" style="" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes" style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
<p style=""> Interest Codes</p>
</p>
</div>
<div>
<input class="span-18" id="listCodeAndName"style="" name="Text1" value="List code and Name:">
</div>
<div id="detailWrap">
<div id="details">
<p>Marketing Manager: </p>
<p>Marketing Director: </p>
<p>Date Submitted: </p>
<p>Ideal Deadline: </p>
<p>Quantity Submitted: </p>
<p><input type="submit" name="submit" value="Send" /></p>
</div>
</div>
</body>
</html>
body {
background-color: #99FF99;
font-family: verdana, sans-serif;
}
#listcode {
height: 50px;
margin-left: 22px;
}
.container {
border:2px solid black;
}
#sourceCode {
height: 50px;
margin-left: 58px;
}
#division {
height: 50px;
float: right;
margin-right:18px;
}
#wrap2 {
display: block;
clear: both;
}
#projectName {
height: 50px;
margin: 20px 20px 20px 20px;
}
#interestCodes {
margin-left: 10px;
}
#listCodeAndName{
-moz-margin-end:10em;
margin-left: 230px;
width: 688px;
height: 160px;
position: fixed;
top: 224px;
left: 146px;
}
If I get your problem right , then your div container is not exactly in the top-left corner. Its because the browser has its default css definitions, like 10px margin on the body element. You can easily solve the problem:
body {
margin: 0;
}
Or you better start using CSS reset, normalize.css for example.
I hope it helps, and I dont went wrong way.
Related
I wrote a simple sign up webpage, and want to confirm password and check email address format, and show a check or cross sign after the input elements in the same line.
Before I added Bootstrap to my html file, the check or cross sign appear after the input elements in the same line. But after I added Bootstrap to my html file (especially after adding class="form-control"), the check or cross signs appear in the next line instead.
I wonder how to solve my problem? Thanks.
Here is my html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration</title>
<style>
html, body{
height: 100%;
width: 100%;
/* border: 1px solid black; */
background: linear-gradient(to top, #f2f6fb, #b3cae3);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/register.js" defer></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-offset-5">
<form class="form-horizontal" action="RegisterProcess" method="post">
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" name="passwordResult" id="passwordResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\
: white">
<span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white">
<span width="5" name="emailResult" id="emailResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input type="submit" id="register" name="register" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Here is my javascript
function arePasswordsSame() {
input = this; // document.getElementById("passwordConfirm");
if (input.value != document.getElementById("password").value) {
input.setCustomValidity("Password Must be Matching.");
document.getElementById("passwordConfirmResult").innerHTML = "×";
} else {
input.setCustomValidity("");
document.getElementById("passwordConfirmResult").innerHTML = "✔";
}
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);
function validateEmail(){
input = this; // document.getElementById("email");
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(! input.value.match(mailformat)){
input.setCustomValidity("Email is invalid.");
document.getElementById("emailResult").innerHTML = "×";
}else{
input.setCustomValidity("");
document.getElementById("emailResult").innerHTML = "✔";
}
}
document.getElementById("email").addEventListener("change",validateEmail);
You can use the built in input-group-addon that ships with bootstrap
<div class="input-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" class="input-group-addon" name="passwordResult" id="passwordResult"></span>
</div>
</div>
https://getbootstrap.com/docs/4.0/components/input-group/
EDIT
This should be the markup;
<div class="form-group">
<div class="col-lg-5">
<div class="input-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span class="input-group-addon" name="passwordResult" id="passwordResult"> </span>
</div>
</div>
</div>
In Bootstrap, the form-control class causes the inputs to be display:block; at 100% width. You will have to override the default styling to prevent this(note that you can remove the !important rule as long as you add this CSS after Bootstrap is loaded):
function arePasswordsSame() {
input = this; // document.getElementById("passwordConfirm");
if (input.value != document.getElementById("password").value) {
input.setCustomValidity("Password Must be Matching.");
document.getElementById("passwordConfirmResult").innerHTML = "×";
} else {
input.setCustomValidity("");
document.getElementById("passwordConfirmResult").innerHTML = "✔";
}
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);
function validateEmail(){
input = this; // document.getElementById("email");
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(! input.value.match(mailformat)){
input.setCustomValidity("Email is invalid.");
document.getElementById("emailResult").innerHTML = "×";
}else{
input.setCustomValidity("");
document.getElementById("emailResult").innerHTML = "✔";
}
}
document.getElementById("email").addEventListener("change",validateEmail);
.form-control {
display:inline-block!important;
width:95%!important;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration</title>
<style>
html, body{
height: 100%;
width: 100%;
/* border: 1px solid black; */
background: linear-gradient(to top, #f2f6fb, #b3cae3);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/register.js" defer></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-offset-5">
<form class="form-horizontal" action="RegisterProcess" method="post">
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" name="passwordResult" id="passwordResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\
: white">
<span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white">
<span width="5" name="emailResult" id="emailResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input type="submit" id="register" name="register" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I have a few form fields, datepickers and a dropdown on my sample html page. On clicking the dropdown menu, it appears to the left of the screen, instead of appearing in the center, as all the other contents are. How to get it in the center of the page?
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Form</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./datepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<center><form>
<div class="input-append date" data-date-format="dd-mm-yyyy" >
<label for="dp1">Starting Date</label> <br>
<input id="dp1" size="16" type="text" value="dd/mm/yyyy"/>
<span class="add-on"><i class="glyphicon glyphicon-calender" id="cal1"></i></span>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Number of students :
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div><br><br><br><br><br>
<div class="form-group">
<label for="inputName">Name of the student</label>
<input type="text" class="form-control" id="inputName" placeholder="">
</div>
<div class="form-group">
<label for="inputFname">Father's Name</label>
<input type="text" class="form-control" id="inputFname" placeholder="">
</div>
<div class="input-append date" data-date="" data-date-format="dd-mm-yyyy">
<label for="dp2">Date of Birth</label> <br>
<input id="dp2" size="16" type="text" value="dd/mm/yyyy"/>
<span class="add-on"><span class="glyphicon glyphicon-calender" id="cal2"></span></span>
</div>
<div class="form-group">
<label for="inputAddress">Address of the student</label>
<textarea type ="text" class = "form-control" id = "inputAddress" rows = "8" placeholder = "" ></textarea>
<span id="addressSpan"></span>
</div>
<div class="form-group">
<label for="inputObjects">hobbies</label>
<textarea type ="text" class = "form-control" id = "inputObjects" rows = "8" placeholder = "" ></textarea>
<span id="objectsSpan"></span>
</div>
<div class="form-group">
<label for="inputschoolName">Name of the school</label>
<input type="text" class="form-control" id="inputschoolName" placeholder="">
</div>
<div class="input-append date" data-date="" data-date-format="dd-mm-yyyy">
<label for="dp3">Date of Commencement of the internship</label> <br>
<input id="dp3" size="16" type="text" value="dd/mm/yyyy"/>
<span class="add-on"><i class="glyphicon glyphicon-calender" id="cal3"></i></span>
</div>
<div class="form-group">
<label for="inputOffice">address of the school</label>
<textarea type ="text" class = "form-control" id = "inputOffice" rows = "8" placeholder = "" ></textarea>
<span id="officeSpan"></span>
</div>
<div class="form-group">
<label for="inputWill">like school?</label>
<input type="text" class="form-control" id="inputWill" placeholder="">
</div>
<div class="form-group">
<label for="inputContribution">achievements</label>
<input type="text" class="form-control" id="inputContribution" placeholder="">
</div>
<div class="form-group">
<label for="inputSalary">fees</label>
<input type="text" class="form-control" id="inputSalary" placeholder="">
</div>
<div class="form-group">
<label for="inputaccolades">accolades</label>
<input type="text" class="form-control" id="inputaccolades" placeholder="">
</div>
</form></center>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(document).ready (function (){
$("#dp1").datepicker();
$("#dp2").datepicker();
$('#dp3').datepicker();
$('.dropdown-toggle').dropdown()
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/bootstrap.min.js"></script>
<script src="./bootstrap-datepicker.js"></script> </body>
</html>
CSS :
form .form-group {
width : 500px;
}
.datepicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 190px;
}
.datepicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 191px;
}
Any help is much appreciated. Thanks in advance
There are many ways to solve this issue:
Solution here: http://jsfiddle.net/lotusgodkk/GCu2D/820/
CSS:
.dropdown, .dropup {
position: relative;
display: inline-block;
}
Or
.dropdown, .dropup {
position: relative;
width: 250px;//any value
}
Explanation: The dropdown container has no defined width and due to which it automatically takes full width. When you click on dropdown,by default the dropdown menu will position itself to the leftmost of the dropdown class which is the left edge of the screen in this case.
Either define a width of the dropdown element so that the dropdown menu can position itself, else just use display:inline-block which will automatically take the width according to the content.
As pointed out in the comments, try to get rid of center tag
I am creating a widget that utilizes stylized radios and divs to display different bits of data, based on quotes for precious metal commodities. I need the radio "current" to load by default when the page loads. Using checked="checked"does check enable the radio (by underlining the label), but it doesn't load the associated div. I need the div to load on default too.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show(100);
});
});
</script>
</head>
<body>
<div id="title">
<text id="titletext">Commodities</text>
</div>
<div id="titleaccent">
</div>
<!--The form for the radio toggle buttons-->
<form name="range">
<input id="rdb1" class="radio" type="radio" name="toggler" value="1" >
<label for="rdb1">Current</label>
<input id="rdb2" class="radio" type="radio" name="toggler" value="2" >
<label for="rdb2">24-Hour</label>
<input id="rdb3" class="radio" type="radio" name="toggler" value="3" >
<label for="rdb3">Week</label>
<input id="rdb4" class="radio" type="radio" name="toggler" value="4" >
<label for="rdb4">Month</label>
</form>
<!--The div and associated data for each radio toggle button-->
<div id="blk-1" class="toHide" style="display:none">
Current commodity quote info here
</div>
<div id="blk-2" class="toHide" style="display:none">
24-hour comparison of commodity quote info here
</div>
<div id="blk-3" class="toHide" style="display:none">
Weekly comparison of commodity quote info here
</div>
<div id="blk-4" class="toHide" style="display:none">
Monthly comparison of commodity quote info here
</div>
</body>
</html>
CSS:
#title{
background-color: #103346;
height: 28px;
width: 305px;
}
#titletext{
color: #ffffff;
font-size: 15pt;
position: fixed;
top: 11px;
left: 18px;
}
#titleaccent{
background-color: #C3A43F;
height: 6px;
width: 305px;
}
.radio{
display: none;
margin: 10px;
}
.radio + label{
display:inline-block;
margin:-2px;
padding: 4px 12px;
}
.radio:checked + label{
text-decoration: underline;
}
Use some CSS and JS:
http://jsfiddle.net/cW4DR/1/
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$('.current').hide();
$("#blk-"+$(this).val()).show(100);
});
});
.toHide{
display:none;
}
.current{
display:block;
}
Do:
<input type="radio" name="toggler" ... checked>
$(function(){
var whatever = function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show(100);
};
$("[name=toggler]").click(whatever);
$("[name=toggler]:checked").each(whatever);
});
I've been writing a code generator where I can fill variables in a form, press generate and call a code into a text field.Have done this before, but for some reason I can't seem to get it to work this time. I am going nuts!
In this example, i've been trying to call the value of the first form field "issue"
Here is a link to an online page and here is the code I used in the page:
<!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>Generate Newsletter</title>
<style type="text/css">
#image {
background-color:#666;
box-shadow: 2px 2px 10px #888888;
display:block;
padding-top:1px;
padding-bottom:10px;
padding-left:5px;
padding-right:5px;
color:#FFF;
}
</style>
<script language="javascript" type="text/javascript">
function generateCode(form){
issue = document.inputForm.issue.value;
Header = document.inputForm.Header.value;
SubHeader = document.inputForm.SubHeader.value;
Content = document.inputForm.Content.value;
ArticleImage = document.inputForm.ArticleImage.value;
ArticleImageLink = document.inputForm.ArticleImageLink.value;
DidyouknowConent = document.inputForm.DidyouknowConent.value;
DidyouknowImage = document.inputForm.DidyouknowImage.value;
DidyouknowImageLink = document.inputForm.DidyouknowImageLink.value;
Courtesy = document.inputForm.Courtesy.value;
CourtesyLink = document.inputForm.CourtesyLink.value;
document.inputForm.source.value = issue;
return issue;
}
</script>
</head>
<body>
<form name="inputForm" id="inputForm">
<div id="EditBox" style="width:600px; height:650px; padding:10px; background-color:#CCC; border:2px; border-bottom-color:#666; box-shadow: 2px 2px 10px #888888;"><!--- INPUT FIELD -->
<div id="LeftEdit" style="float:left;"><!--- LEFT EDIT SIDE-->
<p>Issue #
<input name="issue" type="input" size="10" value="">
</p>
<p>Article Header<br />
<input name="Header" type="input" size="45">
</p>
<p>Sub Header<br />
<textarea name="SubHeader" cols="35" rows="3"></textarea>
</p>
<p>Content<br />
<textarea name="Content" cols="35" rows="25"></textarea>
</p>
</div>
<div id="RightEdit" style="float:right; margin-top:50px;"><!--- RIGHT EDIT SIDE-->
<div id="image">
<h4> Article Image </h4>
<p>source URL<br />
<input name="ArticleImage" type="input" size="35" onClick="this.focus();this.select()">
</p>
<p>Image Link<br />
<input name="ArticleImageLink" type="input" size="35" onClick="this.focus();this.select()">
</p>
</div>
<p>Did You Know Conent<br />
<textarea name="DidyouknowContent" cols="28" rows="5"></textarea>
</p>
<div id="image">
<h4> Did You know Image </h4>
<p>source URL<br />
<input name="DidyouknowImage" type="input" size="35" onClick="this.focus();this.select()">
</p>
<p>Image Link<br />
<input name="DidyouknowImageLink" type="input" size="35" onClick="this.focus();this.select()">
</p>
</div>
<p>Image courtesy of <input name="Courtesy" type="input" size="19"> <br />
Link to <input name="CourtesyLink" type="input" size="30" onClick="this.focus();this.select()"> <br />
</p>
</div>
</div>
<div style="clear:both;">
<input type="button" value="Generate Code!" onClick="javascript:generateCode();">
<br>
<textarea name="source" rows="7" cols="40" onClick="this.focus();this.select()" style="margin-top: 1.2px; margin-bottom: 1.2px; height: 200px; margin-left: 1.2px; margin-right: 1.2px; width: 500px; "></textarea>
</div>
</form>
</body>
</html>
Here the spelling is wrong
DidyouknowContent
DidyouknowConent = document.inputForm.DidyouknowConent.value; // DidyouknowConent
<textarea name="DidyouknowContent" cols="28" rows="5"></textarea> //DidyouknowContent
i try'ed your code in firebug it shows like this
TypeError: document.inputForm.DidyouknowConent is undefined
check it out this..
or you can try inseted of using
<input type="button">
try this
<input type="submit">
Here is the HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DaVincisApp1.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<%--<script type="text/javascript" src="Scripts/motion.js"></script>--%>
<script type="text/javascript">
$(document).ready(function(){ /* make sure the contact form is hidden when the page loads: */ $('div#contact-form').hide(); $('a#contact-button').toggle(function(){ /* slides the contact form down and shows it */ $('div#contact-form').slideDown(); }, function () { /* hides it again */ $('div#contact-form').slideUp(); } }
);</script>
</head>
<body>
<div id="nav">
<div id="navigation-primary">
<ul>
<li id="contact-button"><a href="javascript:;" onmousedown="toggleSlide('quickcontact');">
<span>Contact</span></a> </li>
</ul>
<h3>
Contact US</h3>
<div id="contact-form" style="display: none; overflow: hidden; height: 300px;">
<form id='freeform' method="post" action="http://WebDev.com/">
<div class='hiddenFields'>
<input type="hidden" name="ACT" value="20" />
<input type="hidden" name="URI" value="index" />
<input type="hidden" name="XID" value="1c46d517779f90c9f5a13bac8338968a3c2b9d16" />
<input type="hidden" name="status" value="open" />
<input type="hidden" name="return" value="consultation/thank_you" />
<input type="hidden" name="redirect_on_duplicate" value="" />
<input type="hidden" name="RET" value="http://professional-painters.com/" />
<input type="hidden" name="form_name" value="Quick" />
<input type="hidden" name="id" value="freeform" />
<input type="hidden" name="params_id" value="136390" />
<input type="hidden" name="site_id" value="1" />
</div>
<fieldset style="padding: 7px;">
<table id="quickcontact-in">
<tr>
<td>
<input tabindex="1" class="field" type="text" name="name" value="Name" onfocus="if (this.value == 'Name') this.value = '';"
onblur="if (this.value == '') this.value = 'Name';" />
</td>
</tr>
<tr>
<td>
<input tabindex="2" class="field" type="text" name="email" value="Email address"
onfocus="if (this.value == 'Email address') this.value = '';" onblur="if (this.value == '') this.value = 'Email address';" />
</td>
</tr>
<tr>
<td>
<input tabindex="3" class="field" type="text" name="phone1" value="Phone (optional)"
onfocus="if (this.value == 'Phone (optional)') this.value = '';" onblur="if (this.value == '') this.value = 'Phone';" />
</td>
</tr>
<tr>
<td>
<textarea tabindex="4" class="txtField" cols="4" rows="4" name="comments">Questions or Comments</textarea>
</td>
</tr>
<tr>
<td>
<p>
Please enter these letters:
<br />
<img src="http://professional-painters.com/images/captchas/1297129344.1793.jpg" width="140"
height="30" style="border: 0;" alt=" " /><br />
<input tabindex="5" class="field" type="text" name="captcha" size="20" maxlength="20" /></p>
</td>
</tr>
<tr>
<td>
<div id="submit">
<input tabindex="6" type="submit" name="submit" value="Send Request" />
</div>
<p class="tiny" align="right">
Close</p>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
#navigation-primary {
/*background: url("/img/nav_back.gif") repeat-x scroll 0 0 #61533F;*/
background-color: Red;
left: 0;
position: absolute;
top: 46px;
z-index: 1;
}
#nav {
height: 34px;
width: 878px;
}
#nav-contact a {
/*background: url("/img/nav_contact.gif") no-repeat scroll 0 0 transparent;*/
background-color: Green;
width: 109px;
}
#quickcontact {
background: none repeat scroll 0 0 #666449;
border-left: 2px solid #3D352B;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0;
text-align: left;
top: 75px;
width: 245px;
z-index: 1000;
}
#quickcontact-in a {
color: #FFFFFF;
}
#quickcontact fieldset {
border: medium none;
}
#quickcontact-in .field {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
padding: 2px;
width: 190px;
}
#quickcontact-in .txtField {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
display: block;
float: left;
font: 1em "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
height: 90px;
margin: 5px 0 7px;
outline: medium none;
padding: 2px;
width: 190px;
}
Ok, I this it would be smart of you to use jquery and do it yourself. It's not that hard at all and the JS code is very short and easy.
First, you need to style the contact form and the menu so it looks the same way as it does when the contact form is expanded. I'm guessing you can actually use the code you already have. But I understand your biggest problem is with the javascript code.
Make sure that the anchor tag has the id: id="contact_button" and that the form is wrapped within a div with the id="contact-form"
So the HTML needs to be something like:
<ul>
<li>Menu 1</li>
<li>item 2</li>
<li>Menuitem 3</li>
<li><a id="contact-button" href="/contact-form">Contact</a></li>
</ul>
<div id="contact-form">
<form action="#" method="post">
...
</form>
</div>
Then, to make the contact form show, you need to put jquery on your html page somewhere and you need to place the following code within another .js file or within tags:
$(document).ready(function(){
/* make sure the contact form is hidden when the page loads: */
$('div#contact-form').hide();
$('a#contact-button').toggle(function(){
/* slides the contact form down and shows it */
$('div#contact-form').slideDown();
}, function () {
/* hides it again */
$('div#contact-form').slideUp();
}
}
That's it. As for the code to actually send the email using .net you can maybe follow this tutorial:
http://www.aspnettutorials.com/tutorials/email/email-aspnet2-vb.aspx
I've not tried this, so I'm not certain about it, but it's probably right:
sfHover is defined thusly:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
Take a close look at this line:
document.getElementById("nav")
It's looking for an element with an id of nav - in your "prototype HTML", you do not have an element with that id.
You don't appear to have any need for sfHover in your "prototype HTML", so you should just get rid of the entire function. If you do need it, you need to change nav into an id you actually have in your HTML (or change an id in your HTML to nav).