In CSS 2.1 the “first-child” and CSS 3 adds “last-child” pseudo-class implementation. These allow for specific stlyes to be added to beginning and ending elements. This can be extremely helpful for navigation and other common list types. The one draw back of using these pseudo-classes is ie6 will not support them. Here is a short script that can been used in the head of a page to support ie6.
$(document).ready(function() {
$('li:first-child').addClass('first-child');
$('li:last-child').addClass('last-child');
});
In CSS 3 “:nth-child(N)” was added. Here is a great read on SitePoint with examples of “:nth-child(N)”.
-
Recommended Books
- Blogroll
Categories
Archives
J.P. McGarrity.com Focusing on the Front End
-
Pseudo CSS first-child, last-child
September 25, 2010 by J.P.
-
CSS3 Gradient Code Generator
September 11, 2010 by J.P.Category: CSS 3, coding tool, css/html, html5Comments (0)
-
Wolverine 1000 Mile
September 10, 2010 by J.P.Great video my long time friend Sean Sullivan created.
Category: UncategorizedComments (0)
-
jQuery SlideDown SlideUp
May 10, 2010 by J.P.Here is an basic example on how to create a jQeury toggle using the slideDown and SlideUp functions.
I prefer to use this instead of the toggle function for a smoother animation.jQuery code used:
$(document).ready(function() {
$('#toggle_control').bind('click', function() {
if ( $('#copy_toggle').is(':hidden') ) {
$("#copy_toggle").slideDown('medium', function() {
});
}
else{
$("#copy_toggle").slideUp('medium', function() {
// Animation complete.
});
}
return false;
});
});Category: codingComments (0)
-
iPad Pics
April 5, 2010 by J.P.Here are a few pics at the flag ship Apple store on 5th ave in New York and a few unboxing shots. Loving the device so far! Can’t wait to see what developers can dream up with the apps.
Category: UncategorizedComments (0)
-
-
Advanced CSS Attribute Selector Demo
March 14, 2010 by J.P.Recently a back end developer asked me with there was a way to use a wild card in CSS that would allow him to generate ID’s on the fly. The solution I came up with was to use an attribute selector.
When using attribute selectors in CSS the name before the “|” is the attribute targeted. In this case “id” is used but we could have just as easily used “rel”, “input”, “value” etc.
The text after the “|” is what the attribute must start with to be read. The example uses “section”. Each “id” in the html that starts with “section” will be styled. Some id’s use more specific code in certain div’s to give them unique colors showing how the cascading works in the CSS file.
Here is the solution:
CSS Code
[id|="section"]{
border: 10px solid #999;
margin:10px 0;
background:black;
width: 200px;
height: 200px;
}
[id|="section-item"]{
background:green;
}
#section-1{
background:red;
}
#section-2{
background:blue;
}
#section-3{
background:yellow;
}Category: CSS 3, css/xhtmlTags: Attribute selectors, css | Comments (0)
-
Font CSS Substitution Methods
September 2, 2009 by J.P.
Many new methods of font substitution are coming of the wood work and old methods are now getting a second look.
@font-face method
The @font-face method was added to the CSS2 spec but then not recommended in CSS2.1. However with CSS3 it’s back and supported by most popular modern browsers. Read about @font-face at W3.org.
This method requires the font being loaded on the server and will cause a slight flickering of the font rendering while it is stored in the cache. The plus side of this method is it’s easy to implement and requires no JavaScript.
Here is an example of @font-face being used. Click Here
Sample CSS code used (Note: font is stored on the server)
@font-face {
font-family: 'BrushScript';
src: url('BrushScript.ttf') format("truetypefont");
}
/* for IE */
@font-face {
font-family: 'BrushScript';
src: url(BrushScript.ttf);
}
body {
font-family: 'BrushScript', helvetica; /*degrades to a standard web font if unavailable */
font-size:1em;
}Cufon JavaScript Method
This currently my personal favorite method. No font is stored on the server and there is no flicker of the font while loading. The wizard also provides many options and settings so you can customize the needs for your site.
Easy to add
Cufon provides a simple method for converting fonts on your local machine into a js file that you include in the header along with the Cufon script. A simple replace call is used to substitute the font. Read more about Cufon here
Example Header Code
<script src="cufon-yui.js" type="text/javascript"></script> <script src="AGaramondPro_400-AGaramondPro_700-AGaramondPro_italic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('h1');Cufon.replace('p');</script>Background Image method
This method is good for replacing a few headers and best method to use with the logo of your site. Detailed px to px cross browser look with the design is needed while the code remains semantic. This method has been implemented in this version of my site since for major section H1 headers and the logo of the site.
XHTML Example Code
<h3 id="Portfolio">Portfolio</h3>CSS Example Code
h3#Portfolio
{
background:url('/portfolio/2009/gfx/title_portfolio-trans.png') no-repeat;
text-indent: -9999px;
width:229px;
height:61px;
}This will work with all browsers. A list will be added shortly of the other methods and their support.
Category: coding, css/xhtmlComments (0)
-
CSS Adjacent Sibling Combinators With Text
August 26, 2009 by J.P.
Here is a short and sweet post demonstrating the use of adjacent sibling combinators with text is an easy way to work with unique spacing with headers and copy in general.Basic Example Code
h1 + p{
padding:20px 0 0;
}
h2 + p{
padding:0px 0 0;
}
h3 + p{
padding:0px 0 0;
}Here is a link with 3 different headers and style demoing how convenient this approach is.
Eaching header has a unique spacing when followed by a <p/> tag.
Category: css/htmlTags: css, css text, sibling combinators | Comments (0)
-
How to Swap Asus 1005HA Wifi Card OSX10.5
August 22, 2009 by J.P.Before we begin I want to tell that you are doing this at your own risk and this will be voiding the warranty of your netbook.
Here are a list of compatible cards I have seen mentioned online but I have only tested and verified the Dell 1510.
- Dell 1510 Tested and working with 10.5.8
- Dell Wireless-N DW 1500 mini PCI
- Any Broadcom mini PCI
- If you know of more comment or email me and I’ll update.
Steps for card installation
Ground yourself so you don’t short anything internally
Flip the machine over and remove the battery
Remove the ram cover, ram, and the silver screw.
Remove the 4 screws in each corner
Flip the machine back over and open the lip.
Time to remove the keyboard
The keyboard is held in place by 4 tabs the top directly above the F1, F6, F10, and Insert.
With a flat head screwdriver or something else very thin click each tab and the keyboard will popout slightly.
Once popped out slowly pull it out from top corn to top corner. (Warning there is a ribbon connecting the keyboard to the track pad so don’t just rip it out like a gorilla.)
Once the keyboard is loose lift it up from the bottom to expose the ribbon connector. If you haven’t worked with ribbon connections before don’t worry it ain’t no thing. It was my first time to and after about 30 secs I had it under control.
To release the ribbon you will see 2 black connectors on the left and right side. Carefully push them out towards the monitor.
The ribbon should immediately release.
Cool keyboard is out now time for the fun part.
Remove the 6 screws that are holding the shell and trackpad.
Once all 6 have been removed flip the trackpad, blue ribbon connector up. (Note this ribbon connection is different then the keyboard connector. It needs to be flipped up).
Once screws and ribbon have been removed and released start prying thing case off. This is a major pain in the ass and you have to be a gentle giant not to just hulk the top off and break the plastic clips. I would recommend using a credit card and run it around the entire crease to help loosen things up. You will also have to focus on the tabs that are under display. There are 4 in total and harder then the rest of the tabs to loosen up.
Once the top is off you will see all the internal components of the machine. I celebrated with a beer at this point.
To access the wifi card you will need to release the ribbon for the SD card reader which is another flip up like the trackpad.
Once the cable is out of the way simple unscrew the wifi card and it should become very loose and easy to pull out of the board. Gently tug the antenna off the wifi card. Removal complete.
Get your OSX 10.5 compatible card, connect the antenna to it and insert it back in the board. Once the card and antenna are secure and screwed in reconnect the SD card ribbon.
Rebuilding
- Re-secure the case and make sure you have enough slack to connect the trackpad ribbon.
- Flip the ribbon connector down making sure the ribbon is fully connected.
- Fasten the keyboard ribbon back in and drop it back into the case starting with the bottom.
- Flip the case back over and install the remaining screws, ram, and battery.
Wifi Card Installed Time to See if It’s Working!
I fumbled a few times at this stage and missed something very basic that sent me into a kext loop that wasn’t needed.
While booting the machine go into the Ausu bios and make sure that WLAN is enabled. My wasn’t and I thought the 10.5.8 upgrade had broken the ability for the card to connect to a network.
I booted in Chameleon with -v -f and noticed a few lines of code showing the airport id and that the card was enabled. I think they are displayed right before all the voodoo.kext files load.
Another good sign that the card is working will be the blue wifi light always active on the bottom right of the machine.
OSX should immediately recognize the card. My system acted a little funky until I did a restart. Menus were bouncing around and keyboard and trackpad weren’t working. I also doubled checked that my ribbons were securely fastened.
After restarting everything was back the system was back to normally and I was connected to my router.
Possible Things to Trouble Shoot
Many people have had wifi issues after upgrading to 10.5.8. Apparently Apple stopped supporting certain cards. Here is a kext from 10.5.7 that should enable the support of your card if it was working in 10.5.7.
Good luck with the card swap.
Category: hardware, osxTags: asus 1005ha, dell 1510, hackintosh, osx 10.5.8, wifi | Comments (19)
-
CSS Attribute Selectors
August 20, 2009 by J.P.
CSS Attribute selectors are a great way to target specific elements in your page and apply styles to them with out have go back and opening up the template file and changing code.
I find them extremely useful for creating form css.
There are 6 different types of attribute selectors
- [att=value]
The attribute has to have the exact value specified. - [att~=value]
The attribute’s value needs to be a whitespace separated list of words (for example, class=”title featured home”), and one of the words is exactly the specified value. - [att|=value]
The attribute’s value is exactly “value” or starts with the word “value” and is immediately followed by “-”, so it would be “value-”. - [att^=value]
The attribute’s value starts with the specified value. - [att$=value]
The attribute’s value ends with the specified value. - [att*=value]
The attribute’s value contains the specified value.
Here is an example page where I have formatted elements with attribute selectors only.
Sample CSS Used
<style type="text/css" media="screen">
p[tile='para1'] {
color:red;
}
input[type="text"] {
width: 200px;
background-color: #DDD;
border:0px;
display:block;
padding:3px;
}
input[type="submit"] {
width: 200px;
background-color: #000;
border:0px;
display:block;
padding:5px;
color:#fff;
margin-top:5px;
}
a[href$='.jpg']{
background:green;
color:#fff;
}
</style>Category: css/xhtmlTags: Attribute selectors, css | Comments (0)
- [att=value]
« Newer Posts — Older Posts »