I have enormous table to render on website. I need to make it scroll horizontally. Normally I would set fixed width and overflow: scroll but not in this case. The table is pretty tall so I don't see scroll at the bottom of web browser.
Demo: http://jsfiddle.net/cpmjng5b/1/embedded/result/
I could set fixed height but I have text before table that height is dynamic.
http://jsfiddle.net/cpmjng5b/5/embedded/result/
What should I do? Try to calculate div.container height in JS? I already tried floating scroll plugin for jQuery but it is relatively slow. Can I make it in pure css somehow?
This solution is using jquery, but you could also do it with javascript.
Calculate the height of your window and subtract the height of the dynamic text.
Take that number and make it the max-height of your div surrounding the table.
The height in the fiddle is a little off due to the jsfiddle "Result" header, but you can add/subtract any additional pixels if you have a top navigation.
var viewportHeight = $(window).height();
var topcontentHeight = $(".dynamicText").height();
$(".container").css("max-height", (viewportHeight - topcontentHeight) + 'px');
fiddle
Related
I have two-column layout with a header and footer. I have created a JSFilddle with demonstrating this.
The left-column will normally have more content than the right-column.
How can I get the right-column to expand to the height of the left column, or just fill the height of the view-port? I have sene examples of something similar, but not with a footer that is always at the bottom of the display.
How can I get the textarea to fill the height of its parent, the right column (I haven't even got close to solving this one).
I've just edited your jsfiddle.
The idea is to set a min-height on your right column block, and have it determining the height of the whole content section instead of inheriting height attribute from its parent.
Secondly, regarding the text-area. This bit is tricky, you need to use javascript to render it upon everytime a user resize their view port, and update the attribute height of the textarea accordingly.
Cheers
minHeight is important incase you have an empty content container and you dont want the footer to be pushed up right under the nose of the header. Hence minheight prevent that from happening. Once the height of the right column exceeds minHeight, the parent div will be expanded accordingly.
I see nothing wrong with h being the height of the viewport if you really want it to always expand full windows. However I recommend using $(window).innerHeight instead of Height(). But again, this is javascript and your code will never render the same thing on different browsers, so keep that in mind :)
$(window).resize(function() { var h = $(window).height(); $('#MyTextarea').css('height', h-300); });
I have an element which I want to have width: 50%. But when the right scrollbar is there, that 50% looks different than before, and since certain elements appear and disappear (through animation), the scrollbar also appears and dissapears, dynamially changing my element's width.
See the Live Demo
Is there any way I can set an element's width with a percentage and not have it influenced by the presence or absence of a vertical scrollbar?
You could make width adjustments to accommodate the scroll bar on the click, but if you are going to have a lot going on that may cause this to occur, it would probably be best to just put...
body {overflow-y: scroll;}
...and have the vertical scroll bar always be present. See http://jsfiddle.net/htWrC/1/
You could do something like this
Check if the height of the div is taller than the height of the window.
If so, there is a scroll. Set the width slightly wider to account for the scrollbar.
Code
$('button').click(function(){
$('p').toggle();
var a = $('#box');
if(a.height() > window.innerHeight){
$('#box').css('width', '51.7%');
}
else{
$('#box').css('width','50%');
}
});
Example: http://jsfiddle.net/htWrC/2/
I have another CSS problem. A layout that escapes me.
I could, I suppose, get the desired effect by messing about with JavaScript, but that always bugs me - it leads to having the code that controls the layout split between the markup file and the CSS file and the javascript file, and that just makes maintenance a mess.
I've created an example of what I don't quite want: http://jsfiddle.net/4sCKq/1/
The split between header and body is fixed - it's a project-wide thing that I can't change for this page. You'll notice that the header has a fixed height, and the body takes up the rest. This cannot change.
The problem is the left div, within the body.
You'll notice here that the left div has a fixed width, and the main div takes up the rest. This also cannot change.
You'll notice that the left div has a variable height, taking up what is left of the browser window, from the header down. Yep, this is also required.
And at the bottom of the left div I have a fixed-size div, that has the same width as the left div, and a fixed height, and that stays at the bottom, as the window resizes. This is also required.
What is left is the left-main div. I want this to take up all of the left div that is not contained by the left-bottom div. That is, between the two of them, left-main and left-bottom should completely fill the left div, regardless of the size of the browser window. But, as the window resizes, it should be the left-main div that grows and shrinks, the left-bottom div should remain at the bottom of the window, and its size should stay constant.
I've added the show-top and show-bottom divs solely to make it clear where the limits of the left-main div are. If you give left-main a large enough height, it looks like it is filling the div, but in fact it is disappearing behind the left-bottom div. The fact that you can't see the show-bottom div reveals that. I cannot have this - I need all of what is within the left-main to be visible.
So, any ideas?
Rather than define a height you can define the bottom absolute pixel value.
Changing one line in your jsfiddle seems to do it, if i understand the question:
#left-main
{
background-color: #AA9977;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 100px;
}
I was able to get this done pretty easily using some basic jQuery. If you decide to go that route, feel free to use this.
LIVE DEMO http://jsfiddle.net/Jaybles/4sCKq/5/
Here's the magic.
$(window).resize(function(){
var freeSpace = $('#left').height() - $('#left-bottom').outerHeight();
if (freeSpace>=150) freeSpace=150;
$('#left-main').height(freeSpace);
});
UPDATE
After seeing the answer from RSG, I'm not sure I got exactly what you were looking for. My code simply prevents the top div from going behind the bottom one, and does not stretch the div to maximize space. If you wanted to accomplish what RSG did, you can do the following (although RSG's answer is MUCH better as there is no flickering)
$(window).resize(function(){
var freeSpace = $('#left').height() - $('#left-bottom').outerHeight();
$('#left-main').height(freeSpace);
});
I have one big image as a background to my webpage. The image contains a box inside the image itself. How would I place text on that background image such that it should fit in the box, and shrink or resize accordingly (in other resolutions when the background resizes)?
If you're looking to resize the "box" containing the text, you should be able to set the dimensions of the element to percentage-based width and height values with CSS.
If you want to resize the text inside the element, then you might want to consider using JavaScript (perhaps jQuery) to poll the size of the window at set intervals and adjust the text size based on the new window dimensions.
Edit: To clarify, you should be able to set the dimensions of the text box (probably a div) to be a percentage of the page. For example, the div containing the text could be 80% of the window width and 80% of its height. You can then set the margin to be "auto". This should cause the margin around the box and the dimensions to be proportional to the window width.
Example:
<style type="text/css">
div#box {
height: 80%;
width: 80%;
margin: auto;
}
</style>
<div id="box">Text goes here.</div>
This will cause the "box" div to be centered horizontally on the page, but vertical centering is a bit trickier. You'll probably want to look at this page to figure out how to center it vertically to stay within the box in the background.
As suggested by the other individual, you could also make the box background just the background of the text's container and not the entire page background. This might be a bit easier, but I think you will still need to use the percentage-based width and height attributes and auto margin to center it nicely.
For starters, you can't resize a background image. Also, resizing text will need Javascript or a page refresh.
Try making an example at http://www.jsfiddle.net so people better see what you're describing.
UPDATE
Your question is still unclear and I strongly recommend jsfiddle. But if I've interpreted correctly...you're using FancyBox, which suggests you've got some Javascript running your page. Javascript can be used to find if your text is overflowing the container, and can resize it accordingly.
To do this, get your <div> (or container element) and check its .scrollHeight and .clientHeight properties. If the scroll is less than the client, the text doesn't need to be resized. If scroll is larger than the client, you can resize with the .style.fontSize property.
An untested example of what I'm describing is like this:
myDiv = $('containerElement'); // Get container object using its ID
size = 50; // Start with 50px font size
while(myDiv.scrollHeight > myDiv.clientHeight) {
// Decrement font size until scroll is less than client
myDiv.style.fontSize = (size - 1) + 'px';
}
You'll have to do a little legwork on this to get it to work how you like. Things to note:
I used the dollar function to get an object, you can google it for more info
Your container must have defined dimensions for .clientHeight to find
You may need to try .offsetHeight instead of .clientHeight
If you're just looking to control overflow, you can use CSS:
overflow-x:hidden or scroll or auto, overflow-y is the same
white-space:nowrap will prevent auto text wrapping
But, once again, my answer is vague since it's not clear (with code) what you're asking.
The problem with your solution is that it is very unscalable, not friendly to different browsers and will cause more problems as your website expands.
Try separating the box from the other bg image and use the box image as a background for the div you have the text in.
I have a layout with the following requirements
An image on the left side, and content on the right side.
The image is pinned to the bottom left of the viewport
The image does not move when the user scrolls
The image resizes to 100% height of the viewport, up to it's max height. (I don't want the image to distort in it's attempts to be larger than it actually is)
The image retains it's aspect ratio, and resizes it's width according to the height resizing.
The content begins to the right of the image, and moves as the image resizes with the browser viewport.
Now, I've managed to achieve pretty much all but the last of these requirements.
Have a look here:
http://letteringmusic.com/
The image resizes quite nicely, but I can't get the content to float next to the image because image is position:fixed, and therefore out of the document flow.
I'm not opposed to a javascript solution if that's the only way to get the result I want.
Anybody know what I need to do to make this work?
Thank you!!
A quick (and perhaps only) solution is to restyle the content when the browser window resizes (using the window.onresize event). In that function you should read the width of the background image:
var bgWidth = getElementById('background-img').style.width;
getElementById('content').style.left = bgWidth;
and use #content { position: absolute }. I know this introduces another problems, but I think you can bypass them. It's not the most neat solution, as Javascript must be enabled (and the event will be fired a lot when someone resizes this window), but it should work.