css

Update to jQuery/CSS Expandable Content

Submitted by iowacodeninja
on Fri, 08/19/2011 - 20:23

I updated the expandable div code today to accomodate divs that are shorter (and thus don't need to be expanded).  It's a simple change:

Tags: 
jquery
css
web
development

jQuery/CSS Expandable Content

Submitted by iowacodeninja
on Fri, 08/12/2011 - 17:45

For a mockup I worked on this week, the client requested a list of 10 essential resources to be included at the top of the content sidebar.  Unfortunately, displaying all 10 tended to push down the other sidebar content so far that they fell far below the fold.  I came up with this quick jQuery/CSS solution to make elegant expandable content divs.

Here's what it looks like:

When you click the 'See More...' link, the div expands to reveal all the content.

Here's the jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="
Tags: 
jquery
javascript
css
web
development
code

jQuery Suckerfish Menu Replacement

Submitted by iowacodeninja
on Wed, 08/10/2011 - 19:36

Back in the day, Suckerfish was the go-to CSS solution for drop-down navigation menus.  I'm thrilled that nowadays, we can accomplish basically the same thing with a dash of jQuery and far less code.  I recently whipped up one for a mockup.  Here's the HTML/Javascript I used:

Tags: 
jquery
javascript
web
development
css
code

CSS3 Gradient Generator

Submitted by iowacodeninja
on Wed, 08/10/2011 - 19:29

I'm working on a new mockup today, and this CSS3 gradient generator has come in extremely handy.

Some sample code I'm working with:

#sidebar div{
	background-image: -webkit-gradient(
		linear,
		left top,
		right top,
		color-stop(0.13, rgb(245,245,245)),
		color-stop(0.57, rgb(250,250,250)),
		color-stop(0.79, rgb(255,255,255))
	);
	background-image: -moz-linear-gradient(
		left center,
		rgb(245,245,245) 13%,
		rgb(250,250,250) 57%,
		rgb(255,255,255) 79%
	);
	border-top: 10px solid white;
	padding: 15px 10px 15px 15px;
	clear: both;
}
Tags: 
css
web
tools
development
css3