With HTML/CSS, how to create a non-rectangular red container like this:
which is basically a "rectangle avoiding a top right rectangle":
Is there another solution than having float: right; for the top right blue container?
Reason: I'm looking for other methods than float: right because of an Electron bug that prevent clicks to be caught correctly on the top right blue container, when the red container is a "draggable" title bar for an app window.
The following snippet works perfectly, but I'm looking for another solution without float: right:
for (var i = 0; i < 50; i++)
document.getElementById("topleft").innerHTML += "<button>xyz" + i + "</button>";
* { margin: 0; }
#topright { float: right; width: 100px; background-color: blue; -webkit-app-region: no-drag; }
#topright:hover { background-color: black; }
#topleft { background-color: red; -webkit-app-region: drag; padding: 10px; }
<div id="topright" onclick="alert();">Click here!</div>
<div id="topleft"></div>
finally! it took a little doing but I believe this should do it.
function myFunction2(){
alert('i was clicked')
}
function myFunction(){
for (let i = 0; i < 50; i++){
let x = 'a0' + i
let id = 'a' + (x).slice(-2)
document.getElementById(id).innerHTML = 'xyz' +i;
}
var end = 0;
var count = 0;
var left =[];
for (let i = 0; i < 25;i++){
let y = 30 + i*20;
let temp = document.elementFromPoint(18, y);
if (document.elementFromPoint(18, y)==null)return;
if (temp.tagName != 'SPAN')break;
let inner = temp.innerHTML;
let inArray = inner.split('z')
var start = parseInt(inArray[1]);
left.push(start)
}
left[left.length-1] = 50
for (var i = 0;i < left.length;i++){
for(let j = left[i]; j >= end; j--){
let x = 'a0' + j
let id = 'a' + (x).slice(-2)
if (document.getElementById(id) != null)
document.getElementById(id).innerHTML = 'xyz' + count;
count++;
}
end = left[i]+1
}
} window.addEventListener('resize', myFunction);
div{
margin:0;padding:0;
}
#better{
margin-top:20px;
display:block;
background:green;
width:100%;
position:relative;
padding:10px;
}
#abs{
display:inline-flex;
justify-content:center;
position:absolute;
background:blue;
height:30px;
width:100px;
top:0%;
right:0%;
}
span{
background:white;
border:solid 1px grey;
display:inline-block;
font-size:16px;
}
#fx{
display:flex;
flex-flow: row-reverse wrap;
justify-content:flex-end;
}
#x{
width:100px;
visibility:hidden;
}
<html>
<body >
<div id='better' >
<div id='fx'>
<span id='x'></span>
<span id='a00'>xyz0</span><span id='a01'>xyz1</span><span id='a02'>xyz2</span><span id='a03'>xyz3</span><span id='a04'>xyz4</span><span id='a05'>xyz5</span><span id='a06'>xyz6</span><span id='a07'>xyz7</span><span id='a08'>xyz8</span><span id='a09'>xyz9</span><span id='a10'>xyz10</span><span id='a11'>xyz11</span>
<span id='a12'>xyz12</span><span id='a13'>xyz13</span><span id='a14'>xyz14</span><span id='a15'>xyz15</span><span id='a16'>xyz16</span><span id='a17'>xyz17</span><span id='a18'>xyz18</span><span id='a19'>xyz19</span><span id='a20'>xyz20</span><span id='a21'>xyz21</span><span id='a22'>xyz22</span><span id='a23'>xyz23</span>
<span id='a24'>xyz24</span><span id='a25'>xyz25</span><span id='a26'>xyz26</span><span id='a27'>xyz27</span><span id='a28'>xyz28</span><span id='a29'>xyz29</span><span id='a30'>xyz30</span><span id='a31'>xyz31</span><span id='a32'>xyz32</span><span id='a33'>xyz33</span><span id='a34'>xyz34</span><span id='a35'>xyz35</span>
<span id='a36'>xyz36</span><span id='a37'>xyz37</span><span id='a38'>xyz38</span><span id='a39'>xyz39</span><span id='a40'>xyz40</span><span id='a41'>xyz41</span><span id='a42'>xyz42</span><span id='a43'>xyz43</span><span id='a44'>xyz44</span><span id='a45'>xyz45</span><span id='a46'>xyz46</span><span id='a47'>xyz47</span>
<span id='a48'>xyz48</span><span id='a49'>xyz49</span><span id='a50'>xyz50</span>
</div>
<div id='abs'>
<button type='button' onclick='myFunction2()'>Click me!</button>
</div>
</div>
</body>
</html>
Related
I've created a table that is contained within a section of my webpage and can scroll over the x and y axis to view everything. My problem so far is that the table can scroll along the y-axis when overflowing, but not the x-axis.
In my CSS, I've specified that on the overflow of both, they should both be able to scroll, but only the y-axis works. How would I ensure that the x-axis is scrollable also in order to see the rest of my table?
HTML:
<div id="table-wrapper-tasks">
<div id="table-scroll-tasks">
<script>
var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;
var rowT = null;
var drawTable = '<table class="tableTasks">';
for (let i = 0; i < rows; i++) {
drawTable += '<tr>';
for(let j = 0; j < cols; j++) {
drawTable += '<td>Testing</td>';
}
drawTable += '</tr>';
}
drawTable += '</table>';
document.write(drawTable);
</script>
</div>
</div>
CSS:
/* Settings for Tasks table */
.tableTasks {
float:right;
width:100%;
margin-top:5px;
empty-cells: show;
height:1000px;
line-height: 35px;
width: 100px;
}
#table-wrapper-tasks {
position: relative;
width:81%;
float:right;
}
#table-scroll-tasks {
overflow-x: scroll;
overflow-y: scroll;
max-height: 520px;
}
The problem is where you are specifying float property. If you remove it things should work fine.
.tableTasks {
width:100%;
margin-top:5px;
empty-cells: show;
height:1000px;
line-height: 35px;
width: 100px;
}
So I am not using any CSS framework like bootstrap to get responsiveness out of the box which is why I am having trouble making responsive layout.
Please see jsbin
I essentially what to auto-resize colorful boxes based on browser window size eg that should shrink or grow automatically based on window size. Colorful boxes inside their parent should always be in horizontal row but should be able to adjust their width and height like this example.
I tried using flex-wrap: nowrap; but it didn't do the trick :(
Please note that colorful boxes are using position:absolute with parent's position being relative. I am also adding left css property to these boxes via JavaScript to change their position for the sake of sliding animation.
function Carousel(options) {
options = options || {};
// options vars
let speed = options.speed || 1; // animation speed in seconds
let width = options.width || 200;
let height = options.height || 100;
let space = options.space || 30;
// other vars
let container = document.querySelector('.carousel-container .carousel');
let slides = container.querySelectorAll('.carousel-item');
let curSlide = null;
let prevSlide = null;
let nextSlide = null;
if (areSlidesPresent()) {
setup();
}
// functions //
function setup() {
// we assume first slide to be current one as per UI requirements
//slides[0].classList.add("current");
curSlide = slides[0];
// we assume second slide to be next as per UI requirements
nextSlide = slides[1];
// we assume last slide to be prev as per UI requirements
prevSlide = slides[slides.length - 1];
// position elements horizontally
positionSlides();
}
function areSlidesPresent() {
return slides.length > 0;
}
this.getCurrentSlide = function() {
return curSlide;
}
this.getNextSlide = function() {
return nextSlide;
}
this.getPreviousSlide = function() {
return prevSlide;
}
this.setNextSlide = function() {
if (areSlidesPresent()) {
let allSlides = [];
// build new order of slides
allSlides.push(nextSlide);
// middle ones
for (let i = 2; i < slides.length; i++) {
allSlides.push(slides[i]);
}
allSlides.push(curSlide);
// now add to DOM after cleaning previous slide order
for (let i = 0; i < allSlides.length; i++) {
container.appendChild(allSlides[i]);
}
slides = allSlides;
setup();
}
}
this.setPreviousSlide = function() {
if (areSlidesPresent()) {
let allSlides = [];
// build new order of slides
allSlides.push(prevSlide);
allSlides.push(curSlide);
// middle ones
for (let i = 1; i < slides.length - 1; i++) {
allSlides.push(slides[i]);
}
// now add to DOM after cleaning previous slide order
for (let i = 0; i < allSlides.length; i++) {
container.appendChild(allSlides[i]);
}
slides = allSlides;
setup();
}
}
function positionSlides() {
curSlide.style.marginLeft = '0px';
for (let i = 0; i < slides.length; i++) {
slides[i].querySelector('.carousel-content').style.width = (width) + 'px';
slides[i].querySelector('.carousel-content').style.height = (height) + 'px';
let elementWidth = getStyle(nextSlide, 'width');
if (i === 0) {
slides[i].style.zIndex = -10;
//slides[i].style.opacity = '1';
slides[i].querySelector('.carousel-content').style.width = (width + 50) + 'px';
slides[i].querySelector('.carousel-content').style.height = (height + 50) + 'px';
} else {
slides[i].style.zIndex = 0;
//slides[i].style.opacity = '0.7';
}
if (i > 0) {
slides[i].style.marginLeft = (space * 2) + 'px';
elementWidth = parseInt(elementWidth, 10) + space;
}
slides[i].style.transition = speed + 's';
slides[i].style.left = (elementWidth * i) + 'px';
}
}
function getStyle(el, prop) {
return window.getComputedStyle(el, null).getPropertyValue(prop)
.replace('px', '')
.replace('em', '');
}
}
// utility
function log(text) {
console.log(text);
}
var options = {
speed: 1, // animation speed
width: 250, // slide width
height: 150, // slide height
space: 25 // space in px between slides
};
var carousel = new Carousel(options);
function selectCurrent() {
log(carousel.getCurrentSlide());
}
function selectNext() {
carousel.setNextSlide();
}
function selectPrev() {
carousel.setPreviousSlide();
}
.carousel-container {
width: auto;
height: auto;
margin: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.carousel .carousel-item {
position: absolute;
transition: transform .5s ease-in-out;
color: #fff;
margin-left: 10px;
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255, 255, 255, 0.2)));
}
.carousel .carousel-item:first-child .carousel-content {
opacity: 1;
}
.carousel .carousel-item .carousel-title {
font-size: 24px;
text-align: center;
}
.carousel .carousel-item .carousel-content {
font-size: 18px;
font-weight: bold;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
/* temp css below */
body {
background: #2C374A;
padding-top: 150px;
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
margin-top: 150px;
}
.button {
color: #444;
padding: 10px;
width: 60px;
cursor: pointer;
background: #CCC;
text-align: center;
font-weight: bold;
border-radius: 5px;
border-top: 1px solid #FFF;
box-shadow: 0 5px 0 #999;
transition: box-shadow 0.1s, top 0.1s;
margin: 10px;
}
.button:hover,
.button:hover {
color: #000;
}
.button:active,
.button:active {
top: 104px;
box-shadow: 0 1px 0 #999;
}
<div class="carousel-container">
<div class="carousel">
<div class="carousel-item">
<div class="carousel-title">Make a Call</div>
<div class="carousel-content" style="background:#0E6DE8;border:10px solid #78B1FA">Slide One</div>
</div>
<div class="carousel-item">
<div class="carousel-title">Send a Message</div>
<div class="carousel-content" style="background:#D90080;border:10px solid #E357A9">Slide Two</div>
</div>
<div class="carousel-item">
<div class="carousel-title">Send a Picture</div>
<div class="carousel-content" style="background:#FEC601;border:10px solid #FFDD64">Slide Three</div>
</div>
<div class="carousel-item">
<div class="carousel-title">Send a Video</div>
<div class="carousel-content" style="background:#3DB365;border:10px solid #90E0AB">Slide Four</div>
</div>
</div>
</div>
<div class="navigation">
<div class="button" onclick="selectNext()">Next</div>
<div class="button" onclick="selectCurrent()">Select</div>
<div class="button" onclick="selectPrev()">Prev</div>
</div>
Problem here was:
Width was hard-coded in your JS, so if width is in px it can't be responsive.
By applying position:absolute to you carousel-item, it forced the children to get out of the box.
What I did:
Got rid of the static width and other functionalities related to width from your JS
Removed position:absolute from carousel-item
Let me know if this is what you are expecting.
function Carousel(options) {
options = options || {};
// options vars
let speed = options.speed || 1; // animation speed in seconds
// let width = options.width || 100;
let height = options.height || 100;
let space = options.space || 30;
// other vars
let container = document.querySelector('.carousel-container .carousel');
let slides = container.querySelectorAll('.carousel-item');
let curSlide = null;
let prevSlide = null;
let nextSlide = null;
if (areSlidesPresent()) {
setup();
}
// functions //
function setup() {
// we assume first slide to be current one as per UI requirements
//slides[0].classList.add("current");
curSlide = slides[0];
// we assume second slide to be next as per UI requirements
nextSlide = slides[1];
// we assume last slide to be prev as per UI requirements
prevSlide = slides[slides.length - 1];
// position elements horizontally
positionSlides();
}
function areSlidesPresent() {
return slides.length > 0;
}
this.getCurrentSlide = function() {
return curSlide;
}
this.getNextSlide = function() {
return nextSlide;
}
this.getPreviousSlide = function() {
return prevSlide;
}
this.setNextSlide = function() {
if (areSlidesPresent()) {
let allSlides = [];
// build new order of slides
allSlides.push(nextSlide);
// middle ones
for (let i = 2; i < slides.length; i++) {
allSlides.push(slides[i]);
}
allSlides.push(curSlide);
// now add to DOM after cleaning previous slide order
for (let i = 0; i < allSlides.length; i++) {
container.appendChild(allSlides[i]);
}
slides = allSlides;
setup();
}
}
this.setPreviousSlide = function() {
if (areSlidesPresent()) {
let allSlides = [];
// build new order of slides
allSlides.push(prevSlide);
allSlides.push(curSlide);
// middle ones
for (let i = 1; i < slides.length - 1; i++) {
allSlides.push(slides[i]);
}
// now add to DOM after cleaning previous slide order
for (let i = 0; i < allSlides.length; i++) {
container.appendChild(allSlides[i]);
}
slides = allSlides;
setup();
}
}
function positionSlides() {
curSlide.style.marginLeft = '0px';
for (let i = 0; i < slides.length; i++) {
// slides[i].querySelector('.carousel-content').style.width = (width) + 'px';
slides[i].querySelector('.carousel-content').style.height = (height) + 'px';
let elementWidth = getStyle(nextSlide, 'width');
if (i === 0) {
slides[i].style.zIndex = -10;
//slides[i].style.opacity = '1';
// slides[i].querySelector('.carousel-content').style.width = (width + 50) + 'px';
slides[i].querySelector('.carousel-content').style.height = (height + 50) + 'px';
} else {
slides[i].style.zIndex = 0;
//slides[i].style.opacity = '0.7';
}
if (i > 0) {
slides[i].style.marginLeft = (space * 2) + 'px';
// elementWidth = parseInt(elementWidth, 10) + space;
}
slides[i].style.transition = speed + 's';
// slides[i].style.left = (elementWidth * i) + 'px';
}
}
function getStyle(el, prop) {
return window.getComputedStyle(el, null).getPropertyValue(prop)
.replace('px', '')
.replace('em', '');
}
}
// utility
function log(text) {
console.log(text);
}
var options = {
speed: 1, // animation speed
width: 250, // slide width
height: 150, // slide height
space: 25 // space in px between slides
};
var carousel = new Carousel(options);
function selectCurrent() {
log(carousel.getCurrentSlide());
}
function selectNext() {
carousel.setNextSlide();
}
function selectPrev() {
carousel.setPreviousSlide();
}
.carousel-container {
height: auto;
margin: 25px;
display: flex;
}
.carousel {
flex: 1;
height: 100%;
width: 100vh;
/* overflow:hidden; */
display: flex;
align-items: center;
justify-content: center;
}
.carousel .carousel-item {
transition: transform .5s ease-in-out;
color: #fff;
flex: 1;
margin-left: 10px;
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255, 255, 255, 0.2)));
}
.carousel .carousel-item:first-child .carousel-content {
opacity: 1;
}
.carousel .carousel-item .carousel-title {
font-size: 24px;
text-align: center;
}
.carousel .carousel-item .carousel-content {
font-size: 18px;
font-weight: bold;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
/* temp css below */
body {
background: #2C374A;
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
}
.button {
color: #444;
padding: 10px;
width: 60px;
cursor: pointer;
background: #CCC;
text-align: center;
font-weight: bold;
border-radius: 5px;
border-top: 1px solid #FFF;
box-shadow: 0 5px 0 #999;
transition: box-shadow 0.1s, top 0.1s;
margin: 10px;
}
.button:hover,
.button:hover {
color: #000;
}
.button:active,
.button:active {
box-shadow: 0 1px 0 #999;
}
<div class="navigation">
<div class="button" onclick="selectNext()">Next</div>
<div class="button" onclick="selectCurrent()">Select</div>
<div class="button" onclick="selectPrev()">Prev</div>
</div>
<div class="carousel-container">
<div class="carousel">
<div class="carousel-item">
<div class="carousel-title">Make a Call</div>
<div class="carousel-content" style="background:#0E6DE8;border:10px solid #78B1FA">Slide One</div>
</div>
<div class="carousel-item">
<div class="carousel-title">Send a Message</div>
<div class="carousel-content" style="background:#D90080;border:10px solid #E357A9">Slide Two</div>
</div>
<div class="carousel-item">
<div class="carousel-title">Send a Picture</div>
<div class="carousel-content" style="background:#FEC601;border:10px solid #FFDD64">Slide Three</div>
</div>
<div class="carousel-item">
<div class="carousel-title">Send a Video</div>
<div class="carousel-content" style="background:#3DB365;border:10px solid #90E0AB">Slide Four</div>
</div>
</div>
</div>
I want to create a table which can be scrolled horizontally. The number of columns is dynamic. I want to achieve when we scroll the table horizontally the first column needs to be fixed/frozen. I have tried the following css. The first column is fixed alright but, second, third columns are hidden under the fixed column.
.mydiv {
overflow-y: scroll;
}.headcol {
position:absolute;
width: 100px;
text-align:center;
background-color: #4CAF50;
color: white;
font-family:arial;
font-size:13px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #c4c0c0;
}
.tablemy {
border-collapse: collapse;
border: 1px solid #c4c0c0;
}
.thmy {
text-align:center;
background-color: #4CAF50;
color: white;
font-family:arial;
font-size:13px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #c4c0c0;
}
.tdmy {
white-space: nowrap;
padding:8px; border-left:1px solid #ccc; border-top:1px solid #ccc;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
font-size:12px;
font-family:arial;
border: 1px solid #c4c0c0;
color:#585858;
}
.trmy:nth-child(odd) {
background-color:#F5F5F5;
}
tr:nth-child(even) {
background-color:#ffffff;
}
And my table is
I'm creating my table in javascript.
$(window).load(function(){
var customers = new Array();
customers.push(["TN04 AH 0253", "55"]);
customers.push(["TN04 AF 8830", "67"]);
customers.push(["TN37 CM 1249", "33"]);
customers.push(["TN19 F 9175", "47"]);
customers.push(["TN37CM 1932", "0"]);
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
var dateArray = getDates(firstDay, lastDay);
// Create a HTML Table element.
var table = document.createElement("TABLE");
table.setAttribute('class', 'tablemy');
table.border = "1";
// Get the count of columns.
var columnCount = customers[0].length;
var row = table.insertRow(-1);
for (var i = 0; i < dateArray.length; i++) {
var headerCell = document.createElement("TH");
if (i === 0) {
headerCell.setAttribute('class', 'headcol');
} else {
headerCell.setAttribute('class', 'thmy');
}
//headerCell.setAttribute('class', 'thmy');
headerCell.innerHTML = dateArray[i];
row.appendChild(headerCell);
}
// Add the data rows.
for (var i = 0; i < customers.length; i++) {
row = table.insertRow(-1);
row.setAttribute('class', 'trmy');
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
if (j === 0) {
cell.setAttribute('class', 'headcol');
} else {
cell.setAttribute('class', 'tdmy');
}
//cell.setAttribute('class', 'tdmy');
cell.innerHTML = customers[i][j];
}
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
})
function getDates(date1, date2) {
var day = 1000 * 60 * 60 * 24;
var diff = (date2.getTime() - date1.getTime())/day;
var dateArray = new Array();
dateArray.push("Unit/Count");
for(var i=0; i<=diff; i++)
{
var xx = date1.getTime() + day * i;
var yy = new Date(xx);
var strDate = yy.getDate() + "/" + (yy.getMonth() + 1);
dateArray.push(strDate);
}
return dateArray;
}
I think you need to set position: fixed for 1st column and to make all other columns visible you need to set padding-left: 130px; (which is equal to width of first column) for .tablemy :
function getDates(date1, date2) {
var day = 1000 * 60 * 60 * 24;
var diff = (date2.getTime() - date1.getTime())/day;
var dateArray = new Array();
dateArray.push("Unit/Count");
for(var i=0; i<=diff; i++)
{
var xx = date1.getTime() + day * i;
var yy = new Date(xx);
var strDate = yy.getDate() + "/" + (yy.getMonth() + 1);
dateArray.push(strDate);
}
return dateArray;
}
var customers = new Array();
customers.push(["TN04 AH 0253", "55"]);
customers.push(["TN04 AF 8830", "67"]);
customers.push(["TN37 CM 1249", "33"]);
customers.push(["TN19 F 9175", "47"]);
customers.push(["TN37CM 1932", "0"]);
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
var dateArray = getDates(firstDay, lastDay);
// Create a HTML Table element.
var table = document.createElement("TABLE");
table.setAttribute('class', 'tablemy');
table.border = "1";
// Get the count of columns.
var columnCount = customers[0].length;
var row = table.insertRow(-1);
for (var i = 0; i < dateArray.length; i++) {
var headerCell = document.createElement("TH");
if (i === 0) {
headerCell.setAttribute('class', 'headcol');
} else {
headerCell.setAttribute('class', 'thmy');
}
//headerCell.setAttribute('class', 'thmy');
headerCell.innerHTML = dateArray[i];
row.appendChild(headerCell);
}
// Add the data rows.
for (var i = 0; i < customers.length; i++) {
row = table.insertRow(-1);
row.setAttribute('class', 'trmy');
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
if (j === 0) {
cell.setAttribute('class', 'headcol');
} else {
cell.setAttribute('class', 'tdmy');
}
//cell.setAttribute('class', 'tdmy');
cell.innerHTML = customers[i][j];
}
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
html, body {
margin: 0;
padding: 0;
}
.mydiv {
overflow-y: scroll;
}
.headcol {
position: fixed;
left: 0;
width: 100px;
text-align:center;
background-color: #4CAF50;
color: white;
font-family:arial;
font-size:13px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #c4c0c0;
}
.tablemy {
border-collapse: collapse;
border: 1px solid #c4c0c0;
margin-left: 130px;
}
.thmy {
text-align:center;
background-color: #4CAF50;
color: white;
font-family:arial;
font-size:13px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #c4c0c0;
}
.tdmy {
white-space: nowrap;
padding:8px; border-left:1px solid #ccc; border-top:1px solid #ccc;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
font-size:12px;
font-family:arial;
border: 1px solid #c4c0c0;
color:#585858;
}
.trmy:nth-child(odd) {
background-color:#F5F5F5;
}
tr:nth-child(even) {
background-color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dvTable"></table>
I have the following HTML. The problem is that I can not make the div with id="ladder" have the same position with respect to its parent div with id="grid" when I zoom in or out. here is the code snakes and Ladders
var gameBoard = {
createBoard: function(dimension, mount) {
var mount = document.querySelector(mount);
if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
return false;
} else {
dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
var table = document.createElement('table'),
row = document.createElement('tr'),
cell = document.createElement('td'),
rowClone,
cellClone;
var output;
for (var r = 0; r < dimension; r++) {
rowClone = row.cloneNode(true);
table.appendChild(rowClone);
for (var c = 0; c < dimension; c++) {
cellClone = cell.cloneNode(true);
rowClone.appendChild(cellClone);
}
}
mount.appendChild(table);
output = gameBoard.enumerateBoard(table);
}
return output;
},
enumerateBoard: function(board) {
var rows = board.getElementsByTagName('tr'),
text = document.createTextNode(''),
rowCounter = 1,
size = rows.length,
cells,
cellsLength,
cellNumber,
odd = false,
control = 0;
for (var r = size - 1; r >= 0; r--) {
cells = rows[r].getElementsByTagName('td');
cellsLength = cells.length;
rows[r].className = r % 2 == 0 ? 'even' : 'odd';
odd = ++control % 2 == 0 ? true : false;
size = rows.length;
for (var i = 0; i < cellsLength; i++) {
if (odd == true) {
cellNumber = --size + rowCounter - i;
} else {
cellNumber = rowCounter;
}
cells[i].className = i % 2 == 0 ? 'even' : 'odd';
cells[i].id = cellNumber;
cells[i].appendChild(text.cloneNode());
cells[i].firstChild.nodeValue = cellNumber;
rowCounter++;
}
}
var lastRow = rows[0].getElementsByTagName('td');
lastRow[0].id = '100';
var firstRow = rows[9].getElementsByTagName('td');
firstRow[0].id = '1';
return gameBoard;
}
};
gameBoard.createBoard(10, "#grid");
function intialPosition() {
$("#1").append($("#player1"));
$("#1").append($("#player2"));
var currentPosition = parseInt($("#1").attr('id'));
return currentPosition;
}
var start = intialPosition();
var face1 = new Image();
face1.src = "http://s19.postimg.org/fa5etrfy7/image.gif";
var face2 = new Image();
face2.src = "http://s19.postimg.org/qb0jys873/image.gif";
var face3 = new Image();
face3.src = "http://s19.postimg.org/fpgoms1vj/image.gif";
var face4 = new Image();
face4.src = "http://s19.postimg.org/xgsb18ha7/image.gif";
var face5 = new Image();
face5.src = "http://s19.postimg.org/lsy96os5b/image.gif";
var face6 = new Image();
face6.src = "http://s19.postimg.org/4gxwl8ynz/image.gif";
function rollDice() {
var status = document.getElementById("status");
var random = Math.floor(Math.random() * 6) + 1;
document.images["mydice"].src = eval("face" + random + ".src")
status.innerHTML = "You rolled " + random;
//if (random == 6) {
// status.innerHTML += "! You get a free turn!!";
//}
return random;
}
var currentPosition = start;
var random1;
function move() {
var m = 1;
random1 = rollDice();
destination = currentPosition + random1;
$('#' + destination).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
$('#' + destination).append($('#player' + m));
if (destination == 36) {
destination = 55;
$('#' + destination).append($('#' + "player" + m));
}
if (destination == 96) {
destination = 57;
$('#' + destination).append($('#' + "player" + m));
}
if (destination >= 100) {
destination = 100;
$('#' + destination).append($('#' + "player" + m));
alert("You Won!!!!!!!");
}
currentPosition = parseInt($('#' + destination).attr('id'));
return currentPosition;
}
/*body {
background-image: url('snakesandladder2.png');
background-repeat: no-repeat;
background-size: 100%;
background-color: #4f96cb;
}*/
#game {
width: 80%;
margin-left: auto;
margin-right: auto;
display: table;
}
#gameBoardSection {
border: 3px inset #0FF;
border-radius: 10px;
width: 65%;
display: table-cell;
position: relative;
/*margin: 5px;*/
/*margin: auto;*/
}
/*#grid{
position:relative;
}*/
table {
width: 100%;
position: relative;
}
td {
border-radius: 10px;
width: 60px;
height: 60px;
line-height: normal;
vertical-align: bottom;
text-align: left;
border: 0px solid #FFFFFF;
position: relative;
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
/*color: #FF0000 ;*/
background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
background-color: SkyBlue;
}
#100 {
background-image: url('rotstar2_e0.gif');
background-repeat: no-repeat;
background-size: 100%;
}
#ladder {
position: absolute;
top: 300px;
left: 470px;
-webkit-transform: rotate(30deg);
z-index: 1;
opacity: 0.7;
}
#bigSnake {
position: absolute;
top: 20px;
left: 200px;
opacity: 0.7;
z-index: 1;
}
#playerAndDiceSection {
background-color: lightpink;
border: 1px;
border-style: solid;
display: table-cell;
/*margin: 2px;*/
border-radius: 10px;
border: 3px inset #0FF;
width: 35%;
margin: 2%;
}
<body>
<div id="game">
<div id="gameBoardSection">
<div id="grid"></div>
<div id="ladder">
<img src="http://s19.postimg.org/otai9he2n/oie_e_RDOY2iqd5o_Q.gif" />
</div>
<div id="bigSnake">
<img src="http://s19.postimg.org/hrcknaagz/oie_485727s_RN4_KKBG.png" />
</div>
<div id="player1" style="position:absolute; top:10px; left:10px;">
<!--style="position: absolute; top: 597px; z-index: 1;"-->
<img src="http://s19.postimg.org/t108l496n/human_Piece.png" />
</div>
<div id="player2" style="position:absolute; top:15px; left:5px;">
<img src="http://s19.postimg.org/l6zmzq1dr/computer_Piece.png" />
</div>
</div>
<div id="playerAndDiceSection">
<div id="playerSection">
<div id="player1">
<img src="http://s19.postimg.org/t108l496n/human_Piece.png" />Player1
<!--<p>Player1</p>-->
</div>
<div id="player2">
<img src="http://s19.postimg.org/l6zmzq1dr/computer_Piece.png" />Player2
</div>
</div>
<div id="diceSection">
<img src="http://s19.postimg.org/fa5etrfy7/image.gif" name="mydice" onclick="move()" style="background-color: white;">
<h2 id="status"></h2>
</div>
</div>
</div>
</body>
I made a nice transition effect when switching between images, it sets the opacity to 0 (With a transition of all .5s) then .5s later (Via setTimeout) the src of the image is changed and it should fade back in.
It works fine on Chrome and IE but on firefox the image fades out and then instead of fading back to opacity:1 it just jumps straight to it.
Here is my code
Javascript:
AddEventListener(window, 'load', function () {
window.FadeinTime = 500;
var LargeImageDiv = document.getElementById('LargeImage');
window.LargeImage = LargeImageDiv.childNodes[1];
var LargeImageCaption = LargeImageDiv.childNodes[3];
var SlideText = ['Videography', 'Photography', 'Walkthroughs', 'Fine Art'];
window.Images = []; //Some image links
LargeImage.src = '/Resources/Home/' + window.Images[0];
window.AutoSlide = setInterval(function () {
var SlideNo = parseInt(LargeImage.getAttribute('data-slide')) + 1;
var SlideTextNo = parseInt(LargeImage.getAttribute('data-slideText')) + 1;
if (SlideNo == Images.length) SlideNo = 0;
if (SlideTextNo == SlideText.length) SlideTextNo = 0;
LargeImage.setAttribute('data-slide', SlideNo.toString());
LargeImage.setAttribute('data-slideText', SlideTextNo.toString());
LargeImageDiv.setAttribute('style', '-khtml-opacity:0;-moz-opacity:0;-ms-filter: alpha(opacity=0);-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter: alpha(opacity=0);opacity:0;');
setTimeout(function () {
LargeImage.src = '/Resources/Home/' + Images[SlideNo];
LargeImageCaption.innerHTML = SlideText[SlideTextNo];
LargeImageDiv.removeAttribute('style');
}, window.FadeinTime)
}, 2500)
});
HTML:
<div id="LargeImage" class='NoSelect' onclick='if(event.target.nodeName == "BUTTON") return; var u = this.childNodes[3].innerHTML; window.location=(u=="Videography"||u=="Walkthroughs"?"/Videos/View/"+u:"/Pictures/View/"+u);'>
<img src="" data-slide='0' data-slideText='0'/>
<pre class='Caption'>Videography</pre>
</div>
CSS:
body > div#Content > div#LargeImage {
cursor:pointer;
max-height:490px;
min-height:300px;
width:100%;
overflow:hidden;
margin:0 auto;
position:relative;
-moz-transition:.5s;
-webkit-transition:.5s;
-o-transition:.5s;
transition:.5s;
}
body > div#Content > div#LargeImage > button {
position:absolute;
bottom:5px;
right:5px;
;
}
body > div#Content > div#LargeImage > img {
width:100%;
margin-top:-10%;
}
body > div#Content > div#LargeImage > pre {
height:50px;
font-size:80px;
}