Archive for the ‘Javascript’ Category

Equidistant objects with css - another way

Tuesday, October 21st, 2008

I recently read an article about the equidistant spacing of elements with css over at css-tricks.com. The simplicity of the technique really struck me as a case of good old lateral thinking. Despite this I was a little uncomfortable with the extra html that was required to make the technique work.

Inspired by the css-tricks.com solution I decided to try and solve the same problem with out the need for the extra div’s.

Admittedly, the solution I came up with isn’t quite as clean as the one proposed by Chris Coyier but never the less I feel compelled to share it.

Here’s an example

It’s all about lists

firstly, here’s the basic html…

<ul class="equal">
<li class="n1" ><a href="thelink">the first item</a></li>
<li class="n2" ><a href="thelink">Another item </a></li>
<li class="n3" ><a href="thelink">A piece of link text </a></li>
<li class="n4" ><a href="thelink">this also goes somewhere </a></li>
</ul>

That’s right, just good old lists with classes to allow us the differentiate between them.

The css

Firstly, all the list items need to be floated, The floats need to be contained within their parent ul and for simplicity I’ve added a rough and ready css-reset to remove any margins and padding and to remove the default bullets

ul.equal {
padding-left:9em;
height:auto;
zoom:1;/* just for ie - put it in ie only style sheet*/
}
.equal:after{content:".";clear:both;visibility:hidden;height:0px;display:block}
* { margin: 0px;
padding: 0px;
list-style: none outside;
}
.equal li {
min-width:9em;
float:left;
}

The trick, as with Chris Coyier’s solution, the trick is to get three of the four items to each take up a third of the overall width. the trick with this technique is to offset the 1st item using a negative margin and use a padding on the containing ul to prevent anything from droping behind it. You’re now left with a ul which has a width which can be divided into thirds.

.n1{margin-left:-9em;display:inline;/*fix ie6 double margin float bug*/}
.n2,.n3,.n4{width:33.3%!important;text-align:right;width:33.2%;}/*ie6 causes problems due to rounding-up so use a slightly smaller percentage for it.

after the we’ve got the floated <li>’s nicely expanding we need to make sure the last three are right-aligned in their respected <li>

.equal a {
background: #fff;
height: 9em;
display:block;
margin:0 0 0 auto;/*right aligns a block element in the good browsers*/
width: 9em;
text-align:center;/*to override the text-align required for ie6 for the parent li*/
}
.equal .n1 a {margin:0;}

In the good browsers you can use a min-width to prevent the boxes dropping down onto multiple lines.

As with most layout techniques… IE 6 has to be coaxed into behaving how would like. The code required to do this would normally be put in a stylesheet of it’s own using conditional comments but for the purposes of simplicity i’ve used a couple of hacks to keep everything in one file.

Ie6 select box width fix

Wednesday, January 16th, 2008

I’ve looked high and low for a solution to ie 6’s problematic implementation of form select boxes. It would appear that select box width and the width of the option tags are inseparable. What this means is that if you set a width to the select-box there’s a good chance that some of the option text is going to be cropped. For sites with dynamic content, this leaves us only one solution… put the select box somewhere with lots of space.

As I’ve been unable to find a pure css I’ve resorted to Dom-Scripting for the answer.

To solve the the problem I’ve created a script  which will allow you to use set widths for the select boxes. The code then  dynamically resizes them when the user interacts with the select box. Once a selection has been made or the element has lost focus the select box is resized back to it’s original size. In order for the code to work there’s a few tricks that are going on with the positioning model to prevent the resizing from affecting other elements but hopefully these won’t be apparent.

This solution isn’t ideal but with few alternatives it could be the answer.

*note
It’s worth mentioning that I’ve seen other scripts which do practically the same thing,  although all the one’s I’ve seen use one Framework or another. My solution is bare-bones, self contained, and unobtrusive. hope its useful.

View the example

Update
It’s worth pointing out that after testing this in the wild I’ve realised the css usually needs quiet a bit of attention to get it working as intended. At some point I hope to get this working straight out of the box, though my preference would be that poepl stop using ie 6 all together.

specss.js

Thursday, December 20th, 2007

Overview

What is it?

A simple unobstrusive script performs a number of tests on the users browser then adds classes to the html tag of the document accordingly.

What can you do with it?

Create style rules which only apply under certain conditions such as:

  • browser type
  • window size
  • operating system
  • depending whether flash is enabled
  • if the page has scrollbars.

Example uses

  • Tweak layouts for different browsers.
  • Simplify hiding of static content when using flash replacement
  • customise pages for different operating systems including iphone specific styling
  • adjust layout depending on available space (eg use larger background images for larger screens)

How to use it

Simply link you html file to the js file, and you have the following css classes at your disposal to customise for specific scenarios. It’s recommended that this script should be used for progressive enhancement.

Details

browser classes

  • .Dom (browser understands Dom scripting)
  • .isIe / .isIe7 (is Internet Explorer, is Internet explorer 7)
  • .isMoz (is Firefox, Mozilla etc)
  • .isOp (it’s an Opera browser)
  • .isSaf (…you guessed it, is Safari)

screen size

  • base browser width (.w640, .w800, .w1024, .w1280)
  • ‘greater than’ specific screen size for broader rules (.gtw640, .gtw800, .gtw1024, .gtw1280)

operating system

  • .isWin
  • .isMac
  • .isUnix
  • .isLin
  • .isIphone

other variables

  • .hasFlash - browser has flash enabled
  • .hasScroll - the page is taller than the browser and consequently has scrollbars
  • .hasImg - browser supports images (good for safer image replacement)

example

Only one very basic example at the moment… but you get the idea. view example

download

Download specss.js (right click - save as)

The current version is untested in all scenarios so any bugs… let me know.

update - April 2008

The previous version had some problems with screen ‘flicker’ as the script ran after the page had loaded. To avoid this problem, the html is hidden until after the script has run. This is done with simple ‘visibility:hidden’ declaration (reset by speccs.js one the script has loaded) in the css and noscript override so it doesn’t recreate any issues for non javascript enabled visitors.

  • You are currently browsing the archives for the Javascript category.

  • Categories