I'm trying to count the number of characters in each textarea on a page. I've decided to use the code below (taken from here), however I am struggling to get it working.
$(function(){
$('textarea').on('keyup', function(){
var wordsLength = $(this).val().length;
$(this).next().find('').html(wordsLength);
});
});
Below are my html and css. I am not able to edit the CSS or Html directly, only using jquery scripts. I'm not sure what I'm missing. Any help would be greatly appreciated:
table {
display: table;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 2px;
border-color: grey;
}
input[type=password],
input[type=text],
input[type=file],
input:not([type]),
select,
textarea,
.sp-peoplepicker-topLevel,
.sp-peoplepicker-topLevelDisabled,
.sp-peoplepicker-autoFillContainer,
.ms-inputBox {
border: 1px solid #b9b9b9;
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.90);
color: #444444;
}
textarea {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark-color(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textarea;
background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
-webkit-rtl-ordering: logical;
flex-direction: column;
resize: auto;
cursor: text;
white-space: pre-wrap;
overflow-wrap: break-word;
margin: 0em;
font: 400 13.3333px Arial;
border-width: 1px;
border-style: solid;
border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
border-image: initial;
padding: 2px;
}
<table width="100%" role="presentation">
<tbody>
<tr>
<td style="width:100%;"><textarea style="display:none;" origvalue="<p>I can't speak</p><p>This is a great improvement</p><p><br/> </p>" spellcheck="true" maxlength="225"><p>I can't speak</p><p>This is a great improvement</p><p><br> </p></textarea>
<div class="ms-rtestate-field ms-rtefield ms-inputBox ms-rtestate-write ms-inputBoxActive" style="min-height:84px;width:75%;" disabled="disabled" contenteditable="true" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true" spellcheck="true" rtedirty="false">
<p>I can't spek</p>
<p>This is <span id="ms-rterangecursor-start" rtenodeid="1"></span><span id="ms-rterangecursor-end"></span>a great immmprovemet</p>
<p><br> </p>
</div>
</td>
</tr>
</tbody>
</table>
The main issue is because you've attached the event handler to the textarea yet the visible element that's being typed in to is a contenteditable div. As such you need to correct your selector. As this element is a div you need to use text() or html() to read its content, not val(). It would also make more sense to use the input event for this.
Secondly, you need to fix the selector which targets the element to display the character count in.
$(function() {
$('div[contenteditable="true"]').on('input', function() {
var wordsLength = $(this).text().length;
$(this).siblings('.count').html(wordsLength);
}).trigger('input');
});
table {
display: table;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 2px;
border-color: grey;
}
input[type=password],
input[type=text],
input[type=file],
input:not([type]),
select,
textarea,
.sp-peoplepicker-topLevel,
.sp-peoplepicker-topLevelDisabled,
.sp-peoplepicker-autoFillContainer,
.ms-inputBox {
border: 1px solid #b9b9b9;
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.90);
color: #444444;
}
textarea {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark-color(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textarea;
background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
-webkit-rtl-ordering: logical;
flex-direction: column;
resize: auto;
cursor: text;
white-space: pre-wrap;
overflow-wrap: break-word;
margin: 0em;
font: 400 13.3333px Arial;
border-width: 1px;
border-style: solid;
border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
border-image: initial;
padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="100%" role="presentation">
<tbody>
<tr>
<td style="width:100%;"><textarea style="display:none;" origvalue="<p>I can't speak</p><p>This is a great improvement</p><p><br/> </p>" spellcheck="true" maxlength="225"><p>I cannt spek</p><p>This is a great improvement</p><p><br> </p></textarea>
<div class="ms-rtestate-field ms-rtefield ms-inputBox ms-rtestate-write ms-inputBoxActive" style="min-height:84px;width:75%;" disabled="disabled" contenteditable="true" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true" spellcheck="true" rtedirty="false">
<p>I cannt spek</p>
<p>This is <span id="ms-rterangecursor-start" rtenodeid="1"></span><span id="ms-rterangecursor-end"></span>a great immmprovemet</p>
<p><br> </p>
</div>
<span class="count"></span>
</td>
</tr>
</tbody>
</table>
Related
I use a pure CSS Accordion to present my content. The Accordion works with normal checkboxes. Now I want to implement, that by sending a simple link, a single checkbox entry will be checked and with the help of an anchor the browser should jump to that entry and show the specific content to the reader.
The whole thing should be done preferably without a scripting or programming language, but after a lot of research I think that at least JavaScript will be required (it must run on the client side, so no PHP or similar).
I have searched and tested a lot but unfortunately I have not found any suitable solution that would work.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
</style>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
</body>
</html>
```
You're correct that JavaScript is required. I have provided a solution, but I haven't tested it, because it's not possible to test in the snippet. It should select the relevant checkbox when a hash tag is detected in the URL that corresponds with a checkbox ID.
So you would use some time https://www.website.com/#title1
// Check if URL of browwser window has hash tag
if (location.hash) {
// Get URL hash tag
const hash = window.location.hash;
// Select checkbox with ID of hashtag
const checkbox = document.querySelector(hash);
// Check if checkbox exists
if(checkbox) {
// Set selected checkbox as checked
checkbox.checked = true;
}
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
I have a table that is populated from a database with a dropdown menu that is populated along side the table which is generated from code in the php. Im tying to use javascript and css to make each drop down open on click but I cannot seem to get it to work. I've included the code below. I initilly had the script working but it only worked on the first instance of the dropdown. I reviewed a similar post to what Im looking to do but it was to no avail.
CSS
background-color: #04AA6D;
color: white;
padding: 5px;
font-size: 12px;
border: none;
text-transform: uppercase;
}
.yardDropbtn i{
font-size: 12px;
top: 1px;
position: relative;
}
.yardDropdown{
position: relative;
display: inline-block;
}
.yard-dropdown-content{
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.yard-dropdown-content a{
color: black;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.yard-dropdown-content a:hover {
background-color: #ddd;
}
.yardDropBtnCt {
display: none;
background-color: #f1f1f1;
color: black;
/*margin-left: 5px;*/
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
text-transform: uppercase;
font-size: 12px;
}
.yardDropBtnCt:hover {
background-color: #ddd;
}
.trackBtn{
display: none;
background-color: #f1f1f1;
color: black;
margin-left: 5px;
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
}
.trackBtn:hover{
background-color: #ddd;
}
/*.yard-dropdown-content:hover{
background-color: #ddd;
}*/
.show_yard_Dropdown .yard-dropdown-content {
display: block;
}
.show_yard_Dropdown .yardDropbtn {
background-color: #3e8e41;
}
JavaScript
var dropDownDivY = document.querySelector(".yardDropdown");
/*dropDownButton.addEventListener("click", function(){
dropDownDivY.classList.toggle('show_yard_Dropdown');
});*/
dropDownButton.forEach(btn => {
btn.onclick = function() {
dropDownDivY.style.display = "block";
}
});
HTML
<tr>
<td width='50px' class='yard8'>6400'</td>
<td width='100px' class='yard8 track'>Receiving 1</td>
<td width='150px' class='yard8'></td>
<td width='150px' class='yard8'>
<td width='250px' class='yard8 destination'></td>
<td width='100px'class='yard8 length'>3455'</td>
<td width='100px' class='yard8 weight'></td>
<td width='150px' class='yard8 status'></td>
<td class='yard8'>
<div class='progressContainer'>
<div class='progress' style='width:54%'>54%</div>
</div>
</td>
<td class='yard8 remarks'></td>
<td width='59px'>
<div class="yardDropdown">
<button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
<div class="yard-dropdown-content">Edit TrackAEI Populate</div>
</div>
</td>
</tr>
<form action="" method="POST"></form>
document.querySelector(".yardDropdown");
The querySelector method only returns the first element matching the selector, so it can never work for more than the first row.
You need to use querySelectorAll instead and then loop over all the elements found:
let dropDowns = document.querySelectorAll(".yardDropdown");
for (let i = 0; i < dropDowns.length; i++) {
let dropDown = dropDowns[i]
dropDown.addEventListener('click', function () {
// do something, you can use the `i` variable to know which row has been clicked if you need to
})
}
I have an input box that I'd like to slide up/down so that it looks like it is coming from behind the element above.
My input HTML looks like this:
<input type="text" placeholder="Add New Todo">
The CSS for the input looks like this:
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
And my JS looks like this:
$("#dropdown").click(function(){
$("input[type='text']").slideToggle(2000);
})
Currently, the slide gets stuck at the start/finish, as it seems the height cannot be reduced to 0.
Here is a full example of what happens.
How can I make my input box animate smoothly?
I'd wrap the input in a containing element with hidden overflow and animate that one.
$("#dropdown").click(function(){
$(".input_container").toggleClass('hide');
})
#container {
background-color: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
margin: 100px auto;
width: 360px;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #2BC0E4;
background: -webkit-linear-gradient(to left, #EAECC6, #2BC0E4);
background: linear-gradient(to left, #EAECC6, #2BC0E4);
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 0px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
input:focus {
background-color: #fff;
border: 3px solid #2980b9;
outline: none;
}
::placeholder {
color: #9e9e9e;
opacity: 1;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
#dropdown {
float: right;
}
.input_container{
height:30px;
transition: height 2s;
overflow:hidden;
}
.input_container.hide{
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
</head>
<body>
<div id="container">
<h1>TO-DO LIST <button id = "dropdown">X</button> </h1>
<div class='input_container'>
<input type="text" placeholder="Add New Todo">
</div>
</div>
</body>
</html>
You can add condition
http://jsfiddle.net/pr2szjhu/1/
<input type="text" placeholder="Add New Todo" id="test">
JS
$("#dropdown").click(function(){
if ($('#test').is(':visible')){
$("#test").removeAttr('placeholder');
$("input[type='text']").slideToggle(1800);
}else{
$("input[type='text']").slideToggle(1800,function() {
$("#test").attr('placeholder','Add New Todo');
});
}
})
I'm using Angular version 6 and want either an Angular solution or pure html/javascript solution for having a table with expanded rows.
So when you click a row it expands.
Note: I don't want to use angular material, jQuery or any third party.
This is my html table:
<table class="ex-table p3">
<thead class="ex-table__head">
<tr class="ex-table__row">
<th class="ex-table__cell">id</th>
<th class="ex-table__cell">First Name</th>
</tr>
</thead>
<tbody>
<tr class="ex-table__row" *ngFor="let item of data">
<td class="ex-table__cell">
{{item.od}}
</td>
<td class="ex-table__cell">
{{item.firstName}}
</td>
</tr>
</tbody>
</table>
I've attempted rowspan and colspan and nested tables but could'nt get that working.
Do you want something like below? . the rows can be expanded. even the whole table can be expanded at once.
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script type="text/javascript">
function toggle(btnID, eIDs) {
// Feed the list of ids as a selector
var theRows = document.querySelectorAll(eIDs);
// Get the button that triggered this
var theButton = document.getElementById(btnID);
// If the button is not expanded...
console.log(theButton.getAttribute("aria-expanded"))
if (theButton.getAttribute("aria-expanded") == "false") {
// Loop through the rows and show them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("shown");
theRows[i].classList.remove("hidden");
}
// Now set the button to expanded
theButton.setAttribute("aria-expanded", "true");
// Otherwise button is not expanded...
} else {
// Loop through the rows and hide them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("hidden");
theRows[i].classList.remove("shown");
}
// Now set the button to collapsed
theButton.setAttribute("aria-expanded", "false");
}
}
function toggle1(btnID, eIDs) {
// Feed the list of ids as a selector
var theRows = document.querySelectorAll(eIDs);
// Get the button that triggered this
var theButton = document.getElementById(btnID);
// If the button is not expanded...
if (theButton.getAttribute("aria-expanded") == "false") {
// Loop through the rows and show them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("shown");
theRows[i].classList.remove("hidden");
}
// Now set the button to expanded
theButton.setAttribute("aria-expanded", "true");
document.getElementById("btnMSb1").setAttribute("aria-expanded", "true");
document.getElementById("btnMSb2").setAttribute("aria-expanded", "true");
document.getElementById("btnMSb3").setAttribute("aria-expanded", "true");
// Otherwise button is not expanded...
} else {
// Loop through the rows and hide them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("hidden");
theRows[i].classList.remove("shown");
}
// Now set the button to collapsed
theButton.setAttribute("aria-expanded", "false");
document.getElementById("btnMSb1").setAttribute("aria-expanded", "false");
document.getElementById("btnMSb2").setAttribute("aria-expanded", "false");
document.getElementById("btnMSb3").setAttribute("aria-expanded", "false");
}
}
</script>
</head>
<style>
body {
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.4;
background: #fefefe;
color: #333;
margin: 0 1em;
}
table {
width: 100%;
margin: 1em 0;
border-collapse: collapse;
}
caption {
text-align: left;
font-style: italic;
padding: 0.25em 0.5em 0.5em 0.5em;
}
th,
td {
padding: 0.25em 0.5em 0.25em 1em;
vertical-align: text-top;
text-align: left;
text-indent: -0.5em;
}
th {
vertical-align: bottom;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
font-weight: bold;
}
.process {
margin-top: 35px;
display: inline-block;
width: 10%;
padding: 5px;
border-top: 3px solid black;
border-bottom: 3px solid black;
color: #fff;
font-style: normal;
font-weight: bold;
}
.row td:nth-of-type(2),
.cell td:nth-of-type(3) {
font-style: italic;
}
.row th:nth-of-type(3),
.row td:nth-of-type(3),
.cell th:nth-of-type(4),
.cell td:nth-of-type(4) {
text-align: right;
}
td[colspan] {
background-color: #f5f5f5;
color: #000;
font-weight: normal;
font-style: italic;
padding: 0;
text-indent: 0;
}
tr.shown,
tr.hidden {
display: table-row;
}
tr.hidden {
display: none;
}
.row button {
background-color: transparent;
border: .1em solid transparent;
font: inherit;
padding: 0.25em 0.5em 0.25em .25em;
width: 100%;
text-align: left;
}
.row button:focus,
.row button:hover {
background-color: #ddd;
outline: .2em solid #00f;
}
.row button svg {
width: .8em;
height: .8em;
margin: 0 0 -.05em 0;
fill: #66f;
transition: transform 0.25s ease-in;
transform-origin: center 45%;
}
.row button:hover svg,
.row button:focus svg {
fill: #00c;
}
/* Lean on programmatic state for styling */
.row button[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.cell button {
font-size: 60%;
color: #000;
background-color: #00f;
padding: 0.3em 0.2em 0 0.2em;
border: 0.2em solid #00f;
border-radius: 50%;
line-height: 1;
text-align: center;
text-indent: 0;
transform: rotate(270deg);
}
.cell button svg {
width: 1.25em;
height: 1.25em;
fill: #fff;
transition: transform 0.25s ease-in;
transform-origin: center 45%;
}
.cell button:hover,
.cell button:focus {
background-color: #fff;
outline: none;
}
.cell button:hover svg,
.cell button:focus svg {
fill: #00f;
}
/* Lean on programmatic state for styling */
.cell button[aria-expanded="true"] svg {
transform: rotate(90deg);
}
/* Proven method to visually hide something but */
/* still make it available to assistive technology */
.visually-hidden {
position: absolute;
top: auto;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE 6/7 */
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
white-space: nowrap;
}
</style>
<table class="cell">
<caption>Dashboard</caption>
<thead>
<tr>
<th><button type="button" id="btnMSb" aria-expanded="false" onclick="toggle1(this.id,'#MS01b,#MS02b,#MS03b');" aria-controls="MS01b MS02b MS03b" aria-label="3 more from" aria-labelledby="btnMSb lblMSb">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button></th>
<th>Batch</th>
<th>Status</th>
<th>Start</th>
<th>End</th>
<th>agreed</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" id="btnMSb1" aria-expanded="false" onclick="toggle(this.id,'#MS01b');" aria-controls="MS01b" aria-label="3 more from" aria-labelledby="btnMSb1 lblMSb1">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch1</td>
<td>Green</td>
<td>10AM</td>
<td>11AM</td>
<td>11:30AM</td>
</tr>
<tr id="MS01b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #16a085">Step1</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #F1A9A9">Step2</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #E4FFAE">Step3</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #BFC6B9">Step4</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #87FEF8">Step5</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #FF9A9E">Step6</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="button" id="btnMSb2" aria-expanded="false" onclick="toggle(this.id,'#MS02b');" aria-controls="MS02b" aria-label="3 more from" aria-labelledby="btnMSb2 lblMSb2">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch2</td>
<td>Green</td>
<td>2AM</td>
<td>4AM</td>
<td>5AM</td>
</tr>
<tr id="MS02b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #16a085">Step1</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #DB2929">Step2</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #C0FF3E">Step3</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #5A6351">Step4</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #01C5BB">Step5</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #FF9A9E">Step6</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="button" id="btnMSb3" aria-expanded="false" onclick="toggle(this.id,'#MS03b');" aria-controls="MS03b" aria-label="3 more from" aria-labelledby="btnMSb3 lblMSb3">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch3</td>
<td>Amber</td>
<td>10AM</td>
<td>11AM</td>
<td>10:30AM</td>
</tr>
<tr id="MS03b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #1abc9c">Step1</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #3498db">Step2</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #34495e">Step3</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #2ecc71">Step4</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #9b59b6">Step5</div>
<div class='process' style="margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #e74c3c">Step6</div>
</div>
</td>
</tr>
</tbody>
</table>
</html>
I'm trying to use jQuery to fade out elements in a scrolling div (not the main window) as they scroll out of view. I'm using the fadeTo function and checking for the position of the element as the user scrolls.
See this stackoverflow thread for what I'm basing my code on.
Everything seems to work fine on my non-retina monitor (using Chrome). The top element is fading out right at the top of the scrolling div like its supposed to.
However, when I perform the same actions using my macbook pro w/ retina display, I get weird behavior. For some of the elements (not all) in the scrolling div, The fadeTo animation only fades a part of the div (the bottom part). The top half (or more sometimes) is unchanged.
EDIT: WAS ABLE TO MAKE A DEMO (Try viewing demo on monitor vs. retina screen).
Any idea why this would happen? Why would this behave differently on my retina screen than on my monitor (both using same version of Chrome)?
I should also mention that all of this html is being injected into existing web pages, so that the scroll div sits on top of the page in the top right corner (fixed position). I'm building a chrome extension... My code:
$('#volleyThreadDiv' + objectId).scroll(function() {
console.log('userDidscroll...');
$('.volleyComment').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
$('.volleyReply').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
});
#volleyDiv {
position:fixed;
top: 20px;
right: 30px;
padding: 10px;
z-index: 999999999999999999999999999;
box-sizing: initial;
background: none;
border: none;
}
.volleyThreadDiv, #volleyActivityDiv {
position: static;
display: none;
max-height: 300px;
overflow-y: scroll;
background: none;
border: none;
}
.volleyThreadDiv::-webkit-scrollbar, #volleyActivityDiv::-webkit-scrollbar {
background-color: transparent;
}
.volleyComment, .volleyReply {
margin: 5px 5px 5px 5px;
padding: 5px;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
width: 155px;
background: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
.volleyCommentStatus, .volleyReplyStatus {
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #262626;
line-height: 1.5;
word-wrap: break-word;
}
.volleyCommentStatus, .volleyReplyStatus {
text-align: left;
}
.volleyCommentStatus > a:link, .volleyReplyStatus > a:link, .volleyCommentStatus > a:visited, .volleyReplyStatus > a:visited {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: #63c5e2 !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentStatus > a:hover, .volleyReplyStatus > a:hover {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: gray !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentAuthor, .volleyReplyAuthor, .volleyCommentDate, .volleyReplyDate {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-style: italic;
font-size: 10px;
font-weight: normal;
color: gray;
margin: 0px 5px 0px 0px;
line-height: 1.5;
}
.volleyReplyAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentDate, .volleyReplyDate {
float: right;
margin: 0px 5px 0px 7px;
}
.volleyCommentReply {
float: right;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
background: #63c5e2;
padding: 2px 10px 2px 10px;
margin: 0px 0px 100px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="volleyDiv" style="display: block;">
<div class="volleyThreadDiv" id="volleyThreadDivUAuCOyQuav" style="display: block;">
<div class="volleyComment" id="volleyCommentUAuCOyQuav">
<p class="volleyCommentDate">Feb 28th</p>
<p class="volleyCommentStatus">First comment!</p>
<p class="volleyCommentAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply0wblbTaP1R">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">First comment!</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplywBS0WFoUDH">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Testing two comments on a a page.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply5zw2ww9GBo">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Will it blend?</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplythWrBLrkjy">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Stay with me.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyCommentReply" id="volleyCommentReplyUAuCOyQuav">Reply</div>
</div>
</div>
</body>
</html>
The solution I found was to add position: relative in the css for .volleyCommentStatus, .volleyReplyStatus.
It seems it was inheriting position: static which I assume was causing the retina screen problem.