I need to generate table code based on div hover count, that means I have number of divisions like table rows and cells on hover of those I need to get count like 7*5 (means 7 rows 5 columns).
For more details please see below Image
How can I get that 7x5 based on position of hover div.
I am attaching general code(Fiddle) please improve this with JavaScript.
.row{
margin-bottom:5px;
}
.cell{
width:20px;
height:20px;
border:1px solid black;
display:inline-block;
}
.row:hover .cell:hover{
background:green;
}
<div class="MainDivision">
<div class="firstrow row">
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="secondrow row">
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="thirdrow row">
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
</div>
<div class="Value">
<span id="noOfRow">n</span>
x
<span id="noOfColumns">n</span>
</div>
Thanks in advance.
use the jquery index() function to get the position of the element
try:
$('.cell').on('hover',function(){
$('#noOfRow').text(parseInt($(this).parent('.row').index())+1);
$('#noOfColumns').text(parseInt($(this).index())+1);
});
or
$('.cell').hover(function(){
$('#noOfRow').text(parseInt($(this).parent('.row').index())+1);
$('#noOfColumns').text(parseInt($(this).index())+1);
});
or with background:
$('.cell').hover(function(){
$('.cell').css({background:'#fff'});
for (var j = 0;j <= parseInt($(this).parent('.row').index());j++ ) {
for (var i = 0;i <= parseInt($(this).index());i++ ) {
$(this).parents('.MainDivision').find('.row').eq(j).find('.cell').eq(i).css({background:'green'});
}
}
$('#noOfRow').text(parseInt($(this).parent('.row').index())+1);
$('#noOfColumns').text(parseInt($(this).index())+1);
});
jsfiddle: http://jsfiddle.net/5ck7w2mt/8/
Related
I must create table without using <table>; only <div>. How I can set width (in percent) on some blocks so that others divide the rest of the space equally.
I can do it with JS but I think its possible with html/css only.
With flexbox it's rather easy to create a table like structure. Specify a flex basis for the table cells (boxes) + a grow and shrink to make them resize properly.
Check this fiddle with the demo :)
https://jsfiddle.net/xs0pmgbL/
HTML code:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
And the CSS code:
#container {
display: flex;
flex-wrap: wrap;
}
.box {
border: 1px solid gray;
background: orange;
flex: 1 1 200px;
height: 100px;
}
I am trying to do a feed in HTML like facebook or twitter that contains the content of database.
I am using an generic div and using javascript to clone that generic div but I cant edit the content of each element after cloning it.
Is that the best way to do a feed in HTML?
JavaScript
for(i=0 ; i < 5 ; i++){0
var item = $("#template2 div.item").clone();
item.getElementById("title").text("aaaa"); //4 testing
$("#main1").append(item);
}
HTML
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12"><hr></div>
</div>
</div>
</div>
clone() returns object that you can manipulate using jQuery.
$('#addFeed').click(function() {
addFeed();
})
function addFeed() {
var item = $("#template2 div.item").clone();
$(item).find("h3").html("New Feed");
$("#main1").append(item);
}
.feed {
border: 1px solid black;
width: 150px;
}
.item {
background-color: lightgreen;
}
.item:nth-child(odd) {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12">
<hr>
</div>
</div>
</div>
</div>
<div id="main1" class="feed">
</div>
<button id="addFeed">Add Feed</button>
I have a trouble with jquery index function.
I have div with another divs in it, and I want to figure out if its first, second or third div inside that parent div.
So ia have something like this:
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
Now, when I click on the last child for example, the event.target will be last div with class row.
Now I do:
$(event.target).parent().index($(event.target));
But this fails as its returning me value -1 insted of 2 ( if indexed from zero ).
Do you have any idea? Thank you.
EDIT:
So, I'm simplified the structure first and thought I just need to understand the concept, but looks like you need to know whole structure so here it is:
<div class="ten wide column schichtplan-body">
<div class="row">
<div class="eight wide column"></div>
<div class="eight wide column schicht-buttons">
<!-- Radio buttons for schicht selection -->
<div class="ui form">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="schichtMode" value="8hx3">
<label>8 Stunde schicht</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="schichtMode" value="12hx2">
<label>12 Stude schicht</label>
</div>
</div>
</div>
</div>
<!-- End of radio form -->
</div>
</div>
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active"> {{day.date.sec|date('d.m.Y')}}</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">F</div>
<div class="">N</div>
<div class="">frei</div>
</div>
</div>
</div>
I click on one of the buttons, but I want to find out the index of the .ui.grid.row in which the buttons are. So I need to go throught few parent element and then find which .ui.grid.row is actually selected relatively to .ten.wide.column
You need to use the following jQuery :
$(".column div").click(function () {
alert( $(this).index() );
});
NOTE : This will return a zero-based index
See this below :
$(".column div").click(function () {
alert( $(this).index() );
});
.row {
background-color: orange;
margin: 10px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
EDIT : Based on my understanding of the edited part of the question, here's the answer. The second alert will give you the index of the ui grid row (which will contain the clicked element) with respect to the main ten wide column. I have added coloring to make it clear. Please see this below :
I am not sure if javascript's alerts do display here. In case it doesn't, check out this fiddle : http://jsfiddle.net/ynu0x0jw/
$(".button-row > div").click(function () {
$(this).addClass('red');
var currentElementIndex = $(this).index();
var parentIndex = $(this).closest(".ui.grid.row").index();
alert("Index of the selected element with respect to its parent (div with class of ui.grid.row) is " + currentElementIndex);
$(this).removeClass('red');
$(this).closest(".ui.grid.row").addClass('red');
alert("Index of the selected element's parent (ui.grid.row) with respect to the main container (ui.grid.row) is " + parentIndex);
$(this).closest(".ui.grid.row").removeClass('red');
});
.button-row > div {
background-color: orange;
cursor: pointer;
margin: 10px;
height: 50px;
text-align: center;
transition: all 0.4s ease-in;
}
.ui.grid.row {
background-color: white;
transition: all 0.4s ease-in;
}
.button-row > div.red, .ui.grid.row.red {
background-color: red;
}
<div class="ten wide column schichtplan-body">
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active">First ui.grid.row (Index : 0)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">A (Index : 0)</div>
<div class="">B (Index : 1)</div>
<div class="">C (Index : 2)</div>
</div>
</div>
</div>
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active">Second ui.grid.row (Index : 1)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">D (Index : 0)</div>
<div class="">E (Index : 1)</div>
<div class="">F (Index : 2)</div>
</div>
</div>
</div>
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active">Third ui.grid.row (Index : 2)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">G (Index : 0)</div>
<div class="">H (Index : 1)</div>
<div class="">I (Index : 2)</div>
</div>
</div>
</div>
<div class="ui grid row" id="III">
<div class="four wide column">
<div class="date-field active">Fourth ui.grid.row (Index : 3)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">J (Index : 0)</div>
<div class="">K (Index : 1)</div>
<div class="">L (Index : 2)</div>
</div>
</div>
</div>
</div>
Hope this helps!!!
You need to use $(this).index() or $(event.target).index() asssuming you want the index of the specific row. Below example is with the .click, but it will work as long as this or event.target is one of the row div.
$('div.row').on('click', function(event) {
$('#result').html($(event.target).index()); //or use $(this).index()
});
.row {
height: 10px;
background-color: lightblue;
margin: 5px;
}
#result {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div>Index is: <span id="result"></span>
</div>
I'm trying to write a CSS and JavaScript to center divs inside the class viralign vertically.
<div id="welcome" class="width80 pad5">
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
text
</div>
</div>
</div>
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
text
</div>
</div>
</div>
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
text
</div>
</div>
</div>
</div>
css clases
.width80{
width:80%;
margin:0px auto;}
.pad5{padding:5px;}
.col-3{
width:33.33%;
}
JavaScript code
function virAlignNavBar(){
var vircon = document.getElementsByClassName('vircon');
var viralign = document.getElementsByClassName('viralign');
for(var i=0; i < vircon.length; i++){
var x=vircon[i].offsetHeight;
var y=viralign[i].offsetHeight;
viralign[i].style.top=((x/2)-(y/2)+"px");
viralign[i].style.position="absolute";
vircon[i].style.position="relative";
}
}
The problem is that all divs with class vircon appear above each other.
How can I solve this?
jsfiddle
I need the divs to be like this. the col-3 class devides the area between the three divs,and the functoin makes the area above each of the three divs equal to the ares below it.
You must add float="right" to your function.
jsfiddle
Remove position absolute and relative.
function virAlignNavBar(){
var vircon = document.getElementsByClassName('vircon');
var viralign = document.getElementsByClassName('viralign');
for(var i=0; i < vircon.length; i++){
var x=vircon[i].offsetHeight;
var y=viralign[i].offsetHeight;
viralign[i].style.top=((x/2)-(y/2)+"px");
//viralign[i].style.position="absolute";
//vircon[i].style.position="relative";
}
}
virAlignNavBar();
.width80{
width:80%;
margin:0px auto;}
.pad5{padding:5px;}
.col-3{
width:30.33%;
margin-right:10px;
float: left;
text-align: center;
}
<div id="welcome" class="width80 pad5">
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
dfghjk
</div>
</div>
</div>
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
dfghjk
</div>
</div>
</div>
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
dfghjk
</div>
</div>
</div>
</div>
Working JSFilddle http://jsfiddle.net/anqy6Lxo/3/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a requirement of toggling the color of a clicked <div> from red to green & green to red. I am using jquery in my page. Please suggest me the best possible code to fulfill the requirement.
My code is as follows:
<htmL>
<head>
<script src="jquery-1.10.2.js">
window.onload = initPage;
function initPage() {
}
function tileclick() {
}
</script>
<style>
div.table{
display: table;
}
div.row{
display: table-row;
border-style:solid;
border-color: black;
border-width:15px;
padding-top:35px;
padding-bottom:35px;
padding-right:50px;
padding-left:50px;
margin-top:25px;
margin-bottom:25px;
margin-right:50px;
margin-left:50px;
}
div.cell{
display: table-cell;
border-style: solid;
border-width:15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
font-weight:5000;
font-size:200%;
background: #00FF00;
}
</style>
</head>
<body>
<div id="table" class="table">
<div id="r1" class="row">
<div id="sys55" class="cell">55
</div>
<div id="sys56" class="cell">56
</div>
<div id="sys57" class="cell">57
</div>
<div id="sys58" class="cell">58
</div>
<div id="sys59" class="cell">59
</div>
<div id="sys60" class="cell">60
</div>
<div id="sys61" class="cell">61
</div>
<div id="sys62" class="cell">62
</div>
<div id="sys63" class="cell">63
</div>
<div id="sys64" class="cell">64
</div>
<div id="sys65" class="cell">65
</div>
</div>
<div id="r2" class="row">
<div id="sys54" class="cell">54
</div>
<div id="sys53" class="cell">53
</div>
<div id="sys52" class="cell">52
</div>
<div id="sys51" class="cell">51
</div>
<div id="sys50" class="cell">50
</div>
<div id="sys49" class="cell">49
</div>
<div id="sys48" class="cell">48
</div>
<div id="sys47" class="cell">47
</div>
<div id="sys46" class="cell">46
</div>
<div id="sys45" class="cell">45
</div>
<div id="sys44" class="cell">44
</div>
</div>
<div id="r3" class="row">
<div id="sys33" class="cell">33
</div>
<div id="sys34" class="cell">34
</div>
<div id="sys35" class="cell">35
</div>
<div id="sys36" class="cell">36
</div>
<div id="sys37" class="cell">37
</div>
<div id="sys38" class="cell">38
</div>
<div id="sys39" class="cell">39
</div>
<div id="sys40" class="cell">40
</div>
<div id="sys41" class="cell">41
</div>
<div id="sys42" class="cell">42
</div>
<div id="sys43" class="cell">43
</div>
</div>
<div id="r4" class="row">
<div id="sys32" class="cell">32
</div>
<div id="sys31" class="cell">31
</div>
<div id="sys30" class="cell">30
</div>
<div id="sys29" class="cell">29
</div>
<div id="sys28" class="cell">28
</div>
<div id="sys27" class="cell">27
</div>
<div id="sys26" class="cell">26
</div>
<div id="sys25" class="cell">25
</div>
<div id="sys24" class="cell">24
</div>
<div id="sys23" class="cell">23
</div>
<div id="sys22" class="cell">22
</div>
</div>
<div id="r5" class="row">
<div id="sys11" class="cell">11
</div>
<div id="sys12" class="cell">12
</div>
<div id="sys13" class="cell">13
</div>
<div id="sys14" class="cell">14
</div>
<div id="sys15" class="cell">15
</div>
<div id="sys16" class="cell">16
</div>
<div id="sys17" class="cell">17
</div>
<div id="sys18" class="cell">18
</div>
<div id="sys19" class="cell">19
</div>
<div id="sys20" class="cell">20
</div>
<div id="sys21" class="cell">21
</div>
</div>
<div id="r6" class="row">
<div id="sys10" class="cell">10
</div>
<div id="sys09" class="cell">09
</div>
<div id="sys08" class="cell">08
</div>
<div id="sys07" class="cell">07
</div>
<div id="sys06" class="cell">06
</div>
<div id="sys05" class="cell">05
</div>
<div id="sys04" class="cell">04
</div>
<div id="sys03" class="cell">03
</div>
<div id="sys02" class="cell">02
</div>
<div id="sys01" class="cell">01
</div>
</div>
</div>
</body>
</html>
My initial page should appear green in color as shown below.
Each block should toggle green to red when clicked & vice-versa.
Please help me achieve this requirement.
You can use a start with selector to match all you divs that id starts with sys and then use toggleClass to switch the classes.
Code:
$("div[id^='sys']").click(function(){
$(this).toggleClass("cell cell2");
});
Demo: http://jsfiddle.net/IrvinDominin/tsL8a/
Use toggleClass() in jquery
<style>
.red{
background : red;
}
</style>
$(function() {
$(".cell").on("click" , function(e) {
$(this).toggleClass("cell red");
});
});
You can use jQuery toggleClass method (See the doc).
Add a class for red cells like :
.red_cell {
background-color: red;
}
Then something like :
$('.cell').click(function() {
$(this).toggleClass('red_cell');
});
use:
$(".cell").click(function(){
var clr = $( this ).css("background-color").toString();
var clr = (clr == "rgb(0, 255, 0)" ? "rgb(255,0,0)" : "rgb(0, 255, 0)");
$(this).css({
"background":""+clr+""
});
});
without changing css markup.
DEMO. hope it'll help you. cheers !
$(".cell").click(function(){
if($(this).hasClass('red')) {
$(this).removeClass('red');
}else{
$(this).addClass('red');
}
});
and simply add a class to CSS.