I am trying to learn jquery keypress to add class system.
I have tryed the following code but it doesn't worked. I have tryed with an ID here. When started the #ttt1 then the the #rb1 background color should change but nothing happened.
What i am doing wrong or what i need to do here? Anyone can tell me ?
This id DEMO from codemep.io
$(document).ready(function() {
var ID = $(this).attr("id");
$("#ttt" + ID).on('keypress', function() {
if ($(this).val().length > 20) {
$("#rb" + ID).addClass("ad");
} else {
$("#rb" + ID).removeClass("ad");
}
});
});
HTML
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt1" placeholder="Write"></textarea>
</div>
<div class="br" id="rb1">Button</div>
</div>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt2" placeholder="Write"></textarea>
</div>
<div class="br" id="rb2">Button</div>
</div>
You are defining a variable ID inside a function which occurs on $(document).ready(). Inside that function the value this will point to the document. What you need to do is to define the variable inside the keypress event handler function.
Use class for selection and then use $(this).attr("id") inside the handler function. Also you can use $(this).closest('div').next() to get the next element in the parent.
DEMO
$(document).ready(function() {
//here value for this is the document object and the id is not useful.
$(".test").on('keyup', function() {
//but here value for this is textarea where keypress event happened.
var ID = this.id;
if (this.value.length > 20) {
$(this).closest('div').next().addClass("ad");
} else {
$(this).closest('div').next().removeClass("ad");
}
});
});
.container {
margin:0px auto;
width:100%;
max-width:500px;
position:relative;
margin-top:100px;
}
.test {
outline:none;
border:1px solid red;
width:100%;
min-height:100px;
}
.br {
background-color:blue;
width:100px;
height:40px;
}
.ad {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt1" placeholder="Write"></textarea></div>
<div class="br" id="rb1">Button</div>
</div>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt2" placeholder="Write"></textarea></div>
<div class="br" id="rb2">Button</div>
</div>
Related
I have the below data coming from another server which is not in my control and when displaying it in the browser I have to provide a solution to
1) Show delete button for the class childElement on hover
2) Click on delete button and delete that childElement div
Is there any way I can do it using CSS/JS or Vuejs ( Dynamically adding Delete button on hover and delete the element on button click) ? Thank You
.childElement {
width:100px;
height:100px;
background-color:#f3f3f3;
margin-top:10px;
padding:10px;
}
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
Your work basically boils down to some script that will find all the elements and auto append elements with listeners.
const childElements = document.querySelectorAll('.childElement');
childElements.forEach(childElement => {
// create button for each childElement
const deleteButton = document.createElement('button');
deleteButton.setAttribute('hidden', '');
deleteButton.innerText = "Click to delete";
// append button to the childElement
childElement.appendChild(deleteButton);
// add event listeners
childElement.addEventListener('mouseenter', event => {
deleteButton.removeAttribute('hidden');
});
childElement.addEventListener('mouseleave', event => {
deleteButton.setAttribute('hidden', '');
});
deleteButton.addEventListener('click', event => {
childElement.setAttribute('hidden', '');
});
});
.childElement {
width: 100px;
height: 100px;
background-color: #f3f3f3;
margin-top: 10px;
padding: 10px;
}
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
You could add an array to your data object called childDivs and which item inside that array contains a boolean showBtn intilially its value is false and the text to be shown inside the div element
UPDATE :
the above described logic could be useful when you could control the data in front-end, but according to the OP's use case, we could add the script given by #GenericUser inside the mounted hook.
new Vue({
el: '#app',
data() {
return {
childDivs: [{
text: 'First',
showBtn: false
},
{
text: 'Second',
showBtn: false
},
{
text: 'Third',
showBtn: false
}
]
}
},
methods: {
remove(i) {
this.childDivs.splice(i, 1)
}
},
mounted() {
const childElements = document.querySelectorAll('.childElement');
childElements.forEach(childElement => {
const deleteButton = document.createElement('button');
deleteButton.setAttribute('hidden', '');
deleteButton.innerText = "delete";
deleteButton.classList.add("btn")
deleteButton.classList.add("btn-danger")
childElement.appendChild(deleteButton);
childElement.addEventListener('mouseenter', event => {
deleteButton.removeAttribute('hidden');
});
childElement.addEventListener('mouseleave', event => {
deleteButton.setAttribute('hidden', '');
});
deleteButton.addEventListener('click', event => {
childElement.setAttribute('hidden', '');
});
});
}
})
.childElement {
width: 100px;
height: 100px;
background-color: #f3f3f3;
margin-top: 10px;
padding: 10px;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<div id="app" data-app>
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
</div>
Try this code
also use jquery to you project
here like this
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div id="videos">
<div class="childElement" id="divOne" >
<div id="delete">X</div>
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
<script>
$(document).ready(function(){
$("#divOne").hover(function(){
$(this).css("visibility", "visible");
}, function(){
$(this).css("visibility", "hidden");
});
$("#delelte").on("click",()=>{
$("#divOne").children().remove();
});
});
</script>
You can try this one with jQuery:
$('body').on('mouseenter', '.childElement', function(e){
$(this).append('<div class="remove">remove it</div>');
$('.childElement').on('mouseleave', function(){
$('.remove').remove();
});
$('body').on('click', '.remove', function(e){
$(this).parent().remove();
});
});
.childElement {
width:100px;
height:100px;
background-color:#f3f3f3;
margin-top:10px;
padding:10px;
}
.remove {
position:absolute;
width: 100px;
height: 30px;
background: #000;
color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
how can I check if it was the last div? If it was I need to remove all classes "ready"
html:
<div class="green"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>
js:
$(function() {
setInterval(showBlock, 1000);
function showBlock() {
var x = $("div:first").addClass("ready");
var c = $("div");
$(".ready").css("display", "block");
if (c.hasClass("ready")) {
$(".ready:last").next().addClass("ready");
}
}
})
;
Looking at your code what I understand is you want display one div after each second. For that I'll suggest following approach.
First add hidden class to all divs and then remove it from first hidden div at each second.
$(function() {
$('div').addClass('hidden');
var i = setInterval(showBlock, 1000);
function showBlock() {
var x = $("div.hidden:first").removeClass("hidden");
if($("div.hidden").length == 0) {
clearInterval(i);
}
}
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="green">Green</div>
<div class="orange">Orange</div>
<div class="red">Red</div>
<div class="green">Green</div>
<div class="orange">Orange</div>
As far as I understand your problem, following solution must work in your case:
$(function() {
setInterval(showBlock, 1000);
function showBlock() {
var ready_divs = $("div.ready").length;
var total_divs = $("div").length;
if(ready_divs!=total_divs){
if(ready_divs==0){
$("div:first").addClass('ready');
}else{
$("div.ready:last").next('div').addClass('ready');
}
}else{
$("div").removeClass('ready')
}
}
});
div{
width: 20px;
height: 20px;
border:1px solid red;
}
div.ready{
border:3px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="green"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>
I am trying to swap a div's position from top on and when I click another div then top div can be swap.
HTML
<div class="wrap top">
<input type="text" value="div1" class="textbox " />
</div>
<div class="wrap">
<input type="text" value="div2" class="textbox " />
</div>
<div class="wrap">
<input type="text" value="div3" class="textbox " />
</div>
jQuery
(function ($) {
$(".wrap").on("click", function () {
if ($(this).index() == 0) {
} else {
$(this).insertBefore($(this).prev());
}
});
}(jQuery));
The fact is I don't want to remove the div which I click instead want to swap the positions around.
How Can I do this using jQuery itself?
I would suggest using css to position the top div and just swap the class as follows:
(function ($) {
$(".wrap").on("click", function () {
if ($(this).index() == 0) {
} else {
$(".wrap").removeClass("top");
$(this).addClass("top");
}
});
}(jQuery));
this will swap whatever you click with the first element.
$(".wrap").on("click", function () {
var $this = $(this);
if ($this.index() == 0) {
} else {
var first = $this.siblings('.wrap').first();
first.insertBefore($this);
$this.prependTo($this.parent());
}
});
if you just want to move the clicked element to the top, you can simply do
$this.prependTo($this.parent());
To swap the two DOM elements using jQuery, you could use something like this: -
(function($) {
$(".wrap").on("click", function(event) {
var index = $(event.target).index();
var first = $(".wrap").first();
if (index > 0) {
$(first).swapWith(this);
}
});
}(jQuery));
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone(true);
var copy_from = $(this).clone(true);
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
.wrap {
height: 100px;
width: 200px;
margin: 10px 10px 10px 10px;
background-color: #2d8cd0;
}
h2 {
color: white;
text-align: center;
padding-top: 20px;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrap">
<h2>1</h2>
</div>
<div class="wrap">
<h2>2</h2>
</div>
<div class="wrap">
<h2>3</h2>
</div>
<div class="wrap">
<h2>4</h2>
</div>
I have a set of dynamically generated div elements like:
<div on-click="selected">one</div>
<div on-click="selected">two</div>
<div on-click="selected">three</div>
<div on-click="selected">four</div>
<div on-click="selected">five</div>
<div on-click="selected">six</div>
<div on-click="selected">seven</div>
I want to change the background color of div on which it is clicked and lose it when another div is clicked.
I could achieve this using tabindex, but I want to retain it until I click it on the another div or clear it intentionally, which tabindex does not provide.
How can I acieve it using javascript?
<div class="radiodiv" onclick=selected(this)>one</div>
<div class="radiodiv" onclick=selected(this)>two</div>
<div class="radiodiv" onclick=selected(this)>three</div>
<div class="radiodiv" onclick=selected(this)>four</div>
<div class="radiodiv" onclick=selected(this)>five</div>
<div class="radiodiv" onclick=selected(this)>six</div>
<div class="radiodiv" onclick=selected(this)>seven</div>
<script>
var divItems = document.getElementsByClassName("radiodiv");
function selected(item) {
this.clear();
item.style.backgroundColor = 'red';
}
function clear() {
for(var i=0; i < divItems.length; i++) {
var item = divItems[i];
item.style.backgroundColor = 'white';
}
}
</script>
Put all Your 'divs' into one div which will be container.
Then, by js, loop trough them and set css for non-selected and different for selected.
code :
function sel(id) {
var divs=document.getElementById('container').getElementsByTagName('div'); //get all divs from div called container
for(var i=0;i<divs.length; i++) {
if(divs[i]!=id) { //if not selected div set .items css
divs[i].className='items';
}
}
id.className='selitem'; //set different css for selected one
}
/* css for non-selected div*/
.items
{
display:block;
width:200px;
background-color:white;
color:black;
cursor:pointer;
margin-bottom:5px;
}
.items:hover
{
background-color:blue;
color:white;
}
/* css for selected div*/
.selitem
{
display:block;
width:200px;
background-color:red;
color:yellow;
cursor:pointer;
margin-bottom:5px;
}
<div id="container">
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
</div>
There is explanation in the code.
Try this:
<div onclick="selected(this)">one</div>
<div onclick="selected(this)">two</div>
<div onclick="selected(this)">three</div>
<div onclick="selected(this)">four</div>
<div onclick="selected(this)">five</div>
<div onclick="selected(this)">six</div>
<div onclick="selected(this)">seven</div>
<script>
function selected(element)
{
var divs=document.getElementsByTagName("div");
divs.forEach(function(i)
{
i.style.backgroundColor="auto";
});
element.style.backgroundColor="red";
}
</script>
FYI, without any loops.
var xxx = null;
function sel(element){
if(xxx != null){
xxx.className = "default";
}
element.className = "selected";
xxx = element;
}
The best way to do that, is called a function in JavaScript, onclick or another. In this function you can create your own code, try to change the CSS properties and you will change the background color.
One example that I created:
function onoverbut(elemento)
{
elemento.style.color= "silver";
elemento.style.fontSize= "25px";
}
name function: onoverbut
attribute: elemento, which is the class or id html, that you need to pass.
I am trying to loop through all the css-table and display how many cells are selected in each one.
I am using a each method but it does not seem to work.
Thanks for any help.
My code is below and this is the fiddle
jquery:
$(function () {
$('.css-table-td').click(function () {
var theTable = $(this).closest('.css-table');
$(this).toggleClass("highligh-cell");
});
});
$("#csstableinfo").click( function() {
var sCount=0;
$(".css-table div").each(function (index) {
// sCount=theTable.find('.css-table-td.highligh-cell').length; this is not workikng
alert (sCount)
});
});
Html:
<div class="css-table">
<div class="css-table-tr">
<div class="css-table-td" id="1">b</div>
<div class="css-table-td" id="2">c</div>
<div class="css-table-td" id="3">e</div>
</div>
</div>
<br/>
<div class="css-table">
<div class="css-table-tr">
<div class="css-table-td" id="1">b</div>
<div class="css-table-td" id="2">c</div>
<div class="css-table-td" id="3">e</div>
</div>
</div>
<br/>
<div class="css-table">
<div class="css-table-tr">
<div class="css-table-td" id="1">b</div>
<div class="css-table-td" id="2">c</div>
<div class="css-table-td" id="3">e</div>
</div>
</div>
<br/>
<INPUT TYPE="submit" id="csstableinfo" VALUE="Count Selected">
css:
.css-table {
display: table;
background-color:#ccc;
}
.css-table-tr {
display: table-row;
height:30px;
}
.css-table-td {
display: table-cell;
border:1px solid #fff;
width: 30px;
text-align:center;
vertical-align:middle;
}
.highligh-cell {
background: #999;
}
$(".css-table .highligh-cell").length will give you the number of selected elements, no need to use each.
$("#csstableinfo").click(function () {
alert($(".css-table .highligh-cell").length);
});
jsfiddle DEMO
EDIT:
To get how many in each table are selected:
$("#csstableinfo").click(function () {
var msg = "";
$(".css-table").each(function(index) {
var sCount = $(this).find('.highligh-cell').length;
msg += "table_" + index + " = " + sCount + "\n";
});
alert(msg);
});
Updated jsfiddle
Are you even getting an alert set? if not, the problem is with the $(".css-table div") call. You shouldn't call it this way since every div you call already containing the css table class.
try using $(".css-table"), if it's not working, it's better working with id's.
P.S. you are using different classes for each row also, so it won't identify the rows.
You just have to increase the counter and make each for the class of selected i.e .highligh-cell:
$("#csstableinfo").click( function() {
var sCount=0;
$(".highligh-cell").each(function (index) {
// sCount=theTable.find('.css-table-td.highligh-cell').length;
sCount++;
});
alert (sCount)
});
Checkout DEMO