Develop Reference

Layer an HTML button on top of a website?

The backstory is that I want to create a Google Chrome extension, and when it is active it creates a button on top of a website the user is currently on. I have looked at iframe, but Google Chrome does not allow iframe to load an html file. Any new ideas or alternate ways shared would be greatly appreciated!

Add in index.html file google chrome extension.
After adding, It will automatically activate and appear on the webpage.
HTML
<div class="ext-toggle-btn">
<span>Extension name</span>
</div>
CSS
.ext-toggle-btn {
background-color: rgb(242, 245, 247);
box-shadow: rgba(118, 118, 118, 0.11) 2px 0px 5px 0px;
opacity: 1;
height: 94px;
line-height: 1;
position: absolute;
left:-5px;
text-align: center;
top: 50%;
margin-top: -50px;
width: 30px;
z-index: 1000000001;
cursor: pointer;
border-radius: 0px 4px 4px 0px;
border-width: 1px 1px 1px;
border-style: solid solid solid none;
border-color: rgb(224, 228, 231) rgb(224, 228, 231) rgb(224, 228, 231);
border-image: initial;
border-left: none;
padding: 6px;
transition: right 0.25s ease-in 0.2s, opacity 0.35s ease-in 0.2s;
}
.ext-toggle-btn > span {
display: inline-block;
font-size: 12px;
left: -1px;
line-height: 14px;
position: relative;
top: 10px;
transform: rotate(-180deg);
writing-mode: tb-rl;
}
Github example link: https://github.com/vaibhavbhuva/simple-youtube-google-extension.git

With appropriate extension permissions, you should be able to insert HTML and CSS into the active tab. You can insert a div in the beginning of the document and position it in CSS with position:fixed|absolute, and that should have the div overlaying the webpage content.
You essentially want to insert your modal HTML and CSS into the active tab.
Please let me know if I understood your question. I would have left this as a comment but I don't have those account permissions yet lol.

How to compose react-textarea-autosize with react-mentions

It's now clear to me that mixins and inheritance are generally considered bad and composition is the way to go, this from:
https://medium.com/#dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html
Now, what to do when you find two components that specialize in different things and you want a component that is the result of both behaviors mixed? For instance, I want a textarea that both grows automatically when text goes beyond initial rows, and allow mentions inside (aka. mix react-mentions with react-textarea-autosize)
How am I supposed to compose both in a way that works?
Am I supposed to code a brand new component copying/merging the inner code from both components?
What's the ReactJs way to compose in such scenarios?

I came across the same issue. With react-mention you don't have to use the react-text-autosize as you can achieve the same behavior with css which can auto grow the textarea generated. Consider following example
<MentionsInput
value={content}
placeholder="Add a comment"
onChange={this.onChange}
className="mentionWrapper">
<Mention
trigger="#"
data={users}
className="mentionedFriend"
displayTransform={(id, display) => `#${display}`}
/>
</MentionsInput>
For this i've used the following styles
.mentionWrapper {
width: 100%;
background: transparent;
font-size: 0.9rem;
color: #a9b5c4;
}
.mentionWrapper .mentionWrapper__control {
border-radius: 25px;
border: 1px solid #3a546f;
min-height: 45px;
}
.mentionWrapper .mentionWrapper__control .mentionWrapper__highlighter {
padding: 0.7rem 1rem;
}
.mentionWrapper .mentionWrapper__control .mentionWrapper__input {
padding: 0.7rem 1rem;
outline: 0;
border: 0;
resize: none;
outline: none;
font-size: 0.9rem;
color: #7288a3;
border-color: #3a546f;
overflow: hidden;
}
.mentionWrapper .mentionWrapper__control .mentionWrapper__input::placeholder {
color: #7288a3;
}
.mentionWrapper__suggestions {
background-color: rgba(0, 0, 0, 0.6) !important;
padding: 10px;
-webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
border-radius: 0.8rem;
}
.mentionWrapper__suggestions .mentionWrapper__suggestions__list {
font-size: 14px;
}
.mentionWrapper
.mentionWrapper__suggestions
.mentionWrapper__suggestions__item--focused {
color: #ffffff;
border-bottom: 1px solid #3a546f;
font-weight: 600;
}
.mentionedFriend {
color: #7288a3;
text-decoration: underline;
}
Key point here is that i've applied a min-height of 45px to "control" div which is append by react-mention package. By doing so you will get the attached result.

HTML Table with custom scrollbar without jQuery

I have created a HTML table with a fixed header and scrollable body. I want to style the scrollbar to look like the attached image.table design
Using webkit, I have changed to colour of the scrollbar but i don't know how add the circle.
::-webkit-scrollbar {
width: 15px;
background-color: #00467f; }
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar-thumb {
background-color: #00bce4;
outline: 1px solid slategrey;
z-index: 10; }
Can this be achieved using only HTML, CSS and Pure Javascript?

With a width: 30px; and height: 30px;, border-radius: 30px; gives you a circle, maybe that helps in getting creative.

can you provide a working jsfiddle for popovers in bootstrap v4 or tell me what's wrong with this one?

Can you provide a working jsfiddle for popovers in bootstrap v4 or tell me what's wrong with this one? I found this working jsfiddle in bootstrap v3:
http://jsfiddle.net/tzhben/svgx7r21/5/
$('[data-toggle="popover"]').popover();
I created a new jsfiddle and updated the v3 js/css refs to v4 and added the additional js libs requested by the console:
https://jsfiddle.net/random512/2jnL1u5a/2/
$('[data-toggle="popover"]').popover();
The console returns no errors but the jsfiddle doesn't work. Any idea what's wrong with it?

Bootstrap 4 doesn't use the same structure as Bootstrap 3. If you remove display:none from your popover rules then they will appear on click, you should also add the class of popover to your templates outermost div.
See Options:
The outermost wrapper element should have the .popover class.
You'll have to rewrite your CSS with regards to the popover's arrow. Just inspect the element to see the changes.
Minimal Example:
$(function() {
$('[data-toggle="popover"]').popover();
})
.example-class1 {
background-color: #2a4254;
height: 77px;
width: 77px;
color: white;
cursor: pointer;
float: right;
}
.popover.popover1 {
width: 250px;
padding: 0px 1px 1px;
text-align: left;
white-space: normal;
background-color: #2a4254 !important;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0px !important;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
color: white;
}
.popover.popover1.bs-tether-element-attached-right::after,
.popover.popover1.popover-left::after {
border-left-color: #2a4254;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="text-center example-class1" data-container="body" data-placement="left" data-content="This is a test" data-template='<div class="popover popover1" role="popover"><div class="popover-arrow"></div><div class="popover-content"></div></div>' data-toggle="popover">Test 1</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

How do I make a <span> element a regular tab stop within a form?

I made a form control which uses as its container (see the Yes/No toggler below)
Here's the code for that:
<span class="toggle">
<i>Yes</i>
<i>No</i>
<input type="hidden" name="toggle-value" value="0">
</span>
My CSS isn't relevant to the question, but it's included for comprehension of my control:
.toggle { width:auto; height: 20px; display: inline-block; position: relative; cursor: pointer; vertical-align: middle; padding: 0; margin-right: 27px; color: white !important;}
.toggle i { display: block; padding: 0 12px; width: 100%; height: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font: 11px/20px Arial !important; text-transform: uppercase; }
.toggle i:first-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #73B9FF; }
.toggle i:last-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #cc0000; position: relative; top: -20px; z-index: -1; }
.toggle.on i:first-child { z-index: 1; } /* they overlap but on click they switch who gets to be on top. */
.toggle.on i:last-child { z-index: -1; }
.toggle.off i:first-child { z-index: -1; }
.toggle.off i:last-child { z-index: 1; }
.toggle.off i:last-child:before { content: " "; display:block; position:absolute; left:1px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1; background-color: #fff; } /* circle */
.toggle.on i:first-child:after { content: " "; display:block; position:absolute; right:-23px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1; background-color: #fff; } /* circle */
and the JS that makes it all work:
.on('click', '.toggle', function(){
var input = $(this).next('input');
if(input.val() == 1) {
$(this).removeClass('on').addClass('off');
input.val(0).change();
} else {
$(this).removeClass('off').addClass('on');
input.val(1).change();
}
}
The problem is that I'm using this all over my application for data-entry. Have you ever wanted to NOT use the mouse when you're entering a lot of data? Yeah, me too. So you hit TAB and a toggle like this should respond to the spacebar. But instead, since it's just a element, it is skipped altogether.
I'm hoping someone can help me solve the question of "how the heck do I make this a tab stop AND be in the correct order"?
==============
EDIT: HERE IS MY UPDATED JQUERY CODE CONTAINING THE SOLUTION:
$('.toggle').click(function(){
var input = $(this).next('input');
if(input.val() == 1) {
$(this).removeClass('on').addClass('off');
input.val(0).change();
} else {
$(this).removeClass('off').addClass('on');
input.val(1).change();
}
}).focus(function() {
$(this).bind('keydown', 'space', function(e){
$(this).trigger('click')
e.preventDefault();
});
}).blur(function() {
$(this).unbind('keydown');
}).attr('tabIndex', 0);

Try setting your tabindex to 0, on the non-anchor elements you would like to make "tabbable". For example tabindex="0". This way, you won't mess with the tabbing order, or have to throw tabindexs all over the place.

Look into the html attribute tabindex. Basically you should be able to set tabindex on each input you want to focusable via the tab key. Start the first one a 1 and just count upwards for each input. If you also want to take an input out of focusing via the tab key set the tabindex to -1.