Develop Reference

How to make sure div in background isn't visible until hidden?

For my mobile website I have two full screen divs, e.g.:
<div id="splash-page"> ... </div>
<div id="content"> ... </div>
I have set up the z-indexs so that #splash-page is on top of #content. This is because I would like it so that #content is not visible until I call $("#splash-page").hide().
Here's my CSS:
#landing {
z-index: 9999;
}
However, when this page loads on a slow connection, sometimes #content is visible and then #splash-page covers it.
What is the best way to achieve the desired effect without doing an AJAX load or something else complicated with #content?

What about just hiding #content initially, instead of doing it through z-index?
Then you can call $("#spalsh-page").hide(); and $("#content").show(); in tandem.
I would put a display:none; style on #content initially

use css and set display to none by default:
#content
{
display:none;
}

jQuery hide() targeting <p> element hides background of entire parent div

I have a simple blog page - a list of posts that each consist of a title and contents. When the page loads I want all posts' contents hidden until their titles are clicked. The following code accomplishes this but with an unwanted side effect - the on-page-load hide() function that hides each post's content also hides the background of the containing (id="content") div:
Relevant JavaScripts:
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Summary of blog page:
<section class="grid_7">
<div id="content">
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
</section>
Relevant CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('../images/content_background.jpg');
}
When the page loads the list of titles displays without the #content parent div's background. However when I click on a post's title the #content div's background shows up behind all posts up to and including that one.
Any idea what's going on?

It sound like you have some CSS that applies to the blog_head elements, that makes them float, for example:
.blog_post { float: left; }
In that case, the reason that the background doesn't show up is that the height of the content div is zero. A floating element doesn't affect the size of its parent, and when the content div only contains the headers, the height becomes zero. The background is still there, but there is no area where it's visible.
Add an overflow to the content div, that will make it contain its children:
#content { overflow: hidden; }
Note that this will not hide anything as long as you don't specify a size for the content element, it will just change how it's rendered so that it will become a container for its children.

A bit of a stab in the dark: Your #content div will, of course, be a lot shorter as the blog posts aren't there, basically consisting just of the divs with the titles. Perhaps that's the problem.
Does the image have a blank (or subtle) bit at the top or something, so that it's only apparent that it's there when there's more content in the #content div (e.g., when it's taller)? Or is there some other reason you can see that when #content is really short, you wouldn't see the background on the part of it that's there? (You can use the debugging tools in most modern browsers to see what the dimensions of the #content div are when the paragraphs are hidden; or slap a border on it temporarily, but tools these days are pretty good.)
Basically, since the jQuery doesn't, of course, actually hide the background, it must be a side-effect of the paragraphs being hidden — because of the effect that has on the dimensions of the #content div.

This is working fine for me:
HTML:
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('http://bluebackground.com/__oneclick_uploads/2008/04/blue_background_03.jpg');
}
JS
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Check it live here: Jsfiddle example

HTML and CSS..adding divs side by side n times

I need to build a HTML/CSS layout with the following layout
|Static Div|Content Div0|Content Div1|...|Content DivN|Static Div|
a scaled down version of my code is like follows:
<div id="container">
<div id="static_div_1"></div>
<div id="content">
<div id="item1"></div>
<div id="item2"></div>
....
<div id="itemN"></div>
</div>
<div id="static_div_2"></div>
</div>
Requirements:
All DIVs need to be stacked next to
each other.
I will need to add DIV's in the content DIV dynamically using javascript
The static DIV's need to maintain their position at the beginning and end of the content.
Content DIV should scroll horizontaly
I am struggling with the following issues:
After a point the content div starts wrapping the inserted DIV and another row of DIVs start to be rendered.
Edit: Its not something tabular in nature like plain data. Assume each div is like a form in itself. Something looking like a W2. I just need scrolling in the content DIV. To make the matters worse I am not really a GUI guy.. :(
Any help will be greatly appreciated.

The CSS code you need is this:
#static_div_1, #static_div_2 {
float: left;
width: 200px;
}
#content {
float: left;
overflow-x: scroll;
white-space: nowrap;
width: 600px;
}
#content .item {
display: inline-block;
*display: inline; /* Target IE6/7 only */
width: 150px;
zoom: 1;
}
Note I have added a class "item" to each of the items inside the #content div to style them. The keys in this layout are:
Make "float: left" the three parts, #static_div_1, #static_div_2 and the #content divs (and optionally set a fixed width to them).
The "overflow-x: scroll" style on the #content div.
The "white-space: nowrap" to the #content div.
Set "display: inline-block" to each item inside the #content div.
You'll notice there is a space between each of the items. This is the newline space, so to avoid it, there must be no newline or space between those item divs.
I hope this results helpful to you.
Best regards.
UPDATE: It now works on IE6/7. For correct setting of "display: inline-block" on these browsers notice the addition of the lines:
...
#content .item {
...
*display: inline; /* Target IE6/7 only */
...
zoom: 1;
}

CSS / JavaScript - content outside a element with overflow:hidden

I have a container div element that has overflow:hidden on it. Unfortunately this property is required on it because of the way the site is made.
Inside this div it's all the site content, including some tooltips. These tooltips are displayed with jQuery when you mouse over a link or something.
The problem is that some of these tooltips will display partially hidden because of the overflow thing above, because they are positioned outside the container div...
Is there any way to be able to show a specific element from inside this container, even if it's out of its boundaries? Maybe a javascript solution?
the html looks like this:
<div style="overflow:hidden; position:relative;">
the main content
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>

try this:
<div style="position:relative;">
<div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
just place your main content to another div inside the main div and give provided css to hide the content if overflowing...

CSS works like a box, and sometimes, you have elements "flowing out". Setting overflow: hidden on the main element hides contents that flow out of this box.
Consider the following:
HTML
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
CSS
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`
This outputs the following:
Note that the rest of the texts that overflow are hidden.

if overflow:hidden is to contain floats, then there are other ways that would allow tooltips to not be cut off. look foe clearfix:after

Making an entire tab clickable

I'm making a template that is relying on a lot on a tabbed interface and in order to make it a bit more intuitive, I want to make sure that a user can click anywhere in the tab in order to activate it, instead of having to click the text inside the tab. In order to achive this, I'm currently doing this:
<div class="tab" onclick="javascript:window.location='http://example.com';">
tab text
</div>
for all the tabs I create. Does anyone have a more efficient way of doing this that they'd like to share with me/the community?

It would be more accessible if you did this:
<div class="tab">
tab text
</div>
Setting the <a> to block lets it fill the width, and you can give it height, padding etc. just like a <div>. You could even do away with the <div> entirely.
tab text
Of course, you'd add display: block; to .tab {} but you get the idea.

It's better in terms of semantics and compatibility to modify the <a> tag with CSS to do this, you could try something like this:
a.tab { display:block; }
And then also set other relevant attributes like the width/height, background color, etc for that.
Then instead your HTML looks like this:
<a class="tab" href="http://example.com">tab text</a>

Make your a tags block-level elements and put your tab padding on the link instead. For example, if you have…
<style type="text/css">
div.tab {
float: left;
padding: 10px;
}
</style>
<div class="tab">tab text</div>
…then change it to this…
<style type="text/css">
div.tab {
float: left;
padding: 0;
}
div.tab a {
display: block;
padding: 10px;
}
</style>
<div class="tab">tab text</div>
This will cause the link to take up the entire "body" of the tab, so you can click anywhere on it.

PPS: the short answer was, you can turn a A tag to display "block" mode, and add any padding, and that padding will catch the clicks. Floating the element (float:left, float:right) is an implicit "display:block". An "inline" element (such as SPAN) also uses padding to determine the area which gets the background image; but without affecting the layout.
The simplest way to do it would be something like this:
ul.tabs, ul.tabs li { float:left; margin:0; padding:0; list-style:none; }
ul.tabs li a { float:left; padding:4px 10px 4px; border:1px solid blue; border-bottom:none; margin-right:4px; }
.clear { clear:both; /* add width:100%; overflow:hidden; for IE6 pos */ }
<ul class="tabs">
<li>Lorem</li>
<li>Ipsum</li>
...etc...
</ul>
<div class="clear"></div>
If you use the same width for each tab (depending on longest text in it), then you can even use a single gif background image:
ul.tabs li a { /* same above + */ background:url(tab-bg.gif) no-repeat 50% 0; text-align:center; width:120px; }
The more advanced, classic way of doing tabs that adapt to varying font sizes and can use custom imags for the corners and filling is "Sliding Doors" :
http://www.alistapart.com/articles/slidingdoors/

Since you're opening up a new window, this is about as efficient as you're going to get, unless you want to put it into a function to shorten it for typing purposes.

Instead of using a <div/> tag, why not use an <a/> with appropriate styling to match what is currently applied to the <div/>? That way you can use the href attribute of the anchor rather than resorting to JavaScript to direct the user.

As mentioned by John Rasch, making a javascript function for typing purpose could help you, but also... dont make me think! If its clickable, show it with cursor: hand in the css!!!

how about:
<script type="text/javascript" src="jquery.js">
$(document).ready(function(){
$(".tab").click(function(event){
window.location='http://example.com';
});
});
</script>
...
<div class="tab">
tab text
</div>

There are two techniques to achieve this
inline li + a
and
float li + block a
summariezed here
http://www.pagecolumn.com/webparts/making_tabs_with_CSS.htm