ansaurus

Question

Javascript / CSS solution required for a div with unknown width

Answer 1

A:

The border issue is because there is a background on the UL. When the LIs wrap, you get the background wrapping as well.

It seems that you want something like this.

#Features_Row{
   border-bottom:1px solid #D2E0C0;
   padding-bottom:3px;
}

easement 2009-09-14 14:56:39

@easement: Thanks for getting back. I've to apply the border to the class .prereferences dynamically. When the preferences are at the right of the tabs, there's no border required. But when the preferences move up it has to take up 100% width along with a border at the bottom.

Vasanth 2009-09-14 15:06:55

Answer 2

A:

I don´t know about css only, but in javascript you can get the width of the two ul's, compare it to the width of the parent and if bigger, add a new style to your preferences ul, setting it to 100% width and adding the bottom border.

Quick jQuery / javascript solution (not tested...):

$(document).ready(function() {
    $('.ArticleTabs').foreach(function(){
        if ( ($(this).find('.Preferences').width() + $(this).find('.tabs').width()) > $(this).width() ) {
            $(this).find('.tabs').addClass('underlined_class');
        }
    });
});

You will need to add jQuery before this part of javascript. For example from Google (if you don´t host it yourself):

<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;

jeroen 2009-09-14 14:59:38

Yes. Thanks for the tip again. That's the approach I would like to take! But I have no knowledge of JavaScript, so I am looking for plug and play code :(

Vasanth 2009-09-14 15:08:21

Woah. Thanks for this. Will test and get back to you!

Vasanth 2009-09-14 15:09:10

@jeroen: That was fast! It does look right, but doesnt seem to work. Could you kindly take a look? http://creativesplash.net/experiment

Vasanth 2009-09-14 15:25:56

It´s a jQuery solution, so you will need to include jQuery before the other parts of javascript. Just add the following in the head (the Google hosted jQuery library): <script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

jeroen 2009-09-14 15:35:00

Oops! Sorry din't pay attention and to inform you this late. But we are already using Prototype extensively. Could you kindly write something for Prototype instead?

Vasanth 2009-09-14 15:42:45

Don´t use prototype, sorry...

jeroen 2009-09-14 16:11:06

Oh okay! Would you be able to point me in the right direction? Some examples? Tutorials?

Vasanth 2009-09-14 17:19:46

Answer 3

+2 A:

JavaScript? Pshaw, I think we can manage that in simple CSS, don't you?

Here's a proof of concept. It relies on hiding the second border behind the tab content when it fits on one line. Finishing off the styling and making sure it lines up with your particular choice of fonts is left as an exercise for someone less lazy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    <title> tabs test </title>
    <style type="text/css">
        #nav { border-bottom: 1px solid silver; }
        #prefs { float: right; padding: 0.7em 0; }
        #tabs { float: left; padding: 0.5em 0; white-space: nowrap; }
        #tabs a {
            display:-moz-inline-stack; display:inline-block;
            margin-right: 0.7em; padding: 0.3em 0;
            width: 7em; text-align: center; background: silver;
        }
        #tabs a.selected {
            position: relative; z-index: 2;
            background: white; border-width: 1px; border-style: solid; border-color: black black white;
        }
        #content { clear: right; border-top: 1px solid silver; }
        #content .wrap {
            clear: left; position: relative; z-index: 1; top: -0.6em;
            background: white; border: solid black 1px;
            padding: 1em;
        }
    </style>
</head><body>
    <div id="nav">
        <a href="n1">Sample links</a> |
        <a href="n2">blah</a>
    </div>
    <div id="prefs">
        <a href="p1">Preference 1</a> | <a href="p1">Preference 2</a>
    </div>
    <div id="tabs">
        <a href="t0" class="selected">Active Tab</a>
        <a href="t1">Tab 1</a>
        <a href="t2">Tab 2</a>
        <a href="t3">Tab 3</a>
    </div>
    <div id="content"><div class="wrap">
        Lorem ipsum dolor sit amet blah blah blah.
    </div></div>
</body></html>

This uses inline-blocks to stop the tabs wrapping when they don't fit on the screen on their own. You might or might not want that, I don't know. If not, change that line to a simple float.

bobince 2009-09-14 16:05:36

Interesting, but won´t your .wrap border show between the tabs and the preferences when they are on one line and there is space between them?

jeroen 2009-09-14 16:21:58

@bobince: Wow! great! Thanks for taking the time to provide the code. I did try this, the problem is that in reality the tabs are taller than the ones in the wireframes that I am developing. What are your thoughts?

Vasanth 2009-09-14 16:22:18

Vasanth: I don't see why that would be a problem, just adjust the vertical padding styles until it fits. I used ‘em’; you might need to set fonts and paddings all in ‘px’ if you're determined to get an exact size. jeroen: nope, the extra ‘clear: left’ takes that element down to the bottom of the left tabs.

bobince 2009-09-14 20:03:04

+1: perfect solution, no javascript needed.

jeroen 2009-09-14 23:34:52

@bobince: This works very well. I was a little apprehensive about the border which is not present but not absent either :) Overall, I am very happy to note that this is achievable in CSS and Thank you for that!

Vasanth 2009-09-15 09:18:17

ansaurus

tags:

views:

answers:

Javascript / CSS solution required for a div with unknown width

related questions