CSS and HTML5: background image in buttons

Tweet

Would you like to do something like:

Or maybe you prefer it another way, like:

They look the same, don't they? However they are a bit different in the making. Let's see how...

The first way to do such thing is to use the <button> tag:

<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" />
</button>

The image is just like any text we usually put inside the tag.

jQuery: scroll to the top, to a specific container and to the bottom of a page

Tweet

Some time ago I wrote an article where we discussed how to use JavaScript to create a smooth scroll to the top of the page.
Today we are going to see how to do it with jQuery, and we are going to do it in order to scroll to the top of the page and even to the bottom of the page. After that we are going to create a simple jQuery function that will scroll to a specific element of the page.

Interested? Ok... follow me.

ASP: pass a variable to JavaScript

Tweet

One of the most often asked question in forums is "how do I pass an ASP variable to JavaScript?"
It is quite common to find out that people ask the question the other way round: "How do I pass a JavaScript variable to ASP?"
Ok, the two things are completely different and they involve completely different solutions.

First of all, let me explain something you might already know. ASP (or to be precise VBScript) is a server side language, while JavaScript is a client side language. The two work on different levels: ASP is executed before the page is completely loaded, while JavaScript works only after that. For that reason we cannot pass a JavaScript variable to ASP without reloading the page.

CSS: create a post-it note

Tweet

I've recently needed to create some sort of post-it note for a web site. The general look of the homepage was like a working desk, and it was suggested to add a yellow post-it somewhere in the upper right corner of the viewport.
Because I know that time is money and that we don't really need to reinvent the wheel, I have collected some solutions I've found on the web.
If you're interested, please keep on reading.

Ms Access: database administrator

Tweet

Today I would like to share something that I've found a long time ago (exactly around 2008). The thing is I still find it useful today while at that time it has saved me in critical situation a lot of times.
It is called DBAdmin and I think you should have a look at it if you administer MS Access databases over the internet.

"StP Database Administrator (DBAdmin below) is a tool that allows you to manage your MS Access databases through your browser, providing various set of functions you can perform with your databases, without having downloading them, changing and uploading again. Most of features needed for database management are included, you can even create a new blank databases on-line."

The things you can do with DBAdmin are incredible and because we don't really want to download-change-upload our mdbs wasting time, the tool is a perfect companion.

Have a quick look at the tool page and let me know what you think.

CSS: rotate background images

Tweet

We can use CSS to rotate elements in a web page. You may already know about it, but a friend of mine asked me how to rotate a background image, without rotating the container.
Hmmm... that was a question, but the answer surprised me when I found how to do it.
Are you interested? Well, get into the article and see how to do it.

jQuery: calendar and datepicker plugins

Tweet

Holidays time - short post. I hope you find it useful.
Now on with the calendar and datepicker jQuery plugin parade!

wdCalendar – jQuery Based Google Calendar Clone
"wdCalendar is a jquery based google calendar clone. It cover most google calendar features. User can choose to have a daily view, weekly view or monthly view. User can easily create, update or remove events by drag & drop. It is very simple to to integrate wdCalendar with a database.
wdCalendar is free (open source LGPL license), easy to use, and with great functionalities."

Event Calendar
"Event Calendar is a jQuery and ColdFusion event calendar that works a lot like the Google Calendar system. With Event Calendar, you can share calendar information throughout your organization. There is also a simple user facade, that you can extend, to help control user rights."

jQuery.calendarPicker
"This component is a light-weight calendar/date-picker.
Some features:

• supports internationalization (supports do not necessary means it is implemented:-) )
• supports changing current date
• supports mouse wheel scrolling
• supporting (deferred) callback on date selection
• supports variable number of years, months and days
• supports next/prev arrows"

Date Picker - jQuery plugin 
"Date Picker component with a lot of options and easy to fit in your web application."

FullCalendar
"FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source licensed under an MIT license."


jQuery Datepicker
"A jQuery plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting individual dates or date ranges."

Multiday Calendar Datepicker JQuery Plugin
"Multi-day, multi-month animated datepicker jQuery plugin that weighs in at 14KB with the uncompressed development version."

jQuery Frontier Calendar 
"Full month calendar jQuery plugin that looks like Google Calendar."

jQuery UI datepicker

Calendario
"Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, we want to simply stack the days of the month."

Happy Easter

Tweet

Relational databases: some simple rules (part 2)

Tweet

This is the second part of the two parts article "Relational databases: some simple rules".

In the first part we have seen the ideas of tables and the way we can relate them.
And now... the conclusion!

Primary and foreign keys
We now need to move on a bit, but please keep in mind the example made in the first part of the article: two tables, with a relation for the state column.
The names table has the following columns: ID, name, surname, address, post code, city, state.
The states table has the following columns: ID, state.
In the persons table, the “state” column will contain only IDs related to the states table.
The ID column in the person table is a primary key. The ID in the state table is a primary key.
The “state” column in the persons table is a foreign key.
Quite easy, isn’t it?

Relational databases: some simple rules (part 1)

Tweet

It doesn't matter what we prefer to use, either Ms Access or SQL Server or Oracle, or even MySql, but when we want to create a new database, we really need to consider its structure, plan it and finally create all the database elements.
To do such a thing might seem easy – and in general it is – but a good development plan is what we need to avoid pitfalls and future issues with the structure of the database. The complexity of a database is surely one of the things to be considered, in fact it is clear that a more complex database will surely be more complex to develop.
Some simple rules can be taken into account and in this two parts article we are going to see some important points we need to keep in mind when planning a new database.

CSS3: border-image

Tweet

With CSS3 we can use images as border of an element. Apart from using the normal border styles already available in CSS, we can now make our web pages more colourful and attractive (if you really like colours and shapes!).
Just to go directly to the core, we can use the following style for, let's say, all divs in a document:

div
{
-webkit-border-image:url(myborder.png) 30 30 round;
-o-border-image:url(myborder.png) 30 30 round;
border-image:url(myborder.png) 30 30 round;
}

The border-image property is in fact a shorthand property. As you can see from the above example, we are using different values which are:
1) border-image-source which is the path to our image;
2) border-image-slice which is the inward offsets of the image;
3) border-image-width which is the widths of the image;
4) border-image-outset which defines the portion of the image that goes beyond the box;
5) border-image-repeat which sets the way the image will be repeated.

ASP: conditional statements with If...Then...Else...ElseIf

Tweet

In ASP we can use conditional statements in different ways. The basic syntax we are used to, is If ... Then ... Else ... End, however we will see that there are some interesting things about it.

First of all let's consider a simple conditional statement in ASP. As you already know, we do not use any brackets or parenthesis. A basic example could be:

<%
Dim numVar
numVar = 5
If numVar = 5 then
  response.write("The variable numVar is 5")
End if
%>

HTML5: geolocation

Tweet

With HTML5 is now possible to use the target browser in order to determine the location from which the user is accessing the web. It is not, as you may understand, a GPS location (unless the user is surfing from a GPS capable device), but it can be quite interesting in some cases where special services are supplied on a web page.

How can we develop a geolocation service on our web page?

Well, first of all try and see the final effect: go here and enjoy. After that, please get back on the web thought...

First of all let me say that all location services on the target browser must be granted by the user. As you may have noticed by visiting the above live example, the browser has asked you permission for the use of location services (unless you've granted permanent access to your location).

CSS: cursor

Tweet

As you surely already know we can change the cursor type using CSS.
They way we do it is very simple. It is enough to use the cursor property and apply it to any element in our web page:

<style>
.myDiv {
   cursor: crosshair;
}
</style>
<div class="myDiv">The cursor here has a crosshair shape</div>

What are the different option we have?
The answer after the break :-)

HTML5: telephone numbers on web pages

Tweet

Every day on TV we hear news saying that most of the people in the world is surfing the web using a mobile device. You are probably reading this very article with your iPhone or Galaxy, or maybe using your favourite tablet.
As many of the above mobile devices are actually capable of making phone calls, we can insert telephone numbers on web page and make them clickable, so that any mobile user will be able to use the link to call the shown number.

SQL Server: compare tables

Tweet

When we import, export or synchronise tables, it's a hard job if we have many records.
In the past, I've found some difficulties when I need to compare two tables in SQL Server.
The tables contained different records and I needed to consolidate them in the first table.
The first thing I wanted to do was to actually see which were the differences: I needed a list of records in order to understand the situation.
I've found a good solution for that, and let me say, a quite unexpected solution indeed.

JavaScript: how to use external files

Tweet

As we already know, because we saw it in the past here on the web thought or elsewhere, we can use JavaScript snippet by placing the code in the head and/or the body of our documents.
However, it's good practise to create external JavaScript files, especially when we use standard functions all over our web site.

In this short article, we are going to see how to do it.

jQuery: menu plugin and ideas

Tweet

If you want to create menus using jQuery, here is a good list of plugins and ideas to consider.

NavDock jQuery Plugin 1.2
"NavDock is a jQuery plugin that transforms your menu into a dock style menu." 

jQuery.tn34.facets 

jOrbital menu
"Group objects with similar functionality into one button. Save space and give users more interaction. Move your mouse over the share button to see what I mean."

jMenu : Horizontal navigations with unlimited dropdown sub-menus
"Menu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).
The markup of the menu is pretty clean as it makes use of nested lists.
The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible."

Drop Menu
"With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element."

jQuery and CSS3 Awesome Slide Down Box Menu 
"we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering."

Apple Navigation with CSS3 
"Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques."

CSS: Layers

Tweet

We can use CSS to overlap elements on a page. We are talking about putting one element on top of another.
To do so we can define the z-index. Something like:

Maecenas vel commodo magna. Aliquam facilisis, erat eu rhoncus elementum, elit eros venenatis risus, vitae tincidunt dui lorem a tellus. Integer non magna a mi euismod ultricies. Aliquam sit amet tortor est. Vivamus sollicitudin neque et justo vestibulum dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum tincidunt turpis vitae rhoncus. Donec massa enim, fringilla nec vestibulum at, congue hendrerit dolor. Integer rutrum volutpat condimentum. In consequat ornare erat, ac condimentum diam molestie ac. Nullam ligula lacus, posuere vel rhoncus at, ullamcorper eget lacus. Etiam non nisi urna. Vivamus elementum orci sed diam rhoncus vitae pharetra dolor commodo. Vestibulum varius cursus orci nec ullamcorper. Curabitur nulla sapien, laoreet eu convallis ac, luctus in tellus.

ASP: CDate

Tweet

CDate is an ASP function that converts a valid date and time string to a Date Type value and returns it.

Because of the above we need to use another ASP function in order to be sure to convert a valid date. The function's IsDate.

In the following short post, we are going to see how to use both functions and create a short script that converts a date.

JavaScript: innerHTML

Tweet

In the following short post, we are going to take advantage of JavaScript and its innerHTML method.

Every DOM element can be manipulated using JavaScript. With the use of jQuery we can do great things, but if we need to do something more basic, it is probably better to use JavaScript directly, without the help of the aforementioned great library.

We can manipulate any DOM element using its id as selector together with document.getElementById. The advantage is that we can manipulate the inner html part of the element.
Let's see some example.

CSS: visibility: hidden vs display: none

Tweet

Writing for the web thought becomes more complicated everyday. It goes down to the fact that I've wrote more than 380 posts since July 2010 and thinking about new things to talk about is getting harder and harder. However, some times a short conversation with a friend or a colleague might ignite a sparkle and might give me new ideas for a short post like the following.

I was in fact talking with a friend when it came to my mind that the difference between visibility and display properties in CSS is some times completely missed. Specifically, the difference between visibility: hidden and display: none.
The point is not that complicated, so in just a few words we are going to see the difference, and we are going to explore when to use visibility instead of display.

SQL: AND vs OR (operators)

Tweet

In SQL Server we can use different operators in our queries: AND, OR, LIKE, BETWEEN and so on. In this short post we are going to see AND and OR because I've noticed that some could get confused by the results obtained when using them.

So, let's clear the situation a bit, because we really need to know what we are doing!

ASP: URL Rewrite and IIS7

Tweet

Following a kind suggestion by a follower, today we are going to see how to use IIS URL Rewrite 2.0 for IIS 7.

First of all, what's URL Rewrite?

"IIS URL Rewrite 2.0 enables Web administrators to create powerful rules to implement URLs that are easier for users to remember and easier for search engines to find. By using rule templates, rewrite maps, .NET providers, and other functionality integrated into IIS Manager, Web administrators can easily set up rules to define URL rewriting behavior based on HTTP headers, HTTP response or request headers, IIS server variables, and even complex programmatic rules. In addition, Web administrators can perform redirects, send custom responses, or stop HTTP requests based on the logic expressed in the rewrite rules."

Rest assured, we can use it for a classic ASP site as well.
What we need to do is:
1) install URL Rewrite after downloading it from the Ms IIS site;
2) enable ASP.NET role service on IIS 7;
3) write a rule

jQuery: chaining!

Tweet

We should all bless jQuery. It gives JavaScript a completely new face in terms of usability and easiness.
Considering the latest news about version 2.0, jQuery is quite alive and kicking...

I don't know how many of you know about chaining, but I think we should all try to understand how and why we should use it while writing jQuery code.

SQL: which columns should have an index

Tweet

In SQL tables might have primary keys and indexes. The primary key identifies each record. The key must be unique, it can't be NULL and each table must have just one key.
Indexes are something different: they are used to speed up the queries on a specific table. That means we absolutely need indexes on large tables which we often query.

SQL: subqueries

Tweet

In this short post, I would like to introduce the concept of subqueries in SQL.

A subquery is a query statement inside another query statement. As you already know the order in which a statement is processed is quite important. That is a basic rule like in maths: writing something like 2+2*5 is different than writing (2+2)*5. The first operation gives 12, the second 20.
In SQL the principle is identical.

JavaScript: void(0) and links that do nothing

Tweet

What is a web page after all? Isn't it a bunch of information linked to something else?

As you know, web sites without links don't exist. And if they exist they are basically dead. When we insert a link in a page, we generally want people to click on it and go somewhere else. However, some times we need to create links that do nothing. Or to better say, links that do not take the user somewhere else.

With JavaScript we can create links which can perform different action from actually linking to another page.
However this is not new to us. We already know the possibility of using links to show or hide DOM elements (jQuery is a great tool in that matter and it's JavaScript as well).
On the other side, here we are talking about something different. We will see how to use void(0), but we will see something else and we will make some considerations about it.

ASP: special characters

Tweet

One of things that newbies find difficult when trying to learn ASP is the way code is tructured and what all those special characters are there for.



In this short post we are going to see the most common special characters we can find in an ASP page:

• &
• '
• _
• :
• .
• <% ... %>
• <%= ... %>

As you will see, some of the above might hide even little secrets and surprises.

ASP: variables naming convention

Tweet

When naming variables in ASP, we should consider some conventions.

Because the way we write code is quite important for us and, possibly, other people, we do need to keep things as much readable as we can. That means, for example, we should use indents when writing procedures and functions or we should follow a common structure in code blocks.

In general we need to make things easy to read and understand.
That is why there are common naming convention for variables. And in this article we are going to explore them.

HTML: IDs and classes

Tweet

As I said in the last post, it's quite interesting to explore the differences between IDs and classes in CSS.

First of all, they are both selectors. But they are very different:
1) IDs are unique identifiers;
2) classes are not unique.

The above first difference is quite important because we can give a unique identifier to just one page element, while we can give a class to more than one element.

HTML & CSS: common mistakes

Tweet

Today we are going to see something half way between funny and serious: common mistakes we make while using HTML and CSS.

Why is it funny? Because sometimes those mistakes are so basic that when talking about them we usually react saying we don't make such mistakes. But then... when it happens, for any reason - even the most incredible - the only thing we can do is laugh. Mistakes are always just around the corner. The better we know them, the easier we are going to avoid them.

And when it happens... well... just have a laugh!

the web thought: most viewed posts in 2012

Tweet

As I did at the beginning of last year, I would like to list the top 10 most viewed posts for 2012...

So, here we go - and you might even discover something you have missed last year.

10. CSS: Making background image fit any screen resolution (revised)
9. CSS & HTML: nested lists with style
8. jQuery & JavaScript: Analogue clocks
7. CSS: image zoom effect
6. CSS: float center? Yes, we can do it!
5. CSS: fixed header and footer
4. ASP: Create pdf files with FPDF
3. jQuery: loading content while user scrolls (infinite scroll)
2. Web Design: a collection of progress bars
1. CSS: Making background image fit any screen resolution

Happy New Year

Tweet

Just a thought to all the readers


HAPPY 2013!