Fade Multipie Texts with Buttons Click - javascript

I want to make a text box or an area in my website, and I have about 9 buttons in the page which I don't want to redirect to other pages and open in the same page and in the same Text Box or The Area that I create.
So, if someone click on Button 1, then open the Text 1 and its picture(s) with fades in animation, and when click on Button 2, Text 1 Box fades out and Text 2 with picture(s) fades in and etc. How can I do this?
I have tried some codes like this
$('.one').hide();
$('.two').hide();
$('.three').hide();
$('.btn1').click(function () {
$('.one').fadeIn();
});
$('.btn2').click(function () {
$('.one').fadeOut();
$('.two').fadeIn();
});
$('.btn3').click(function () {
$('.two').fadeOut();
$('.three').fadeIn();
});
Fiddle
but when click the buttons , the Buttons position is not fixed and move with the text animation.
Is there any ways to do the same with other codes?

$('.one').hide();
$('.two').hide();
$('.three').hide();
$('.btnall').hide();
$('.btn1').click(function () {
$.when($('.btnall').fadeOut()).done(function(){
$('.one').fadeIn();
});
});
$('.btn2').click(function () {
$.when($('.btnall').fadeOut()).done(function(){
$('.two').fadeIn();
});
});
$('.btn3').click(function () {
$.when($('.btnall').fadeOut()).done(function(){
$('.three').fadeIn();
});
});
I think this is what you need.
Updated Fiddle

More scalable and dynamic solution:
$('button').on('click', function () {
var targetEl = $(this).data('target');
$.when($('.' + targetEl).siblings('input').fadeOut()).done(function () {
$('.' + targetEl).fadeIn();
});
});
HTML:
<input class="one" value="Text 1">
<input class="two" value="Text 2">
<input class="three" value="Text 3">
<br>
<button data-target="one" class="btn1">Button 1</button>
<br>
<button data-target="two" class="btn2">Button 2</button>
<br>
<button data-target="three" class="btn3">Button 3</button>
Demo: https://jsfiddle.net/tusharj/91jfvqwm/8/

You can wait fadeOut to complete before fading in new text field.
for example
$('.btn1').click(function () {
$('.btnall').fadeOut('slow', function() {
$('.one').fadeIn();
});
});

Related

How to add only one click event on a label?

Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>

How to output two different labels on two buttons?

I have this code that shows a label when clicking the button, but I need the following:
Two buttons showing two different labels, in one of the buttons show your label below that button;
When a label is active or shown by clicking on the other button, that label is replaced by the new one.
(function() {
$('button').on('click', function() {
$("#action").html("button was clicked");
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<label id="action"></label>
See example: https://jsfiddle.net/fr4x32g7/
(function () {
var active = "";
$('button').on('click', function (e) {
var id = "#" + e.target.value;
$(active).html("");
active = id;
$(id).html("button was clicked");
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button value="action">Action</button>
<label id="action"></label>
<button value="action1">Action</button>
<label id="action1"></label>
Does this solve the problem ?
(function() {
$('#button1').on('click', function() {
$("#action").html("button1 was clicked");
});
$('#button2').on('click', function() {
$("#action").html("button2 was clicked");
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button id="button1">Action1</button>
<button id="button2">Action2</button>
<label id="action"></label>
I assume that both labels are to be hidden initially and to show only one of them if the user clicks on a button. Here's a solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button data-label="action1">Action 1</button>
<button data-label="action2">Action 2</button>
<br>
<label class="action" id="action1" style="display:none;">button 1 was clicked</label>
<label class="action" id="action2" style="display:none;">button 2 was clicked</label>
and
$(function() {
$('button').on('click', function() {
$("#" + $(this).data('label')).show().siblings("label").hide();
});
});
Fiddle: https://jsfiddle.net/0phz62ot/
Basically we bind the button with its label via an attribute and whenever a button is clicked, the label bound to it will be shown and the sibling labels will be hidden.

When checkbox is checked show hidden button and hide the visible button

I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>
Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>
Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.
Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>

Moving button doesn't receive click event

I have a text field which should hide when it loses focus. I also have a button. The problem is, when you click the button, the text field first loses focus, which moves the button, preventing it from receiving the click event.
HTML:
<div>
<p> Focus on the text field, and then click the button </p>
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br><br><br>
</div>
<button id="clickMe">click me</button>
</div>
JS:
$(function() {
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
});
$('#clickMe').on('click', function(e) {
alert('clicked!');
});
});
http://jsfiddle.net/u86ycf5e/
The button should still move. But it should also receive the click event.
Add a container with a height around the element you are hiding: Fiddle
.container {
height: 50px;
}
HTML
<div class="container">
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br>
<br>
<br>
</div>
</div>
Alternatively, you could make the element hide after a short delay via setTimeout like so:
$('#focusMeOut').on('focusout', function (e) {
setTimeout(function() {
$('#hideMeOnFocusOut').hide();
}, 250);
});
Other fiddle
Try ...
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
if (e.relatedTarget.id==="clickMe") {
$("#clickMe").trigger('click');
}
});
This will check to see if the button was clicked and fire it ...
Hide the text box instead with:
$('#focusMeOut').on('focusout', function(e) {
$(this).hide(); //this line changed
});
and optionally set the height of the <div> to prevent button moving with this CSS:
#hideMeOnFocusOut {
height:80px;
}
You might want to rename your IDs more appropriately now.
http://jsfiddle.net/u86ycf5e/4/

alternating button on clicking event?

Hey, it's all about Jquery. I am using two Div and a button, at a time only one div is shown. Suppose these are div:
<div id="first"></div>
<div id="second"></div>
And button is:
<input type="button" value="show first" onClick="called a javascript();"/>
Only single div is shown i.e. first
<script>
$(document).ready( function() {
$("#second").hide();
});
</script>
Now on clicking button, I want to hide first div, show second and the value of button is changed to show second and if clicked again it revert back to previous state.
Thanks in advance
Heres' the FIDDLE. Hope it helps.
html
<div id="first" style="display:none;">first</div>
<div id="second">second</div>
<input id="btn" type="button" value="show first" />
script
$('#btn').on('click', function () {
var $this = $(this);
if ($this.val() === 'show first') {
$('#first').show();
$('#second').hide();
$this.val('show second');
} else {
$('#first').hide();
$('#second').show();
$this.val('show first');
}
});
What you are looking for is the toggle function from jquery
Here's an example on fiddle
$(".toggleMe").click(function() {
$(".toggleMe").toggle();
});

Categories

Resources