I created a comment button.
I want that when the user click on the button a model window will open. The model window should contain a keyboard for writing the comment.
This might help you a little bit. We can't code an entire keyboard for you.
HTML:
<input type="button" value="Show the keyboard!"> <!-- the button -->
<div id="wrapper"> <!-- the keyboard -->
<!-- type your code here, make sure that it's css is like the textarea below, display:none;. Then copy-paste the jquery line which says 'textarea', and change 'textarea' to whatever element you added. -->
<textarea></textarea>
</div>
CSS:
#wrapper {
position:relative;
margin-top:30px;
background-color:#CCC;
width:400px;
height:0px;
}
textarea {
display:none;
margin:0 auto;
width:200px;
height:160px;
}
jQuery:
$(document).ready(function() {
$('input').click(function() { // when the button is clicked...
$('#wrapper').animate({ height: '+=200px'},100);
// ...increase the height of the wrapper by 200px
$('textarea').css({ 'display': 'block'});
// ...make sure that the textarea is visible
})
});
Link to JSFiddle: http://jsfiddle.net/16fuhf6r/3/
Comments with code explanation are included.
Related
I am trying the giva a menu slides in/out effect to give the main content more space whenever user wants - More like the Google Calendar hamburger menu click behaviour.
I am trying to have two divs side-by-side. 1st is menu, 2nd is other content. Using jQuery UI I am trying toggle slide the 1st div.
Two issues -
Only when I give fixed width to 2nd div, I am able to place them side-by-side.
How to make the second div takes rest of the space?
Only after completion of the slide-out 2nd div adjust its width.
How to make increase the width smoothly?
Here is the code https://codepen.io/coder92/pen/Yjomwd
$(document).ready(function(){
//adds click function to the hamburger menu
$( "#menu" ).click(function() {
$(".menuDiv").toggle('slide');
});
});
.menuDiv{
background-color: green;
width:200px;
float:left;
}
.contentDiv{
//width:100%;
width:500px;
color:white;
background-color:blue;
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id="menu"> toggle </span>
<div>
<div class="menuDiv">
Menu
</div>
<div class="contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>
Thanks in advance!
For the smooth sliding you can use
$(".menuDiv").animate({width: 'toggle'}, 350);
And to make the data take up the rest of the page
Remove float: left; from .contentDiv (Float makes the element not take full size)
Add margin: 0 auto; (This makes the data take the full rest of the page)
Add overflow: hidden (this stops the blue from going under the green)
Check it out: https://codepen.io/Funce/pen/QBeLOr
The way Google Calendar do it is to utilize a combination of flex display, hidden overflow and negative margin to achieve the effect. You may refer to the sample below:
$(document).ready(function(){
//adds click function to the hamburger menu
$("#menu").click(function () {
var $menu = $(".menuDiv");
if ($menu.is(':visible')) {
$menu.animate({'margin-left':-200}, function() {
$menu.hide();
});
} else {
$menu.show().animate({'margin-left':0});
}
});
});
.containerDiv {
display: flex;
overflow-x: hidden;
}
.menuDiv{
background-color: green;
width:200px;
}
.contentDiv{
color:white;
background-color:blue;
float:left;
flex:1 1 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id="menu"> toggle </span>
<div class="containerDiv">
<div class="menuDiv">
Menu
</div>
<div class="contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>
Note that I use the jQuery animate method, while Google Calendar use the CSS transition for theirs.
I have a submit button in my code, and its disabled.. I need it to be enable when the user clicks on the " I agree" check box.. I need it to be in jQuery.. can anyone help me with it? I'm writing my code in html, javascript and jquery..
<input id="agree" type="checkbox" name="agree" >I agree to the terms of service...<br> <br />
<div align="center">
<button style=" color: white; background-color: gray; width: 100px; height: 30px" type="submit" disabled ><b><font color="black">Register</font></b></button>
</div>
When the state of the checkbox changes, set the disabled property of the button based on the checkboxes' current state:
$('#agree').on('change', function() {
$('button').prop('disabled', !this.checked);
});
If you have multiple buttons on the page, the above will set the disabled property on all of them. If you need to get the next button relative to #agree, you'd have to traverse a little bit:
$('~ div:first', this).find('button').prop('disabled', !this.checked);
$('~ div:first', this) will get the first occurrence of a div which comes after this (#agree)
Here's a fiddle
You can use:
$('#agree').click(function() {
$('input[type="submit"]').prop('disabled',!this.checked);
});
or:
$('#agree').click(function() {
$(this).next().find('input[type="submit"]').prop('disabled',!this.checked);
});
$('input[type="submit"]').removeAttr('disabled');
$("#checkBoxID").click(function() {
$("#buttonID").attr("disabled", !this.checked);
});
so in your case
$("#agree").click(function() {
$("button").attr("disabled", !this.checked);
});
Demo
I know you want a JS solution, but just to show a different approach, you can actually accomplish something similar in pure CSS.
Note you should also avoid using the font tag, and move your CSS from inline to a stylesheet.
Demo Fiddle
HTML
<input id="agree" type="checkbox" name="agree">I agree to the terms of service...
<div>
<button>Register</button>
<div></div>
</div>
CSS
div {
position:relative;
text-align:center;
}
div div {
height:100%;
position:absolute;
top:0;
left:0;
width:100%;
}
button {
background:grey;
color:#c0c0c0;
}
input[type=checkbox]:checked + div div {
display:none;
}
input[type=checkbox]:checked + div button {
background:#c0c0c0;
color:black;
}
Do like this
$('#agree').change(function() {
$('button[type=submit]').prop('disabled', !this.checked);
});
Try this..Property of button changes when Checkbox state is changed...
$('#agree').click(function() {
$('input[type="submit"]').prop('disabled',!this.checked);
});
Demo Fiddle
I want to achieve hide/show with div's in html but in this way.
Here is my html:
<div id="left"></div>
<div id="middle">
<input type="button" id="button"/>
</div>
<div id="right"></div>
And this is my css:
body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
float:left;
width:11%;
height:570px;
margin:0;
}
I want to do that when I click button on div center to hide div right and to expand divleft for the size of the div right and then move div center all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left.
Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:
Start phase:
And end phase:
You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/
or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/
I had almost the same question a couple of days ago and maybe it helps you too.
this example uses a checkbox to hide the div. and make the other div 100% width.
javascript, When right div is hidden left div has to be 100% width.
the javascript code from the example:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","40%");
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
});
});
and an example:
http://jsfiddle.net/mplungjan/5rdXh/
This is one of the best ways to hide a div element using JavaScript:
<html>
<head>
<script>
function hideDiv() {
document.getElementById("myP2").style.visibility = "hidden";
}
</script>
</head>
<body>
<button onClick="hideDiv()">Hide</button>
<br>
<br>
<p id="myP2">Hello world!</p>
</body>
</html>
Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/
(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS).
A Javascript-only solution would be much more difficult to implement.
In my asp page, i want to show a popup window whenever user clicks the button.The popup window contains one text box and submit button for getting the filepath from the user.
for example : i want a popup like this in stackoverflow site...
Please hele me to get this...
Here is a EDITED:demo.Customize it to suit your needs.Let me know if need further help.
I have added a link which will display the popup on click.
After that the popup div is the actual popup , the popup div contains another div , just to hold the contents , in this case textbox and buttons.Here is the Html part.
<a id="popuplink" href="#">Click Me</a>
<div id="popup">
<div id="content">
<input type="text"/><input type="Button" value="Browse..."/>
<input id="popupclose" type="Button" value="Close"/>
</div>
</div>
Here is CSS:
#popup
{
display:none;
position:fixed;
width:250px;
height: 150px;
top: 50%;
left: 50%;
margin-left:-155px;
margin-top:-110px;
border:5px solid red;
background-color:#DEDFDE;
padding:30px;
z-index:102;
font-family:Verdana;
font-size:10pt;
border-radius:10px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
font-weight:bold;
}
#content
{
height:auto;
width:250px;
margin:60px auto;
}
#popupclose
{
margin:35px 0 0 80px;
width:50px;
}
EDIT:
To get the value of the textbox check This demo
To call the javascript function on click of Asp.Net Button , try doing something like this.
Create a function which will show the popup.
function ShowPopUp()
{
$('#popup').show("slow");
}
And on button click try this,
ClientScript.RegisterStartupScript(GetType(), "popup", "ShowPopUp()", true);
Additional Information MSDN
If I understand you correctly you want to use window.open, here's some info: https://developer.mozilla.org/en/DOM/window.open
Do you need something like this (this is a crude example as I don"t know the name of your page, etc, etc...):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function open_win() {
window.open("mypage.html");
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>
</html>
However I'd advise doing this in an unobtrusive manner.
I'm stuck for a while now with the following problem. I've created an website which contains an overlay. The overlay is placed in the html as below;
<html>
<body>
<div id="overlay"></div>
<div id="wrapper">
<!--More html - snipped-->
<div id="search">
<form method="post" action="Default.aspx?id=999" id="searchForm">
<label for="searchInput">Your searchcriteria:</label>
<input type="text" id="searchInput" />
</form>
</div>
<!--More html - snipped-->
</div>
</html>
The css for the overlay and div#search is as below. There is a bit more css to style the form elements inside the div#search, but since I don't think it's relevant I left this out.
div#search
{
clear:both;
width:990px;
height:50px;
z-index:1002;
display:none;
position:absolute;
margin:49px 0px 0px 0px;
background-color:#FFF;
}
#overlay
{
background-color:#000;
position:fixed;
opacity:0.7;
display:none;
z-index:1001;
width:100%;
height:100%;
top:0;
left:0;
}
When a user clicks an menuitem to open the searchwindow the following bit of javascript is executed. The javascript is just a concept, but it works.
function showSearchBar() {
//Check if search bar is shown, if it is hide it, otherwise show it.
var isVisible = $("#search").is(":visible");
if (isVisible) {
//Hide the div
$("#search").fadeOut(600);
//hide the overlay
$("#overlay").hide();
}
else {
//Show the overlay
$("#overlay").show();
//Show the hidden div
$("#search").fadeIn(600);
//$("input#searchInput").watermark("Enter your criteria");
}
}
The problem here is that whenever the javascript is executed the overlay is being placed at the top of the page disabling every other element on the page, including the searchform. I want the searchform to be available to the users, so it should be on top of the overlay. It's probably a very small issue, but I don't see the problem here. What is causing the overlay to be placed over the searchform instead of the searchform being on top of the overlay?
Problem solved. I modified the html to look like this;
<html>
<body>
<div id="search">
<form method="post" action="Default.aspx?id=999" id="searchForm">
<label for="searchInput">Your searchcriteria:</label>
<input type="text" id="searchInput" />
</form>
</div>
<div id="overlay"></div>
<div id="wrapper">
<!--More html - snipped-->
</div>
</html>
This was necessary because the wrapper has it's own z-index and is positioned relative. By placing the div#search as first element in the body I was sure that it lied on top of all other elements because of it's absolute positioning. Moving the html-element solved my problem. Other suggestions for improvement are welcome.