Develop Reference

Using jQuery to add a fixed position to a div

I am trying to achieve the effect of an div scrolling until it reaches the top and just stays there.
I have achieved this with:
HTML
<div id="nav">this is nav</div>
<div id="mooey">
<div id="theFixed" style="position:fixed; background-color:red">SOMETHING</div>
</div>
CSS
#mooey {
background: green;
min-height:250px;
margin-top:300px;
}
#nav {
background:#000000;
position:fixed;
top:0;
width:100%;
height:100px;
}
JavaScript
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(100, 300 - $(this).scrollTop()));
});
What I want to do, Instead of stating that the div theFixed is fixed in the style in the HTML. I was wondering if there was a way of applying this using the code.
Reason being is that if the script isn't enables or fails for whatever reason - I want the theFixed div to scroll along with the mooey div rather than be stuck in the middle of the page.
You can see what I have done here:
http://jsfiddle.net/susannalarsen/4J5aj/7/
Any ideas for this?

Use $('#theFixed').css('position','fixed'); to pin it down.

<script>
$(document).ready(function(){
$("#FixedElement").css("position","fixed");
});
</script>

loading indicator autocomplete

I have implemented an autocomplete functionality for a textbox in my web application.
The issue here is that my textbox is having width 100px. The loading indicator is a background css added to the textbox when user starts typing into it.
I want the loading indicator to be at the extreme right side of the page.
But since the indicated is appended to the text box(width = 100px), the loading indicator stays within it.
Please let me know how to place the loading indicator to the extreme right.

Demo Jsfiddle
One option is to wrap the elements in a wrapper div then use the :after pseudo selector to add in your loading indicator (simply the text image in the demo, replace this with '' and use a background-image along with height and width). The two examples show justifying within the input to the right, or all the way across the page to the right.
HTML
<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>
CSS
html, body{
position:relative;
width:100%;
padding:0;
margin:0;
}
input{
width:100px;
}
.wrapper{
display:inline-block;
}
.wrapper:first-child{
position:relative;
}
.wrapper:after{
position:absolute;
content:'Image';
right:0;
}

How to reduce width of div using JQuery, CSS so that the left section is reduced and not the right?

This sounds like a stupid question but I cannot figure an easy way of doing it. Let us say that I have a fixed-width Div with the string ABCDEFGHIJ as its content. If I reduce the width it will stop showing HIJ or whatever from the right side. I want the visibility of the content from the left side getting impacted. So, let's say that the div has a width of 100px, then
$(div).css('width':'50px');
should not impact the display of EFGHIJ, for example.
Yes, I could have an inner div and shift its position to the left, for example, by the amount of width reduced. Is there a shorter way of doing this?
Thanks

To Hide the beginning letters but not the last letters, you need to change the direction of the letters using css direction: rtl.
and also to hide the letters, you should mention overflow: hidden and some width to the container.
Working Fiddle

One solution is to use a wrapper and CSS positioning:
jsFiddle example
<div id="outer">
<div id="inner">ABCDEFGHIJ</div>
</div>
#outer {
position:relative;
overflow:hidden;
border:1px solid #999;
width:50px;
height:20px;
}
#inner {
position:absolute;
right:0;
}

Centered content with header from left to center

I didn't know what would be the best title for my question...
Well, I'll show what I want to do with a simple picture:
The issue:
I have my content centered, lets say it's 980px width.
Now, my header will have a logo and a menu.
BUT, I want my header to
use only a left side of the top, like 50% of the content width and
then stretch to the left side of the viewport. I know this is
possible using javascript and calculate the left offset of the
content and set the dynamic width div with it's left offset.
Is it the best way? I believe there should be another way, but I can't think of one. Hope you guys have a better idea than mine, since mine slows down the perfomance of the site when I resize the window.

Maybe have 2 divs; one in the background and one to contain the logo?
http://jsfiddle.net/kUKyp/1/

I believe what you are after is margin:auto in CSS. It's very simple:
Put your content div on the page, with a fixed width of say 980px as you wanted and set margin:auto.
Put your logo and menu div inside content.
Here is a good example of this in action:
http://bluerobot.com/web/css/center1.html
The CSS code from the above page:
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
And the markup:
<body>
<div id="Content"></div>
</body>

Using twitter bootstraps fluid layouts
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6"> (6 for half of the width, number can be changed 1-12) your logo and menu
</div>
your content
</div>
</div>

Is there anyway in CSS to make the page width variable?

I have a page that has no vertical scroll, rather, everything is displayed horizontally.
if you scroll all the way to the end of my page (all the way to the right) you will see my contact info.
For example:
<div1></div1>
<div2></div2>
<div3></div3>
<divN></divN>
In this case, div1 is the most left item, with div2 in the center div3 to the right of it... and all the way at the end, divN is displayed.
every div is 500 px wide.
I can set my page width to 20000px ( for 4 divs ) and that works great.
However, I wanna make my page dynamic and each div, other than divN is loaded from a database. This means, each time I add content, I have to manually increase my page width.
Is there a way to automate this process.

As per i understand may be that's you want this:
.parent{
overflow:hidden;
white-space:nowrap;
}
.parent > div{
width:500px;
height:300px;
border:1px solid red;
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;
white-space:normal;
}
Check this http://jsfiddle.net/HJsrJ/

Why don't you use width:100% for an external div and make other divs width:33% with every content floated in the right way?
See example

You could save the CSS into a table, inserting placeholders where you want to dynamically change values. Heck, this could even just be a template file somewhere. Then, whenever you publish a new section on the base, pull the template, string-replace the placeholders, and then write the new CSS out to file.
Make sense?

Another option would be to give each of these div a class then use javasript to count the number of classes present multiply this by the required width of each div then use javascript to set the page width with the on document ready event.

I'm not 100% sure what OP wants here, but here's a 'solution':
HTML:
<div class="parent">
<div id="div1">1 has content</div>
<div id="div2" class="nocontent"><!-- no content --></div>
<div id="div3">3 has content</div>
<div id="div4">4 has content</div>
<div id="div5" class="nocontent"><!-- no content --></div>
<div id="div6" class="nocontent"><!-- no content --></div>
</div>​
CSS:
.parent {
white-space: nowrap;
}
.parent > div {
display: inline-block;
width: 200px;
margin-left: 1px;
background: #eee;
}
.parent > .nocontent {
display: none;
}
​
JavaScript (jQuery):
$(function() {
// Simulate loading content
setTimeout(function() {
$('#div2').text('2 has content now').removeClass('nocontent');
}, 3000);
});​
Demo:
http://jsfiddle.net/foxbunny/EY9sc/