Brief Description: Need to switch the position of the div's when i click on them.
Requirement: If i click on hello,world these 2 should switch , if i click on hello2,world2 those 2 will switch.
Here is my code:
Note - i have switched the div's with a checkbox, note - only the top one is switching, i want to achieve the switching on clicking
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
alert("div swapped");
})
$('#check').change(function () {
//alert('check clicked');
if ($(this).is(':checked')) {
$('#div1').insertAfter($('#div2'));
} else {
$('#div1').insertBefore($('#div2'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="div1">Hello</div>
<div id="div2">World</div>
</div>
<br>
<div>
<div id="div1">Hello2</div>
<div id="div2">World2</div>
</div>
<br>
click me to switch Hello,World<input type="checkbox" name="check" id="check"/>
If i click on hello,world these 2 should switch , if i click on hello2,world2 those 2 will switch.
Please help.
If I get you right this is what you're looking for:
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
alert("div swapped");
})
$('.click').click(function (evt) {
var $div = $(evt.target).closest('.switch');
$div.next('.switch').after($div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
<div class="switch">Hello</div>
<div class="switch">World</div>
</div>
<br>
<div class="click">
<div class="switch">Hello2</div>
<div class="switch">World2</div>
</div>
Related
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.
I'm trying to show container on click with localstorage. I mean that when you click the button, CSS classess:is-hidden and is-visible will be saved and remembered by browser.
This is my code:
var comments = document.getElementById("js-comments");
if (comments) {
comments.addEventListener("click", function() {
localStorage.setItem('comments', 'true');
comments.classList.add("is-hidden");
var container = document.getElementById("js-comments__inner");
container.classList.add("is-visible");
if (localStorage.getItem('comments') == 'true') {
container.classList.add("is-visible");
}
});
}
HTML markup:
<div class="comments">
<button class="comments__button" id="js-comments">Load comments</button>
<div class="comments__inner" id="js-comments__inner">
<h3 class="h4">Comments</h3>
</div>
</div>
Idea is: when you click on the button and the comments__inner elements then they receive the CSS clasess.
Right now when I click on li, it is highlighted correctly. However, when I click on the checkbox itself, there is no response. How do I highlight/un-highlight the li when clicking on either the li or the checkbox itself?
I also do not wish to adjust this part of my jQuery: $('.rightP').find('ul').on( (because the elements inside the ul are generated dynamically) if possible.
HTML
<div class = "rightP">
<ul>
<li>
<div class="sender">
<span>
<input type="checkbox">
</span>
</div>
<div id=2 class="message">
<p>test</p>
</div>
...
</li>
...
</ul>
...
</div>
JQuery :
deleteIDs = [];
$('.rightP').find('ul').on("click","li",function(event) {
var checkbox = $(this).find("input[type='checkbox']");
if(checkbox.hasClass('open')){
if(!checkbox.prop("checked") ){
checkbox.prop("checked",true);
$(this).css({'background-color':"#EEEEEE"});
$(this).find('div.message').each(function(){
deleteIDs.push($(this).prop('id'));
});
} else {
checkbox.prop("checked",false);
$(this).css({'background-color':"white"});
$(this).find('div.message').each(function(){
var deleteID = $(this).prop('id');
deleteIDs = $.grep(deleteIDs,function(value){
return (value!=deleteID);
});
});
}
}
});
I think if you want handle li click. You must not use check checkbox. You image and change it src to click.png when click and noclick.png when no click. Hope this help!
Ok if you dont want image i mention you my full code no use image, it work ok
<!DOCTYPE html >
<html >
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class = "rightP">
<ul>
<li>
<div class="sender">
<span>
<input type="checkbox">
</span>
</div>
<div id=2 class="message">
<p>test</p>
</div>
</li>
</ul>
<script>
deleteIDs = [];
var isnotcheck=true;
var clickcheckbox=false;
$('.rightP').find('ul').on("click","input",function(event) {
clickcheckbox=true;
isnotcheck=!isnotcheck;
});
$('.rightP').find('ul').on("click","li",function(event) {
;
if(!clickcheckbox)
{
isnotcheck=!isnotcheck;
}
var checkbox = $(this).find("input[type='checkbox']");
clickcheckbox=false;
if(!isnotcheck ){
checkbox.prop("checked",true);
$(this).css({'background-color':"#EEEEEE"});
$(this).find('div.message').each(function(){
deleteIDs.push($(this).prop('id'));
});
} else {
//alert(checkbox);
checkbox.prop("checked",false);
$(this).css({'background-color':"white"});
$(this).find('div.message').each(function(){
var deleteID = $(this).prop('id');
deleteIDs = $.grep(deleteIDs,function(value){
return (value!=deleteID);
});
});
}
});
</script>
</div>
</body>
</html>
You look two event. li click and checkbox click , two event occured if you click on checkbox if no one event occured. You can see my variable
var isnotcheck=true;
var clickcheckbox=false;
to know click or not click checkbox.
Hope this help!
Rather than this line
$('.rightP').find('ul').on("click","li",function(event) {
You can try
$('.rightP').on("click","ul li",function(event) {
When you're dealing with generated content you should use deferred event handlers, here's an example using Jquery UI to apply the highlight effect when you click either the checkbox or div.
http://jsbin.com/kibicega/1/
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();
});
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.