WorldOWeb

Extend The Native WordPress Gallery

Tracy Ridge — Mon, 07 May 2012 11:28:24 +0000

The WordPress media management has improved significantly over the years and the inclusion of the WordPress gallery feature back in 2008 enabled for you to display your galleries and link to either attachments pages or the image itself. However there are some features that would enhance the WordPress Gallery even further but are not currently featured in the latest version and not sure if they have been proposed in the next release. Here are just a few of them!

Cleaner Gallery

Cleaner Gallery will remove the invalid XHTML markup and replace it with valid XHTML markup. It also gives you an option to load the Thickbox script and CSS which is included in the WordPress installation and it also adds support for various external lightbox scripts.

Photonic

Photonic is a all-in-one gallery and slideshow solution that not only enhances the gallery feature by adding a choice of several lightbox features including, ColorBox, Pretty Photo and FancyBox, it also allows support for images on external sites like flickr, Picasa and SmugMug.

WP Gallery Demo Flickr Demo Picasa Demo [caption id="attachment_4495" align="aligncenter" width="676" caption="Photonic using the PrettyPhoto script to display images."][/caption]

Garee's Split Gallery

Garee's split gallery is a very useful plugin if you want to split your native WP gallery into sections. This enables you to add content in-between.

Simple Galleria

Simple Galleria uses the existing gallery shortcode to create a gallery effect. It also has options to change the styling of the overlay, background and include a auto play feature.

jQuery Colorbox

Another Lightbox solution that works out of the box for WP galleries and NextGen galleries. This plugin has 11 themes to choose from and has an option to enable the lightbox for all images in your pages or blog posts and also has a slideshow feature.

Style My Gallery

Style my gallery uses a shortcode to display your gallery inline using the FlexSlider jQuery plugin

FancyBox Gallery

The FancyBox gallery uses the existing gallery shortcode to create an extremely lightweight and quick lightbox. Unfortunately it will not work with image attachments.

jQuery Lightbox for Native Galleries

This plugin makes use of the existing gallery shortcode. It uses the same script as jQuery Colorbox above but it not as configurable. It does have 5 themes to choose from so if you just want an out-of-the-box plugin, then this is the one for you. This also works well with Garee's Split Gallery plugin above.

Conclusion

No doubt there are many more plugins out there to extend the functionality of the WordPress Gallery. I have road tested all of the above and they are suitable for a variety of different needs and users. You may just want a simple quick lightbox like FancyBox or a all-in-one solution, highly configurable Photonic. There is something for everyone! Have I missed your favourite? If so please feel free to have your say.

Handy HTML5 & CSS3 Resources to Kickstart your First HTML5 Project

Tracy Ridge — Wed, 18 Apr 2012 11:18:30 +0000

HTML5 and CSS3 has been known to web designers for many years but due to the lack of browser support it hasn't been wildly adopted up until the release of Internet Explorer back in 2011. Internet Explorer 9 still doesn't have complete support for HTML5 and CSS3 but IE10, which hasn't been released yet, will support more elements including CSS transitions, transforms and have full support for offline web applications and form validation. Other browsers such as Google Chrome, Mozilla Firefox and Opera have better support but as yet there is no browser that supports HTML5 and CSS3 fully due to the fact that the specification is still a working draft itself and is estimated that it will not be reaching full specification until 2014. However don't let this deter you from using it, you can start using HTML5 right now so kick it off with some valuable resources.

Fluid Baseline Grid

HTML5 Boilerplate

Ultimate HTML5 Cheat Sheet

Modernizr

HTML5 Doctor

Dive Into HTML5

HTML5 Readiness

HTML5 Gallery

HTML5 Rocks

CSS3 Playground by Mike Plate

CSS3 Transform

Impressive Webs CSS3 Articles

Can I Use CSS Transitions

CSS3 Please- The Cross-Browser CSS3 Rule Generator

Zurb Playground

IE7 No More

HTML5 Unleashed tips, tricks and techniques

28 HTML5 Features, Tips, and Techniques you Must Know

40+ Useful HTML5 Examples and Tutorials

Ella Design

On another note I haven't included the wonderful Smashing Magazine and their network of inspiring blogs included in the Smashing Network. They have produced a wealth of informative and inspiring articles which have helped all users get a foothold in the creative environment we call web design. For those of you that haven't heard of Smashing Magazine then you are really missing out.

Conclusion

Of course I have merely touched the surface on the wealth of resources available. Feel free to add some of your own.

Sources

W3C Invites Broad Review of HTML5 When can I use - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers

HTML5 Cheat Sheet (Infographic)

Tracy Ridge — Tue, 17 Apr 2012 20:21:11 +0000

Ultimate HTML5 Cheatsheat by Tech King

Integrate WP Single Post Navigation into your WordPress Theme

Tracy Ridge — Sun, 11 Mar 2012 20:02:31 +0000

This tutorial shows you how to integrate the WP Single Post Navigation into your theme without using the plugin. I initially attempted to use the plugin and for some reason it didn't work on my custom child theme based on TwentyEleven so I decided to hard code it into my theme by adding it to my functions.php. I will show you two methods, one to display the default WordPress single post navigation and one to display how to reverse the links for a book like affect.

Prerequisites

Access to a text editor or IDE with a built in FTP client. A little knowledge of how the WordPress single post permalink navigation works, may also be of use.

First Method- Default Single Post Navigation

We will start with the default WordPress post navigation. First and foremost open up the functions.php with your text editor or IDE and add the following code. [crayon-4fb4cdc9cb051/]

If you are happy with the default method you may skip the next section and jump in to adding the CSS.

2nd Method - Reverse Single Post Navigation

Now for the reverse order with the left arrow now navigating to the older items for a book like effect. Simply add the following to your functions.php

[crayon-4fb4cdc9cb065/]

Add the CSS

Open up style.css and add the following.

[crayon-4fb4cdc9cb077/]

Conclusion

There are pros and cons to hardcoding a plugin directly into your functions.php especially when a plugin needs updating. This plugin, however is pretty stable and if all you need is another way of navigating then why not hard code it into your theme. I have left the plugin on my site, deactivated so if any new features arise I will simply update this post to inform you.

Display Your WordPress Recent Posts on a Static Page

Tracy Ridge — Sun, 12 Feb 2012 20:55:54 +0000

This tutorial shows you how to display your recent posts on a static web page. So now you ask the question 'Define Static?' There are a variety of reasons why you may have static pages. You could, for example, have built a website from scratch and then decided to integrate a blog or news section into it and require to pull some information from the blog to your homepage. There has been several methods on the web including directly accessing the database. This is a simple but elegant solution in which I will show you 2 methods, one of which will be on a page with a .php extension and another will be on a page with a .htm extension.

Live Example

I have recently integrated a news blog into a static website for a charity project that I am involved in. The website was originally made up of PHP templates and then I added a news blog into it. It was easier integrating the WordPress around the current design than changing the whole web site into a WordPress blog. Anyhow the homepage is a static PHP page which fetches the data from a blog/news section which is in a sub-directory. Checkout http://www.alfiemilne.org.uk/

Prerequisites

I am assuming that you have WordPress installed on a PHP Web Server or are using web hosting. You will need a code editor with FTP support like Aptana Studio and some basic knowledge of PHP, XHTML and a little CSS.

Let's Get Started

First of all you need to open up your code editor and open the file in which you want to add your WP code snippet. At the top of the page you want to add the following: [crayon-4fb4cdc9d3d7c/] This loads the WP environment and template. If you have WP installed in a subdirectory then prefix wp-blog-header.php like so: [crayon-4fb4cdc9d3d88/] Without this we wouldn't be able to display our latest posts so please do not skip this step! Now in the area you want to display your recent posts insert the following [crayon-4fb4cdc9d3d93/] Line 2 holds an array of items like the amount of posts you want to display, post type, post status and order in which you want to display them. To view more options visit get_posts on the WP Codex Line 3 We get our posts and assign the array to a variable called $postslist Line 5-10 We then start our foreach loop which will grab all the posts. We then wrap each post up in a div. I have also included the date. It will only display the date once if several posts have been posted on the same day. You can remove the date if not needed. We then display the posts pretty permalink underneath. Finally we tweak it with a little CSS [crayon-4fb4cdc9d3d9e/]

Adding to a non PHP web page

Now to add our blog posts to a .htm or .html page. I found this little snippet from Reach Customers online This requires a little hacking of our .htaccess file which should be in the root folder of your web server. It may be hidden by default as it has a (.) as a prefix. Either navigate to it using your code editor, enabling hidden files or download it using FTP software like Filezilla. Make sure you keep a backup to be on the safe side. You may also need to create one if you do not have one already. In your .htaccess file add the following.

[crayon-4fb4cdc9d3daa/] Line 1 Make sure you use the correct extension. I have used (.htm) in this case but you could change it to (.html) etc: Lines 6,7,8 Change the directory to which your error pages resides. This re-directs to an error page when the page cannot be found.

Conclusion

I hope you have found this tutorial interesting, if you do have any problems then please contact me. I would also like to hear your success stories.

Fix 3G Error after Upgrading Android on HTC Desire HD

Tracy Ridge — Tue, 17 Jan 2012 11:48:05 +0000

Ever since upgrading my HTC Desire HD to the latest version of Android (2.3.5) I have had no 3G mobile network. This just requires a simple fix to set your mobile settings to its default. Click on Menu Button on your phone Click on Settings Click on Wireless & Network Click on Mobile Networks Click on Access Point Names Click on the menu button again which will bring up options on the bottom of your screen. Click Reset to Default

That's it you should now have your mobile network working again.

The Swiss Army Tool of Web Design Apps

Tracy Ridge — Sun, 30 Oct 2011 19:48:22 +0000

Have trouble finding a web app to use? Fed up of having to refer to your bookmarks to access them? I have recently come across a wonderful web design app from Coded Bits that groups together other web apps to make a great productive environment and all within a click away. A great time saver for any web design enthusiasts and novices alike.

Here is a comprehensive list of all 56 tools on offer

CSS Tools

CSS3 Gradients
CSS3 Rounded Corners
CSS3 Button Generator
CSS3 Button Maker
CSS3 Border Images
Color Scheme Designer
Color Converter
CSS Menu Maker
3D CSS Text
CSS Text Shadow Effects
CSS Text Shadow Generator
CSS Text Shadow Generator with Multiple Shadows
3D CSS Ribbons
Clean CSS
CSS Warp
CSS Easing Animation
Mother Effing Text Shadow
CSS Desk
Animation Fill Code

Font Tools

CSS Type Test
Font Tester
Font Squirrel
Google Web Fonts

HTML

HTML5 Boilerplate
320 and Up
HTML Email Boilerplate

Grids

Less Framework
Blueprint
Variable Grid System
1kb Grid CSS
Gridinator
Gridulator

JavaScript

JS Packer
JS Beautifier
JS Fiddle

Placeholders

HTML Ipsum
HTML Snippet Generator
Lorem Ipsum Generator
Placeholder Images
Placeholder kitten Images
Flickholdr
Lorempixum
Samuel L. Ipsum

Images

QR Codes
Favicon Generator from Image
Favicon Painter
Stripe Generator
Color Ribbons
Noise Texture Generator
Preloader Creator
CanvasLoader Creator
CSS Sprite Generator
ASCII Text Art Generator
Seamless Pattern Generator
Patternizer

jQuery

jQuery Theme Roller

Web Design on Linux

Tracy Ridge — Sat, 29 Oct 2011 20:49:23 +0000

Microsoft and Apple computers are no doubt the web designers choice when it comes to creating websites. Adobe software has become the niche and the creative professionals favourite for many years. Linux on the other hand has improved considerably over the past few years and now it is possible to create beautiful websites with the plethora of tools available. Here are a few of those tools to get your creative juices flowing.

Graphics and Web Design

I am sure by now you have probably heard of GIMP and Inkscape. Gimp is similar to Adobe Photoshop is excellent for touching up photos and creating pixel based designs. MyPaint is a paint program which is designed for pressure sensitive graphics tablets. Inkscape on the other hand is similar to Adobe Illustrator and is extremely useful for drawing and creating scalable graphics such as logos and icons. Xara Xtreme is also another popular tool for vector drawings. Shutter is a screenshot tool that is useful for capturing and editing screenshots for your blog or website. For resizing images with speed you could use Shrink O'Matic which is a drag and drop Adobe Air application. Trimage is a small utility to compress images and Gloobus-Preview is an excellent tool for displaying images quickly without the need to open them in GIMP or Inkscape.

Coding

Dreamweaver has dominated the web design market for many years for creating WYSIWYG websites. On the other hand coding your own website is always encouraged to be able to learn web design properly. Aptana Studio is a very powerful piece of software as is Eclipse, Komode Edit and Netbeans. Hardcore enthusiasts use Emacs and Vim. If you want a lightweight editor then Gedit, Bluefish and Geany are extremely popular.

Fonts

If you are designing logos then you may have lots of fonts installed in your system. Fonty Python is a font manager and organiser where you can browse and install fonts. Fonty python lets you create groups of fonts, known as pogs, which you can install/uninstall with one click. Another great feature also is having the ability to compress your pog or pogs into a zip file for easy transportation if you change to a different Linux distribution and require a quick install.

Testing Websites

The majority of browsers now are extensible and have tools for checking your websites for errors and tweaking code etc. Firebug and Web Developer Toolbar both come at the top of the list. Xampp for Linux is a web server and is excellent for testing your PHP/MYSQL powered websites.

File Transfer

Filezilla is great for accessing your server to upload or download your files. Cross FTP is also a useful Firefox extension that's worth checking out.

Other Useful Tools

One of the most used pieces of software on my Linux desktop is actually a very simple piece of software. Clipit is a an excellent clipboard manager. If you copy and paste a lot this is the tool for you. I highly recommend a clipboard manager regardless of whether you do web deign or not. Meld is a extremely useful 2/3 way file and directory comparison tool. Getting Things Gnome is a excellent piece of software to organise your tasks which also synchronises with Remember The Milk and also makes use of the Hamster Time tracking applet. VirtualBox is great for testing your websites in alternative Operating systems without having to restart in your computer. Web Developer Tools (WDT) is like a swiss army knife of web tools including image processors, editors, decoders, compressors and server side tools.

Conclusion

Do you develop or design using Linux? Have I missed anything that you think warrants a mention? I am quite surprised that with all the Linux distributions out there no one has developed a web/graphic design based distribution. Who knows maybe in next few years we might be seeing one!

Top 10- Websites to get your Inspiration from

Tracy Ridge — Tue, 21 Jun 2011 21:13:40 +0000

Everybody needs a little inspiration at some point in their lives. Have you ever visited a friend's house, admired the decor, then go home and make changes to your own home or have you longed for a living room like one in a brochure. Here are a list of websites to get your inspiration from. Enjoy!

Pattern Tap

Web Creme

The Design Inspiration

Dribble

CSS Beauty

Most Inspired

Colour Lovers

Design Shack

Site Inspire

Apps Mania

Why I Would Choose Android over iPhone OS

Tracy Ridge — Wed, 01 Jun 2011 22:08:48 +0000

Back in January I renewed my mobile contract and got a HTC Desire HD smartphone with the android operating system. I love everything about it apart from the slightly poor battery life which is probably not helped with my Wifi being constantly on but hey I spend all my spare time on my computer so I can quickly charge it up. I do like Apple products but there is one thing that Android does better.

Prior to getting the HTC I have always thought Apple built solid good looking products, the iPod and iPad are both excellent pieces of technology and I am in favour of the alternative OS which made me contemplate in getting an iPhone but I did not want to pay any extra, monthly, nor have to purchase a phone, so I opted for the HTC instead. Anyhow, having spent an hour or so fiddling with my friends' iPhone as she had never even plugged it into her computer before, there was one main thing that Apple would have to change for me to even consider purchasing or recommending an iPhone.

It couldn't be a standalone update feature by any chance?

In this modern world everything needs updating, from computers, routers, Digital TV and this is also true with Smart phones. This is where the Android based smartphone phone wins hands down. I have just recently updated my android device to version 2.3 which was a major update. This was painless I didn't need any 3rd party appliances or tools in order for it to update. I simply connected to my WiFi at home and the phone did everything for me and all of my photos, apps and phone numbers were left intact.

Which begs the question why would you have a smartphone that you have to plug in to a computer to update it? Surely this is not smart?

To me this is a major stumbling block and flaw with Apple products. Smartphones and Tablets are incredible powerful. People often use them instead of switching on the computer which can be a long and laborious task. How many of you have a quick browse on the internet using your phone or iPad? How many of you out there have bought an iPad instead of a computer and then realise that hey "I need to buy a computer to update it?" How many of you have never even updated your phone? We live in a world where updates fix critical bugs which prevent harm. If you have answered yes to any of the above then I recommend hooking your iPhone or iPad up to your computer to update it. Please remember to back up your data first.

The iPhone is wireless capable and there is no reason for it not to have an update feature. Surely from a security point of view this should be standard. After all you wouldn't run an original Windows XP computer with its factory default settings! I rest my case!

Does anyone else agree or am I being over critical I would love to hear your views! It's 1-0 to Android I say.

Another Top 10 Linux Resources

Tracy Ridge — Mon, 30 May 2011 20:39:03 +0000

I must admit trying Linux again, after a unsuccessful attempt in 2007, has been a decision well made. I currently run Linux Mint 11 on one computer and Ubuntu 11.04 on another. My 8 yr old daughter can even navigate the unity desktop in a breeze, it's as if she has been using it for years! I am not so keen on unity myself as I like the classic desktop. Anyhow enough of my ramblings, here are some more useful Linux resources for your perusal.

Ubuntu Sharing

RSS Feed

Begin Linux

RSS Feed | Follow on Twitter

Linux Today

RSS Feed

Howto Geek

RSS Feed | Follow on Twitter

Dedoimedo

RSS Feed

Tux Files

Ghacks

RSS Feed | Follow on Twitter

Linux Bsdos

RSS Feed

Tech Drivein

RSS Feed | Follow on Twitter

Ubuntu Vibes

RSS Feed | Follow on Twitter

Really Linux

I can count and I am well aware there are 11 here. ;-) Really Linux was recommended by Afiate Kriese in my previous Top 10 Inspiring Linux websites so I added it to the list. I am positive there are probably tonnes more websites out there which just goes to show that the Linux user base is getting stronger!

jQuery Disable and Enable Form Elements Using a Checkbox

Tracy Ridge — Tue, 05 Apr 2011 18:54:15 +0000

Here is a simple little snippet that uses jQuery to enable or disable text input boxes in forms using a checkbox. When disabling the text boxes it prompts you to confirm it so that you don't accidentally delete your data. This might be useful for forms elements that need to be enabled or disabled when a certain checkbox is checked like in a options page. The code itself is quite self explanatory but please feel free to ask if you are having any problems.

Demo

Please type something into the text input boxes and click on Enable

HTML Code

[crayon-4fb4cdc9d5ff3/]

Javascript/jQuery Code

[crayon-4fb4cdc9d6000/]

Top 10- Must Have jQuery Plugins

Tracy Ridge — Tue, 08 Mar 2011 10:31:44 +0000

jQuery is one of the most used frameworks there is and it is renowned for being simple, flexible and easy to learn. There are literally hundreds, if not thousands of plugins to choose from. Here are a few plugins that I have previously used or would definitely use in the future. I hope you enjoy them!

jSquares

jSquares is a image grid plugin which pops up an image and a description in an overlay. A good example would be the ted.com website. jSquares can be configured to suit your needs and works on all popular browsers.

License: MIT View Demo | Download

Cloud Zoom

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

License: MIT View Demo | Download

Qtip

qTip is a very user friendly robust enhanced tooltip with many features including rounded corners and speech bubbles.

License: MIT View Demo | Download

WOW Slider

WOW Slider is a jQuery image slider with stunning visual effects (Blast, Fly, Blinds, Squares, Slices, Basic, Fade) and tons of professionally made templates. WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing.

License: Free for Non-Commercial View Demo | Download

Ajax Zoom

AJAX-ZOOM is a powerful image zoom & pan gallery plugin with 360° rotation option based on jQuery and PHP. With over 250 options AJAX-ZOOM is very flexible and can be seamlessly integrated into any website. AJAX-ZOOM also doesn't require any browser plugins such as Flash, Java or Silverlight. It's all cross-browser javascript and PHP.

License: Free for Non-Commercial, Limitations apply View Demo | Download

GalleryView

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customise.

License: MIT View Demo | Download

jQuery Vertical Mega Menu

This plugin creates vertical mega menus using nested lists, which allow users to view all available menu options for each top-level menu item.

License: MIT View Demo | Download

WowWindow

WowWindow is an advanced modal window script and Lightbox alternative, which allows you to create zooming windows from images, inline content, or videos (YouTube or Vimeo). It uses CSS3 transformations (rotate or zoom) to present the windows, but still degrades sufficiently for browsers that do not support this.

License: MIT View Demo | Download

gMap

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customisable.

License: Creative Commons BY-SA 3.0 View Demo | Download

Meerkat

Meerkat is a unobtrusive pop up container/overlay that can be used to hold information, advertising and or used as a splash page. Easily customisable to suit your needs, Meerkat is cross browser compatible and degrades nicely when Javascript is disabled.

License: MIT View Demo | Download

WordPress Navigation- Dropdown Menu Image

Tracy Ridge — Tue, 15 Feb 2011 22:54:55 +0000

Having ~~just~~ previously updated my theme to make use of the WordPress navigation menus I decided I wanted to have a indicator to display that there is a drop down menu. This can be done many ways with plugins etc but I wanted to do it without the need of a plugin. So I had a think and came up with this idea which requires very little knowledge to carry out.

Create a Image for your drop-down navigation

To start this tutorial off we need a image. The source files are available to download at the bottom of this post. I used Inkscape which I used for this particular project but you can use any other software. I first created a triangle and then I scaled it down to 15px by 8px. I placed the triangle hard to the left and left some space to the right. This stops the image from being pushed to the edge of the container which improves it's appearance and prevents us from adding any padding to our CSS which may destroy the look.

Enable Hidden Options

Go to the WordPress admin and click on Appearance and then click on the Menus.

Go to Screen Options and check the CSS Classes checkbox.

Back in the menu section in my case I have Tutorials as a parent and the children are Windows, PHP and Linux.

Expand tutorials by clicking on it and type drop-down into the CSS classes input box. Save your menu!

Add the CSS

We of course now need add a few lines to your stylesheet. Open style.css in your favourite editor and enter the following

[crayon-4fb4cdc9d8390/]

If you refresh your browser you may see that multiple images are being displayed like so.

To prevent this we add the following to the stylesheet.

[crayon-4fb4cdc9d839d/]

Conclusion

As you can see with the above image the extra images have disappeared. Hope you have enjoyed this simple tutorial and please feel free to contact me if you are experiencing any problems as not all navigation menu's are the same so there maybe a little tweaking required.

PHP and jQuery checkbox array with a hint of Jquery UI

Tracy Ridge — Mon, 10 Jan 2011 20:00:46 +0000

I have been learning jQuery alongside PHP to help with my event manager project. Here is a tutorial on how to get the values of a checkbox array, post it via a jQuery Ajax call and subsequently delete the values from a MYSQL database. This tutorial also makes use of the jQuery UI which we will use to display our dialogs.

Prerequisites

I am assuming that you have access to a PHP web server and have a MYSQL database. I highly recommend Xampp for your testing needs. I am also assuming that you know the basics on uploading and using an FTP program and have the use of a text editor or IDE.

Database Setup

For an in depth explanation on how to setup the database setup visit one of my previous tutorials. Download the source files and edit config.php in the lib directory to include the details of your database. Upload them to your server. Navigate using your browser to the files. For example: http://localhost/jquery_checkboxes/lib/setup.php Click on the Setup button and this will setup the database for you and re-direct you to index.php.

Index.php

The main files are index.php, checkbox.js and process.php. First we will have a look at the main part of index.php

[crayon-4fb4cdc9d9e01/]

Here we fetch the data from the MYSQL database and place it into a form. Line 21 is very important as it contains our checkbox array name deleteCB[] which we use via jQuery to obtain our values.

Checkboxes.js

[crayon-4fb4cdc9d9e10/]

Now lets get to grips with checkbox.js. Lines 2-11 are for selecting or de-selecting all checkboxes. Lines 13-23 are for the creation of the jquery UI Dialogues in which we use for displaying messages. Line 24 is the start of the click event when the delete button is pressed a event is triggered. Line 25 checks to see if any checkboxes have been selected. If there are no checkboxes selected it fires a jQuery UI error dialog. If there is a checkbox selected a jQuery UI confirmation dialog appears to check whether you want to delete the items selected. Clicking on Delete all items will take you to line 31 where we assign the variable data to get the values of the checked checkboxes. Line 35 is the start of our jQuery Ajax call which posts the deleteCB[] with its corresponding value to the file process.php. Then we reload the page once the call has been processed and display a dialog to confirm that the deletion has been successful.

Process.php

[crayon-4fb4cdc9d9e1e/] Process.php is a simple foreach loop which receives the data from checkboxes.js and deletes the values from the database.

A phone call with a scammer!

Tracy Ridge — Tue, 19 Oct 2010 14:49:53 +0000

No doubt you will have heard of spam, phishing, viruses and trojans by now. After all they are constantly a threat to our security and it is the main reason why we have firewalls and anti-viruses on our computers. Threats are not entirely computer based though you may be also subject to telephone calls from people pretending to be from your ISP or even from Microsoft themselves! Be aware of the scammer!

My first encounter was back in March when I got a phone call from a confused neighbour who asked me to have a look at her computer because someone had telephoned her saying that she had an error on it. She was asked to switch on her computer and was directed to the logs where of course there was a little red warning sign. They went on to tell her that the error would wipe her hard disk and render her computer utter useless unless she was to go to this website. The website was LogMeIn which of course is a reputable remote desktop company. It wasn't until they asked her for a fee for them to fix her computer that the alarm bells started ringing. She immediately said that she wasn't going to pay for anything and she took their phone number and got in contact with me.

I also received a call in August from an asian guy claiming that he was from my ISP and that Microsoft had got in touch with them to tell me that there were errors on my computer. I went along with it just to find out what they had to say after all I run Linux. This time they directed me to a different website to download ammyy which is legitimate remote desktop software. When it come to the payment I just said no and he said well you don't want me to fix your computer then I said no. Eventually he told me t F*ck off and hung up.

The point in this post is to simply get the message across that if you receive any phone calls saying that they are from your ISP or Microsoft then do not entertain them. Never ever give your credit card details out to anyone that contacts you, even if they say 'Can you confirm the credit card number that we have on file for you?' Once they have got your credit card details then they will of course start defrauding you.

On another note there is a company that keeps phoning us saying that they are from sky and that our warranty has expired and it will cost £65+ for the year. When questioned they could not tell us that they were officially calling from sky, which could only mean one thing. This company is not official endorsed by sky and they are using sky's good name to sell you a warranty package. Whether or not the company is official it is still using the sky branding to illegally sell it's products. Be aware!

Have you ever received a phone call from a scammer or have you ever been fooled by one? Have you had any other so called company that has contacted you trying to extract information? Please feel free to comment.

Install iPlayer on Mint 9 or Ubuntu Lucid

Tracy Ridge — Thu, 02 Sep 2010 22:02:08 +0000

I have been wanting to install BBC iPlayer on my Linux Mint 9 to download and watch a TV show as my Internet speed is not the fastest and fluctuates from time to time so I wanted to download without the disruption. When I tried to install iPlayer with Google Chrome 6.0.472.53 I received an error message and was unable to install despite several attempts. I then tried my trusty old Firefox 3.6.9 and the same happened again. I tried also to find an offline version and could not find one. My thoughts were that if I can't install it on 2 of the most popular browsers and can't find an offline version then I give up, or should I?

Enter Opera to save the day. I downloaded and installed the latest version of Opera 10.61 and navigated to http://www.bbc.co.uk/iplayer/install/ and it installed without a hitch so then I could download my TV show at last. I had to browse iPlayer from Opera to download the show put that's the least I could do.

Whilst I am on the subject Opera is a pretty nifty browser. I will definitely be using it more often.

As for the problem it could be flash or the air plugin. Has anyone successfully got it working with Firefox or Chrome?

Getting to grips with PHP Radio Buttons

Tracy Ridge — Wed, 25 Aug 2010 21:08:24 +0000

Following on from getting to grips with PHP Checkboxes I decided to write a little tutorial on radio buttons. As you know radio buttons can only have 1 state either on or off and only one can be selected at any one time. Here is a simple tutorial on how to get data from a database, select the radio button, get data from the form and update the database. If you have previously read and completed the setup procedure the process is the same so you may want to go straight to the demo.

Prerequisites

Database Setup

When it comes to the database I like the simpler things in life so I use a MYSQL class from Ricocheting.com. This will be included within the script in which you can download from the bottom of this post. Unzip the download file and upload it to your server. As you can see the checkbox_demo folder has 1 file and 1 folder containing 3 files. Inside the lib folder there is the Database.class.php, config.php and setup.php and in the root folder there is index.php. First and foremost you need to open config.php and put your database settings in the appropriate places and save.

[crayon-4fb4cdc9dda94/]

Now navigate to lib/setup.php with your browser. Below is the source of the setup file to give you an understanding.

[crayon-4fb4cdc9ddaa0/]

The Radio Button Demo

[crayon-4fb4cdc9ddaac/]

Now as for index.php which I have split into 3 parts. The opening lines connect, query and get the value of the radio button from the database. It stores the value of radio to the variable $radio and then it checks to see which radio button value it matches and appropriately selects it.

[crayon-4fb4cdc9ddab7/]

The second part deals with the saving the data to the database. First it checks to see if the hidden field has been submitted then the variable $selected_radio is assigned the value of the radio button that has been selected and then the database is updated accordingly with the correct values and the page is told to refresh.

[crayon-4fb4cdc9ddac2/]

As you can see in the 3rd part this is the basic form where the contents of the radio are determined by the values that have come from the database or have been changed by user input.

Getting to grips with PHP Checkboxes

Tracy Ridge — Tue, 24 Aug 2010 19:26:06 +0000

The aim of this tutorial is simply to get the data from a checkbox or checkboxes and store it in a MYSQL database and on page load the data is retrieved from the database and is shown which would be suitable for an options page in a php script.

Prerequisites

Database Setup

[crayon-4fb4cdc9e40ba/]

Now navigate to lib/setup.php with your browser. Below is the source of the setup file to give you an understanding.

[crayon-4fb4cdc9e40c7/]

Setup.php is a basic form when the user clicks on setup button the script creates the table called options within your database, then creates the checkbox column which is of a type enum, a string that can only take 1 set of allowed values, in my case 'Y' or 'N'. Then it adds data to the database, deletes the setup file and then re-directs you to index.php.

Checkboxes Demo

[crayon-4fb4cdc9e40d3/]

Now as for index.php which I have split into 3 parts. The opening lines connect, query and select the value of checkbox from the database. It stores the value of checkbox to the variable $checkbox and then it checks to see if the value of checkbox is 'Y' or 'N'. If it is 'Y' then the variable $value is given a 'Y' and the variable $selected is then given 'checked="checked"'. This is then passed on to the form which will tick the checkbox and set the value of the checkbox to 'Y'.

[crayon-4fb4cdc9e40de/]

The second part deals with the saving the data to the database. First it checks to see if the hidden field has been submitted then it checks to see if the form flowers value is 'Y' or 'N'. if it is 'Y' the $value variable is set to 'Y' and then the database is updated accordingly with the correct values and the page is told to refresh.

[crayon-4fb4cdc9e40ea/]

As you can see in the 3rd part this is the basic form where the contents of checkbox are determined by the values that have come from the database or has been changed by user input.

WorldOWeb

Extend The Native WordPress Gallery

Conclusion

Handy HTML5 & CSS3 Resources to Kickstart your First HTML5 Project

Conclusion

Sources

HTML5 Cheat Sheet (Infographic)

Integrate WP Single Post Navigation into your WordPress Theme

Prerequisites

Further Reading

First Method- Default Single Post Navigation

2nd Method - Reverse Single Post Navigation

Add the CSS

Conclusion

Display Your WordPress Recent Posts on a Static Page

Live Example

Prerequisites

Let's Get Started

Adding to a non PHP web page

Conclusion

Fix 3G Error after Upgrading Android on HTC Desire HD

The Swiss Army Tool of Web Design Apps

Web Design on Linux

Graphics and Web Design

Coding

Fonts

Testing Websites

File Transfer

Other Useful Tools

Conclusion

Top 10- Websites to get your Inspiration from

Pattern Tap

Web Creme

The Design Inspiration

Dribble

CSS Beauty

Most Inspired

Colour Lovers

Design Shack

Site Inspire

Apps Mania

Why I Would Choose Android over iPhone OS

Another Top 10 Linux Resources

Top 10- jQuery Tutorials

Automatic Image Slider with CSS & jQuery

Moving Boxes

Simple jQuery Dropdown Menu

The Easiest Javascript Sliding Door Effect Tutorial with jQuery

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Animated Form Switching

Display Switch Tutorial

Create a Awesome Image Gallery Using CSS3 and jQuery

A Fresh Bottom Slide Out Menu with jQuery

Simple Tooltip with jQuery & CSS

jQuery Disable and Enable Form Elements Using a Checkbox

Demo

HTML Code

Javascript/jQuery Code

Top 10- Must Have jQuery Plugins

jSquares

Cloud Zoom

Qtip

WOW Slider

Ajax Zoom

GalleryView

jQuery Vertical Mega Menu

WowWindow

gMap

Meerkat

WordPress Navigation- Dropdown Menu Image

Create a Image for your drop-down navigation

Enable Hidden Options

Add the CSS

Conclusion

PHP and jQuery checkbox array with a hint of Jquery UI

Prerequisites

Database Setup

Index.php

Checkboxes.js

Process.php