I have a problem with some jQuery code, I'm trying to show some fields in a form, but they have to appear only if the user clicks on Yes and hides when he clicks No. This works but when it shows the fields, it mounts them one on top of each other. I'm trying to give it direction, but is not working. Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<label> Do you want to create a new entry? </label>
<button id="showr" type="button" >YES</button>
<button id="hidr" type="button" >NO</button>
<br/>
<div class="mydiv">
<label> Field #1
<span class="small">Describe your field</span>
</label>
<textarea rows="10" cols="40" name="" id="" ></textarea>
</div>
<div class="mydiv">
<label> Field #2
<span class="small">Describe your field</span>
</label>
<textarea rows="10" cols="40" name="" id="" ></textarea>
</div>
<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});
$("#hidr").click(function () {
$("div").hide(1000);
});
</script>
</body>
</html>
relevant jsFiddle
If somebody has an idea please let me know, thanks
Add this to your style:
.mydiv{ clear:both;}
What do you mean by direction?
jsFiddle
To get your desired result including centering, use the following CSS:
.mydiv {
background:#def3ca;
margin: 0 auto;
width:400px;
text-align:left;
clear:both;
display: none;
}
.mytext {
text-align:center;
}
.wrapper {
display:block;
}
With the following markup:
<div class="wrapper">
<label>Do you want to create a new entry?</label>
<button id="showr" type="button">YES</button>
<button id="hidr" type="button">NO</button>
<br/>
<div class="mydiv">
<label>Field #1 <span class="small">Describe your field</span>
</label>
<div class="mytext">
<textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
</div>
</div>
<div class="mydiv">
<label>Field #2 <span class="small">Describe your field</span>
</label>
<div class="mytext">
<textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
</div>
</div>
</div>
Notice I added a wrapper around everything and set display: block then in your margin for .mydiv I set it to 0 auto. This allows for centering.
I also worked on your jQuery to improve it a little bit.
$("#showr").click(function () {
$(".mydiv").show("fast");
});
$("#hidr").click(function () {
$(".mydiv").hide(1000);
});
Related
Quick Image #2
How can I move this text box up and put information in the circled area in CSS? I am more of the developer type rather than a designer, so I need help with this. The text area should be exactly the same.
Thanks!
EDIT: As for the rest of the form, I want it to be centered in the second half of the screen. Hopefully I clarified.
Try this;
<div style="float:left;width:200px;height:200px">
<textarea style="width:100%;height:100%"></textarea>
</div>
<div style="float:left;width:200px;height:200px">
<div>
<input type="text">
</div>
<div>
Circled Area
</div>
</div>
use div float:left property for that
DEMO:
div.main{
float:left;
}
.txt{
height:600px;
width:300px;
}
<div class="main">
<input type="textarea" class="txt">
</div>
<div class="main">
<div>
<input type="text" class="txt2"></div>
<div>
<input type="text" class="txt2"></div>
</div>
other method
you can use <br> tag
DEMO
div.main{
float:left;
}
.txt{
height:600px;
width:300px;
}
<div class="main">
<input type="textarea" class="txt">
</div>
<div class="main">
<input type="text" class="txt2">
<br>
<input type="text" class="txt2">
<br>
<input type="text" class="txt2">
</div>
Float the text area to the left and put a div around the circled content and float it right. The text box will rise to the top in the middle.
I have implemented a coding to show a text-box when the user clicks a button. I need to modify that coding to view 2 text-boxes when user clicks that same button. I'll put the coding down below. Thanks!
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list" style="display:none;"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" onclick="showDiv()" />
</div>
function showDiv(){
$( "#welcomeDiv" ).show( "slow" );
}
Try this one .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#input1").hide();
$("#input2").hide();
$("#hide").click(function(){
$("#input1").hide();
$("#input2").hide();
});
$("#show").click(function(){
$("#input1").show();
$("#input2").show();
});
});
</script>
</head>
<body>
<input type="text" id="input1"/>
<input type="text" id="input2"/>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Hope this help :)
this is exactly same like your code check this out
this is fiddle link
and with code snippet also
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" />
</div>
this is javascript little bit different but you will get it
$("input[type='button']").click(function(){
$("#welcomeDiv").show('slow');
});
i dont like to give style in elements so use css.css
#welcomeDiv{
display:none;
}
$("input[type='button']").click(function(){
$("#welcomeDiv").show('slow');
});
#welcomeDiv{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" />
</div>
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 :)
JSFiddle
I want the div to be hidden when the page will be loaded, and then when you click the button it will show up on the page. But for some reasons it's acting really weird. what should I do?.
HTMl:
<p>Don't have an Employee Number?</p> <button id="namebutton">Click Here</button>
<div id="names">
<br>
<p>First name:</p> <input type="text" name="firstname">
<br><br>
<p>Last name:</p> <input type="text" name="lastname">
</div>
This is my javascript:
$(document).ready(function(){
$("#namebutton").click(function(){
$("#names").slideToggle("slow");
});
});
CSS:
#names{
display: none;
}
Your JSfiddle does not have jQuery included, and your code has a comma after "slow"
HTML:
<p>Don't have an Employee Number?</p> <button id="namebutton">Click Here</button>
<div id="names" class="hidden-div">
<br />
<p>First name:</p> <input type="text" name="firstname" />
<br /><br />
<p>Last name:</p> <input type="text" name="lastname" />
</div>
jQuery:
$(document).ready(function(){
$("#namebutton").click(function(){
$("#names").toggleClass("hidden-div", false);
});
});
CSS:
.hidden-div {
visibility: hidden;
}
See my JSFiddle example https://jsfiddle.net/SolveItSimply/j5y8fbsn/8/
If you want to use JavaScript and not jquery, you can try the below function :
window.onload = function() {
document.getElementById("names").style.visibility = 'hidden';
document.getElementById("namebutton").onclick = 'showNames()';
};
function showNames(){
document.getElementById("names").style.visibility = 'visible';
}
slideToggle doesnt work in this case. :)
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">