I have been facing this issue. I tried many things but no one worked. My validation error on this page always visible on left side. This is my vaildation engine jquery. Please help.
$("#register_form").validationEngine({
showOneMessage: true,
scroll : false,
maxErrorsPerField: 1,
promptPosition: "bottomLeft",
updatePromptsPosition: true,
autoPositionUpdate: true,
});
});
HTML
This is my form.
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" id="register_form">
<div class="col-100">
<input type="text" class=" twidh validate[required, minSize[2]] " maxlength="60" placeholder="Your Name" name="name" id="rname" />
<span id="runame" class="errroes"></span> </div>
<div class="col-100">
<input type="text" class=" twidh validate[required, custom[email]]" maxlength="100" placeholder="Your Email Address" name="remail" id="remail" onblur="validateEmail()" />
<span id="runame" class="errroes"></span> </div>
<div class="col-100">
<input type="password" class=" twidh validate[required, minSize[6]]" placeholder="Your Password" name="password" id="rpassword" />
<span class="errroes" id="rpwd"></span> </div>
<div class="col-100">
<input type="text" class=" twidh validate[required, custom[onlyNumber] ,minSize[10],maxSize[10]]" maxlength="10" maxlength="10" placeholder="Enter Mobile Number" name="mobile" id="phone" />
</div>
<div class="col-100">
<div class="text-hea" id="gender">Gender</div>
<div class="twidh">
<div class="names">
<input type="radio" class="radioo" value="M" id="male" name="sex" /> Male </div>
<div class="names">
<input type="radio" class="radioo" value="F" id="female" name="sex" checked="checked" /> Female
</div>
</div>
</div>
</div>
<div class="link" style="text-align:left !important"> By clicking Register, you agree to <strong>Terms of Use</strong> and <strong>Privacy Policy.</strong>
</div>
<div class="col-100">
<div class="col-md-2">
<input type="submit" class="ss1 st" name="register" value="Register Now" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
I found your HTML on your website. The problem is caused by a style position: relative on your .link class. You have applied it on your OR block, just above the form.
You can fix this quite easily by apply another position: relative style on your form element. So it would become like this:
<form action="/sregister.php" method="post" id="register_form" style="
position: relative;
">
I just tested this on your live website, and it works pretty well.
Checked issue on your site. You are using below inline styling.
opacity: 0.87;
position: absolute;
top: 241px;
right: initial;
margin-top: 0px;
display: block;
left: 489.5px;
but in this case "left" is not recognized as already this property is given important in strap.css.
check below code in strap.css
.formError {
left: 30px !important;
}
Now you can update your inline styling as
opacity: 0.87;
position: absolute;
top: 241px;
right: initial;
margin-top: 0px;
display: block;
left: 489.5px !important;
It will work.
Related
I'm using toggle() but it's not working. My script is in the footer:
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").toggle();
});
});
or I've also tried addClass():
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
Basically I'm just trying to toggle between showing and hiding the form divs.
When product-suggestion-form-container is clicked on, form-div-top should show.
When contact-us-form-container is clicked on, form-div-bottom should show.
Then they should hide when those divs are clicked on again.
Shouldn't clicking on product-suggestion-form-container cause form-div-top to become active and therefore to display: flex? Not sure why nothing's happening.
I was just getting the jQuery from here, but ideally I'd like to add a smooth transition and whatever other best practices you might suggest for doing this.
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
.form-div-outer {
margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
/*initial display*/
.form-div-inner-top {
display: none;
}
.form-div-inner-bottom {
display: none;
}
.form-div-inner-top:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-div-inner-bottom:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-input {
margin: 10px 0;
padding: 5px;
border: none;
background-color: #ffffff;
width: 100%;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
<div class="form-div-outer">
<div class="contact-us-form-container">
<span class="form-title">Contact Us Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-bottom">
<form class="form-div-inner-bottom">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group input-group-contact-reason">
<div class="contact-reason-container">
<ul class="radiolist">
<li>
<input class="radio" type="radio"><label>Order question</label>
<input class="radio" type="radio"><label>Website feedback</label>
<input class="radio" type="radio"><label>Trouble finding product</label>
</li>
</ul>
</div>
</span>
</form>
</div>
</div>
It seems you have forgot .s in your code to access the data.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
});
});
I am seeing this weird button behavior (the text on the button becomes near invisible) in my bootstrap button when I do a mouse hover on it.
This is my markup (Salesforce VF page with bootstrap)
<apex:page >
<head>
<apex:stylesheet value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/css/bootstrap.min.css')}"/>
<apex:includeScript value="{!$Resource.jq}"/>
<apex:includeScript value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/js/bootstrap.min.js')}"/>
<style>
.red{
color:red;
}
.form-area
{
//background-color: #FAFAFA;
background-color:#77F2F2;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
#submit
{
//color:#BF99E5;
font-family: "Helvetica";
border-radius:10px;
padding:10px;
}
</style>
<script>
j$ = jQuery.noConflict();
j$(document).ready(function(){
//alert("test");
//j$('#submit').hover(function(){alert('thisissdfsdfh');});
j$('#characterLeft').text('140 characters left');
//j$('#btnSubmit').focus(function(){alert('sdfsdf');});
j$('#message').keydown(function () {
var max = 140;
var len = j$(this).val().length;
if (len >= max) {
j$('#characterLeft').text('You have reached the limit');
j$('#characterLeft').addClass('red');
j$('#btnSubmit').addClass('disabled');
}
else {
var ch = max - len;
j$('#characterLeft').text(ch + ' characters left');
j$('#btnSubmit').removeClass('disabled');
j$('#characterLeft').removeClass('red');
}
});
});
</script>
</head>
<apex:form >
<div class="container">
<div class="col-md-10">
<div class="form-area">
<br />
<h3 style="margin-bottom: 25px; text-align: left;">Add New Contact</h3>
<br />
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required="true"/>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe" aria-hidden="true"></i></span>
<input id="email" name="email" class="form-control" placeholder="Email" required="true" type="text"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
<input id="tel" name="tel" class="form-control" placeholder="Phone Number" required="" type="text"/>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required="true"/>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<center> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" >Submit Form</button> </center>
</div>
</div>
</div>
</apex:form>
</apex:page>
In the last line in HTML if I remove the attribute "class="btn btn-primary pull-right" from button tag then the behavior is ok.
When I do a mouse hover it looks like below :
When NOT mouse hover it looks fine :
Can someone tell me what is wrong ?
Try this in your css,
#submit:hover, #submit:focus, #submit:active {
color:#BF99E5;
}
Bootstrap has custom CSS on hover, active, focus for appropriate elements. This should override them
It seems that some of your code overrides the stylings of bootstrap. However, if you really want to change the color of text on your button, then you may add hover in your style like:
input#submit:hover{
color: #000; /* Black */
}
That's it! :) Happy coding :) Please comment if you have problem with my solution, its my pleasure to help others :)
I did look into tutorials obviously but the html I have is different and I tried a lot of things (the code I will post is the last thing I tried). I will provide you with the html too.
WebBrowser1.Navigate("THE_WEBSITE")
WebBrowser1.Document.GetElementById("tbtLoginID").SetAttribute("onfocus", "javascript:$(this).val('ID_GOES_HERE');$('#wrong_password_board').css('display','none');")
WebBrowser1.Document.GetElementById("tbtPassword").SetAttribute("value", "PASS_PROBABLY_GOES_HERE")
WebBrowser1.Document.GetElementById("div_123").SetAttribute("onpress", "rockLogin($('#loginform'))")'
And this is the HTML (I think it's everything that matters, the website is
www.microvolts.com anyway)
<form id="loginform" action="/Account/login" method="POST">
<div class="left1"> </div>
<div class="login_info1">
<div class="icon_rh">
</div>
<div class="floatleft" style="margin-bottom: 2px;">
<input id="tbtLoginID" width="110px" maxlength="25" height="17px" class="text_box" value="Login ID" tabindex="1" onfocus="javascript:$(this).val('');$('#wrong_password_board').css('display','none'); ">
</div>
<div class="floatleft">
<div id="loginLoginIdDiv1">
<input type="text" onfocus="javascript:$(this).val('');$('#wrong_password_board').css('display','none'); " value="Password" tabindex="2" class="text_box" name="passwordFaked" size="20" width="110px" style="display: none;">
<div id="loginPasswordDiv2" style="">
<input id="tbtPassword" width="110px" type="password" tabindex="2" maxlength="25" height="17px" class="text_box">
</div>
</div>
<div id="wrong_password_board" class="wrong_password wrong_passwordid ErrorMsg" style="display: none;">
<div class="topleft"></div>
<div class="topmiddle">Invalid Login ID and/or Password.</div>
<div class="topright"></div>
</div>
</div>
</div>
<div class="login_info2">
<div class="row1">
<span class="left"></span><span class="middle">Login</span><span class="right"></span>
</div>
<div class="row1" style="width: 80px">
<span style="float: left; margin-right: 3px;">
<div id="div_123" class="toplogin RockButton" style="width: 60px; height: 19px;">
<div id="123" onclick="rockLogin($('#loginform'))" style="width: 100%; height: 100%;" class="rbtdiv">
<div class="text">
Login</div>
</div>
<div class="rbtmask" style="z-index: 100; position: absolute; display: none; background: grey;
opacity: 0.2; cursor: default; width: 100%; height: 100%; top: 0px; left: 0px;">
</div>
</div>
</span>
<div class="btn_question forgetPasswordButton ">
<div id="ifClickThisBtn" style=" display:none;" data-ifclick="false"></div>
</div>
<div id="forgetPassword" class="tip_forgot_password">
<div class="ajaxLoadingMask">
<img src="/images/ajaxLoading2.gif" style="margin-left: 150px; margin-top: 9px; position: absolute; display: block;" class="ajaxLoading" alt="">
</div>
<div class="lefttfp">
<div class="l1l"></div>
<div class="l1r"></div>
</div>
<div class="middletfp">
<div class="closetfp"></div>
<div class="title">Forgot Password or Login ID</div>
<div class="email_form">
<input type="text" value="Enter registered email" name="emailAddress" class="password_recovery_textbox">
<div class="wbtn1 formSubmitBtn" onclick="javascript:forgetPassword();return false;" style="float: left; margin: 2px 0px 0px 5px; cursor: pointer;">
<span class="wbtn1_left"></span><span class="wbtn1_middle" style="padding-left: 10px;
padding-right: 10px;">Submit</span><span class="wbtn1_right"></span></div>
<div class="wrong_email"></div>
</div>
<div id="invalideEmailAddress" style="display:none;"> Please enter a valid email address.</div>
</div>
<div class="righttfp"></div>
</div>
</div>
</div>
<div class="right1"> </div>
</form>
The login form has javascript elements so I figured I could just write it with the right login into it, but nah.
When I run it I get an error from the first line: System.NullRefferenceException, all my codes gave that.
I have to admit I probably didn't do all the research I could but I need to do this fast and this is the last thing that may help me.
As already mention above in the comment's by #Visual Vincent you need to add the DocumentCompleted event. This event is raised when the document has finished loading.
Private docCompleted As Boolean = False 'put this at class level
Private Sub WebBrowser1_DocumentCompleted(sender As Object, e As WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
If docCompleted Then Exit Sub
If WebBrowser1.Document.GetElementById("tbtLoginID") IsNot Nothing Then
WebBrowser1.Document.GetElementById("tbtLoginID").SetAttribute("value", "YOURUSERNAME")
End If
If WebBrowser1.Document.GetElementById("tbtPassword") IsNot Nothing Then
WebBrowser1.Document.GetElementById("tbtPassword").SetAttribute("value", "YOURPASSWORD")
End If
If WebBrowser1.Document.GetElementById("div_123") IsNot Nothing Then
WebBrowser1.Document.InvokeScript("rockLogin")
End If
docCompleted = True
End Sub
The code above check's each element to ensure it not nothing and if it's not then we can set the attributes we would need. Also we can InvokeScript of the document for example: rockLogin, this script does the login. The docCompleted prevents the page from doing postback's as when it's finished and you set the attributes it want's to reload the page etc... it's not required but it prevented multiple postbacks when I tried.
On another note you didn't mention if you were doing this in a click event or what, if so set the docCompleted to false before navigating to your page so the variable is reset each time...
Note: Tried and Tested - please don't post your login credentials either on a public forum...
I have a hide div that when I click on a checkbox, that div shows. My problem is that when the div shows the height of input fields are too small.
My div:
<div id="payment" style="display: none;">
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Credit Card</label>
<div class="col-lg-2" id="sq-card-number"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">CVV</label>
<div class="col-lg-1" id="sq-cvv"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Expiration Date</label>
<div class="col-lg-1" id="sq-expiration-date"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Postal Code</label>
<div class="col-lg-1" id="sq-postal-code"></div>
<input type="hidden" id="card-nonce" name="nonce">
</div>
<div class="form-group">
<br />
<br />
<div class="col-xs-12 col-xs-offset-1">
<button id="applyApplication" name="applyApplication" type="button" onClick="submitApplication();" class="btn btn-success center-block" disabled>Submit Application</button>
<br />
<br />
</div>
</div>
</div>
The CSS for the input fields:
<style type="text/css">
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
}
.sq-input--focus {
outline-width: 5px;
outline-color: #70ACE9;
outline-offset: -1px;
outline-style: auto;
}
.sq-input--error {
outline-width: 5px;
outline-color: #FF9393;
outline-offset: 0px;
outline-style: auto;
}
</style>
And I control to display that div or not by JQuery:
$('#agree').change(function() {
if($(this).is(":checked")) {
$("#payment").show();
$("#payment").scrollTop($("#payment").prop("scrollHeight"));
} else{
$("#payment").hide();
}
});
Here is the div that there is my checkbox:
<div class="form-group">
<div class="col-xs-12 col-xs-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" id="agree" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
<br />
<br />
</div>
</div>
Everything is working fine. When my checkbox is checked it display the div, but the input fields are with height very small. BTW, if I open the firebug, the input height adjust automatically. Does anyone know why?
Thanks
Try to fix the height in your css :
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
height: 20px;
}
Here is a Fiddle exemple : https://jsfiddle.net/qboena51/
Here's my website: http://library.bennington.edu. We use domtabs to organize our search boxes. We're switching cataloging software, so I'm trying to replace the catalog search box with a new search box from Ebsco Discovery Services (EDS). EDS provides their own code, so I didn't have to write anything, should just be cut and paste. But when I drop the new code in, nothing appears at all, just a total blank space. If I place the code BELOW the domtabs box, it works fine. It just blanks when placed within the domtabs box, as if there's some conflict. Here's the relevant DomTab code section:
<div class="domtab">
<ul class="domtabs">
<li><a style="border-top-left-radius:9px" href="#catalog">Catalog</a></li>
<li>Journals</li>
<li>Databases</li>
<li>Reserves</li>
<li>Reference</li>
<li><a style="border-top-right-radius:9px" href="#archive">Archive</a></li>
</ul>
<div>
<h2><a name="#catalog" id="catalog"></a></h2>
<table width="425px">
<tr>
<td valign="top" width="70%">
<!--Insert new code here-->
<!--Code Ends here-->
<span>Search the library's holdings for books, ebooks, movies, music recordings, and more.</span>
<form action="http://library.bennington.edu/search/Y" method="get" style="display:block; padding: 2px 0px; margin: 0;">
<input style="border-radius:3px" type="text" name="SEARCH" size="35" value="" />
<input type="hidden" name="SORT" value="A" />
<script language="javascript">
function iiiDoSubmit_1() {
var name = "iiiFormHandle_1";
if (document.getElementById)
obj = document.getElementById(name);
else if (document.all)
obj = document.all[name];
else if (document.layers)
obj = document.layers[name];
obj.form.submit();
}
</script>
<input type="hidden" id="iiiFormHandle_1"/>
<a href=# onclick="iiiDoSubmit_1();">
<input style="border-radius:3px; width:50px; margin-top:3px; padding:2px; font-size:11px" value="Search" type="Submit" />
</a>
</form>
</td>
<td valign="top" align="right">
<span class="roundedContentInfo">
<span style="font-size:130%; border-bottom:1px solid #000; text-align:left;"><b>Other Searches</b></span>
<span>Advanced </span>
<span>Title </span>
<span>Author </span>
<span>Author & Title </span>
</span>
</td>
</tr>
</table>
</div>
And here's the code that should be dropped in:
<script src="http://support.ebscohost.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<style type="text/css">
.choose-db-list{ list-style-type:none;padding:0;margin:10px 0 0 0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;width:340px; }
.choose-db-check{ width:20px;float:left;padding-left:5px;padding-top:5px; }
.choose-db-detail{ margin-left:30px;border-left:solid 1px #E7E7E7;padding:5px 11px 7px 11px;line-height:1.4em; }
.summary { background-color:#1D5DA7;color:#FFFFFF;border:solid 1px #1D5DA7; }
.one { background-color: #FFFFFF;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.two { background-color: #F5F5F5;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.selected { background-color: #E0EFF7;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
#ebscohostCustomSearchBox #disciplineBlock { width:auto; }
#ebscohostCustomSearchBox .limiter { float:left;margin:0;padding:0;width:50%; }
#ebscohostsearchtext { width: 144px; }
#ebscohostsearchtext.edspub { width: 245px; }
.ebscohost-search-button.edspub {
border: 1px solid #156619;
padding: 5px 10px !important;
border-radius: 3px;
color: #fff;
font-weight: bold;
background-color: #156619;
}
.ebscohost-title.edspub {
color: #1c7020;
font-weight: bold;
}
</style>
<form id="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="width:340px; overflow:auto;">
<input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
<input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://0-search.ebscohost.com.library.bennington.edu/login.aspx?direct=true&site=eds-live&scope=site&type=0&mode=bool&lang=en&authtype=cookie,ip" />
<input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="db" />
<input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
<input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
<div style="background-image:url('http://support.ebscohost.com/images/logos/eds100.gif'); background-repeat:no-repeat; height:50px; width:340px; font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt; color:#353535;">
<div style="padding-top:5px;padding-left:115px;">
<span class="ebscohost-title " style="font-weight:bold;">Research databases</span>
<div>
<input id="ebscohostsearchtext" class="" name="ebscohostsearchtext" type="text" size="23" style="font-size:9pt;padding-left:5px;margin-left:0px;" />
<input type="submit" value="Search" class="ebscohost-search-button " style="font-size:9pt;padding-left:5px;" />
<div id="guidedFieldSelectors">
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_0" value="" checked="checked" />
<label class="label" for="guidedField_0"> Keyword</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_1" value="TI" />
<label class="label" for="guidedField_1"> Title</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_2" value="AU" />
<label class="label" for="guidedField_2"> Author</label>
</div>
</div>
</div>
</div>
<div id="limiterblock" style="margin-left:-px; overflow: auto; ">
<div id="limitertitle" style="font-weight:bold;padding-top:25px;padding-bottom:5px;">Limit Your Results</div>
<div class="limiter" >
<input type="checkbox" id="chkFullText" name="chkFullText" checked="checked" />
<label for="chkFullText">Full Text</label>
</div>
<div class="limiter" >
<input type="checkbox" id="chkLibraryCollection" name="chkLibraryCollection" />
<label for="chkLibraryCollection">Available in Library Collection</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed" />
<label for="chkPeerReviewed">Peer Reviewed</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkCatalogOnly" name="chkCatalogOnly" />
<label for="chkCatalogOnly">Catalog Only</label>
</div>
</div>
</form>
I've moved the javascript call to the top of the page, and moved the CSS to my CSS page to thin out the code, but still just getting the domtab box with normal background color as if nothing is there. :-/