I'm looking for a simple way to make my table columns re-sizable.
Since my table has a lot of columns the page has to have a scrollbar. That seems to make all the code for resizing not working. I have tried my own code and several plugins but it never works.
jsfiddle with a plugin
jsfiddle without plugin but still not working
I'm using this code I found here in so:
$(function() {
var pressed = false;
var start = undefined;
var startX, startWidth;
$("table th").mousedown(function(e) {
start = $(this);
pressed = true;
startX = e.pageX;
startWidth = $(this).width();
$(start).addClass("resizing");
$(start).addClass("noSelect");
});
$(document).mousemove(function(e) {
if(pressed) {
$(start).width(startWidth+(e.pageX-startX));
}
});
$(document).mouseup(function() {
if(pressed) {
$(start).removeClass("resizing");
$(start).removeClass("noSelect");
pressed = false;
}
});
});
Your problem is the width of the table.
try setting width:200%; to table. After if you want you can set overflow:scroll;
fiddle updated http://jsfiddle.net/Mz2HN/
I have edit only the css
table {
border-width: 1px;
border-style: solid;
border-color: black;
border-collapse: collapse;
width:200%;
overflow:scroll;
}
table td {
border-width: 1px;
border-style: solid;
border-color: black;
}
table th {
border: 1px;
border-style: solid;
border-color: black;
background-color: green;
cursor: col-resize;
}
table th.resizing {
cursor: col-resize;
}
.noSelect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Related
Id like to make a component in react that allows me to have a textarea with tags that can be inserted when clicked from a dropdown. Id also like this textarea to be able to mix text aswell. I have currently been trying to use tagify with react but I cant seem to figure out a way to the tagify's function that adds the tag to be accessed by the onClick that is connected to the dropdown.
Any ideas?
I believe you can get your answer in this URL of other question asked on StackOverflow https://stackoverflow.com/a/38119725/15405352
var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('textarea');
var $toggle = $('button');
// yeah, browser sniffing sucks, but there are browser-specific quirks to handle that are not a matter of feature detection
var ua = window.navigator.userAgent.toLowerCase();
var isIE = !!ua.match(/msie|trident\/7|edge/);
var isWinPhone = ua.indexOf('windows phone') !== -1;
var isIOS = !isWinPhone && !!ua.match(/ipad|iphone|ipod/);
function applyHighlights(text) {
text = text
.replace(/\n$/g, '\n\n')
.replace(/[A-Z].*?\b/g, '<mark>$&</mark>');
if (isIE) {
// IE wraps whitespace differently in a div vs textarea, this fixes it
text = text.replace(/ /g, ' <wbr>');
}
return text;
}
function handleInput() {
var text = $textarea.val();
var highlightedText = applyHighlights(text);
$highlights.html(highlightedText);
}
function handleScroll() {
var scrollTop = $textarea.scrollTop();
$backdrop.scrollTop(scrollTop);
var scrollLeft = $textarea.scrollLeft();
$backdrop.scrollLeft(scrollLeft);
}
function fixIOS() {
// iOS adds 3px of (unremovable) padding to the left and right of a textarea, so adjust highlights div to match
$highlights.css({
'padding-left': '+=3px',
'padding-right': '+=3px'
});
}
function bindEvents() {
$textarea.on({
'input': handleInput,
'scroll': handleScroll
});
$toggle.on('click', function() {
$container.toggleClass('perspective');
});
}
if (isIOS) {
fixIOS();
}
bindEvents();
handleInput();
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 30px;
background-color: #f0f0f0;
}
.container, .backdrop, textarea {
width: 460px;
height: 180px;
}
.highlights, textarea {
padding: 10px;
font: 20px/28px 'Open Sans', sans-serif;
letter-spacing: 1px;
}
.container {
display: block;
margin: 0 auto;
transform: translateZ(0);
-webkit-text-size-adjust: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid #685972;
background-color: #fff;
overflow: auto;
pointer-events: none;
transition: transform 1s;
}
.highlights {
white-space: pre-wrap;
word-wrap: break-word;
color: transparent;
}
textarea {
display: block;
position: absolute;
z-index: 2;
margin: 0;
border: 2px solid #74637f;
border-radius: 0;
color: #444;
background-color: transparent;
overflow: auto;
resize: none;
transition: transform 1s;
}
mark {
border-radius: 3px;
color: transparent;
background-color: #b1d5e5;
}
button {
display: block;
width: 300px;
margin: 30px auto 0;
padding: 10px;
border: none;
border-radius: 6px;
color: #fff;
background-color: #74637f;
font: 18px 'Opens Sans', sans-serif;
letter-spacing: 1px;
appearance: none;
cursor: pointer;
}
.perspective .backdrop {
transform:
perspective(1500px)
translateX(-125px)
rotateY(45deg)
scale(.9);
}
.perspective textarea {
transform:
perspective(1500px)
translateX(155px)
rotateY(45deg)
scale(1.1);
}
textarea:focus, button:focus {
outline: none;
box-shadow: 0 0 0 2px #c6aada;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="backdrop">
<div class="highlights"></div>
</div>
<textarea>This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.</textarea>
</div>
<button>Toggle Perspective</button>
Reference- https://codepen.io/lonekorean/pen/gaLEMR for example
Below is HTML input of type range. I made it bigger so that it is more noticable. When I mouse down on red thumb and move to side, if I am not perfectly in the center of thumb it will jump so that mouse cursors is in the center of thumb and then it moves normally.
Is it possible to change it so that there is no first sudden jump on first move?
input[type=range] {
-webkit-appearance: none;
pointer-events: none;
background-color: green;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1cm;
height: 1cm;
background-color: red;
cursor: pointer;
pointer-events: auto !important;
}
<input type="range">
I'm afraid the only way the achieve this, is to override the range behavior with Javascript.
I did it with jQuery, but it could be done with vanilla JS or any other JS framework.
Please note I have fixed the CSS to make it works in Firefox.
I also had to use px instead of cm for the thumb width, so that this value can be provided to JS.
function overrideSliderBehavior() {
var el = $(this);
var thumbWidth = parseFloat(el.data('thumb-width'));
if(!thumbWidth) {
return;
}
var dragOrigin = null;
el.on('mousedown', function(evt) {
evt.preventDefault();
dragOrigin = {
x:event.clientX,
val:parseFloat(el.val())
};
});
$(document).on('mouseup', function(){
dragOrigin = null;
});
$(document).on('mousemove', function(evt) {
if(dragOrigin !== null) {
evt.preventDefault();
var rect = el[0].getBoundingClientRect();
var offsetX = (event.clientX - dragOrigin.x);
var offsetVal = offsetX/(rect.width - thumbWidth);
var max = el[0].max || 100;
var min = el[0].min || 0;
el.val(dragOrigin.val + offsetVal*(max - min));
}
});
}
$(document).ready(function() {
$('input[type=range]').each(overrideSliderBehavior);
});
input[type=range] {
-webkit-appearance: none;
pointer-events: none;
background-color: green;
height: 38px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 38px;
height: 38px;
background-color: red;
cursor: pointer;
pointer-events: auto !important;
}
input[type=range]::-moz-range-thumb {
width: 38px;
height: 38px;
background-color: red;
cursor: pointer;
pointer-events: auto !important;
border: none;
border-radius: 0;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<input type="range" data-thumb-width="38">
Got a dynamic bubble showing up inside a listing. I'm trying to set it above a button by jquery calculating its height, adding a few more pixels, and setting negative "top" style. But with div's height at 34px, it returns height of 400 something.
Tried both: .height and .outerHeight
Jquery
if($(".bubble")[0]) {
$(".bubble").each(function(){
const self = this;
setTimeout(function(){
$(self).removeClass("hide");
if ($(window).width()> 1000) {
var bubblehe = ($(this).height()+14)*-1;
} else {
var bubblehe = $(this).height+14;
}
$(self).css('top',bubblehe);
}, <?php echo $myoptions['bubble_delay']; ?>)
});
$(document.body).click(function(){
$(".bubble").addClass("hide");
});
}
css of the .bubble
.bubble {
padding:2px 0;
position:absolute;
text-align:center;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 5px 10px #cccaca;
left: 0;
right: 0;
background-color: #fff;
pointer-events: none;
color:#e98007;
font-size:12px;
transition:0.3s;
}
Here is a resizable textarea:
var KeyDown;
$(".TxtArea > div").mousedown(function(){
$(this).parent().addClass("Resize");
$("body").addClass("UnSelectable");
KeyDown = 1;
$("textarea").css("opacity","0.3");
$("textarea").focus(function() { $(this).css("border-color","#ccc") });
});
$(document).mouseup(function(){
$(".TxtArea").removeClass("Resize");
$("body").removeClass("UnSelectable");
KeyDown = 0;
$("textarea").css("opacity","1");
$("textarea").focus(function() { $(this).css("border-color","#07c") });
});
$(document).mousemove(function(Event){
if (KeyDown == 1 && $(".TxtArea").hasClass("Resize")) {
var Height = Event.pageY - $(".TxtArea").children("textarea").offset().top;
$("textarea").height(Height);
}
});
textarea {
border: 1px solid #ccc;
outline:none;
}
textarea:focus{
border: 1px solid #07c;
}
.TxtArea {
width: 300px;
}
.TxtArea > textarea {
width: 100%;
display: block;
resize: none;
box-sizing: border-box;
}
.TxtArea > div {
height: 10px;
background: #eee;
border: 1px solid #ddd;
box-sizing: border-box;
text-align: center;
line-height: 0px;
}
.TxtArea > div:hover {
cursor: n-resize;
}
.UnSelectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="TxtArea">
<textarea></textarea>
<div>.....</div>
</div>
Please follow these steps:
run the above fiddle
write something on that textarea
click on x-scroll bar on the bottom of textarea and keep it
move your mouse and resize that textarea (Now border color is #ccc and opacity is 0.3)
after resizing, leave your finger from click (Now opacity will be 1 but border doesn't change)
Why border doesn't change? and how can I return it to #07c after unclicking. How can I do that? (I want something exactly like SO)
Note: I want to set #07c just only focus state of that textarea after unclicking (Not a permanent border)
So I'm not sure exactly why your focus code wasn't working, but in general, this is just better practice. Typically you want the css to handle all of the styling and the javascript just toggles it. It just keeps things cleaner and more organized.
So you can do this: https://jsfiddle.net/psp12a0n/
The main thing that was changed was this part in the javascript:
$(".TxtArea > div").mousedown(function(){
$(this).parent().addClass("Resize");
$("body").addClass("UnSelectable");
KeyDown = 1;
$("textarea").addClass('inactive');
});
$(document).mouseup(function(){
$(".TxtArea").removeClass("Resize");
$("body").removeClass("UnSelectable");
KeyDown = 0;
$("textarea").removeClass('inactive');
});
And this in the css:
textarea:focus,
textarea:active {
border: 1px solid #07c;
}
textarea.inactive {
opacity: .3;
border-color: #ccc;
}
Hope this works for you!
first of all i'll explain the situation:
I can ONLY write in the body of an html, this is because of some limitations.
I need to replace the website (a profile) for a new one.
The issue is: the menu should show or hide sections on click... and isn't.
I don't really know much of javascript, just a bit of python and because of that i'm getting some issues with the code, but i won't learn javascript much either since this will probably be just a once in a lifetime for me.
I don't want to add jQuery code.
So... i tried this code in http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_background, (copy and pasty so you can also check) but it doesnt works as expected, the function for the menu isn't working.
<!DOCTYPE html><html><head></head><body><script>
function comandos()
{
var visibilidaddecomandos = document.getElementById("comandos").style.display;
if (visibilidaddecomandos == "hidden")
{
document.getElementById("comandos").style.visibility = "visible";
}
else if (visibilidaddecomandos == "visible")
{
document.getElementById("comandos").style.visibility = "hidden";
}
return false;
}
document.write('<style> #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul> <li><span>Comandos</span></li><li><span>Estadisticas</span></li><li><span>Juegos</span></li><li><span>Sobre mi</span></li><li><span>Saelyth</span></li></ul> </div>');
document.write('<br><table id="global" style="background-color:#ffffff; width:460px; height:600px"><tr><td style="vertical-align:top"><table id="comandos" border="2" style="background-color:#000000; float:center"><tr><td><p style="color:red">Testing the ID table "comandos"</p></td></tr></table></td></tr></table>');
document.body.style.background="#66ffff url('http://images.wikia.com/xenosaga/images/8/86/KOSMOSWikiBG.jpg') no-repeat left top"
document.title = "¡My not working menu!";
window.stop();
</script>
</body></html>
Although tables are not best practice..for multiple reasons.. one being that the entire table has to load before your data is shown.
Divs are your best friend.
Anyways, here is the fix I believe you are looking for.
function comandos()
{
var visibilidaddecomandos = document.getElementById("comandos").style.visibility;
if (visibilidaddecomandos == "hidden")
{
document.getElementById("comandos").style.visibility = "visible";
}
else if (visibilidaddecomandos == "visible")
{
document.getElementById("comandos").style.visibility = "hidden";
}
return false;
}
Also you have to add a default visibility to your table in order for it to work.
<table id="comandos" border="2" style="visibility:visible;background-color:#000000; float:center">
var visibilidaddecomandos = document.getElementById("comandos");
if (visibilidaddecomandos.style.visibility == 'hidden')
{
visibilidaddecomandos.style.visibility = "visible";
}
else if (visibilidaddecomandos.style.visibility == "visible")
{
visibilidaddecomandos.style.visibility = "hidden";
}
This will work....
if (document.getElementById("comandos").style.visibility == "hidden"){document.getElementById("comandos").style.visibility == "visible";}else if (document.getElementById("comandos").style.visibility == "visible")
{document.getElementById("comandos").style.visibility == "hidden";}
Hope this will help.