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. :)
Related
I have a button click function like this :
$("#submitButton").click(function (e) {
e.preventDefault();
console.log("let's show my div");
$('#mydiv').show();
//and then doing a lot of front end operations and some ajax calls
})
When I click the submit button, I get the console.log message immediately. But .show() method works like 7-8 seconds after that. Can you tell me how I can make .show() work immediately? Thanks.
EDIT :
My HTML code looks like this :
<div class="main">
<form id="myform" enctype="multipart/form-data" class="contact-forms">
<div class="first-line">
<div class="span3 main-row">
<div class="input">
<input type="text" id="id" name="id" placeholder="insert your ID" maxlength="7" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
</div>
</div>
<div class="first-line">
<div class="span8 main-row">
<div class="input">
<input type="text" id="name" name="name" placeholder="Your name" />
</div>
</div>
</div>
<div id="mydiv" style="display:none">
<label>
Processing, please wait.
</label>
</div>
</form>
</div>
This is example of showing the div , you should hide your div with display none not hidden class , if you use hidden class just remove class to show your div
function ShowDiv(){
$("#mydiv").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" style='display:none;'>Hello</div>
<button onclick="ShowDiv()"> ShowMe</button>
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've written a function for displaying 2 text-boxes when user clicks a button. But the issue is when click these 2 buttons an event for another button in the form is fired. So I wrote a mouse click event for that Hide and Show functions. But still it's not working. When the show button clicks 2 text-boxes are showing and when hide clicks they disappear. I'll put my coding down below.
<div class="form-group">
<div class="col-sm-9">
<input type="text" id="height"/>
<input type="text" id="width"/>
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
</div>
$("show").click(function(){ #Mouse Click event for show button
$(document).ready(function(){
$("#input1").hide();
$("#input2").hide();
$("#hide").click(function(){
$("#input1").hide();
$("#input2").hide();
});
$("#show").click(function(){
$("#input1").show();
$("#input2").show();
});
});
});
Try this
$(document).ready(function() {
$("#height, #width").hide();
$("#hide").click(function() {
$("#height, #width").hide();
});
$("#show").click(function() {
$("#height, #width").show();
});
});
<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">
<input type="text" id="height" />
<input type="text" id="width" />
<button type="button" id="hide">Hide</button>
<button type="button" id="show">Show</button>
</div>
</div>
Just call click function inside document.ready. Also trigger events on proper element using appropriate selectors
$(document).ready(function() {
$("#hide").click(function() {
$("#height ,#width").hide();
});
$("#show").click(function() {
$("#height ,#width").show();
});
});
<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">
<input type="text" id="height" />
<input type="text" id="width" />
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
</div>
I am trying to make my div expand and "go down again" how can I do this, I have tried with various javascript but cant seem to make it work
my code is here http://codepen.io/anon/pen/Icyow
<div id="chatContainer">
<div id="chatTopBar"></div>
<div id="chatLineHolder"></div>
<div id="chatBottomBar">
<form id="submitForm" method="post" action="">
<input id="chatText" name="chatText" maxlength="255" placeholder="Type here..." />
<input type="submit" class="blueButton" value="Submit" style="visibility: hidden;" />
</form>
</div>
</div>
Here is the JavaScript code you need:
$('#chatTopBar').on("click", function() {
$("#chatLineHolder, #chatBottomBar").slideToggle();
});
Here is the codepen fork: http://codepen.io/praneybehl/pen/JrvyK
Hope it helps! :)
I have this code to change the color of elements like the Background-color,text color,active link color,visited link color etc. inside a div. I have to enter the color for each in the text-boxes and accordingly the color of background,text color,link colors would change. This is the program objective.
But I can't change the colors of the active, followed and visited links. How to do that with only HTML, CSS and JavaScript? Please don't tell me any method using jQuery, as I don't know jQuery. I only want it it with JavaScript.
<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("dv").style.alinkcolor=txt;
document.getElementById("dv").style.vlinkcolor=al;
document.getElementById("dv").style.color=vl;
document.getElementById("dv").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1">
<br/><br/>
Text: <input type="text" id="t2" name="txt2">
<br/><br/>
Link: <input type="text" id="t3" name="link">
<br/><br/>
Active Link: <input type="text" id="t4" name="alink">
<br/><br/>
Followed Link: <input type="text" id="t5" name="vlink">
<br/><br/>
<input type="button" value="test" onclick="fun();">
<br/><br/>
<div id="dv"> hello
This is a Test<br/>
You Have Selected These Colors<br/>
This is a Test Link<br/>
</div>
</body>
</html>
I Updated your code by assigning the ID's to the elements. Here is the updated code. Try this code to see if it helps. Thanks.
<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("link").style.alinkcolor=al;
document.getElementById("link").style.vlinkcolor=vl;
document.getElementById("para").style.color=txt;
document.getElementById("link").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1">
<br/><br/>
Text: <input type="text" id="t2" name="txt2">
<br/><br/>
Link: <input type="text" id="t3" name="link">
<br/><br/>
Active Link: <input type="text" id="t4" name="alink">
<br/><br/>
Followed Link: <input type="text" id="t5" name="vlink">
<br/><br/>
<input type="button" value="test" onclick="fun();">
<br/><br/>
<div id="dv">
<p id="para">hello This is a Test<br/>
You Have Selected These Colors<br/><p>
<a id="link" href="#">This is a Test Link</a><br/>
</div>