Click button to show div, then remove button - javascript

I have managed to create a button that shows my div. but I want to have the button disappear as that happens.
At the moment my button only disappears the second time I click it. Any help appreciated.
$(document).ready(function() {
$('.click').click(function() {
$('#contact-form').toggle('slide', 500)
$('.click').toggle();
});
});
.click {
display: block;
}
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form"></div>

The reason why it is not working is, you are mixing the display between CSS and JavaScript. jQuery uses the current inline style to check if the button is hidden to display it, when you use .toggle(). Since it doesn't have anything at first, it adds a display: block (or whatever the initial value is) and then when you do the second time, it correctly identifies and removes.
The best thing to do is to use classes. I would suggest something like this parent class.
$(document).ready(function() {
$('.click').click(function() {
$("body").toggleClass("contact-form-open");
});
});
.contact-form-open .click,
#contact-form {
display: none;
}
.contact-form-open #contact-form {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
This way, you control everything using CSS and you don't mess up with the event listeners or add the yucky inline CSS.

I've tried what you've tried and it seems to be working. Maybe it's because you don't close the div tag ?
$(function() {
$('.click').click(function() {
$('.myDiv').toggle();
$('.click').toggle();
})
});
http://plnkr.co/edit/wD0bwf8XK3CFXXM7rVWF?p=preview

but I want to have the button disappear as that happens.
So just use hide() instead of toggle :
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
Hope this helps.
$(document).ready(function() {
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
});
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form">Form content</div>

More easy:
$(document).ready(function() {
$('.click').click(function() {
$("#contact-form").show();
$(this).remove();
});
});
#contact-form{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>

Related

How to alternate jquery toggle slide actions on click

I want to show two elements on click, one after the other, whereby a user clicks a button the first element with a class(.show-element-one), is shown and when the user clicks the same button for the second time the second element is shown with class(.show-element-two) , am using the code below to show element one on click but I am stuck with showing the second element on the second click.
jQuery(document).ready(function() {
jQuery('#display-elements').click(function() {
jQuery('.show-element-one,.show-element-two').toggle("slide");
});
});
I will appreciate any guides, thanks.
You can set up a counter variable calculate the modulus value for that to display the element of that two classes in circular manner. Something like the code below:
jQuery(document).ready(function() {
var count = 1;
jQuery('#display-elements').click(function() {
jQuery('.show-element-one, .show-element-two').hide();
if (count % 2 !== 0) {
jQuery('.show-element-one').toggle("slide");
} else {
jQuery('.show-element-two').toggle("slide");
}
count++;
});
});
.show-element-one,
.show-element-two {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="display-elements"> Click me </button>
<div class="show-element-one">
show-element-one
</div>
<div class="show-element-two">show-element-two </div>
Maybe you are missing the definition for .slide CSS class. Try the below code.
$(document).ready(function() {
$('#display-elements').click(function() {
$('.show-element-one,.show-element-two').toggle("slide");
});
});
.slide {
display: none;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="show-element-one">show-element-one</div>
<div class="show-element-two slide">show-element-two</div>
<button id="display-elements">Toggle</button>

Hiding a div onmouseout

Hi guys I was making a javascript function for dismissing or hiding a div Ive search through the internet and found some answers but it does not apply on my code
Here is my code:
<script>
function Displayout()
{
$("#siteicon").mouseout(function () {
$("#map_tooltip").hide("drop", { direction: "down" }, "slow");
});
}
</script>
And here is the div that will trigger the function
<div id='siteicon' style="background-image:url('src/images/redbutton.png');margin-top:0px;margin-left:-8px;height:10px;width:10px;background-repeat:no-repeat;" onmouseover="displayData();" onmouseout="Displayout();"></div>
UPDATE:
and here is the id of the div I want to hide
<div id='infocontainer'></div>
Thank you in advance
Seems like there is syntax wrong with your hide() method. Try this:
function displayData()
{
$("#map_tooltip").show("slow");
}
function displayOut()
{
$("#map_tooltip").hide("slow");
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div id='siteicon' style="background-color:grey;margin-top:0px;margin-left:-8px;height:20px;width:60px;background-repeat:no-repeat;" onmouseover="displayData();" onmouseout="displayOut();">SiteIcon</div>
<div id='map_tooltip' hidden="true">Should be hidden on mouseout of #siteicon</div>
The parameters for hide are wrong, it's giving error "Uncaught TypeError: n.easing[this.easing] is not a function". You can use "slow" to slow up the hiding effect but you can't specify the direction. You order is wrong as well. Please have a look at JSFiddle for Demo and api.jquery.com for for hide function.
You don't need onmouseout since you are using JQuery, and there seems to be a problem in the hide() of yours, so try removing the parameter inside.
$('#test').mouseout(function() {
$(this).hide();
})
#test {
height: 200px;
width: 200px;
background-color:pink}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">content</div>

How to focus on a div that has just appeared?

I have this component:
$chevron.on('click', function(e) {
e.preventDefault();
$('.disclaimer-wrapper').slideDown('fast', function() {
$(this).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="footer">
<div class="disclaimer-wrapper"> //this div is hidden Hidden Content
</div>
</section>
I am trying to click on an anchor ($chevron) and then display the element .disclaimer-wrapper but the document is not focusing or scrolling down to that element when it appears so the user can't see the new content being displayed.
What am I missing?
jQuery Focus does not work on divs, however there is a workaround to that, in simple words, you need to set the tab index of div to -1, like this:
$('#chevron').on('click', function(e) {
e.preventDefault();
$('.disclaimer-wrapper').slideDown('fast', function() {
$(this).attr("tabindex", -1).focus();
});
});
.disclaimer-wrapper {
display: none;
}
.disclaimer-wrapper:focus {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="footer">
click
<div class="disclaimer-wrapper"> //this div is hidden Hidden Content
</div>
</section>
here is a fiddle of it, you can check it out.

jquery start from hidden

I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/

Javascript Background Change Colour

I am trying to learn Javascript on my own. So I gave myself a task: Create a button and with that button I can change the background colour. This is what I have done so far. I assume I don't need to run it under localhost like how we usually do PHP? I only drag the file to Google Chrome. So far, after clicking, it doesnt change colour at all. I also wonder why. Would be grateful if someone could point out my error
exe1.html
<html>
<head>
<link rel="stylesheet" href="layout.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button').click(function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
</script>
</head>
<body>
<div class="buttonClickMe">
<button type="button" onclick="changeColour">Click me</button>
</div>
</body>
layout.css
button
{
background-color: red;
width: 100px;
height: 100px;
}
body
{
text-align: center;
background-color: blue;
}
Looks like you are trying to implement the click event in two ways:
as a HTML attribute
<button type="button" onclick="changeColour">
In order for this way to work, you should use changeColour as a function:
<button type="button" onclick="changeColour()">
via JS
$('.button').click(function(){ ...
This is the wrong selector for button (the . looks for elements by class name). Instead, use button:
$('button').click(function(){ ...
Either method will work and you only need one.
This should work
$(document).ready(function () {
$('.button').click(function () {
changeColour();
});
});
function changeColour() {
var col = Math.floor(Math.random() * 16777215).toString(16);
$('body').css('background', '#' + col);
}
If you are learning javascript don't jump so fast to jQuery, first do it in plain javascript, like this.
Pure JS
var array = ['black','red','yellow']; //create an array with colors
function changes(){ //create the function
document.bgColor= array[Math.floor(Math.random()* array.length)]; //change the document. for example
}
HTML
<button type="button" onclick="change()">Click me</button>
The selector you're using for the click event does not exist. Add a class to the button for it t work.
Try this:
HTML
<button type="button" class="button">Click me</button>
CSS
$(document).ready(function(){
$('.button').on('click', function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
What you've done is fine,
You should move the button class .button onto the actual button element and remove the onclick and then should work.
Here:
http://jsfiddle.net/745ex5zc/
$('.button').click(function(){...
is referring to a click on a button with the CLASS button.
Simply add class=""button" to your button and it would work, though I'd recommend using id="myId" and using $('#myId').click(function(){ instead.
Give this a try...
JSFiddle https://jsfiddle.net/w6tjtaqy/
<script>
$(document).ready(function(){
$('.button').click(function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
</script>
<style>
button
{
background-color: red;
width: 100px;
height: 100px;
}
body
{
text-align: center;
background-color: blue;
}
</style>
<div class="buttonClickMe">
<button type="button" class="button">Click me</button>
</div>

Categories