i have a div and its height is fixed to 100px right now.
but its data is not static and a user can add as much data as he wants, i dont want scroll bars and it should get resized to data contained in it(height only) is there any css property to achieve this except than min-height as it doesnot work on IE.
the div may have multiple children and i am thinking to do something that doesnt involve calculating change of height of all children
thanks
height in IE6 is essentially min-height anyway. If you don't have a problem using quick hacks -
div.blah {
_height:100px;
min-height:100px;
}
...otherwise, tuck it in some Conditional Comments so you can sleep at night.
<!--[if IE 6]>
<style type="text/css">div.blah { height:100px; }</style>
<![endif]-->
You can specify height:auto;overflow:visible;. This will make the <div> autosize itself.
overflow:visible; height:100px;
Should work, no?
Check out this plugin: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
Hope I helped.
had to do using jQuery only calculated height of children and set it parent, css hacks dint helped
Related
I'm currently face an issue with my fixed 100% width header overlapping the scroll bar. I need the overflow-x:hidden as I have CSS animations which fly in and cause horizontal scrollbars.
Here is the JS Fiddle Code: https://js fiddle.net/kanwu3mc/1/
Any help greatly appreciated.
A quick solution would be to add the following to your scroll event callback:
header.style.width = `${document.body.scrollWidth}px`;
However, I would suggest that you consider implementing a largely CSS solution for such tasks. Consider making the header position: sticky and adding a new teal color class to the element when the scroll event is triggered.
This is a problem
html, body{
...
height:100%;
...
}
change to
html, body{
...
min-height:100%;
...
}
It's incorrect to fix the height of html and body that way. Only min-height allowed in this case.
I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance
Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.
I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/
You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}
This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});
I have a table and I want to assign a css hover to all its cells. But at the same time I have a div tag with a bg image and it has the same width and height as the table and its being positioned right on top of the table with position relative. How can I still assign the css hover to the cells of the table, because when I try it, it doesn't work, and I think it's because when I it's detecting the div tag...
Does anyone know the solution to this?
NOTE: it has to work with IE9 (can't use css3 either)
check this post
It can be done using CSS pointer-events in Firefox >= 3.6 and Safari >= 4.0. Probably some Chrome version too. Unfortunately, I don't have knowledge of a cross-browser workaround.
#overlay {
pointer-events: none;
}
There are 2 solutions:
1-Use the following code:
<td onmouseover="className='tdon'" onmouseout="className='tdoff'"></td>
then write tdon and tdoff classes in css.
2- Use jQuery
$("td").hover(function() {});
I have 2 toolbars, 1 of each side of the screen, and a main content area. I dont want it to have to sidescroll cause that is pathetic, so i was trying to figure out if someone could help me set it up.
My current attemp was:
$("#main").css("width", window.outerWidth - $("#t1").width() - $("#t2").width());
The issue is that it is too big still because of margins. Instead of me doing width, should i do outerWidth, similar to how i did window, or is there a jquery command which will do just that?
Thanks
here is a basic fiddle: it is set up differently, but the idea is there. I just am unsure as to how to do it. http://jsfiddle.net/fallenreaper/DfZx7/
Upon tinkering deeper and deeper with my fiddle, i am fairly certain i figured it out in the example i had given. derp Standby while i look and see if i can apply the same thing to my code.
The sample did not work with my code, but border was set to 2px around, for both main and attributes. Deducting 8 pixels resolves.
You don't need JavaScript to avoid scrollbars. It's a layout width two fixed-width columns and a liquid one.
Here is the "skeleton" of your layout in a responsive way:
<div id="window">
<div id="column-sx"></div>
<div id="main"></div>
<div id="column-dx"></div>
</div>
CSS:
#window {
width:100%;
overflow:hidden;
}
#column-sx {
width:54px;
float:left;
}
#column-dx {
width: 140px;
float:right;
}
#main {
width:100%;
float:left;
margin-right:-194px; /* left + right col width */
}
#main > * {
margin-right:194px; /* left + right col width */
}
This way it will never "break" nor cause an horizontal scrollbar.
Anyway, probably you want to set a min-width for #main contents, and add another container for contents instead of targeting them with > *
Check this fiddle with your code revised
Off the top of my head, i would think outerWidth would work. If it doesnt, you can find the margin value via the .style attribute - but thats not ideal.
One thing you should be aware of is window resize if your setting your widths dynamically and you truely hate horizontal scrolling. You could put the above function also in the $().resize() function to ensure the widths are always within the window and complement this with css min-width so it doesnt go too small.
For the following HTML:
<td class="width2 padLeft" id="loading_45"> </td>
the following JQuery:
$('#loading_45').addClass('loading');
With the following css definition:
td.loading
{
background-image:url("../images/icon_loading_circle.gif");
background-position:left center;
background-repeat:no-repeat;
height:auto;
position:absolute;
text-align:center;
}
does not cause the background-image to appear in IE7 (works fine in FF)
Does anyone have an idea what I am doing wrong?
As Pointy noted the problem was in the css the position:absolute; definition should be removed
Thanks all for answering so fast
I'm sure that "addClass" is working, in that it's adding the class to the element, if (as #Gaby notes) you're doing it at the right time. Since it works in Firefox, you probably are.
I suspect that the problem might simply be that your stylesheet is freaking IE7 out. Putting "position: absolute" on a table cell is likely to cause problems, like making the table cell render in completely the wrong place. When I try it, table cells always render in the upper left corner of the page, even though the stylesheet doesn't specify a "top" or "left".
Try testing your page with that class hard-coded onto the table cell and see what happens.
make sure the code runs after the DOM is loaded using
$(function(){
$('#loading_45').addClass('loading');
});
or
$(document).ready(function(){
$('#loading_45').addClass('loading');
});
Also make sure the elements has a width/height that will fit the background image.
Demo: http://www.jsfiddle.net/9PZZB/2/