We Keep Coding

Element moving after Jquery fadeIn()

I have a jquery script which controls some menu bars when activated. Basically, when the user presses the top menu bar, the bottom two would slide down and make space for the content (a html table in this case). After this, the content will use the fadeIn() function to appear on the page. However, at this point. the two bottom menu bars would jump further down the page.
Is there anyway to make them stay at their original positions on the page without change the .animate() function measurements?
Here is the relevant jQuery code:
menustatus=0;
function menuconfig(){
if(menustatus===0){
$('.menuhead2').animate({
top:"500px"
},300)
$('.menuhead3').animate({
top:"555px"
},300)
$('#table1').delay(300).fadeIn(300);
menustatus=1
}
And here is the relevant CSS code:
.menuhead2{ /*This is the one of the bottom menu bars */
position:relative;
top:80px;
cursor:pointer;
height:30px;
z-index:10;
}
.menuhead3{ /*This is the one of the bottom menu bars */
position:relative;
top:135px;
cursor:pointer;
height:30px;
z-index:10;
}
.menuhead1{ /*This is the top menu bar */
cursor:pointer;
height:30px;
position:relative;
top:30px;
}
#table1{ /*This is the content that fades in using the fadeIn() jQuery function. */
position:relative;
top:50px;
left:30px;
display:none;
z-index:9;
}

It's not super clear without a jsfiddle but try setting #table1 to position absolute instead of position relative

How to auto scroll text within div depending on width of DIV

I have div with fixed width.I want to auto scroll(lefta nd right:Hirizontal direction) the text if content of div is more than div width.How can i do this thought css or jquery.Currently div has a class like this..
.divcon{
margin:0px;
padding:0px;
height:30px;
width:143px;
font:bold 9px Verdana, Geneva, sans-serif;
line-height:30px;
color:#000;
background-image:url(../images/glass_bg.png);
background-repeat:repeat-x;
display:block;
float:left;
}
i dont need any scroll bar..i want it like a marquee like feature

One Simple method will be adding overflow in the CSS class:
overflow: scroll;
This will make div scrollable both in horizontal and vertical.
If you want scroll in one direction only, then you should try:
overflow-y:scroll; // For vertical scroll bar
And
overflow-x:scroll; // For horizontal scroll bar

you can have like this
for giving horizontal scroll
overflow-x:scroll;
for giving vertical scroll
overflow-y:scroll;
for giving scroll on both side
overflow:scroll;
From above css default scroll will come it will not depend on the content size
To make it depend on the content size make scroll --> auto

Add
overflow: auto; /* scroll bars appear, only when they are needed */
or
overflow: scroll; /* scroll bars appear (both horizontal and vertical, even when not needed */
There are also other ways of coding overflow, especially if you want a specific scroll bar to appear. Although, these are not widely supported by older browsers (IE8 and earlier).
overflow-x: scroll; /* only horizontal scroll bar */
overflow-y: scroll; /* only vertical scroll bar */

Here is the code for static text, you need to give the width according to text inside the div:
CSS:
.divcon-outer{
width:143px;
}
.divcon{
margin:0px;
padding:0px;
max-height:45px;
width:auto;
font:bold 9px Verdana, Geneva, sans-serif;
line-height:30px;
color:#000;
background-image:url(../images/glass_bg.png);
background-repeat:repeat-x;
display:block;
overflow-x: auto;
overflow-y: hidden;
}
.divcon p{
min-width:200px;
max-width:50000px;
margin:0;
padding:0;
}
HTML:
<div class="divcon-outer">
<div class="divcon"><p>I have div with fixed width.I want to auto scroll(lefta nd right:Hirizontal direction) the text if content of div is more than div width.How can i do this thought css or jquery.Currently div has a class like this..</p></div></div>

Here's one example that uses strictly CSS to horizontally auto-scroll as an area with a fixed width is populated. No scroll bars are used or rendered. A few things to note here:
Your question is a bit ambiguous. When you say you want it to auto-scroll, do you mean that you want the content to scroll by as it's added to the div? Do you mean you want it to repeatedly scroll over the same text? Or perhaps something else? I'm assuming here that you're requesting the first option.
The scrolling here uses no JavaScript, but of course some script is needed to populate the div that's being scrolled.
I've only tested this in Firefox and Chrome.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#scrollbox{
display: inline-block;
width: 16em;
overflow: hidden;
border: 1px solid #F00;
}
#scrollcontent{
float:right;
white-space: nowrap;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
var idx = 0;
$(document).ready(function(){
setInterval(function(){
idx++;
$('#scrollcontent').append('foo_' + idx + " ");
}, 200);
})
</script>
</head>
<body>
<span id="scrollbox">
<span id="scrollcontent"></span>
</span>
</body>
</html>
That works nicely as long as you're adding text to the div and only wish for it to scroll rightwards as the text is added. If you want it to automatically scroll left and right, then you'll need JavaScript to automatically zig-zag the position of "#scrollcontent". You would need an algorithm that gets the width of the parent span ("#scrollbox" in this case), subtracts that from the width of the child span ("#scrollcontent") and oscillates a number between zero and the result of that subtraction. The x position of the child span would be set to the negative of that number. Note that you would need to give "scrollcontent" an absolute position, and remove the float: right attribute. You would also need to specify the position attribute for "scrollbox", otherwise the absolute position of scrollcontent would be relative the next parent that does have the positioning explicitly defined, rather than scrollbox itself.

Jquery add div with background behind text element

I want to place an absolute positioned div behind text some text or images. The reason I can't set the absolute div z-index to -1 is because there is content behind the text or images with background images. So the absolute div will be positioned behind that.
I am familiar with Javascript, jQuery, css etc. So what could I do to position the absolute div behind the text but in front of the background images?
Thanks!

Like this maybe?
.div-1 { background-image:url(my-image.jpg) no-repeat 0 0; position:relative; }
.div-2 { position:absolute; z-index:1; top:0 left:0; }
.div-3 { position:absolute; z-index:2; top:0 left:0; }
<div class="div-1">
<div class="div-2">behind</div>
<div class="div-3">in front</div>
</div>

Rather than setting z-index of div with background image to -1, create a div containing the images/text and set its z-index to 1.

How to keep (absolute) footer at the bottom?

I want to keep my footer at the bottom of the page while keeping there position absolute , the have the following page structure :
<div id="head"> </div> //want to keep its size auto and always on the top (position absolute)
<div id="body"> </div> //the children of #body have position absolute (keep size auto)
<div id="foot"> </div> //want to keep this at the bottom (just below body , if body size
changes then footer will also change (position absolute)
How can i do this?
Edit
I think i was not clear to my question, sorry for that but my actual problem is that in #main ( height : auto ) the contents are absolute so those contents are not included in the height of main ( i am just guessing this ) thats why the height of main was 0 because of this the footer comes up. This is my actual problem.

Use bottom:0:
#foot {
position:absolute; /* your requirement, you can also use fixed though */
bottom:0;
/* your other possible styles */
}
Just keep in mind that for bottom to work, you got to specify the position as you said :)
If you use position:fixed, the footer will still be available on bottom of the page when you scroll but it is up to your requirements.

If i understand correctly you need position:fixed and not absolute..
#head {
position:fixed;
height:30px;
top:0;
left:0;
right:0;
}
#foot{
position:fixed;
height:40px;
bottom:0;
left:0;
right:0;
}
#body{
padding-top:30px; /* the same as the #head height*/
padding-bottom:40px; /* the same as the #foot height*/
}
Demo at http://jsfiddle.net/ZXMTR/

Modal Div to fill entire window including below fold

I have an absolute positioned div that I need to get to to fill the entire document for a background to a modal window.
I can get it to fill the window but when there is a scroll bar it doesnt fill the area that is currently visible.
This is my current code:
position:absolute;
top:0;
left:0;
height:100%;
min-height:100%;
By the way I can get it to fill the document horizontally.

Give the div position:fixed and top,bottom,left,right 0
See here:
http://jsfiddle.net/sQLPr/
edit - removed the following line
and it's parent (probably body)
position:relative

div.covered {position: fixed; top:0; left:0; bottom:0; right:0;}
test it here: http://jsfiddle.net/meo/kGUYG/2/
Position absolute is gonna scroll when you scroll the page unless you find a JS solution. You need to use position fixed so the element does not scroll when the content does.

Put it in a table with 100% width and that's all