Web Tutorials, Resources, Web Trends, Code Snippets, Php scripts, Opensource, Ecommerce, Cms, Html, Xhtml scripts, Themes, Templates, Css, Psd tuts, Photoshop,tuts,web,website,tutorial,web tutorial » Scripts

For radio station DJ’s or Shows

Bulent — Wed, 10 Mar 2010 14:18:11 +0000

The following script will allow radio station’s website to display the show or dj’s that is currently on air.
To use this code make sure your page has .php extention not .html

Paste the code in the region you would like to display the ON AIR dj or the show.

DotNetNuke Makes It Easier For You

Bulent — Wed, 10 Mar 2010 12:14:51 +0000

DotNetNuke Community Edition is a leading free open-source content management system for ASP.NET websites. With DotNetNuke, you can quickly and effectively deploy dynamic web applications with almost no technical knowledge, however if you are an ASP.NET developer, you can customize it in the way you want to fulfill your specific needs. Whether you need to deploy a simple website or a feature-rich dynamic application, DotNetNuke cater your needs in the way you want.

Unlike legacy web applications, you don’t need services of a web developer in order to make changes in your content and locations of different modules. You can easily achieve this task on-the-fly by logging into the administration control panel.

Since DotNetNuke is open-source, you can enhance and extend the functionality of it if you are familiar with ASP.NET programming. In addition to the existing modules in DotNetNuke, you can develop custom modules over it or use from a number of pre-developed modules by different third party vendors to extend the functionality as per your business needs.

DotNetNuke is the world’s most widely adopted framework for building web applications on Microsoft Windows platform. DotNetNuke powers over 500,000 portals, web applications and public web sites. It has a large open-source community to support the development of the system. Furthermore, you can find number of help and support resources and books that help you find solutions to your problems while you work.

Visit link:
DotNetNuke Makes It Easier For You To Build Feature-Rich, Interactive Web Sites And Applications

Need Interactive Charts. Try Highcharts

Bulent — Wed, 10 Mar 2010 10:46:57 +0000

If you have a non-commercial website and you need to add charting capabilities in your website, Highcharts may suit your needs. Highcharts is a free charting control developed purely with Javascript so that you can show interactive charts on your website. Since its purely developed with Javascript, you don’t need any special server side technologies like ASP.NET or PHP and no client-side plug-ins are required like Flash or Silverlight.

Highcharts is dynamic in nature. With the support of jQuery and Ajax API, you can dynamically set axes and points of charts at runtime, hence making Highcharts an excellent choice for demonstrating real-time data like Stocks and Forex.

It works with all major web browsers including iPhone and supports a number of chart types, such as:

Line
SplineArea
Areaspline
Column
Bar
Pie
Scatter

Implementing Highcharts just require some basic understanding of Javascript and you don’t need to be an expert programmer having special programming skills in specific languages. The syntax is very simple and the integration is almost seamless.

In addition to all this, Highcharts gives your website an enhanced user experience with interactive moving charts with cool designs and eye-catching colors.

Link:
Need Interactive Charts For Your Personal Website? Try Highcharts

Getting Started with most popular jQuery libraries

Bulent — Wed, 06 Jan 2010 13:12:51 +0000

The web development scene is moving forward at a lightning-fast pace, and it’s imperative that developers continue to keep their skills fresh. If you’ve been involved in front-end design or development in any form over the past five years or so, then it’s very likely that you’ve experimented at some point with one of the popular JavaScript libraries, many of which have become quite prominent and are now used on a number of large commercial websites.

In this article, I’ll be introducing and laying the groundwork for advanced JavaScript development with one of the most popular JavaScript libraries available: jQuery.

Although there are many beginning tutorials online that can provide a great starting point for jQuery development, in this article I’m hoping to go beyond just quick-start syntax and instead provide a solid overview of jQuery and discuss the benefits of using such a library. Of course, much of this information–outside of the syntax and other jQuery-specific details–will be applicable to any JavaScript library.

Why a JavaScript library?

To quote the official jQuery slogan: “Write less, do more.” The role of a web developer is to create code that determines what will result from a user’s interaction with a web page. Web developers should not have to spend hours debugging browser quirks. Instead, they should be free to deal solely with the actions and the results. This is where a JavaScript library comes into play.

Overcoming browser differences

Different browsers handle DOM manipulation, transparency effects, and animation in different ways, requiring, in some cases, reams of code just to create a simple effect. Using a JavaScript library allows you to completely bypass all of those challenges, giving you access to an API (Application Programming Interface) that deals directly with the tasks you actually want to accomplish. All the challenges and issues common to JavaScript are dealt with behind the scenes, allowing you to integrate functionality without wondering whether or not it will work in a particular browser.

Unobtrusive JavaScript

Another impelling reason to use a JavaScript library is that all libraries allow you to include JavaScript in your pages unobtrusively, thus keeping your behavior layer (the JavaScript) separate from the content and presentation layers (the XHTML and CSS).

Accomplishing complex tasks with ease

Finally, a very powerful feature of any JavaScript library is its ability to manipulate any element or set of elements on a web page with just one line of code. Take, for example, the following HTML:



Text Here
Text Here
Text Here
Text Here
Text Here

Let’s say you wanted to use JavaScript to change the background color of the first list item element (

) in the unordered list above. Using pure JavaScript, your code would look something like this:

var myListCollection = document.getElementsByTagName("ul");
  for (var i = 0; i < myListCollection.length; i++) {
    if (myListCollection[i].className === "list") {
      myListCollection[i].childNodes[0].style.backgroundColor = "blue";
    }
  }

Using jQuery, you can accomplish the same thing with just one, easy-to-maintain line of code:

$("ul.list li:first-child").css("background-color, "blue");

Understand CSS concepts

One area that is imperative to powerful jQuery development, is strong knowledge of CSS. The reason for this is because jQuery often utilizes CSS-based syntax to manipulate DOM elements. Here are some concepts that you should be quite familiar with before diving into extensive jQuery development:

Type selectors
Class selectors
ID selectors
Descendant Selectors
Child Selectors
Attribute Selectors
CSS Specificity
The Cascade & Inheritance

Most of the above CSS concepts should already be very familiar to any modern-day front-end developer, since any CSS layout would utilize these. jQuery not only incorporates the basic selectors (type, class, and ID), but it also uses descendant and child selectors, which aren’t supported by all currently-used browsers. But with jQuery, due to its built-in browser normalization, all selectors are supported equally.

Understanding that jQuery incorporates CSS syntax when accessing elements will greatly enhance your ability to quickly and easily create powerful JavaScript applications with jQuery.

Understand JavaScript concepts

In order to make full use of jQuery, it is a good idea to learn certain JavaScript concepts. Sure, you can do a ton of stuff in jQuery without knowing much about some of the concepts listed below, but you’ll have a bigger advantage in your jQuery development if you take the time to understand a few fundamentals, including:

Object creation
Properties of objects
Object literals
Functions as methods
Anonymous functions
Closures

Again, it is not necessary to fully understand any of the above concepts in order to start working with jQuery, but your abilities with jQuery’s API will increase greatly if you understand one or more of the above concepts.

Object-Oriented JavaScript: An Introduction to Core Concepts
Object-Oriented Javascript at Webreference.com

The jQuery source code

Before getting started with any jQuery development, you’ll first have to download the latest version of the jQuery library and include it in your pages:

The above line of HTML should appear before any actual jQuery code, otherwise you’ll get errors.

Alternatively, instead of hosting the source code yourself, you could link directly to the most recent version on the Google Ajax Libraries API which can save you some server resources. (read more ways to offload website features).

jQuery syntax

Now that you have an overview of the benefits of jQuery, along with some understanding of concepts involved, let’s take a look at some syntax to get us started with this powerful library.

The jQuery wrapper

The jQuery wrapper is the function that is at the core of all jQuery commands. I used it earlier in one of the examples above. Here it is again:

$("li a");

The $ symbol is an alias for the jQuery function, so the above line of code could alternatively be written:

jQuery("li a");

But, for obvious reasons (e.g. to keep your code terse), you’ll rarely see that syntax.

The jQuery function shown in the above two examples returns an object containing an array of the DOM elements specified inside the parentheses (in this case, all anchor tags that are nested inside of

tags). Of course, in both examples above, we haven’t specified an action; all we’re doing is returning those DOM elements, which does nothing. In the next section, we’ll add methods that will act on the group of elements we’re targeting.

jQuery commands

jQuery’s API includes easy access to effects and other actions via built-in methods that would normally take dozens of lines of code to accomplish in a cross-browser fashion with pure JavaScript. For example, let’s add a “fade out” method to the code from the previous examples:

$("li a").fadeOut();

The above line of code “fades out” all anchor tags on the page that are nested inside of

tags. If we want to fade the anchors back in again, we just use the fadeIn() method:

$("li a").fadeIn();

Chaining commands

jQuery also allows developers to chain commands, stringing one after another. So, we could combine the previous two examples, as follows:

$("li a").fadeOut().fadeIn();

The above code will fade out all anchor tags nested within list items, then immediately fade them back in. The number of chained items is infinite (or within reasonably set limits), allowing for numerous commands to work on the same group of elements, each happening in succession.

That’s just a small sampling of what’s possible with jQuery, and how easy it is to accomplish tasks that would normally take many lines of code, and a lot of browser testing. Although you’ll still do browser testing when running jQuery code, the results will virtually always be the same: cross-browser, unobtrusive JavaScript that’s easy to write and easy to maintain.

Running code when the DOM is ready

Earlier we touched on the concept of unobtrusive JavaScript, and how jQuery is written to allow your scripts to remain separate from content and presentation. So far, the code examples we’ve discussed would run fine as long as they were included at the bottom of an HTML page. If, on the other hand, they were included in the head of the document, they would fail to work because, at that point, the document tree has not yet rendered.

jQuery allows us to run our code only when the DOM is ready. This is done by means of the $(document).ready handler. The beauty of this handler is that it doesn’t make the code wait until the entire page finishes loading, as would be the case with a typical window.onload event. With the (document).ready handler, your code will run as soon as the DOM tree is finished rendering, before all images and other media have finished loading, thus minimizing load time.

Let’s try running our previous code example when the DOM is ready:

$(document).ready(function(){
  $("li a").fadeOut().fadeIn();
});

The above code tells jQuery to run an anonymous function when the document tree is done rendering. The anonymous function contains the code we saw previously, which faded our anchors out, then immediately faded them back in again. This code could be included in the of the document, near the bottom of the page, or anywhere else, and it would run exactly the same way.

The “ready” event is just one of the many events available through jQuery’s API. Others include click, dblclick, load, blur, keydown, submit, and more.

Conclusion

jQuery is capable of so much more, and I’ve only just begun demonstrating its power and simplicity. But I think this suffices to provide a good overview, with some syntax basics, thus preparing beginning jQuery developers for easy-to-write and practical JavaScript code.

About the Author

Louis Lazaris is a writer and freelance web developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. Follow Louis on Twitter or contact him through this form.

Read more here:
Getting Started with jQuery

Kentico CMS License & 1-Year Maintenance

Bulent — Wed, 06 Jan 2010 13:12:49 +0000

Today, we are announcing an awesome giveaway: a full license to Kentico CMS which includes one-year maintenance/support. Read on to see how you can participate and get a chance to win this awesome prize valued at $1,999!

What is Kentico CMS?

Kentico CMS is a web content management system (CMS) solution providing a complete set of features for building websites, community sites, intranets and online stores on the Microsoft ASP.NET platform. It’s currently used by more than 4,000 websites in 83 countries.

Some of the notable companies that use Kentico CMS include Microsoft, McDonald’s, Vodafone, O2, Brussels Airlines, Audi, Mazda, Subaru, Samsung, Gibson, Bayer, ESPN, Guinness, DKNY and more (see more of their big clients here).

Read more about features of Kentico CMS on their site’s Features page.

Try Kentico CMS

If you want to evaluate Kentico CMS, they offer you several options:

Download the Free version of Kentico CMS

The free version of Kentico CMS is free to download, and you can use it for any purpose, including commercial purposes.

Download of Trial version of Kentico CMS

The trial version is fully functional for 30 days and will help you evaluate the Kentico CMS features.

Get a Virtual Lab set-up for you

This will let you evaluate Kentico CMS without having to install anything (they’ll set it up for you on the Kentico CMS servers).

How to participate in the Kentico CMS giveaway

In order to qualify for a chance to win the 1-year subscription to Kentico CMS, just leave a comment below that answers the following question:

What’s a Kentico CMS feature that interests you the most?

You can see the feature list of Kentico CMS on their site:

www.kentico.com/free-cms-asp-net.aspx

Kentico CMS giveaway details

This giveaway ends on Tuesday, January 12, 2010. After that date, commenting on this post will be disabled and you’ll no longer be able to participate.

When leaving your answer, make sure to leave a valid email address because this is the only way we’ll be able to notify you if you’ve won. The winner will be selected at random using the same method as previous Six Revisions giveaways (you can see the MySQL random query method that we use in this giveaway).

You should subscribe to the Six Revisions RSS feed so that when the announcement post has been published, you’ll get instantly notified.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Here is the original post:
Giveaway: Kentico CMS License & 1-Year Maintenance

SnackTools Makes Creating Rich Media Content Easy

Bulent — Wed, 06 Jan 2010 13:12:48 +0000

Creating rich professional-level Flash media components isn’t simple for the ordinary designer or developer who doesn’t have a strong command of Flash/Flex. And even if you were a Flash/Flex guru, you’re probably looking for ways to save time so that you can focus on other things.

SnackTools, a suite of webapps for creating Flash components, is here to help. SnackTools aims to bring non-Flash developers a way to create customized, sophisticated and impressive Flash media components without having to know how to code.

Since SnackTools is web-based, there’s no need to install anything, and you can access your work any time and anywhere (with an internet connection).

Currently, the suite has BannerSnack, which lets you create rich interactive Flash banners, and PhotoSnack, which lets you create stunning photo galleries (perfect for portfolios).

BannerSnack

BannerSnack lets you create Flash banners using a very intuitive interface. It has standard templates that you can modify so that you don’t have to start from scratch. If you want a more customized solution, you can import your own graphics assets and use the tool to design your Flash banner. You can select a standard size or customize the size of your banner. Check out some examples of banners created with BannerSnack.

PhotoSnack

PhotoSnack is a web-based application that lets you generate stunning photo slideshows/galleries. You can choose from a wide variety of templates. It will literally take you a few minutes to get your slideshow set up: you pick a template, you upload your photos, then adjust the settings, and voila – your own professional-level slideshow. You can use it to display your portfolio, photos, and more. Here are some examples of PhotoSnack in action: Slideshow examples.

A special Six Revisions giveaway

SnackTools has teamed up with us here at Six Revisions to give five lucky readers 1000 points for SnackTools. A download costs 4 points, so that’s a lot of awesome stuff!

How to participate in the SnackTools giveaway

To participate in the SnackTools giveaway for 1000 points, simply leave a comment below answering the following question:

If you won 1000 SnackTools points, how would you use it?

We’ll select five winners at random using the same methods as previous Six Revisions giveaways. The giveaway ends on Thursday, January 14, 2010 after which you’ll no longer be able to participate.

We’ll write a follow-up post to announce the winners, so you should subscribe to the RSS feed to get instantly notified when the announcement of winners has been posted. You should leave a valid email address when leaving your comment as this is the only way we’ll be able to contact you regarding your prize if you win.

One day only: exclusive Six Revisions freebie

For the entire day today, you can get 100 points free just by using the coupon code SIXREVISIONS100.

You have 30 days to spend all 100 points, so you better hurry!

An Easter egg for geeks

If you’re familiar with the Konami Code, here’s a tip: you should try it out when you’ve logged into the system and see what happens!

About the Author

Go here to read the rest:
SnackTools Makes Creating Rich Media Content Easy

30 Fresh AJAX Tutorials And Techniques

Bulent — Wed, 06 Jan 2010 11:50:13 +0000

By Paul Andrew

Using AJAX on websites and applications is pretty much taken for granted nowadays. Users expect it. They want to be able to edit a page in-place, they want search queries to be auto-suggested, and they want to be able to submit a form without refreshing the page. Why? Because those things make browsing quicker, easier and, more importantly, enjoyable.

As great as AJAX is, though, it is not for every website or application. Part of the developer’s job is to know exactly where AJAX (or any technology for that matter) is needed. Too little can lead to user frustration. Too much causes misunderstanding. A balance and some restraints are always needed.

In this round-up, we have collected 30 fresh AJAX tutorials and techniques, covering almost every aspect of AJAX development: forms, applications, polls, editing, parsing, visual effects and much more.

AJAX Tutorials And Techniques

An AJAX-Based Shopping Cart with PHP, CSS and jQuery
In this tutorial, you will create an AJAX-driven shopping cart and store all of the products in a MySQL database, using PHP to process the data. jQuery will deliver the AJAX on the page, and with help of the simpletip plug-in, you will be able to deliver a high-end interactive check-out process.
View the demo.

Creating an AJAX Web App Using the Bit.ly API
Using Twitter’s URL shortener, bit.ly, and the jQuery library, you will be taken through the process of building an AJAX Web app. This is a great beginner tutorial, giving a detailed introduction to APIs and the basics of PHP and jQuery.
View the demo.

A Twitter List AJAX-Powered Fan Page
Twitter recently launched its new “lists” feature, which allows you to compile a list of your followers and organize them into categories. Using the newly expanded API (with list-management functionality added), you will learn how to create a widget that flips lists the other way round: this fan widget that goes in the sidebar allows visitors to fill in their Twitter name and join a special fan list from your Twitter account.
View the demo.

Learn How to AJAXify Comment Forms
Learn how to take a simple boring contact form and add some simple animation with an AJAX post request to submit the form to your MySQL database asynchronously.

A Simple AJAX Website with jQuery
Using jQuery, PHP and CSS, you will go through the process of creating a basic AJAX website. The finished product will load pages through AJAX from the PHP back-end and even completely support the browser history (something that is normally difficult to achieve with any AJAX or Flash website).
View the demo.

Create a Twitter-Like “Load More” Widget
In this tut, you will learn the technique—used by both Twitter and the Apple App Store—for loading more information. Simply by clicking the link or button, more content will appear, as if by magic. You will use AJAX, CSS, Javascript, JSON, PHP and HTML to build this widget. This tutorial features both the jQuery and the MooTools versions of the script.
View the demo.

A Simple Twitter App with Ruby on Rails
In this three-part tutorial series, you will set up a simple messaging model that holds posted messages. You will also learn how to post a message asynchronously.
View the demo.

AJAX Multiple-File-Upload Form Using jQuery
With this article, you will learn to develop an AJAXified multiple-file-upload form that uses much less server-side code and has a nice user interface. Thanks to the power of jQuery, the time spent on actual development is substantially reduced.
View the demo.

How to Send Facebook-Style Mail with PHP, AJAX and jQuery
The Facebook website is choc full of unique features, especially the system for sending mail and messages. Using PHP, AJAX and jQuery, you can recreate this technique using this step-by-step tutorial.
View the demo.

How to Create Your Own Stats Program (JavaScript, AJAX, PHP)
Chances are, you use an analytics programs such as Google Analytics, Get Clicky or Urchin to track every move and twitch on your website. They all track page views, visits, unique visitors, browsers, IP addresses and much more. But how exactly is this accomplished? Follow this tutorial and learn how to create your own basic Web statistics program using PHP, JavaScript, AJAX and SQLite.
View the demo.

AJAX Post Pagination in MooTools
Patiently browsing through the archive of posts on your WordPress website can be frustrating. A fix for this problem would be to use MooTools and AJAX to do the loading.

jQuery AJAX delete
Being able to remove content with Ajax is useful for any Web designer. Using a few lines of jQuery, you can remove both a DIV and a record from the database with AJAX. In this demo, you’ll see a small red cross to the right of each comment. Clicking the cross will remove the comment’s DIV, and the slide-up animation allows you to remove the DIV.
View the demo.

Voting System with jQuery, AJAX and PHP
Dzone offers users the chance to vote up or down on any particular link, giving an indication of how well an article has been received. In this tutorial, you learn how to recreate this unique voting system using jQuery, AJAX and PHP.
View the demo.

Creating a Dynamic Poll with jQuery and PHP
When you combine the neat functionality of PHP and the cleverness of jQuery, you can produce some pretty cool results. In this tutorial, you will create a poll using PHP and XHTML, then use some jQuery AJAX effects to eliminate the need for page refreshing and to give it a nice touch of animation.
View the demo.

AJAXify WordPress Comment Posting
Many WordPress plug-ins will AJAXify comments, but how do they do it? In this step-by-step tutorial, you will learn how to enable AJAXed comments with client-side JavaScript comment-form validation for any WordPress blog.
View the demo.

Create a Dynamic Scrolling Content Box Using AJAX
If you use Google Reader, then you may have noticed how it shows feed items. After you click on a feed, it loads a few items first, and as you scroll down to view more items, it adds more items dynamically to the list. This tutorial shows you how to create a similar content box that loads content dynamically as the user scrolls to the bottom of the box.
View the demo.

Create an In-Place Editing System
Making users click through multiple pages just to edit a single field is annoying. This tutorial shows you how to create an in-place editing system, as found on popular websites such as Flickr and then take things further with AJAX.
View the demo.

Submit A Form Without Page Refresh using jQuery
This article outlines a great way to use jQuery and AJAX to enhance the user experience, not just by validating the form but by submitting the contact form without having to refresh the page.
View the demo.

How To Parse XML Using jQuery and Ajax
In this tutorial you will learn how to parse or process an XML document and display the data on a page in HTML. This process can be used to filter raw RSS feeds, set up a cool site map on your blog or even lay the groundwork for your own auto-complete search.
View the demo.

Caching AJAX Results in Javascript
AJAX requests are usually faster than regular page loads and allow for a wealth of dynamism within the page. Unfortunately, many people do not properly cache request information when they can. The author shows you his improved method for caching AJAX requests.

How to Create an AJAX File Uploader
The application you will build in this tut uses jQuery’s versatility to allow multiple file uploads without a page refresh or redirection, complete with front- and back-end validation to prevent unwanted files from being uploaded to your server.
View the demo.

How to Create a Simple Web-Based Chat Application
The multiple-user Web-based chat application that you will build in this tutorial includes a log-in and log-out system, with AJAX-style features. The finished product would be perfect for a live support system for your website, as seen on the Vodafone and T-Mobile websites.

Facebook-like Auto-Suggestion with jQuery, AJAX and PHP
This article shows you how to recreate the unique auto-suggestion search feature of Facebook using jQuery, PHP and, of course, AJAX.
View the demo.

20 More Excellent AJAX Effects You Should Know
This article rounds up 20 relatively easy AJAX effects and techniques that can be used to spice up any page.

Record Text Selections Using MooTools or jQuery AJAX
This post demonstrates a useful technique for keeping track of what text users are highlighting and copying on a given Web page. It is helpful because it gives you an indication of what visitors really want from your website.

Automatically Update a Web Page with Dynamic Elements
You may know how to hide and display optional JavaServer Faces (JSF) components using JavaScript and CSS. To do this, you would first identify all JSF components and write them into JSF pages. But that is impossible when you are developing a Web page that contains dynamic elements that are unknown until runtime. With this article, learn how you can clear old UI components while automatically updating the dynamic elements of a Web page, as well as use Java code to add new elements and put them in their proper spot on a Web page. You’ll also learn how to bind different event handlers to different dynamic elements of a Web page, how to register a listener listening to changes of server-side data to invoke a page refresh, and how to use AJAX techniques to refresh only the dynamic parts of the Web page.

Build a Web Presentation Application using AJAX
How does Google Docs have such amazing functionality? It leverages Web 2.0 technologies, which provide robust functionality with relatively simple code. In this article, learn how to build a Web application to create slideshow presentations using AJAX.

Calendar Eightysix
Calendar Eightysix is an unobtrusive, developer-friendly JavaScript calendar and date-picker that offers a better user experience for date-related functionality. It is highly customizable and offers unique and quick navigation by jumping back and forth between months, years and decades without drop-down boxes.
View the demo.

jCart: AJAX/PHP Shopping Cart
jCart is a customizable jQuery plug-in that offers a simple e-commerce solution by handling visitor input without reloading the page.

AJAX Fancy Captcha
The Fancy Captcha jQuery plug-in is an intuitive and fresh way to complete those “verify humanity” tasks, offering reasonable protection against unwanted guests, namely bots and spammers. It works by asking you to verify yourself simply by dragging and dropping an item into a circle.

About the Author

Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine, a Web design, Web development and graphic design resource blog. Follow him on Twitter here: twitter.com/speckyboy.

(al)

Here is the original post:
30 Fresh AJAX Tutorials And Techniques

CSS PNG Hack For Internet Explorer (IE)

Bulent — Sat, 21 Mar 2009 14:17:46 +0000

It’s been a problem for many developers. How do you create a transparent image for Internet Explorer 6 using a PNG. As you are all probably aware IE 6 does not support transparent PNGs but don’t panic there is a solution.

The Solution

This is by no means new; however, I thought it was worth while posting. By using Alpha filters designed specifically for IE we can force Internet Explorer to behave as expected. As shown using the code laid out below:

The Code

The CSS source is as below. The first class defines the Alpha filter applied to the containing DIV and also sets a height and width (This has to be the same as the PNGs height and width).

The second class simply hides the original PNG from all versions of Internet Explorer 6 and below. This is applied as we do not want Internet Explorer to see the PNG twice with the non-transparent version still showing.

.ie-png {
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagename.png’,sizingMethod=’scale’);
height: 50px;
width: 257px;
}

.ie-hide{
border:0px solid #FFFFFF;
_display:none;
}

The HTML is also very simple. Simply add the PNG and wrap it with a containing DIV using the classes as shown below.

Display Random Image from a Directory

Bulent — Mon, 09 Mar 2009 12:33:47 +0000

This script outputs random image from a defined directory.

Make sure to change the path to your images directory and also an image to display if directory listing fails. I have found this piece of code handy to use to create random headers, logos when designing web pages.

Code:

$path_to_images = “/images/“; // path to your images

$default_img = “image.gif“; // image to display if directory listing fails

function getRandomImage($thispath, $img) {

if ( $list = getImagesList($thispath) ) {

mt_srand( (double)microtime() * 1000000 );

$num = array_rand($list);

$img = $list[$num];

}

return $thispath . $img;

}

function getImagesList($thispath) {

$ctr = 0;

if ( $img_dir = @opendir($thispath) ) {

while ( false !== ($img_file = readdir($img_dir)) ) {

// can add checks for other image file types here

if ( preg_match(“/(\.gif|\.jpg)$/”, $img_file) ) {

$images[$ctr] = $img_file;

$ctr++;

}

closedir($img_dir);

return $images;

}

return false;

}

echo getRandomImage($path_to_images, $default_img) ?>;”>

Displays a hyperlinked Directory list

Bulent — Mon, 09 Mar 2009 11:56:41 +0000

Displays a hyperlinked list of all the files contained in a specified folder. A really simple way to have your own directory browser, just drop the file in the folder and it will show an index of all files in the directory on your webspace.

The code


/**

 * Change the path to your folder.

 *

 * This must be the full path from the root of your

 * web space. If you're not sure what it is, ask your host.

 *

 * Name this file index.php and place in the directory.

 */

    // Define the full path to your folder from root

    $path = "/home/user/public/foldername/";

    // Open the folder

    $dir_handle = @opendir($path) or die("Unable to open $path");

    // Loop through the files

    while ($file = readdir($dir_handle)) {

    if($file == "." || $file == ".." || $file == "index.php" )

        continue;

        echo "$file";

    }

    // Close

    closedir($dir_handle);

?>

Displays a random quote on a web page

Bulent — Mon, 09 Mar 2009 11:44:47 +0000

Displays a random quote on a web page. Quotes are picked from a list that you define.

Create a page and call it ( random_quote.php ) or anything you like than add the php include code below to your page where you would like to show random quotes. Make sure your page where you will include it is also php file.

Add this line of code in your php page:

The code


/**

 * Add this line of code in your page:

 * 

 */

$quotes[] = "This is a quote";

$quotes[] = "This is another";

$quotes[] = "quote 3";

$quotes[] = "quote 4";

$quotes[] = "quote 5";

$quotes[] = "quote 6";

srand ((double) microtime() * 1000000);

$randomquote = rand(0,count($quotes)-1);

echo "" . $quotes[$randomquote] . "
";

?>

Display different image each day of the week

Bulent — Mon, 09 Mar 2009 11:28:17 +0000

This PHP script will get the day of the week from the server date and then display an image (jpg or gif) to match. Change the name of the image folder, Images must be named Monday.gif, Tuesday.gif etc, Change to the location of the folder containing the images.

The code


/**

 * Change the name of the image folder

 *

 * Images must be named Monday.gif, Tuesday.gif etc

 */

// Change to the location of the folder containing the images

$image_folder = "images/days";

// You do not need to edit below this line

$today = date('l');

if (file_exists($image_folder."/".$today.".gif")) {

  echo ".$today.".gif">";

}

else {

  echo "No image was found for $today";

}

?>

PHP Flickr! photo album on your website

Bulent — Sat, 07 Mar 2009 18:22:24 +0000

This code uses your Flickr! account and creates the URLs to the pictures for display on your own personal website! The full documentation is available at http://www.strydominc.za.net/index.php?p=projectdetail&d=phpflickrphoto

<?php
/*************************************************
www.strydominc.za.net
Created by Jurgen Strydom, 19-08-2006, jurgen.strydom@gmail.com
Read the readme.txt
Version 1.01, 19-08-2006
***********************************************************/
?>
<link href=”pagefloat.css“ rel=”stylesheet“ type=”text/css“>
<?php
//Stuff you should update for your script
$api_key = “6cacc91553b802874c6bbad658c9ce94“; // get yours at http://flickr.com/services/api/key.gne
$my_id = “46772344@N00“; // use idgetr: http://idgettr.com/ to find yours if you already changed it to a name
$rows = 10;
//Let the code do the walking from here on
$photos = ($rows * 2);
if (empty($_REQUEST['n'])) {
$pagenum = 1;
} else {
$pagenum = $_REQUEST['n'];
}
//http://static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg //how the url is created for the images
$xml = simplexml_load_file(”http://flickr.com/services/rest/?method=flickr.people.getPublicPhotos&user_

id=$my_id&api_key=$api_key&per_page=$photos&page=$pagenum“);
$total = $xml->photos['total'];
$pages = $total % $photos;
$pages = ($total + $photos - $pages) / $photos;

?><table width=”700“ border=”0“ cellpadding=”0“ cellspacing=”0“>
<tr><td height=”10“ colspan=”2“ valign=”top“ align=”left“>Please select a page: <?php
for ($k = 1; $k<=$pages; $k++) { ?>
<table width=”25“ border=”0“ cellpadding=”0“ cellspacing=”0“ align=”center“ class=”pagefloat“> <?php
?>
<tr>
<td width=”25“ height=”10“ valign=”top“ align=”center“><a href=”photos.php?n=“>
<?php if ($k == $pagenum) {
echo ““, $k, ““;
} else {
echo ““, $k, ““;
} ?>a></td>
tr>
</table>
<?php }
?>
td></tr>
<tr>
<td height=”10“ colspan=”2“ valign=”top“ align=”left“> td>
</tr>
<?php

if (($pagenum * $photos) > $total) {
$to = $total % $photos;
} else { $to = $photos; }
for ($k = 0; $k<$to; $k++) {
if (($k % 2) == 0) {
?>
<tr>
<td width=”350“ height=”100“ valign=”top“ align=”center“>
<?php } else {?>
<td width=”350“ valign=”top“ align=”center“>
<?php }
echo ““ , $xml->photos->photo[$k]['title'], ““;
?>
<br>
<a href=”http://www.flickr.com/photos/jurgenstrydom/photos->photo[$k]['id'];?>“><img src=” echo “http://static.flickr.com/”;
echo $xml->photos->photo[$k]['server'];
echo “/”;
echo $xml->photos->photo[$k]['id'];
echo “_“;
echo $xml->photos->photo[$k]['secret'];
echo “_m.jpg“;
?>“
alt=”photos->photo[$k]['title'] ?>“ border=”0“>a>
</td>
<?php
if (($k % 2) == 1) {
?> tr>
</td>
tr>
}
}
?>
</table>
<?php
/*****************************************************
Changelog:/
?>

Version 1.01
Fixed a bug that caused code below this script to output incorrect display.

Version 1
First release.
*********************************************

Very Simple Password Protection of a Page

Bulent — Sat, 07 Mar 2009 17:58:38 +0000

// Bare Bones demo of password protection

<?php
$password = "abc123";
if ($_POST[doddle] == $password) {
        $tell = 1;
} else {
        $tell = 2;
}
if (! is_string($_POST[doddle])) $tell = 0;
?>
<html>
<head><title>A Page that is password protectedtitle></head>
<body>
<?php if ($tell == 1) { ?>

<h1>The page with all the secrets revealed h1>

This is the information that has been revealed to you because you
got the password right!
/><br />Although this is a very simple
demo it shows what you can do with just a few lines of PHP.

<?php } else { ?>

<h1>A Header pageh1>

There is a page hidden under a password at this URL. For this demo only
I will tell you that the password is "abc123" so you can try it out!
/>
<?php if ($tell == 2) print ("
YOU GOT THE PASSWORD WRONG
"); ?>
<br />
<form method=post>
Please enter password <input type=password name=doddle>
<input type=submit value=go>
form>



/>
<a href=http://www.oxmediadigital.com>Cheap Web sites for your businessa>, 2009
</body>
html>

Web Tutorials, Resources, Web Trends, Code Snippets, Php scripts, Opensource, Ecommerce, Cms, Html, Xhtml scripts, Themes, Templates, Css, Psd tuts, Photoshop,tuts,web,website,tutorial,web tutorial » Scripts

For radio station DJ’s or Shows

DotNetNuke Makes It Easier For You

Need Interactive Charts. Try Highcharts

Getting Started with most popular jQuery libraries

Why a JavaScript library?

Overcoming browser differences

Unobtrusive JavaScript

Accomplishing complex tasks with ease

Further reading

Understand CSS concepts

Understand JavaScript concepts

The jQuery source code

jQuery syntax

The jQuery wrapper

jQuery commands

Chaining commands

Running code when the DOM is ready

Further reading

Conclusion

Further reading

Related Content

About the Author

Kentico CMS License & 1-Year Maintenance

What is Kentico CMS?

Try Kentico CMS

Download the Free version of Kentico CMS

Download of Trial version of Kentico CMS

Get a Virtual Lab set-up for you

How to participate in the Kentico CMS giveaway

Kentico CMS giveaway details

Related Content

About the Author

SnackTools Makes Creating Rich Media Content Easy

BannerSnack

PhotoSnack

A special Six Revisions giveaway

How to participate in the SnackTools giveaway

One day only: exclusive Six Revisions freebie

An Easter egg for geeks

Related Content

About the Author

30 Fresh AJAX Tutorials And Techniques

AJAX Tutorials And Techniques

About the Author

CSS PNG Hack For Internet Explorer (IE)

The Solution

The Code

Display Random Image from a Directory

Code:

Displays a hyperlinked Directory list

The code

Displays a random quote on a web page

The code

Display different image each day of the week

The code

PHP Flickr! photo album on your website

Very Simple Password Protection of a Page