<h1>Welcome! Chat now!</h1>
<button id="button">Chat Now</button>
<button id="buttontwo">Chat Categories</button>
<div id="login" style="visibility:hidden">
<button id="closelogin">Close</button>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!
Use jQuery. No way to do it plain html/css.
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
If you don't have jQuery included, use javascript:
document.getElementById('button').onclick = function() {
document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
document.getElementById('login').style.visibility = 'hidden';
}
Look at my example without using of JavaScript.
<input type="checkbox" id="box"/>
<label id="container" for="box">
<div id="button">Chat Now</div>
<div id="login">
<label for="box" id="closelogin">Close</label>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
</label>
and css
#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}
Fiddle http://jsfiddle.net/LUdyb/1/
Hope this help.
Using javascript with the help of the button id you can make the div to be hidden by changing the css property to visible. while using jquery you can use toggle,hide,show.
There is no way you can do this in html/css
You can use Jquery
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
to close
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
you just need to change the ID that is #closelogin and the .css('visibility', 'hidden')
You need to include Jquery library like this in your head or bottom of your page to make it work.
eg:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Related
When a div is clicked I want to show a form, as done on this page. This is what I have tried (fiddle):
$(document).on("click","#tawkchat-minified-container",function() {
var htmldynamic = ' <form id="test" action="test.php">\
<div>\
Test: <input name="blah" value="test" type="text">\
</div>\
</form>'
$("#maximizeChat").html(htmldynamic);
});
I don't know if this is the right way to do it. Is there a better approach?
Adding large chunks of HTML as JavaScript variables is not good practice. It is easy to make errors in the HTML as you have to read it awkwardly embedded in the JS.
A better approach is to include the HTML code with the rest of your markup, but use CSS to hide it. Then you can just show it using JavaScript when it is pressed.
HTML:
<div id="my-form-container">
<div id="my-form-header">My form</div>
<form id="my-form" action="test.php">
<div>
Test: <input name="blah" value="test" type="text">
</div>
</form>
</div>
CSS:
#my-form {
display: none; /* This will hide the form. */
}
JavaScript:
//When the container is clicked...
$("#my-form-container").click(function() {
//...show the form.
$("#my-form").show();
});
Use this approach will definitely solve your problem
$(document).ready(function(){
$("#tawkchat-minified-agent-container").click(function()
var hlink = $("#test").val();
$("#test").click(function(){
$(".form").show()
});
});
});
I'm developing the website for my school's Virtual Enterprises class and need some help.
First off my code:
$(document).on('click', "#your-nook-theme-btn", function() {
var your_nook = $(this).parent(".og-grid").attr("#your-nook-theme-btn");
$(".og-grid").hide('slide', 'swing', '5000ms', {direction: 'left'}, 1000);
$(".main").prepend('<br> <div id="YN">Welcome to Your Nook, Modern Nook Design\'s newest innovation in interior design. Please pick your room\'s color scheme below. <br> <br> <div class="container" class="YN-order_form"><form method="POST" class="YN-order_form" id="YN-order_form"><span id="main-color-span"> <label for="main-color">Main Color: </label> <input type="color" id="main-color" value="#000000"></span><span id="accent-color-span"> <label for="accent-color">Accent Color: </label><input type="color" id="accent-color" name="accent-color" value="#ff0000"></span> <br> <br> <span id="step2"> Good. Now let\'s pick your decor. </span> <br> <br> </form></div></div>');
});
$(document).on('change', "#accent-color", function() {
var accent = $(this).parent("YN").attr("#accent-color");
$("#step2").fadeIn("slow");
});
So I want a span, #step2, that is just below the two <input type="color"> fields to fade in when the user clicks on the red input field; however, I can't seem to figure out how to do this. I've tried .click and .change, but haven't had any luck. Any help you could offer would be greatly appreciated. Both the inputs and the span are added dynamically.
Just change your css for step2 and your code will work:-
#step2 {
display: none;
}
You can customize this with CSS and Javascript.
keep the initial style of the span to be visibility:hidden. Upon click, change the visibility attribute to visible.
The jQuery function is $("#<id>").attr("visibility", "visible");
I've got a button and text box, when you hover over the button the search box will appear using this piece of JavaScript/jquery:
$('#search-button').hover(function () {
$('#search-text').show();
}, function () {
$('#search-text').hide();
});
However at the moment once you hover over the button it will display the text box but as soon as you try to hover over the text box it will disappear. Is there a way to have the text box remain on the page when you hover over it too.
Here is a Fiddle to describe the problem
you don't need Jquery for this. A Css styling will do this for you!
By wrapping your content within an element, you can show/hide any (/all) elements within the wrapper. I've made a basic demo below:
please note the padding/background on the .search class are purely for demonstration, and can be edited/removed and still keep its functionality.
button {
display: none;
}
.search:hover button {
display: inline-block;
}
.search {
background: gray;
display: inline-block;
padding: 10px;
}
<div class="search">
<input type="text" placeholder="type here" />
<button>SEARCH</button>
</div>
If, however, you are forced to use Javascript/jquery, then I won't duplicate it here, but refer to chipChocolate.py's answer
A javascript solution to your problem. Check this jsfiddle link:
http://jsfiddle.net/ea45h80n/
$('.search').hover(function() {
$('#search-text').show();
}, function() {
$('#search-text').hide();
});
$('#search-text').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<button>SEARCH</button>
<input type="text" placeholder="type here" id='search-text' />
</div>
Attach the hover event to #search-button and #search-text.
$('#search-text').hide();
$('#search-button, #search-text').hover(function() {
$('#search-text').show();
}, function() {
$('#search-text').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search-text" type="text" /
><input id="search-button" type="button" value="Search" />
remove second function. which is onhoverout. use following:
$('#search-button').hover(function () {
$('#search-text').show();
});
This might Work
$('#search-text').hide(); //on DOM Load hide the element
$('#search-button').mouseover(function()
{
$('#search-text').show(); //When mouse enters the element, then show the textbox input
});
$('#search-button').hover(function () {
$('#search-text').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="search-button" value="search"/>
<input type="text" id="search-text" style="display:none;"/>
How can I add a "Clear field" button to multiple Bootstrap 3 input fields just using jQuery and a CSS class?
I've found solutions that can add a 'clear field' button to a field with a particular ID, but nothing so far that can do it by class. I've got a form with a lot of fields and I'd rather not have to repeat my code over again for each field.
I've tried this so far (Bootply), but I can't figure out how to get jQuery to clear just the one field and toggle the one icon, not all of them.
//JS
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
//HTML
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"> </span>
</div>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>
//CSS
.searchinput {
width: 200px;
}
.searchclear {
position:absolute;
right:5px;
top:0;
bottom:0;
height:14px;
margin:auto;
font-size:14px;
cursor:pointer;
color:#ccc;
}
1) You can use $(this) to get a reference to the current targeted element
2) Use .next() to toggle the visibility for only the icon which is the next immediate sibling of input that you're currenlty key in
3) Use .prev() to clear only the input which is the immediate previous sibling of clear icon that is clicked:
Final code should look like:
$(document).ready(function () {
$(".searchinput").keyup(function () {
$(this).next().toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function () {
$(this).prev().val('').focus();
$(this).hide();
});
});
Bootply Demo
Try changing your javascript code to this:
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).parent().find('.searchclear').toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(this).parent().find('.searchinput').val('').focus();
$(this).hide();
});
});
Essentially what it does is add scope to the clear buttons so that it is limited to the sibling. There are other jQuery functions that might be more specific, but this should work.
http://www.bootply.com/130368
Another option would be to use .siblings() to make sure you are targeting just the siblings with the searchclear class.
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).siblings(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
http://www.bootply.com/130369
Here's my problem, I want an entire div to be click able, when clicked I need the radio button contained in the div to be checked, so the div acts as a radio itself. Here's what I thought I could use;
$('#content').click(function(e) {
$('input:radio[name="id_"]').prop('checked', true);
});
But this is not selecting the relative radio inside the div. I think I can use a this selector, am I right?
You don't give any code, so I guess:
DEMO
See my demo on CodePen
HTML
<div class="content">
<input type="radio" name="foo">
</div>
<div class="content">
<input type="radio" name="foo">
</div>
<div class="content">
<input type="radio" name="foo">
</div>
CSS (for example)
.content {
float: left;
width: 100px;
padding-top: 100px;
background-color: #eee;
margin-left: 10px;
}
JS (JQUERY)
$('.content').click(function(){
$(this).find('input[type=radio]').prop('checked', true);
})
Yes you can use the this selector. I have made a quick jsfiddle to show you an example.
This should do it.
$('input:radio[name*="id_"]'), assuming the name starts with id_
And yes you can use this. Use it to filter down its children like:
$(this).children('input:radio[name*=id_]').prop("checked", true)
The key is using name*=id_
This means select element whose name starts with id_. Isn't that what you wanted ?
$('#content').click(function(){
$(this).children('radio').attr('checked','checked')
})
building on Deif's solution this will toggle the checked status when clicking on the div
fiddle
<div id="content">
Some content
<input type="radio" id="radio1" value="test" />
</div>
<script type="text/javascript">
$('#content').click(function () {
var val = $(this).find('input:radio').prop('checked')?false:true;
$(this).find('input:radio').prop('checked', val);
});
</script>
Try with this:
$('div').click(function(){
if( $('div').find('input:checkbox').prop("checked") == true){
$('div').find('input:checkbox').prop("checked", false);
}
else{
$('div').find('input:checkbox').prop("checked", true);
}
});
LIVE DEMO