I have some div i want change selective div position to center means suppose I select the first two div only that div text move to center on click
$("#key").click(function myfunction() {
$("div").css("text-align", center);
});
div {
background-color: yellow;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>
You don't need to give name to click function. It can be anonymous. Also it should be $("div").css("text-align", 'center') to assign a css property.
function myfunction() {
//Not sure why you have this on div.
}
$(document).ready(function() {
$("#key").click(function() {
$("div").css("text-align", 'center')
});
});
div {
background-color: yellow;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>
Set(toggle) selected class on click of element
Remove inline event onselect
Set center property to only those elements which are having selected class
Set property in quotes, $("div").css("text-align", 'center');
$("#key").click(function myfunction() {
$("div.toGrab:not(.selected)").css("text-align", '');
$("div.selected").css("text-align", 'center');
});
$("div.toGrab").on("click", function() {
$(this).toggleClass('selected');
});
div {
background-color: yellow;
margin-top: 20px;
cursor: pointer;
}
.selected {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div class='toGrab'>blabla</div>
<div class='toGrab'>cat</div>
<div class='toGrab'>rose</div>
Just a minor miss, need to assign value as string as shown below:
$("#key").click(function() {
$("div").css("text-align", "center");
});
If you want to give margin than also number will be specified as string as:
$("#key").click(function() {
$("div").css("padding", "50");
});
#aswathy your all code is okay, only you missed "text-align", 'center'
center property should be in single quotes
$("#key").click(function myfunction() {
$("div").css("text-align", 'center');
});
div {
background-color: yellow;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>
Related
I have multiple divs with the same class (.item) and trying to figure out how to independently toggle between 2 divs (#open and #close).
For example, clicking on "A" or "B" toggles between "Open" and "Close" independently.
I've tried placing "(this)" before (.item), but it results in toggling not working at all.
$(this).on("click", function(event) {
$(event.target).closest(".item").toggleClass("highlight").toggleClass("marked unmarked");
if ($(".item").hasClass('unmarked')) {
$("#open").show();
$("#close").hide();
} else if ($(".item").hasClass('marked')) {
$("#close").show();
$("#open").hide();
} else {
$("#close").hide();
$("#open").hide();
}
});
.item {
text-align: center;
margin: 5px;
padding: 5px;
background: #EEEEEE;
}
.highlight {
background: orange;
}
#open,
#close {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item marked">A</div>
<div class="item marked">B</div>
<div class="item marked">C</div>
<div id="open">Open</div>
<div id="close">Close</div>
Are you maybe looking for this behaviour?..
$('.item').on('click', function() {
if ($(this).hasClass('highlight')) {
$(this).removeClass('highlight');
$('#open').hide();
$('#close').show();
} else {
$('.item.highlight').removeClass('highlight');
$(this).addClass('highlight');
$('#open').show();
$('#close').hide();
}
})
.item {text-align: center;margin: 5px;padding: 5px;background: #EEEEEE;}
.highlight {background: orange;}
#open, #close {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div id="open">Open</div>
<div id="close">Close</div>
fiddle
https://jsfiddle.net/Hastig/127newyj/
Assuming I'm understanding your question correctly
My recommendation for this scenario is not to rely on the "this" keyword. $(this).on('click'.... is ridiculously broad. It needs to be contained in other code that would allow for a 'this' to be relative.
Instead, get your element by
var my_elemens = getElementsByClassName('item')
and refer to them by
my_elemens[0] // A
my_elemens[1] // B
my_elemens[2] // C
And then for whatever you're wanting to click, use it, so possibly...
$(myelemens[0]).on('click'....
How to display the line when I hover over my div circle?
#line {
display: none
}
<div id='circle'>
<div id= 'line'>
Assuming you are using jQuery you can use:
var enterHandler = function(){
$("#line").show();
};
var leaveHandler = function(){
$("#line").hide();
};
$("#circle").hover(enterHandler, leaveHandler);
First thing, with your code, it is not clear if the <div>s are siblings are nested. I will give you the solution for both.
Nested
div {
padding: 10px;
background: #99c;
}
#line {
display: none;
background: #9c9;
}
#circle:hover #line {
display: block;
}
<div id='circle'>
<div id='line'>
</div>
</div>
Siblings
div {
padding: 10px;
background: #99c;
}
#line {
display: none;
background: #9c9;
}
#circle:hover + #line {
display: block;
}
<div id='circle'>
</div>
<div id='line'>
</div>
If you are using jQuery then you can simply try:
$('#circle').on('mouseover', function() {
$('#line').show();
});
$('#circle').on('mouseleave', function() {
$('#line').hide();
});
jQuery would be simplest.
$('#circle').hover(function(){
$('#line').css('display','inline');
});
or whatever display property you are going for.
Try this in script tag and use onmouseover and onmouseout events
<script>
function hidediv() {
document.getElementById('line').style.display = 'none';
}
function showdiv() {
document.getElementById('line').style.display = 'block';
}
</script>
<div id='circle' onmouseover="hidediv();" onmouseout="showdiv();" > this is circle
<div id= 'line'>this is line
</div>
</div>
I have a main-div and two divs with the class of container. The div with the class of container has a child div with a class of content with different contents. I'd like for the user to click on their choice of containers and transport its content to main-div. Then when the user clicks on the main-div, I'd like to transport that content back to its original div.
I'm not sure how to detach the content from main-div once it's been passed and reinsert it back into its original parent. I would appreciate any help.
I can't use IDs. I can only uses classes.
HTML
<div class="main-div">
</div>
<div class="container">
<div class="contents">
A
</div>
</div>
<div class="container">
<div class="contents">
B
</div>
</div>
CSS
.main-div {
width: 100wv;
height: 200px;
background: yellow;
cursor: pointer;
}
.container {
width: 40vw;
height: 150px;
border: 2px solid purple;
display: inline-block;
}
.contents {
width: 50px;
height: 50px;
background: green;
}
JS
$('.container').click(function() {
var child = $(this).children();
console.log('child ' + child);
$('.main-div').append(child);
});
$('.main-div').click(function(child) {
console.log('child ' + child);
$('.main-div').detach(child);
});
FIDDLE
Set ids for the containers
<div class="main-div">
</div>
<div class="container" id="container1">
<div class="contents">
A
</div>
</div>
<div class="container" id="container2">
<div class="contents">
B
</div>
</div>
And set a data attribute for the children on click to identify the parent element.
$(function() {
$('.container').click(function() {
var child = $(this).children();
child.attr("data-parentcontainer", this.id);
$('.main-div').append(child);
});
$('.main-div').click(function(child) {
var child = $(this).children();
child.appendTo($("#" + child.data("parentcontainer")));
});
});
JSFIDDLE
Use this JS snippet and let me know if it helps
$('.container').click(function() {
console.log('foo');
var child = $(this).html();
console.log(child);
$('.main-div').append(child);
});
$('.main-div').click(function() {
console.log('foo');
var main = $(this).html();
if(main.length != 0) {
$('.main-div').empty();
}
else
console.log('Main div is empty');
});
External DEMO
You can use .detach() and .appendTo(), but along with that you have to keep some identification to know from that .contents div was picked up. So I am making use of data-address attribute for the parent of picked .contents so as to attach it back there. See inline comments for detailed explanation on what will happen with the code.
$('.main-div').on('click', function(e) {
var elem = $(e.target); //capture click event on .main-div
if (elem.hasClass('contents')) { //check if click was on .contents div
var text = elem.text().trim(); //if yes then get its text
elem.detach();//detach the element
elem.appendTo($('div[data-address=' + text + ']')); //attach it based on attribute selector of jquery
}
});
$('.contents').on('click', function() {
var elem = $(this);//get the element
elem.closest('.container').attr('data-address', elem.text().trim())
//add or update data-address attribute of its closest parent i.e. .container
elem.detach();//detach the element
elem.appendTo($('.main-div')); //append it to .main-div
})
.main-div {
width: 200px;
height: 200px;
background: yellow;
cursor: pointer;
}
.container {
width: 150px;
height: 150px;
border: 2px solid purple;
}
.contents {
width: 50px;
height: 50px;
background: green;
position: relative;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-div">
</div>
<div class="container">
<div class="contents">
A
</div>
</div>
<div class="container">
<div class="contents">
B
</div>
</div>
You need to add some uniqueness on the div that have class container, you can add a class or id so that when reinserting back to the original div we can identify the div.
i don't think is there other solution to reinsert back to the original div, whenever we identify both div uniquely.
please change your html structure so that we can manipulate through jquery.
I have 2 divs that are initially hidden
<div id="whistle" style="display:none;">
<div id="lean" style="display:none;">
I also have a div that is visible
<div id="me" style="display:block">
I have jQuery code that allows only the #whistle or #lean divs to be open at once, their buttons will hide the other.
I currently have code that also hides the #me div, but I would now like the #me div to open back up when both #whistle and #lean are closed.
If you want to see the site, the link is maxdev.tk
The jQuery code is
$(document).ready(function(){
$("#calc").click(function(){
$("#whistle").hide(600);
$("#lean").toggle(900);
});
});
$(document).ready(function(){
$("#whi").click(function(){
$("#lean").hide(600);
$("#whistle").toggle(900);
});
});
This is one way to solve it. Find it also as a pen at the end of this post.
$(document).ready(function() {
function callback() {
if( $('#whistle').hasClass('hidden') && $('#lean').hasClass('hidden') ) {
$('#me').removeClass('hidden');
} else {
$('#me').addClass('hidden');
}
}
$('button[data-for=whistle]').on('click', function() {
$('#whistle').toggleClass('hidden');
$('#lean').addClass('hidden');
callback();
});
$('button[data-for=lean]').on('click', function() {
$('#lean').toggleClass('hidden');
$('#whistle').addClass('hidden');
callback();
});
})
.hidden {
opacity: 0;
height: 0;
overflow: hidden;
padding: 0;
}
div {
background-color: #ccc;
border-radius: 25px;
margin-top: 20px;
padding: 50px;
text-align: center;
transition-duration: 0.4s;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-for="whistle">Whistle</button>
<button data-for="lean">Lean</button>
<div id="whistle" class="hidden">Whistle!</div>
<div id="lean" class="hidden">Lean!</div>
<div id="me">Me!</div>
http://codepen.io/anon/pen/yNJrwe
Add this code to the end of whatever buttons' click function.
if( !$('#whistle').is(':visible') && !$('#lean').is(':visible') ) {
$('#me').css("display","block"); // or use .show();
} else {
$('#me').css("display","none"); // or use .hide();
}
I have tow toggles. I want appear only one toggle at the time. When i click to second toggle then first toggle should be close.
Javascript
$('#bar').click(function () {
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$('#foo1').slideToggle('slow');
});
HTML
<button id="bar">bar</button>
<div id="foo"></div>
<button id="bar1">bar1</button>
<div id="foo1"></div>
CSS
#foo {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
#foo1 {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
jsfiddle
You can use classes instead of id's
$('.bar').click(function () {
$('.foo').hide(); // hide previous elements
$(this).next().show('slow'); // show next element in the DOM (it will be <div> with class 'foo')
});
Example
I did what you want with classes,
the accordion style,
$('#bar, #bar1').click(function () {
var id = '#'+$(this).attr('data-for');
if ($(id).hasClass('open')) {
$(id).toggleClass('open');
}
else if ($('#foo').hasClass('open') || $('#foo1').hasClass('open')) {
$('#foo').toggleClass('open');
$('#foo1').toggleClass('open');
}
else {
$(id).toggleClass('open');
}
});
#foo {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo1 {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo.open, #foo1.open {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bar" data-for="foo">bar</button>
<div id="foo"></div>
<button id="bar1" data-for="foo1">bar1</button>
<div id="foo1"></div>
hi i have two ways which you can achive it
in this case the first div is sliding up when second div is opening
$('#bar').click(function () {
$("div").slideUp("slow");
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});
case 1 in fiddler
in second case am hiding the first div when am opening the second div
$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").hide();
$('#foo1').slideToggle('slow');
});
case 2 in fiddler
i hope my answer helps you :)