Drupal, JQuery: Dropdown Menus

Ajax, Drupal, JQuery

I needed to add Dropdown menus to a site that a designed using Drupal. I found a few modules (Nice Menus, etc) that would enable me to easily add dropdown menus to my site, but I wanted to use the CSS Drop-Down Menu Framework that I discussed in a previous post. With a little help from JQuery, I was able to add dropdown menus to my site without having to use a Drupal module.

Continue reading

Checkout My New Site - T-shirts For Geeks

CSS: Styling Input Fields

CSS

I’m working on a project where I’m using CSS to add a border radius and background image to an input field. Background images are supported by all browsers, but border radius is only supported by Firefox, Safari, and Google Chrome.

Continue reading

Checkout My New Site - T-shirts For Geeks

Vertical Text with CSS

CSS

I’m working on a new JQuery Plugin that requires the text to be vertical. This can easily be accomplished using CSS, but I found that the vertical text may appear differently in each browser depending upon the element that is used. I was able to display the text vertically in Firefox, IE8 (and IE7), Google Chrome and Safari. I looked at Opera’s CSS support and it doesn’t appear to support vertical text.

Continue reading

Checkout My New Site - T-shirts For Geeks

CSS: Create List Style Color Different Than List Text

CSS

I wanted to use CSS to create a Unordered List where the color of the list-style (the bullet) was different than the list-item (the text). First I set the color for the Unordered List:

.certsBlock ul {
        color:#1AB7EA;
}
.certsBlock ul  li {
        list-style:square;
        margin-bottom:5px;
}

Then I add an additional element inside the list-item (the text) and change it’s color:

.certsBlock ul  li p {
        color:#fff; /*white*/
        margin:0;
}

Now I create my Unordered List:

<div class="certsBlock">
        <ul>
                <li><p>Item 1</p></li>
                <li><p>Item 2</p></li>
                <li><p>Item 3</p></li>
        </ul>
</div>

So the color of the list-style (the square bullet) will be a blue and the list-item text will be white. Easy enough.

Checkout My New Site - T-shirts For Geeks

CakePHP: Setting up mod_rewrite on Ubuntu

CakePHP, Ubuntu

After installing CakePHP on my Ubuntu box, I viewed the default home page in my browser and noticed that the page was not styled. Cake did not know the path to the CSS file because I had not enabled mod_rewrite. Although I could opt to setup CakePHP to work without mod_rewrite, I decided to enable it.

Continue reading

Checkout My New Site - T-shirts For Geeks

CakePHP and YUI: CSS File Location

Ajax, CakePHP, YUI

I recently started converting an existing PHP project to CakePHP and YUI 2.8. The first decision that I had to make was where to place the YUI CSS files. I tried to find a quick, yet elegant solution, but I ended up with solution that was not so quick (or elegant).

I copied all of my YUI files from webroot/js/yui/ to webroot/css/yui/. I then opened each folder under webroot/css/yui/ and removed all of the js files (leaving the assets folder). If a folder contained js files only, then I deleted the folder.

I opened each folder under webroot/js/yui/ and removed all asset folders and css files. If a folder contained css files only, then I deleted the folder.

I spent about an hour trying to find another solution, so I guess the few minutes it took to remove the files/folders was worth it.

Checkout My New Site - T-shirts For Geeks

Using JQuery to Access Iframe Content

Ajax, JQuery

Ran into an interesting problem today when trying to access iframe content using JQuery. I kept getting an uncaught exception error when trying access style attributes for content within the iframe.

JQuery makes accessing iframe content quite a simple process. Let’s say I have a div (id=’myBook’) in a file named thisbook.html.

<div id="myBook"></div>

In a parent file (index.html), we create an iframe:

To access the myBook div from the index.html page:

?View Code JAVASCRIPT
var book = $('#bookFrame').contents().find('#myBook');

Continue reading

Checkout My New Site - T-shirts For Geeks

CSS: inline-block IE7 Hack

CSS

I was demoing a recent web design to a client when I noticed that the menu items were not displaying correctly. The client uses ie7. While Firefox is my primary browser, I usually test my design in IE and Safari (and tweak if necessary). I didn’t this time because I did not think there was a difference for the CSS styles that I was using. I was wrong.

I usually use li elements for menu items:

<ul>
	<li><a>Home</a></li>
	<li><a>About</a></li>
	<li><a>Contact</a></li>
</ul>

To create horizontal menu items, I change the display attribute to inline in my CSS file.

li {
    display:inline;
}

For this particular design, I added a vertical divider (image) between each menu item. In order to do this, I used the inline-block attribute.

#menu li {
	display:inline-block;
	margin:0;
	list-style:none;
	width:122px;
	height:45px;
	background-image:url(images/menu_divider.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	text-align:center;
	padding:0;
}

This looks fine in Firefox and Safari, but IE7 (and IE6) only supports inline-block on elements with natural display: inline. See CSS Display declaration.

I found a hack. Adding zoom: 1 and *display: inline will make IE7 display the li’s as inline-block.

#menu li {
	display:inline-block;
	margin:0;
	list-style:none;
	width:122px;
	height:45px;
	background-image:url(images/menu_divider.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	text-align:center;
	zoom: 1;
	*display:inline;
	padding:0;
}

Next time, I will remember to test my designs in the major browsers before it is shown to the client.

Checkout My New Site - T-shirts For Geeks

YUI Widget: imSliderMenu

yui-widgets

I created a YUI widget that is based on my imAnimTabber JQuery Plugin. The imSliderMenu displays content by animating the height or the width of the contents container. I use the imSliderMenu widget on my marketing site, http://1st-steps-to-success.com. The slider menu is handy in that I am able hide content on a page until it is needed and still maintain the look and feel of my website design. As with the imAnimTabber JQuery plugin, The imSliderMenu dynamically creates the menu items based on CSS and a few lines of code.

Continue reading

Checkout My New Site - T-shirts For Geeks

CSS: Placing One Image On Top Of Another

CSS

I have recently discovered two ways to use CSS to place one image on top of another. I am working on a photogallery management plugin (JQuery) and I wanted to add an delete image to the bottom right of each thumb image. The user will be able to click on the delete image to delete the thumbnail. The image below displays how I want the thumbnail to appear:

<img class="alignnone" title="Delete Example" src="http://grasshopperpebbles.com/images/posts/delete_example.png" alt="" width="118" height="85" />

The key to both approaches is to place the first image as a background image of a container.

.thumb {
     float:left;
     width: 100px;
     height: 100px;
     background:url(images/thumbs/pic1.jpg);
}

My first approach for styling the second image was to set the ‘background-position’ to ‘bottom right’.

.thumbDelete {
     width: 100px;
     height:100px;
     background:url(images/delete-24x24.png) no-repeat bottom right;
}

While this positioned the delete button where I wanted, because the dimensions are the same as the thumbnail image, the entire image became clickable (not just the delete image).

So my next approach was to float the delete image and set the margin-top to 50%:

.thumbDelete {
     float:right;
     width: 24px;
     height:24px;
     background:url(images/delete-24x24.png) no-repeat;
     margin-top:50%;
}

This placed the delete image on the bottom right (and only the delete image is clickable).

Creating the HTML is the same no matter which approach you take:

<div class="thumb">
<div class="thumbDelete"></div>
</div>

Easy enough.

Checkout My New Site - T-shirts For Geeks