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();
});
Related
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>
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>
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();
});
});
I got an html form with 3 questions, each question inside a div:
<div id="question1">
question1
</div>
<div id="question2">
question2
</div>
<div id="question3">
question3
</div>
and a button at the very end:
<button id="next">Next question</button>
What i want - only 1st div shown at first. I press the button -> 2nd div loads, 1st div hides. I press the button one more time -> 2nd div hides, 3rd div shows up.
Here is how i tried:
<script>
$('#question2').hide();
$('#question3').hide();
$("#next").click(function (e) {
event.preventDefault();
$('#question1').hide();
$('#question2').show();
});
</script>
I dont know how to load the 3rd div.
You can simply look for the first visible div, and hide it, subsequently showing the next div:
var next;
$("#advance").on("click", function () {
next = $("#steps div:visible:first").hide().next();
next.length ? next.show() : alert( "No more divs" );
});
I made one minor suggestion; nest your divs into a common container:
<button id="advance">Advance</button>
<div id="steps">
<div id="question1">question1</div>
<div id="question2">question2</div>
<div id="question3">question3</div>
</div>
Try
$('div[id^="question"]').hide().first().show();
$("#next").click(function (e) {
event.preventDefault();
$('div[id^="question"]:visible').hide().next().show();
});
Demo: Fiddle
Can you try this
http://jsfiddle.net/2dJAN/7/
<div id="question1">
question1
</div>
<div id="question2">
question2
</div>
<div id="question3">
question3
</div>
<button id="next">Next question</button>
$('#question2').hide();
$('#question3').hide();
$("#next").click(function (e) {
event.preventDefault();
$('#question1').hide();
$('#question2').show();
$(this).on("click",function(){
$('#question2').hide();
$('#question3').show();
});
});
You need to check wich question is visible before deciding what to do when the button is clicked.
<script>
$('#question2').hide();
$('#question3').hide();
$("#next").click(function (e) {
event.preventDefault();
if ($('#question1').is(':visible')) {
$('#question1').hide();
$('#question2').show();
} else if ($('#question2').is(':visible')) {
$('#question2').hide();
$('#question3').show();
.html('Save');
} else if ($('#question3').is(':visible')) {
//Submit
}
});
</script>
Maybe something like:
EDIT: Added jsfiddle demo:
http://jsfiddle.net/KPjUc/
var currentQuestion = 1;
$("#next").click(function (e) {
//hide all div's start with "question"
$("div[id^=question]").hide();
//Show div related to current question number
$('#question' + currentQuestion++).show();
//When last question is reached, move back to first question
if(currentQuestion >3){
currentQuestion =1;
}
});
Maybe not 100% complete or correct, but you get the idea...
<div id="question1" class="question">
question1
</div>
<div id="question2" class="question">
question2
</div>
<div id="question3" class="question">
question3
</div>......
$("#next").click(function (e) {
$('.question').hide();
var current_q_id = $(this).attr('id');
// question counter
var current_no = current_q_id.replace("question", ""); // 1 , 2 ,3
var next_no = parseInt(current_no) + 1;
// generate next div id
var next_div_id = '#question'+next_no;
// show next div
$(next_div_id).show();
});
this will work for more that 3 div. you can add max counter and add code to stop processing when end reached.
I have a rather simple question for once. I have delete buttons that open modal pop ups to confirm or deny deletion. I would like these modal pop ups to fade in on click and fade out on cancel. I've tried a few different things already, no luck so far. I just need a simple solution. Thanks in advance. Here's my code
<style>
div.delModal
{
position:absolute;
border:solid 1px black;
padding:8px;
background-color:white;
width:160px;
text-align:right
}
</style>
<script>
function showModal(id) {
document.getElementById(id).style.display = 'block';
//$(this).fadeIn('slow');
}
function hideModal(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<input type ="button" value="delete" onclick="showModal('delAll1')">
<div class="delModal" style="display:none" id="delAll1">
<img src="images/warning.png" /> Are you sure you want to delete vessel and the corresponding tanks?<br />
<input type="button" value="Cancel" class="hide" onclick="hideModal('delAll1')"/>
<input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
</body>
Use .fadeIn() and .fadeOut() on your id parameter ("delAll1") not on this.
function showModal(id) {
$("#" + id).fadeIn('slow');
}
function hideModal(id) {
$("#" + id).fadeOut('slow');
}
By using, $("#" + id) you can select an element by its id, that's "#" + id.
See it here.
Note: Change from onLoad to no wrap (head) under framework on the left sidebar to fix the scope issue.
I wasn't satisfied with your first two comments so I made a new fiddle:
http://jsfiddle.net/dkmkX/
$(document).ready(function () {
$('.deleteButton').each(function (i) {
var whichModal = i; //use this index, a data attribute on the modal, or $(this).parent().parent() to find delete the actual item from the page
var deleteModal = $(this).parent().find('.deleteModal');
$(this).click(function (e) {
deleteModal.fadeIn('slow');
});
$(this).parent().find('.modalDelete').click(function (e) {
deleteModal.fadeOut('slow');
});
$(this).parent().find('.modalCancel').click(function (e) {
deleteModal.fadeOut('slow');
});
});
}); //ready
This will let you add multiple delete buttons each with their own modals.
There's a comment in the JS about how to find out which modal has been pressed, since this solution is ID independent.
Use fadeIn() on the right selector('#'+id), this in the current context would be the global object.
function showModal(id) {
$('#'+id).fadeIn();
//$(this).fadeIn('slow');
}
function hideModal(id) {
$('#'+id).fadeOut();
}
DEMO
Why do not use id for each button like this
<input type ="button" value="show" id="show">
<div class="delModal" style="display:none" id="delAll1">
<img src="images/warning.png" /> Are you sure you want to delete vessel and the corresponding tanks?<br />
<input type="button" value="Cancel" class="hide" id="delete"/>
<input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
And the jquery like this
$("#show").click(function() {
$("#delAll1").fadeIn();
});
$("#delete").click(function() {
$("#delAll1").fadeOut();
});