Category: JavaScript

cze82009

40 Exceptional “CMS Enabling” WordPress Plugins

WordPress is a great blogging platform with a potential of being an easy to use content management system. This is the third article of our four-part series, „The Comprehensive Guide for a Powerful CMS using WordPress”. We are taking a look at 40+ quality and useful WordPress Plug-ins that will turn a simple WordPress site into a blazing fast dynamic one, with easily managed content, that you and your clients will love to use.

Making Your Content Unbreakable

There is one big drawback to using WordPress as a CMS: the lack of custom content types/groups, an area where developers put restrictions on how clients insert content. This is fairly easy to do with some knowledge of custom fields, but can be a little complicated if your client is new to WordPress. Developers must create workarounds to keep the content clean, portable and relatively unbreakable.

1. More Fields Plugin

More Fields is a WordPress plugin that adds boxes to the Write/Edit page. These boxes contains input fields, so that additional (more) fields can be added to a post. For example, if you write about books, you can add a box where you can enter title and author, etc. The boxes can be placed either to the right or to the left on the Write/Edit page.

Download Plugin

Read More
cze82009

Sexy Drop Down Menu w/ jQuery & CSS

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.


View Demo of Sexy Drop Down Menu

Drop Down Menuu w/ CSS & jQuery

Step1. HTML

Read More

cze82009

10 Intelligent Ways of using [FORM] Elements

When you combine some neat functionality courtesy of PHP with the cleverness of javascript you can produce some pretty smart results using the <form> tag. In an effort to help you take it up a notch, we’d like to share some methods for helping your site anticipate a user’s next move.

The post below is made up of 10 smart and intelligent ways of using <form> elements to produce some neat effects, components and plugins, they are all of the highest quality and more or less easy to configure. Give them a try.

1. Creating a Dynamic Poll with jQuery and PHP

In this tutorial you will learn how to create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

<div id="poll-container">
    <h3>Poll</h3>
    <form id='poll' action="poll.php" method="post" accept-charset="utf-8">
        <p>Pick your favorite Javascript framework:</p>
        <p><input type="radio" name="poll" value="opt1" id="opt1" /><label for='opt1'>&nbsp;jQuery</label><br />
        <input type="radio" name="poll" value="opt2" id="opt2" /><label for='opt2'>&nbsp;Ext JS</label><br />
        <input type="radio" name="poll" value="opt6" id="opt6" /><label for='opt6'>&nbsp;mootools</label><br /><br />
        <input type="submit" value="Vote &rarr;" /></p>
    </form>
</div>

Read More

maj262009

Use jQuery to „turn off the lights” while watching videos

Some videos on YouTube have a cool feature called „Turn the lights down”. Basically, when you turn lights down, the entire page darkens and let you watch video as if you are in the cinema. This tutorial will show you how to implement this simple effect.

View live demo
Download source code

Read More

maj242009

10 Free and powerful File Managers for the web

if you looking for Free and powerful File Managers Based on jQuery , Ajax, php and Mootools ready to use in your web projects and easy to customize , take a look at this list with Free and powerful File Managers using jQuery/Ajax/php . All File Managers Based on jQuery ,Ajax, php and Mootools that allows you to preview, upload and modify files and folders via the browser.

1.MooTools based FileManager

A MooTools based File-Manager for the web that allows you to (pre)view, upload and modify files and folders via the browser.

MooTools-based-FileManager

Read More

maj242009

10+ beautiful jQuery and Ajax photo gallery

10+ beautiful combination of jQuery and Ajax photo gallery . it’s give the rich quality to your web photo gallery . Here is 10+ beautiful jQuery and Ajax photo gallery for your web project.

3D Composite Image Engine

3D Composite Image Engine

Read More

maj152009

30 HTML Best Practices for Beginners

The most difficult aspect of running Nettuts+ is accounting for so many different skill levels. If we post too many advanced tutorials, our beginner audience won’t benefit. The same holds true for the opposite. We do our best, but always feel free to pipe in if you feel you’re being neglected. This site is for you, so speak up! With that said, today’s tutorial is specifically for those who are just diving into web development. If you’ve one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!

Without further ado, let’s review thirty best practices to observe when creating your markup.

1: Always Close Your Tags

Back in the day, it wasn’t uncommon to see things like this:

<li>Some text here.
<li>Some new text here.
<li>You get the idea.

Notice how the wrapping UL/OL tag was omitted. Additionally, many chose to leave off the closing LI tags as well. By today’s standards, this is simply bad practice and should be 100% avoided. Always, always close your tags. Otherwise, you’ll encounter validation and glitch issues at every turn.

Read More

maj152009

Build an Auto-Scrolling Slideshow That Works With and Without JavaScript

Create a jQuery slideshow that enables you to click through each slide when JavaScript is disabled, without having to display all slides one under the other.

Introduction

Final Product

There are several tutorials that walk people through how to create a jQuery slideshow, but there aren’t many
that focus on making it function without JavaScript. This is because most people believe it isn’t possible but
I am going to explain an exceedingly simple method that shows it is indeed possible. You’ll soon be
kicking yourself and asking “How did I not think of that?”…

Read More

maj152009

Creating a Google Map with ExpressionEngine

As Richard Tape has begun to show in his part 1 and part 2 articles on Becoming an ExpressionEngine Superstar, EE is a flexible and easy to customize CMS. Now that everyone has some understanding of how EE works, I thought I would take this opportunity to show a relatively real world example of creating a dynamic Google Map powered by EE.

Final Product

For this example, let’s assume thaFinal Productt our company has various locations throughout the US, and we are tasked with creating a Google Map that shows all the locations and is easy to maintain. Take a look at the demo to see what we are trying to accomplish.

Setting Up the Weblog and Custom Field Group

First, remember that a weblog is nothing more than just a container of data. Actually, in EE 2.0, they are changing the term weblog to channel. So we are going to create a weblog called Locations and a custom field group called Locations. It’s definitely not a requirement to have them be named the same, but it just makes it easier to understand the relationship.

Defining the Custom Field Group

I actually like to create the field group first, so let’s do that by going to Admin > Weblog Administration > Custom Weblog Fields. Then click on the big green button that says Create a New Weblog Field Group.

New Field Group

Read More

maj152009

JavaScript Debugging Techniques in IE 6

Microsoft’s Internet Explorer 6 is almost universally hated by web developers. It’s hard to work with and support, but with a few solid techniques, you can make the process less painful. What “just works” in the majority of browsers will almost always require hours of tweaks and workarounds to get it working in IE6. With more and more users switching over to newer alternatives such as IE8, Safari and Firefox hopefully support for IE6 can be dropped sooner rather than later. In the mean time though many of us have to make sure our sites work in this awful browser.

JavaScript Debugging Techniques in IE 6

To make things worse, IE6 is extremely bad at helping developers diagnose problems. When a JavaScript error occurs, IE6’s default behaviour is to display a small error icon in the status bar. Extremely easy to miss!

Status Bar Error.

Double clicking on this icon will display a popup, and if you then click the “Show Details” button you’ll get the actual details of the JavaScript error. Unfortunately the detailed error message can be quite cryptic, and probably not too much help in diagnosing the actual problem. Your best bet is to make a note of the line and column number of the problem and then look that up in the source code. Fortunately, with the help of Visual Studio and by changing a few IE settings, we can make it much easier on ourselves.

Read More