So yeah I've read plenty of questions asking this, but I can't figure out how it can be done via custom calculations performed by JavaScript. I want one fixed column on the left side to size correctly when it's resized within container, and not to interfere with the columns along it.
Here is the example code, so far what I've achieved when trying to do it in pure Bootstrap and CSS: http://www.bootply.com/arSNSzWA1U
But there lies a problem. On bigger screens it sizes incorrectly because of the fixed attribute for which percentage measures of the whole window are being taken, not of the parent.
So, my question is, how it can be brought back to normal with JavaScript/JQuery? Thanks in advance!
If you replace the col-md-3 with a col-md-2, it aligns nicely on large screens. To get it to work on small screens, you'd have to add padding to the top of the right column. I´d think it should be possible to let CSS and #media queries handle this, no need for JS.
Related
I´m trying to code blog and i want to synchronise positions of timeline events and it´s posts. I coded it as two different columns and I´m trying to get height of post with jQuery and then count the size of blank space in timeline event. Everything seems to be set OK, console gives me equivalent numbers and so the programmer tools in chrome. You can see the height of the post here and these are heights of elements next to it: element1, element2, element3. Together, it 740px but the main element-post is also 740px.
So, I would like to know, how is this possible? Thank you.
As you can see in the pictures, the margin is not included in the size. So, for instance, while that "G+" icon may be 32x32, with margins, it taking up what looks to be closer to maybe 48x48. And the height of the article is only referring to up to the green line (the padding).
There are probably multiple ways of solving this, but using what you're doing now, if you wrap those margin-spaced elements in divs, then those wrapping divs will have the correct sizing themselves.
Dear Elders of The Internet -
I have created a headache for myself, and I hope you can help :-)
This is a two-part questions. I have a page with three panels, and want a horisontal slide. For this I have created buttons, see live demo here.
1. Horizontal slide, responsive
When clicking top right button "two right panes" I want the page to show just that: the two right panes only. This is not a problem on large screens, but I cannot get it to work on slightly smaller (media queries and further responsiveness, I think I will be able to figure out).
Similarly; when clicking "single left pane" I would like it to stretch the third (far right) panel, and hide the two others.
Clearly, I want it to respond to a 100% viewport.
2. Highchart
I cannot get the Highchart chart to act accordingly depending on the top left buttons sliding. The highchart will adjust if I resize the whole window, but I cannot get it to adjust when sliding panels. For a demo of a chart that works, scroll down in third panel (this is "homemade" graphs).
I have attempted to illustrate the problem in the screenshots below.
(I have posted another question relating to the same page, if you should be so inclined to take a look).
I suspect it is pretty simple, but I cannot for the life of me see where I went wrong. Any hints would be much appreciated. All the best.
Highcharts will resize only when window is resized, if you want to resize chart use chart.setSize(w,h), see reference.
Well, good people, I kinda figured it out myself... for the possible benefit of others; my solution was to set the width of the two first columns fixed (or rather; max-width), and thereby using calc to calculate the size of the third columns with minus the two fixed width divs.
width: -webkit-calc(98% - 520px);
width: calc(98% - 520px);
For the Highchart part of the question, much thanks to #Pawel for prompt answer. I haven´t entirely worked it out, as we are currently discussing whether using Highcharts or not is the way to go. If so, I guess I might be back with more questions later.
In the picture bellow I am using a container for every widget with a set width 80px, floated right and right margin 10px. However, I would like the container width to be the same as the actual width of the widget (button + the counter).
As far as I can think of it, it can't be done using CSS and unlikely using JavaScript (because of the same-origin policy). Though, is there a solution?
Even if same-origin wasn't an issue, if you managed to read the actual width from any element in the widget implementation, you couldn't rely on that, because the widget structure could change anytime, breaking your code.
So I guess as of now the answer is: no, there isn't a solution.
In the last period I always ended up showing widgets in a left aligned column, because they are really ugly aligned horizontally.
However I just found a jQuery plugin who looks a really promising workaround: http://sharrre.com/.
I've got a small issue with a website I'm currently working on, that doesn't bother me too much, but would be nice to fix. We've designed the site (along with the rest of the advertising for this event) to be based on a strict square grid. Everything is working just fine, except for one little problem:
At the bottom of the page, we have a few paragraphs of body copy that are throwing off the page by a third of a grid square. (We have the line-height of the text to be a third of a grid square) Short of Javascript calculations, is there any way we can add some sort of "smart" padding to the bottom of these paragraphs to re-align the next elements to the grid?
is there any way we can add some sort of "smart" padding to the bottom
of these paragraphs to re-align the next elements to the grid?
I don't think there's a pure CSS fix, particularly when you take into account the fact that different browsers/operating systems might render the text with slightly different height.
The only other thing I can add to my answer is a JavaScript fix, which you don't want:
document.body.style.height = Math.round(document.body.offsetHeight/72)*72 + "px";
At least it's short.
I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.