CSSKarma

display your <style>

designing the web since 2002

Posts Tagged ‘javascript’

|

Redirection Options

Wednesday, January 27th, 2010

article banner

Lately, I’ve been having to work with a lot of redirects and I was going through different redirection options with a client. So I thought I would do a quick write up about the different types of redirection.

I also haven’t seen a collection of these in one place, so I thought I would put this together.

There are a few different types that are commonly use when redirecting users:

  • .htaccess / apache
  • php header
  • javascript
  • meta refresh

The top two are the one’s you’ll be using most often, I don’t really recommend the last two. But they are available, so I think they’re worth noting. So here they are in the order I would recommend:

.htaccess / apache redirects

Redirect /old_directory http://example.com/newdirectory

This redirection is most efficient at the apache level, but if you’re like me and are on shared hosting, getting into the apache installation probably isn’t an option. In that case you can put this in an .htaccess file in the root directory of your site.

Using an .htaccess redirection is great for moving entire sites because you can not only redirect a page, but you can redirect entire sites and subdirectories with one line of code.

PHP header redirects

<?php header('Location: http://example.com/newdirectory/'); ?>

PHP header redirects are good for single page redirects and if you’re not comfortable working with the .htaccess file. This code goes at the very top of the page you’re trying to redirect. If it’s not there you may get a “headers already sent” error.

If you’re publishing out static HTML files, you can still use this by adding this code into your .htaccess file:

AddType application/x-httpd-php .php .html .htm

This will let you execute PHP in an HTML file.

JavaScript redirects

<script type="text/javascript">
<!--
window.location = "http://example.com/newdirectory"
//-->
</script>

JavaScript redirects are generally not used unless you’ve exhausted the other two options. If you don’t have access to the .htaccess file AND you can’t run server-side script on your page, this is an OK fallback option, but you have to make sure to provide a link to the forwarding page incase a user is browsing without JavaScript.

Meta redirects

<meta http-equiv="refresh" content="0;URL=http://example.com/newdirectory">

As your last option, I don’t see this in the wild anymore, but it’s worth mentioning that it does exist and does technically work (I’m not sure about it’s validity in HTML 5). You would place this in the document HEAD with the rest of the meta elements.

content=0 is a second timer for the redirect, I have this one set to 0 so it will redirect immediately.

Those are the options I’ve used in the past; did I miss anything? Maybe an ASP redirect? Let me know!

Tags: , , , ,
Posted in Web Development | 5 Comments »

Conditional Animation Speed in jQuery

Friday, January 8th, 2010

Turtle

For years (and by “years”, I most likely mean “the years since I started using jQuery… maybe 2″), there’s been one aspect of jQuery that’s bugged the crap out of me, the animation speed.

View demo

We’ve all probably seen the problem that happens in many drop down menus of varying height. We set slideDown(300) (or whatever you set it to) on all the submenus and leave like that. Inevitably, menus grow and shrink based on the content and we get this weird and mildly annoying behavior of really fast moving tall menus vs. shorter menus that move painfully slow just because there’s not much content in there.

This problem stems from where we set the speed of the animation; the value isn’t actually a speed, it’s how long it takes (in milliseconds, I think) for the animation to finish. So you can see why you get varying behaviors based on the element height.

It’s true, that you can use the built-in speed values like “fast” and “slow”, but if you want more fine-grained control over your animation, you’ll have to use a value.

Problem Child

This is what our problem menu looks like all collapsed, just 2 clickable headings (h2) that will slide open to expose content (p)

animation collapsed

Normally our jQuery would look something like this:

$(function(){

$('h2').toggle(function(){
    /* get the next element */
    var next_element = $(this).next();

    /* open it  if it's closed */
    next_element.slideDown(500);
},function(){
    /* get the next element again */
    var next_element = $(this).next();

    /* close it if it's open */
    next_element.slideUp(500);
});

});

Note: just example code, I didn’t check to see if it actually works

This is our menu fully expanded. As you can see, the first item has a lot more content then the second. Using the code above will make menu #1 move noticeably faster than menu #2; which, to me, creates an odd user experience. Because you’re like “Why’s is moving so slow?”

animation expanded

So let’s see if we can’t fix that.

Ben Healy (Solution)

What we’re looking to do here is get the height of each collapsed item, do some JS math, and set a speed (animation time) value based on the height.

jQuery functions we’ll need

  • next()
  • height()
  • slideDown() / slideUp()
  • The Code

    $(function(){
    
    	/* Variables to set */
    	var id = '#heightCheck';
    	var click_element = 'h2';
    	var height_value = '100';
    	var tall_menu_speed = 400;
    	var short_menu_speed = 250;
    
    	/* System variables, probably don't change */
    	var target = id +' '+ click_element;
    	var menu_content = $(target).next();
    
    	/* Hide the element after the click_element, whether it's a
    	div, p, ul, whatever you choose to wrap the items in */
    	menu_content.hide();
    
    	$(target).toggle(function(){
    		/* save the menu items in a variable */
    		var this_menu = $(this).next();
    
    		/* get the menu height and save it */
    		var menu_height = this_menu.height();
    
    		/* Calculate the animation speed based on the element height */
    		/* if the height is greater than the height set above use the
    		tall menu height */
    		if(menu_height > height_value){
    			var speed = tall_menu_speed;
    
    		/* If it's smaller, use the short menu height */
    		} else if(menu_height < height_value) {
    			var speed = short_menu_speed;
    		}
    
    		/* slide the menu down */
    		this_menu.slideDown(speed);
    
    	},function(){
    		/* this is the same but reversed to close the menu */
    		var this_menu = $(this).next();
    		var menu_height = $(this).next().height();
    
    		/* Calculate the animation speed based on the element height */
    		if(menu_height > height_value){
    			var speed = tall_menu_speed;
    		} else if(menu_height < height_value) {
    			var speed = short_menu_speed;
    		}
    		this_menu.slideUp(speed);
    
    	});
    
    });

    That should give you a little more control over the menu speed. I'm sure it needs to be tweaked based on the menu you're using, but the general concept is there, and it should work pretty well. I hope it was helpful. Let me know if you have any additions to the code or suggestions to improve it.

    View demo

    Tags: , , ,
    Posted in Web Design | 2 Comments »

Quick Tip #2 – Bringing Back Search with jQuery

Monday, June 29th, 2009

article banner

This is something I use on all my projects now. It’s designed for a search box, but can be used with any sort of input field.

The great thing about this is that the field value “Search” will only come back onBlur if the field is empty (or doesn’t say “Search”). So if you started typing something it won’t erase your text, which is something that has always irritated me about search boxes.

Anyway, I’ve been sitting on this post for a while, but I really wanted to get it out. So here it is:

XHTML
<div id="search">
<form method="post" action="">
   <label for="field">search</label>
   <input type="text" id="field"/>
   <button type="submit">go</button>
</form>
</div><!--/search-->
jQuery
$("#search input").focus( function() {
if ($(this).val()=="Search") {$(this).val("");}
});

$("#search input").blur( function() {
if ($(this).val()=="") {$(this).val("Search");}
});

The word “Search” in the jQuery is case sensitive, so watch out for that.

Tags: ,
Posted in Web Development | 6 Comments »

This Week in Links 12/16

Tuesday, December 16th, 2008

article image

10 Tips to Improve Your UI

Smashing Magazine, once again, has a great article about user interface. This article gives you some quick and helpful tips on improving your user interface design. A lot of stuff we should all be doing.

Anti-RSI

This is a Mac program to help prevent RSI (which is basically carpal tunnel). I saw some pictures of people with RSI, it’s gross and looks very painful. I use Anti-RSI now, and I think you should as well. I’m not posting the pictures, but if you Google it, I’m sure they’ll turn up.

Helpful hyperlinks with JS

An article from the boys over at SitePoint. This bit of JavaScript will pop an icon on the end of your links, letting the user know what they’re about to click. This can also be done with CSS 2.1, but by using JavaScript we’re making it available for… well let’s just say it… IE6 users.

Tags: , ,
Posted in News | No Comments »

This Week in Links 10/27

Monday, October 27th, 2008

article banner

Better CSS Font Stacks

A good article on how to jazz up your stacks to try and take advantage of users who have more fonts installed. I’m all for this, and as long as it’s done carefully, can get a nice version of progressive enhancement.

5 Terrible SEO Ideas

Richard Bradshaw goes over some trendy (and terrible) things that are common in SEO such as: keyword stuffing, dupe content, link farms, splash pages, and cloaking.

Fun with Overflows

I think this is a great idea (check out the demo). It creates a very similar interface to that of Plurk, the twitter competitor.

Tweet What you Spend

This is a pretty cool service that uses the Twitter API to track spending. I know it can seem kind of geeky (as is reading articles about CSS…), but tracking your spending is a great way to save money, it gives you a lot of power when you know exactly how your paycheck disappears every month. Provided you don’t mind sharing your expenses with the Twitterverse, this is a good service and very easy to use.

Tags: , , , , , ,
Posted in News, Web Development | 1 Comment »

Active navigation with jQuery

Wednesday, October 8th, 2008

banner image

I was building a site last week and came across some jQuery code for active navigation. It’s very simple and works real well. I’m using it on some secondary navigation and still using my body class for the main nav.

Active navigation with a body class
body.home #nav ul li.navhome{font-weight:700;}

So I’m still doing that, but then for the internal page navigation, rather than loading the CSS up with long declarations for the numerous sub nav links, I used this jQuery:

Active vavigation with jQuery
$("#nav a").each(function() {
var hreflink = $(this).attr("href");
if (hreflink.toLowerCase()==location.href.toLowerCase()) {
	$(this).parent("li").addClass("selected");
}

Breaking it down

Let’s try this line by line for those who want to know what’s happening here.

This targets each link in contained in #nav.

$("#nav a").each(function() {

This line just saves the href attribute of each #nav a to a variable. It makes the code a little cleaner and easier to work with.

var hreflink = $(this).attr("href");

This converts the href of each link in #nav, makes it lowercase (it should be already, but just in case) and checks the current URL of the page and sees if they match. Also making the current page URL lowercase.

if (hreflink.toLowerCase()==location.href.toLowerCase()) {

If the current URL matches the href for one of the links it looks to the parent element (in this case it’s a list item) and adds a class of “selected” to it.

$(this).parent("li").addClass("selected");

This is just closing the function, I really don’t know why I didn’t include it in the above code for the purpose of this post. But no matter.

}

Issues

The only problem I ran into with this was that you have to make sure the you use a consistent href for pages.

For example

If you’re sub nav contains a link to http://www.csskarma.com/contact/, you have to make sure that you don’t link to http://www.csskarma.com/index.php; or the active navigation won’t work.

It’s not a huge deal, but definitely something to be aware of, I just had to go through a site and clean up a bunch of links up because I applied this jQuery pretty late in development. You can probably rework the code to strip out the file name and extension or do it with some PHP, if you’d like.

Actually, if anyone does that, let me know and I’ll update this post with the code.

Tags: , , ,
Posted in Web Development | No Comments »

This Week in Links 9/17

Wednesday, September 17th, 2008

article banner

How HTML5 is Already Changing the Web

Generally, I’m not a fan of all the hoop-la over HTML5 since it won’t be released and in use for a long time. But I was very interested in reading this article from webmonkey

FV Code Highlighter

A handy wordpress plugin for code hightlighting, very cool and useful, definitely check this out if you have time. This will be the next plugin I install.

Hacking JavaScript for Fun and Profit

SitePoint is always a great place to find good tutorials. This one especially caught my eye in the past week.

LiveBar

The concept of LiveBar is very interesting to me. It’s like portable social networking for your web site. It will display related social content in a small bar stuck to the bottom of the screen.

Paper background graphics

I’m usually against most design fads because they pass so quickly. But if you choose to venture into the grunge fad, this is a very good resource to find those large images of crumpled up paper.

Tags: , , , , , ,
Posted in News, Web Development | 1 Comment »

This Week in Links – 9/4

Thursday, September 4th, 2008

I’d like to try and start sharing some links once a week with everyone since I’m settling into a new job and I don’t want my posts to become few and far between. Just to let you know that I am doing some interesting things right now, but have just run a little short on time. Here are some links that grabbed my attention:

Some sites to be aware of:

Script & Style

Script & Style is a new site by Chris Coyier and David Walsh. The best way I can describe it is like subscribing to the CSS/JS search term RSS feed on Digg, but a little more interesting. There are user-submitted articles, like Digg, but you don’t have to filter out all that Digg-esk junk like articles about hamburger grease and bicycle chains. You just get the stuff you want. I like it, at least subscribe to the RSS feed, it’s well worth the visit.

Google Chrome bugs – Alternate Style Sheets and Max/Min-width

The big news for the week seemed to be about Google’s web browser, Chrome. Everyone seems to love it (I couldn’t install it on my parallel, I’ll try on Vista later on), but there are some bugs reported with it. I guess that’s why Google leaves everything in Beta for a decade.

Animation Jump in JQuery

When I first saw this quick tip from JQuery for Designers I really didn’t see a major need for it. But as I kept seeing it in my news feed it actually grew on me. It creates a nice sliding effect for anchor links, worth poking around with. I really don’t like dumping a ton of JavaScript into my pages, but for a JS light page, or an FAQ, this might be a nice feature.

Using JQuery UI to Control Text Size

I love Nettuts, every week they come out with some really cool tricks. This is one of those things that is a really nice tool to have in your library just in case you need it. I could see this being very useful for reading documents online or just zooming in on an app.

Automatic Awesompersands

YAJQPI I guess, but I kind like this one. It searches through your content to find and restyle ampersands, giving them a hip designer/small coffee shop look by wrapping a span around them (sidenote: are we using spans too much with jQuery?).

JavaScript in Modern Web Design

Web Designer Wall is a pretty popular blog (more so than this one), so I’m sure most have seen this already, but it’s still worth mentioning just in case. Nick La lists out and describes virtually every JavaScript you will commonly find in web design today. If nothing, it’s a great reference list.

Today seemed to be a little JavaScript heavy, but I guess that’s what’s going on right now as we’re all in our JQuery phase.

Tags: , , ,
Posted in News | 1 Comment »

Cracking open Google Gadgets

Monday, April 14th, 2008

A few weeks ago, I decided to do a little research into Google Desktop. Which is basically a Google widget platform competing with Yahoo! widgets. After some exploration and dissecting Google Gadgets, this is what I came out with:

  • The core of the application runs on 2 files
    • main.js
    • main.xml
  • There are also some image and CSS options readily available, but the guts of it really run on JavaScript and XML
  • Overall, it’s very straightforward, a little playing around with the sample gadgets will give you a good idea of what you can do (endless possibilites)

The file structure of some of the sample gadgets leaves a lot of room for improvement. Some seem to be built to handle very large, modular applications, but in most cases, they’re a little too modular (in my opinion).

Some of the more useful samples you can go through are:

  • Animations
  • ComboBox
  • Countdown
  • DragDrop
  • HelloWorld
  • HTMLDetailsView
  • QueryAPI
  • RSS
  • XMLDetailsView
  • XMLHttpRequest

There are others too, but these are the one’s I found most useful. So, lookin at those options, a being an RSS freak, I chose to customize the RSS gadget for CSSKarma

CSSKarma RSS Gadget

Download CSSKarma RSS Gadget

The first thing to do is to make a copy of the RSS sample given with the Google Gadget samples. I did that (as a CSS person), I opened up the theme folder “default” and looked for “details.css”. I assumed this file would edit all the presentation for the gadget. It doesn’t. I only edits the flyout menu (after you click on a link in the RSS gadget). OK, that’s fine. So I enter this CSS:

body {
  color:#323F4C;
  background:#fff url(http://www.csskarma.com/images/bg_branding.jpg) no-repeat 0 bottom;
  font: 0.8em/1.5 Verdana, Arial, Sans-serif;
}

That will add my CSSKarma logo to the flyout and add some basic CSS. The other files in the theme folder to deal with are “entry_item.xml”, “theme_config.xml” and “title.xml”. After you look at “theme_config.xml” and “title.xml”, you’ll see why I think this is a little too modular. I left those two file alone. But I did edit “entry_item.xml”, view entry_item.xml. I edited some style information in there (one more thing I’m not thrilled about – embedding style info into the XML).

The next folder to tackle is “editme”. It contains 2 files (config_constants.js and entry_item_impl.js). In “entry_item_impl.js” you can edit the RSS nodes, if you want. I chose not to. In “config_constants.js” you need to edit the URL of the RSS feed you want to use.

The last thing I wanted to do was to remove the default background image from “main.xml”. When I did this, the background was transparent, by default. So in “main.xml” I added a background attribute of #FFFFFF to top level div (container). I also edited the height and width attributes of the “view” element for when the gadget is undocked from Google Desktop.

The outcome of this was the CSSKarma RSS Gadget (You’ll probably need Google Desktop installed to use this). A very basic RSS gadget made by making simple modifications to the sample files. Feel free to download, play around with it, and let me know about any errors you find.

Aptana Jaxter

Aptana Jaxter recently released “The worlds first Ajax server” (I have no date to back up the claim that it was recent). I’ve seen some web apps using this in integrating the Google API, looks promising but there’s very limited server space right now. I’d like to see how these can be integrated into the Mobile web. I don’t have too much information on it right now (and I keep losing the damn link).

That’s all I have for now.

With ease
Tim

Tags: , , , , , ,
Posted in Web Development | 2 Comments »

|

New from the blog

Are My Sites Up? authenticjobs.com