Height auto - displaying hidden content when the browser is resized - javascript

Here is the site im working on, forgive me if im not being specific enough, im new to this.
http://daniel.grocock.me/portnew
Setting the paragraph height for the #introexpand div and have a resize function that
checks to see the if the #introexpand needs to fit in a bigger or smaller area when the browser has resized.
function resize() {
$("#introexpand").css("height", "auto").show();
var pHeight = $("#introexpand p:first").height() + 15;
$("#introexpand").css("height", pHeight);
}
So im setting the pHeight to auto before resetting height and to show it for a brief second so the correct height can be obtained.
The problem is now when i resize the browser the #introexpand div pops down before the link span.learnmore is clicked.
If i remove height auto from the CSS it seems to fix it but then the #introexpand div dosent function when clicked.

You could let this function run in a onresize-handler (jQuery), but it's simpler be solved with CSS:
#introexpand {
padding-bottom: 15px;
}

Why not approach this differently. Rather than trying to calculate the height that #introexpand needs to be, let it always be auto and just toggle display:none; when you click on span.learnmore.
To do that, you'll need to remove position:relative from #introexpand and position:absolute from #introexpand p.
After you've done that, just default #introexpand to display:none and then on click on span.learnmore you can either .show() the div or .slideToggle() it for something a little fancier.
I just think you're trying to make it more complex than it needs to be.

Related

How to automatically set the div container adaptively towards the content length?

I want to make the div container can automatically resize its div-size (height) along side with the content, instead of going out of the area when the text is more than container area. Can anyone help me out to fix this instead of editing up the css for div-container? When I tried to change the div-size even it fits up the content, but while it is more than the div-area, I have to edit it manually again through CSS code.
Is it possibly to make it automatically? or maybe using JavaScript function?
CSS
div#div_id{
height : auto;
min-height: 100% !important;
}
Set your div height to auto. It will take height automatically as per your contents.
The behaviour you want is just what a div - or other so-called block-level-element - naturally does unless you give it a defined height. So just remove any fixed heights you apply to the container and you're done.
In case you want your div to be of a certain minimum/maximum height, use min-height/max-height instead of height for that.

How to make a div fit to screen without the other divs being visible

One of the divs which i want to display dynamically has to fit to screen. The problem is that if the earlier displayed div has height more than the screen height, when the dynamic div is displayed in the bottom of the page(after scrolling) there is some part of the earlier div still remaining. I dont want any trace of the earlier while displaying the dynamic div. Also i have to achieve this only by using javascript.
to place an div or any element one above another use position:absolute,top:0; left:0 and width and height to 100%
get the div out of your other divs, but still in the body and make it not visible "display:none;"
Give it some attributes, like Mardzis said, height : 100%; width : 100%; z-index:9999;
Then, when you want to display it, just do .show() or .hide() (with jquery if you use it) or .getElementById('#yourDivId').style.display = "none"; .... & so on...
I found a workaround for this.Put focus on the child div and disable scrolling.

HTML div with absolute position tries to wrap the text. Can I avoid it, without using white space

I have a set of divs with position = absolute, and they can be positioned across the screen.
If the content of any div doesn't fit on the screen, the browser wraps the text into multiple lines and attempt to fit inside the window.
However, I dont want the browser to do that, It should instead hide the content.
http://jsbin.com/welcome/35835/edit/
Edit:
you may think of it as a div on a page with absolute positioning. and
1) the user can drag the div around
2) user can manually change the width of the div( there is a stretch box widget, which the user can use)..
So the problem is when the user is dragging the div around near the edges of the screen, the text should hide and not wrap if it goes out of the window. Hope this explains better
As shown in the example, block 2 shown is what I want.
So, lets say the width of the div is 100px, and the left position of the CSS style is (screen width - 50), then the rest of the text should hide.
Solution 1: white-space:nowrap. Cant use this, since this is a flexible width UI where user can change the width of the div if they want.
Solution 2: If I set the width of the div, explicitly to a number, it works fine.
But not a optimal solution, as then here I will always have to calculate the width for all divs at the time of rendering.
Is there a more optimal solution, which can make the browser not try to fit the text into the screen.
Hard to tell what you're asking. But I think you can use
{
height: 1.2em;
overflow: hidden;
}
To hide the content that is longer than the one line you support
http://jsfiddle.net/MXXDC/2/
If you put them all inside a huge (e.g. 5k px * 5k px absolute positioned div you should see the expected effect: http://jsbin.com/welcome/35862/edit
Is this what you want? (second item)
I wrapped the inner text in a very long div and applied overflow:hidden to it's parent.
I am not sure the exact use case of the widget so I am not 100% sure on what it can have and not have. I have an idea, maybe it will be useful - setting width to a % might help, something like this
.block2{
left: 50%;
top: 100px;
width: 100%;
}
you can set this in the css to avoid calculation with js, but like I said I am not sure of how this is used so this might not work but it might give you some ideas

Keeping height of div static with an ajax call that inserts html

I have an Ajax call that inserts a div with several p elements with text. The problem is whenever I click the button to make the Ajax get, the height of the whole container will change because I haven't set a static height (I have set a specific width though) for the container in my css stylesheet.
Whenever I click the button to load the Ajax info, there will be a brief instant where you can see the container gets really small because I'm just replacing the text in the container with other text. Is there a simple css solution for this?
You could consider using the CSS min-height property, which would prevent the container from shrinking to a size too short (http://www.w3schools.com/cssref/pr_dim_min-height.asp). For instance,
#myContainer {
min-height: 600px;
}
Use
min-height:400px;//Whatever height you want it to not get smaller than
height:400px;//Whatever height you want the div to be
so that it doesn't gets small and use
overflow:auto;
so that it doesn't get big instead becomes scrollable when more content received than expected. Using overflow:auto will only show the scrollbars when the content overflows. i.e, when needed.
In case you want the scrollbars no matter what use
overflow:scroll;//Scrollbars will appear by default, even if not needed.

Scrollable div show content outside of window?

I have this jsfiddle http://jsfiddle.net/r3pek/wxffL/ where i'm trying to understand why does the scroll goes beyond de window size :/
If I remove the "height: 100%" from the rightpane class, I don't have a scroll; if I add it, I have a scroll but that goes beyond the window. Any way I can limit the scroll to the window?!
Thanks in advance!
EDIT:
Just a quick update...
I updated the fiddle to reflect the actual problem. I have an image that takes space as a header and it looks like that image size isn't accounted for. (I really suck at CSS :P )
You have to define a height for an element to scroll. That's why the scrollbar disappears when you remove the height. You're also adding padding to the div along with the 100% height. That adds to the element's height so it ends up being taller than the window. Reduce the height to something less than 100%, maybe 90% and play with it. That will allow you to keep the scrollbar and keep it inside the window. I have a fiddle set up for you here.
The total height (or "outer height") of an element equals inner height (which you can specify in css) + padding + border.
If you use height: 100% but then also add padding and/or borders then the total height will be bigger than 100%. There's a css property called box-sizing that can help you but it's not cross-broswer (you guessed it, IE<9).
If you drop the borders and paddings, it'll be fixed. But then to have borders and padding on outer elements... you'll need to get creative (or come back here with a specific question)
OK, I solved the problem, just not sure if it was the "right way". Anyway, here's how I did it:
added this right before the tag:
<script>
window.onload=setRightPaneHeight;
</script>
Then, I created the function that will calculate the right size for the "rightpane":
function setRightPaneHeight(){
var pic = document.getElementById("headerPic");
var pic_h = pic.offsetHeight;
var total_h = window.innerHeight;
var right_pane = document.getElementById("rightpane")
$(".rightpane").height(total_h - pic_h - 30);
}
That being done, now after the page loads, the right height is calculated for the rightpane DIV. And it works :)
Thanks for all the answers as they made me understand what the problem was!

Categories