So I have this issue with setting a margin that dynamical decreases and increases to a minimum of 8px and maximum of 40px.
The margin is being set between 11 different blocks which are inside a container. The container can be a minimum width of 960px or a maximum of 1280px and always has a fixed height.
How can I make it so that the space (margin-left) in between the boxes always stretches to fill the container correctly?
Below is an image of what I am aiming for at 960px width
Now an an image of it at it's full width of 1280px
As you can see from the images all im trying to do is separate the boxes as the resolution is changed.
I currently have something like this using jQuery
$(window).bind('resize', function(){
var barWidth = $(".topBar").width();
$(".barModules li").css('margin-left', my dynamic value here));
});
I'm stuck on how I should be calculating this and if that's even the right way to go about it :/
An example of what I have so far: http://jsfiddle.net/m4rGp/
If...
n = number of LI elements in .barModules
then...
dynamic margin = (barWidth - n * (width of one LI)) / (n - 1)
So your code would look like:
$(window).bind('resize', function(){
var n = $(".barModules li").length;
var barWidth = $(".topBar").width();
var liWidth = $(".barModules li:first").width; // if set through CSS, read the "style" attribute instead...
var dynMargin = (barWidth - n * liWidth) / (n - 1)
$(".barModules li").css('margin-right', dynMargin + "px")); // "margin-right" instead of "margin-left"
$(".barModules li:last").css('margin-right', '0px'); // don't need margin on last element.
});
// if .length isn't returning the a value for "n", there are other ways to count the sub-elements, check the "children()" method at jquery.com
I wouldn't do that with javascript. Its a lot of work
You could make a table with cells that are set to the width you want.
http://jsfiddle.net/HZKpM/
You can even add a minwidth in various places.
I would advise using CSS. Just create an outer box around each box.
<div class="outer"><div class="inner">text</div></div>
Here is a jsfidle http://jsfiddle.net/HZKpM/3/
Related
I tried other questions but they didn't work as I wanted.
I want to get the scroll percentage of an element (let's say a div) to animate it (e.g. if the user can see the element in full the function would return 100% / 1.0).
How can I achieve this?
You could achieve it with the below formula,
var scrollPercent = (CurrentScrollPosition / (GivenTotalScrollHeightOfTheElement - ContentPostHeight)) * 100;
This question already has answers here:
Font scaling based on size of container
(41 answers)
Closed 11 months ago.
So I have this dynamic table with names that I would like to adjust so that text does not wrap to the next line and still is visible. The easiest way would be to have the text size auto-adjust to the container width so that the height whould be the same for all cells:
How it looks now
How I would prefer it to look...
Anyone has some good hints?
Of course I could always have some rigid function that changes the font-size of a specific name based on the length of the text. But I was hoping that there was some cool CSS code that could do the trick!
I know that I can automatically adjust with the canvas size with (vw) but that does not help when the width of my columns are fixed.
I suggest storing the preferred height of the element.
For example, say it needs to be 64px high.
then just use some javascript to lower the font size till it is equal to or less than the preferred height.
you just need to set the preferredHeight to the height you want
and then just add the fixHeightFontSize class to each item you want to resize the font of
Normal Javascript
let preferredHeight = 64; // in pixels
document.querySelector('.fixHeightFontSize').each(function(index){
document.querySelector(this).css({ 'fontSize' : 120}); // just give the font an inital large value, this is only needed for bugs.
while(size = document.querySelector(this).height() > preferredHeight){
let newFontSize = parseInt(document.querySelector(this).css("fontSize")) - 1;
document.querySelector(this).css({ 'font-size' : newFontSize});
}
});
Jquery Version
let preferredHeight = 64; // in pixels
$('.fixHeightFontSize').each(function(index){
$(this).css({ 'fontSize' : 120}); // just give the font an inital large value, this is only needed for bugs.
while(size = $(this).height() > preferredHeight){
let newFontSize = parseInt($(this).css("fontSize")) - 1;
$(this).css({ 'font-size' : newFontSize});
}
});
I'm using jquery but you would be able to impletment this in normal javascript
I'm having a beyond frustrating problem which I have no idea how to tackle.
My question: How do I determine how many elements exist between two positions in a viewport (a scrollable div in this occasion)?
Say I have a scrollable <div> that has a height of 150 px, but has a viewport at 450px with the majority of it being hidden. The div has children that are 30px high, 15 of them.
Question 2: How could I find out how many first children exist between n1 and n2, it seems pretty easy but it's proving not to be.
I've created a jsFiddle where I have partly solved the solution, it works if the top value is set to 0, but it doesn't work if it's anything else. For example, with this solution I am able to determine that there are 7 visible divs between 0 and 200px. But if I change it to determine how many are between 30px and 230px it tells me 0, when again it should be 7.
Help please!
Try this instead:
var $this = $(this),
topOffset = $this.offset().top;
if (topOffset >= top && topOffset <= bottom) {
elements++;
}
This checks to see if the current element's (in the each()) top offset is greater than the top variable's value and increases the elements only then. This way, you don't need to be constantly updating the height variable.
And this works, as you can see here.
Change it so that the 'height' starts equal to the top value.
Your javascript should be:
var container = $('div#container'),
top = 30,
bottom = 230,
height = top,
elements = 0;
container.find('div').each(function(n)
{
if (top <= height && height < bottom)
{
height = height + $(this).height();
elements++;
console.log(top, bottom, height, elements);
}
});
$('span.top').text(top);
$('span.btm').text(bottom);
$('span.num').text(elements);
That worked for me, Good luck!
I'm trying to use the left variable to replace '1493' in this code. It works fine when it's a number but when I changed it over to use 'left' the if statement stops working.
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var postCount = $(".post").length;
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
if(left >= columnLength) {
$(".num").text(left);
}
});
Does anyone have any ideas where I'm going wrong with this? Any pointers would be great.
You may need to force it to be an integer:
var left = parseInt($(document).scrollLeft());
Lets take a look at the math you have really quick.
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
You are basically cancelling out width, and (postCount*743). It leaves you with --1493 which is positive 1493. The following would have the same effect:
var columnLength = 1493;
So, the reason the if statement fires when you put in the static value 1493, is because columnLength ALWAYS equals 1493 which, of course satisfies this condition:
if (1493 >= columnLength)
You could as easily write:
if (1493 >= 1493)
That said, it should still, theoretically fire when left becomes greater than or equal to 1493. But left is the current horizontal scroll position in pixels. It would be a HUGELY wide page to hit a scroll position of 1493.
Edit: Here's a fiddle to give an idea of how fast the scroll position increases: http://jsfiddle.net/vdQ7B/16/
EDIT 2:
Here is an update in response to your comment.
As I understand it, you were trying to get a horizontal scrollbar that would, essentially, scroll forever.
Please see the following fiddle for a demo: http://jsfiddle.net/vdQ7B/40/
The code is below:
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var viewportwidth = window.innerWidth;
// If our scrollbar gets to the end,
// add 50 more pixels. This could be set
// to anything.
if((left + viewportwidth) === width) {
$("body").css("width", width + 50);
}
});
Per the comments in the code, we simply increase the width of the body if we determine we've reached the end. scrollLeft() will only tell us the number of pixels that are currently not visible to the left of the viewable area. So, we need to know how much viewable area we have, and how much is hidden to the left to know if we've scrolled all the way to the end.
If you have a scroll bar on an inner element, like a div, you'd need to update with width of the div, not the body.
Note: You may also need to use $(window) instead of $(document) to get scrollLeft() to work across all browsers.
Note: See here about using "innerWidth". There are some compatibility issues, and you may need to expand it a bit to handle other cases (IE6).
I want my jqGrid to shrink and expand based on the number of rows it has. Let say it currently has 10 rows, the height of the jqGrid will shrink to 10 rows (so that no gaping empty rows is exposed).
If however there are too many rows, the height of the grid will expand to a maximum 'height' value and a scroll bar will appear.
That's built into the grid. You set height to 100%. There's a demo on this page if you go "Advanced -> Resizing.
Try:
jQuery(".ui-jqgrid-bdiv").css('height', jQuery("#bigset").css('height'));
In the jQGrid callback function loadComplete. #bigset is the id for the table I used. This worked perfectly for me.
I have faced the similar problem and none of the solutions worked perfectly for me.
Some work but then there is no scrollbar.
So here is what I have done:
jQuery("#grid").jqGrid('setGridHeight', Math.min(300,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
This code has to be placed in the loadComplete handler and then it works fine.
The first parameter of the Math.min is the desired height when there is enough data to fill in the list. NOTE that this same value has to be set as height for the grid.
This script choses the minimum of the actual height and the desired height of the grid.
So if there are not enough rows the grid height is shrinked, otherwise we always have the same height!
call the below function from afterInsertRow and when deleting a row:
function adjustHeight(grid, maxHeight){
var height = grid.height();
if (height>maxHeight)height = maxHeight;
grid.setGridHeight(height);
}
Though the height 100% worked fine in the demo, it didn't work for me. The grid became much bigger, maybe it tried to occupy the parent div's height. Amit's solution worked perfectly for me, thanks! (I'm new as a contributor here, and so need a higher 'reputation' to mark any votes up :) )
Here is a generic method I came up with based on Amit's solution. It will allow you to specify the max number of rows to display. It uses the grid's header height to calculate max height. It may need tweeking if your rows aren't the same height as your header. Hope it helps.
function resizeGridHeight(grid, maxRows) {
// this method will resize a grid's height based on the number of elements in the grid
// example method call: resizeGridHeight($("#XYZ"), 5)
// where XYZ is the id of the grid's table element
// DISCLAIMER: this method is not heavily tested, YMMV
// gview_XYZ is a div that contains the header and body divs
var gviewSelector = '#gview_' + grid.attr('id');
var headerSelector = gviewSelector + ' .ui-jqgrid-hdiv';
var bodySelector = gviewSelector + ' .ui-jqgrid-bdiv';
// use the header's height as a base for calculating the max height of the body
var headerHeight = parseInt($(headerSelector).css('height'));
var maxHeight = maxRows * headerHeight;
// grid.css('height') is updated by jqGrid whenever rows are added to the grid
var gridHeight = parseInt(grid.css('height'));
var height = Math.min(gridHeight, maxHeight);
$(bodySelector).css('height', height);
}
Add below code inside loadComplete function
var ids = grid.jqGrid('getDataIDs');
//setting height for grid to display 15 rows at a time
if (ids.length > 15) {
var rowHeight = $("#"+gridId +" tr").eq(1).height();
$("#"+gridId).jqGrid('setGridHeight', rowHeight * 15 , true);
} else {
//if rows are less than 15 then setting height to 100%
$("#"+gridId).jqGrid('setGridHeight', "100%", true);
}