We Keep Coding

How to set table-width dynamically, dependent on width of browser window

Is there a way to adjust table-width to the browser window width after every resize-event, and dynamically adjust the column-widths accordingly?
Example: Window width = 1900px displaying a table, table-width = 1500px, with 5 columns at 300px. Now the browser window is resized to 1600px. Table width should now be 1265px, and each col.253px.
Thanks for feedback, Matt

You can set the table to be relative to the viewport-width:
table {
width: 85vw; // so 85% of the window's width
td {
width: 20%; // each column taking up 20% = 5 columns of the total table width
}
}

Adjust created div to parent div

How to make width of the created div adjust to parent div when width of the parent div changes.
For example when my web page shrinks created div (kind of caption) overflow parent div.
var $discDiv = $("<div></div>");
$discDiv.css({
width:$(".col-md-8").width(),
height:$(".col-md-8").height()*0.3,
backgroundColor:"blue",
position:"absolute",
zIndex: 1,
opacity:0,
});
$(".col-md-8").append($discDiv);
$(".col-md-8").mouseenter(function() {
$discDiv.css({
opacity:0.3
});
});
Pen

Just change width to percentage value
$discDiv.css({
width:$(".col-md-8").width(),
height:"100%",
backgroundColor:"blue",
position:"absolute",
zIndex: 1,
opacity:0
});
and add mouse leave for better rendering :
$(".col-md-8").mouseleave(function() {
$discDiv.css({
opacity:0
});
});

how to hide a div when the width in pixels change

Is it possible to hide a div when the width changes? I know you can do it with bootstrap but I need to somehow do it without it. i need it to display:none when increase and it needs to display:block when it is returned to 612px
<div id="grid" style="width:612px"></div>

You cannot listen for a width change, instead of that you can add a new event listener (different from the kendo-ui event handler) for the same element and check the width. In that case you can show or hide the element depending on the current width.

You'd want to write something that checks the width and shows/hides it based on that width:
function checkGridWidth() {
var gridWidth = $('#grid').width();
if(gridWidth == 612){
$('#grid').show();
}else{
$('#grid').hide();
}
};
You'll probably want to check the width on document ready as well as when certain events happen, such as window width resizes or maybe clicks?? not sure what could affect the width:
$(document).ready(function() {
checkGridWidth();
});
$( window ).resize(function() {
checkGridWidth();
});
$('#someElement').click(function() {
checkGridWidth();
});
EDIT
Based on comments from OP, the need is for an event handler that will allow the #grid to be collapsed when another element is expanded...
See: http://demos.telerik.com/kendo-ui/splitter/api
And: http://demos.telerik.com/kendo-ui/splitter/events
$(document).ready(function() {
function collapseOtherSplitter() {
splitter.size(indexOfPane, 0);// where indexOfPane is the index of the pane you want to collapse
}
function onExpand(e) {
collapseOtherSplitter();
}
// One of your top, horizontal splitters that you want to collapse when the vertical splitter expands:
var splitter = $("#horiz-splitter").kendoSplitter({
orientation: "horizontal",
panes: [
{ collapsible: true, size: "50%" },
],
});
// Your bottom, vertical splitter
$("#vertical-splitter").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: true, size: "100px" },
],
expand: onExpand,
});
});

Dynamically position text within a td element of a table.

I am trying to position text within a viewport so that as the user scrolls along the viewport the text in the column remains visible for as long as possible. The issue is that the view port may be smaller than the width of the column in the table. So I have something close to working here: http://jsfiddle.net/Deterus/6eU24/15/
$rowDiv.scroll(function (e) {
$headerDiv.css({
left: -$rowDiv[0].scrollLeft + 'px'
});
var thresh = $('.peek').width();
$.leftofscreen("#lookInMe", ".peek", {
threshold: thresh
}).removeClass("textAdjustTL").addClass("textAdjustTR");
$.rightofscreen("#lookInMe", ".peek", {
threshold: thresh
}).removeClass("textAdjustTR").addClass("textAdjustTL");
$.inviewportCenter("#lookInMe", ".peek", {
threshold: 0
}, thresh);
});
This is where I am able to add or manipulate the css needed to keep the row elements at the edge of the viewport. Currently the classes just align the text to the right or left and doesnt allow the sliding nature I need. Any leads would be appreciated.

Making a div on the fly that is resizable not working

I have a function that creates a div on the fly using jquery, and the user can define several properties to style the div. The problem is that I want the div to be resizable but the resulting div is the size the user defines but I am not able to resize it.
this is my function:
function createDiv(id, divWidth, divHeight, divContent, divBgColor, opacity){
//FIRST HEX TO RGB FOR BG COLOR & OPACITY
var currentColor = hexToRgb(divBgColor);
//CREATE THE WRAPPER DIV
var wrapper = $('<div/>', {
id: id
}).css({
"backgroundColor": 'rgba('+currentColor+' '+opacity+')',
"min-width": divWidth,
"min-height": divHeight
}).resizable({
containment: 'parent',
minHeight: divHeight,
minWidth: divWidth
}).appendTo('.current-layer');
}
This is the call to the function:
onclick="createDiv('1', '200px', '100px', 'text', '#FF0000', 0.5)"
I hope someone can tell me what I am doing wrong! TIA

The parent(containment) must have a width/height higher than the min-width/min-height of the resizable.
Currently width and height is not set, so it will be 100% and 0
Result: you can resize the resizable:
width: 200px up to the width of the containment(100%)
height: 100px up to height of the containment(also 100px, derived from it's content), so the height is unresizable
Demo: http://jsfiddle.net/doktormolle/VnCHA/

I solved the problem and feel like bit of a muppet.
Because the div was created on the fly I had to make it resizable after it was appended to the DOM.