Add, Update and Delete Records

Introduction

Here I am performing simple save, delete and update operations in a Windows Forms Application using visual basic 6.0

MSFlexgrid Data Retrieval With ADO

Open the database and execute the query. Loop through the recordset's Fields array to get the field names and use them as column headers.
For each record in the Recordset, loop through the fields saving their values in the FlexGrid.

how to reset the record no in the crystal report when the group header change

I have a complex report here and i need to reset my record number after the group header change
like..

Formula Code :
WhilePrintingRecords;
NumberVar counter;
if PreviousIsNull ({ado.iBarcode})  then
    counter := 1
else if previous({ado.iBarcode}) <> {ado.iBarcode} then
    counter := 1
else
counter := counter + 1

Select from Stored Procedure in SQL Function using OpenQuery

SQL functions are limited executable units when compared with SQL stored procedures. Select from stored procedure in SQL Server T-SQL programming is possible using OpenQuery. Using similar SQL programming tricks, SQL developers can execute SQL stored procedure in user defined sql function. Directly from SQL OpenQuery query, data rows can be filtered with a SELECT statement as illustrated in this SQL tutorial.

How to Use a Linked Server in a SQL Server Database Project

Problem

I use the SQL Server Database Project for developing, maintaining, and publishing/deploying my databases.  I added some views to my database project that query data via a linked server and now I am not able to successfully build my project.  The first error I get is SQL71561 - the view has an unresolved reference to the object referenced by the linked server.  I did some research and found out that you can use a linked server if you add a DACPAC file to the project.  However, when I tried to create the DACPAC I get error SQL71564 - the element cannot be deployed as the script body is encrypted.  Can you help me to get this working?

Solution

In order to query using a linked server in a database project, you have to add a database reference to your project which requires that you create a DACPAC file.  Unfortunately as you have noted, you cannot create a DACPAC file on a database that has objects that have been created "WITH ENCRYPTION". I have run in to this problem myself and I will offer my solution in this tip.
I will cover the following tasks in this tip:

• Create a view that can access a linked server
• Create a DACPAC file for a database referenced by a linked server
• Add a database reference to the database project for the linked server
• Publish the database project
• Demo the sample view that uses a linked server
• Add a view that uses the linked server without adding a database reference to the project

I am going to assume that you are familiar with the SQL Server database project.  If you haven't used it before or need a refresher, take a look at the Creating a New Database Project Tutorial.  Although it's based on the 2010 version, it will get you up-to-speed quickly.
I am using the SQL Server Data Tools (SSDT) for Visual Studio 2012 for this tip.  You can download SSDT  here.

Create a SQL Server View

Add the following view to the database project:

CREATE VIEW dbo.Product
AS
SELECT [ProductID], [Name]
FROM [BARLEYWIN8\SQL2012].[AdventureWorks2012].[Production].[Product]

When you build the project, you will see the following error:
SQL71561: View: [dbo].[Customer] has an unresolved reference to object [BARLEYWIN8\SQL2012].[AdventureWorks2012].[Production].[Product].
[BARLEYWIN8\SQL2012] is a linked server defined on my machine.  However, the database project cannot resolve this reference yet.

Create a DACPAC File

A DACPAC file (also known as a Data-tier application) is defined here as "a logical database management entity that defines all of the SQL Server objects - like tables, views, and instance objects, including logins – associated with a user’s database. A DAC is a self-contained unit of SQL Server database deployment that enables data-tier developers and database administrators to package SQL Server objects into a portable artifact called a DAC package, also known as a DACPAC".
Follow these steps to create a DACPAC file for a database (e.g. AdventureWorks2012):

1. Open SQL Server Management Studio (SSMS)
2. Connect to the SQL Server instance for your database
3. Right click the database in the Object Explorer
4. Select Tasks, Extract Data-tier Application from the menu
5. Fill in the dialog as shown below

Note the folder location and file name of the DACPAC file; you will need this to add a database reference to your database project.

Add Database Reference

In general when your database project references objects in another database, you must add a database reference to your project.
Follow these steps to add a database reference for a linked server:

1. Right click on References in the Solution Explorer
2. Select Add Database Reference from the menu
3. Fill in the dialog as shown below

The following are the main points about the above dialog:

• Click the Data-tier Application (.dacpac) radio button
• Fill in the full path to the DACPAC file (we created this in the previous step)
• Select Different database, different server for Database location; this is typically the case for a linked server
• Specify the name of the database you will access via the linked server
• Specify the server name; this is the server name of the linked server; include \instance if a named instance
• Database variable is the name of the SQLCMD variable that will be added to the project; use this to set different values for the database name based on the publishing profile
• Server variable is the name of the SQLCMD variable added to the project; use this to set different values for the server name based on the publishing profile

Now that we have added the database reference to the project, update the view that we created earlier to use the SQLCMD variables in the database reference. Build the project and the SQL71561 error is resolved.

CREATE VIEW [dbo].[Product]
AS 
SELECT [ProductID], [Name]
FROM [$(AW_LINKED_SERVER)].[$(AW_DATABASE)].[Production].[Product]

Publish the Database Project

The database project has a Publish function that will create or update a target database based on the project contents.  Right click the project in the Solution Explorer and select Publish from the menu.  Fill in the dialog as shown below:

Main points about the above dialog:

• The target database connection is a SQL Server 2014 instance on my laptop
• The AW_LINKED_SERVER SQLCMD variable value of BARLEYWIN8\SQL2012 is a linked server on my laptop
• Click the Save Profile As button to save the publishing profile in the project; you can double click it to publish again with the saved values
• Click Publish to create or update the database on the target

Run the query SELECT * FROM dbo.Product to verify that the linked server works.

Use a Linked Server Without a Database Reference

Now that we have seen how to use a linked server with a database reference, let's see how to use a linked server without a database reference.  This is a work around for the situation where you are unable to create a DACPAC file; e.g. some database objects were created "WITH ENCRYPTION".
The solution that I am using in this case is as follows:

• Create a dummy table-valued function (TVF) that defines the result set from the query that uses a linked server; e.g. create the TVF, but do not return any rows
• ALTER the TVF in the post-deployment script; put in the select statement that references the linked server
• Create a new view to select from the TVF

Here is the dummy TVF:

CREATE FUNCTION [dbo].[Product_TVF]
(
)
RETURNS @returntable TABLE
(
 ProductID int,
 Name nvarchar(50)
)
AS
BEGIN
 RETURN
END

Note that there is no select statement in the TVF; it is merely a placeholder for the linked server reference that allows the database project to build successfully.  Create the new view as follows:

CREATE VIEW [dbo].[Product2]
AS 
SELECT * 
FROM dbo.Product_TVF()

Add the following to the post-deployment script:

ALTER FUNCTION [dbo].[Product_TVF]
(
)
RETURNS @returntable TABLE
(
 ProductID int,
 Name nvarchar(50)
)
AS
BEGIN
  INSERT @returntable
  SELECT ProductID, Name
  FROM [BARLEYWIN8\SQL2012].[AdventureWorks2012].[Production].[Product]
  RETURN
END

Note that I used the original four-part name in the FROM clause; i.e. linked server name and database name without the SQLCMD variables to show that the database project does not perform any validation on the T-SQL code in the post-deployment script.

Fresh Sliding Thumbnails Gallery with jQuery and PHP

In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size.
The scrolling functionality of the thumbnails bar is based on the great tutorial by Andrew Valums: Horizontal Scrolling Menu made with CSS and jQuery.
Additionally, we will be using PHP to get the images and thumbs automatically from the folder structure. The folders will contain album sub-folders and we will add a select option to the gallery which allows to choose an album.
Just like in the Sliding Panel Photo Wall Gallery with jQuery we will be using a resize function for the image displayed.
We will also add an XML file that (optionally) contains the descriptions of the images.
Another neat functionality that we are going to add is the changing cursor: depending in which mode and in which position of the full image we are, the cursor will change to a left or right arrow (for browsing the pictures), or to a plus or minus sign (for zooming in or out).
The beautiful images in the demo are from the Models 1 – Photoshoots album from Vincent Boiteau’s photostream on Flickr.

Sliding Checkbox Actions Menu with jQuery

In this tutorial we will create an actions menu with jQuery that appears when checkboxes are selected. This can be a very helpful UI property since we don’t force the user to scroll to the place where the actions are – they just appear whenever the user needs them.
Additionally, the user can drag the actions box to the place that is more practical for him, and the box will always follow when the user scrolls the page. It will also show a count of how many checkboxes were selected.
We will use a table as an example. Usually, actions are placed at the top and the bottom of a table, and that’s OK if the table is not too big. But since we cannot control the size of the user’s viewport, it is not guaranteed that the actions are close to the users focus. With this solution we make it very easy for the user to perform certain actions on selected items.
This tutorial got inspired by a similar feature in the mobile version of Gmail. If you open your Gmail account in the Safari browser on the iPhone or iPod Touch, you will notice this little helpful menu.

The Markup

For the markup we will simply create a table with an ID and some checkboxes in the cells:

<table id="mytable">
 <tr>
  <td class="check">
   <input id="check_1" name="check_1" type="checkbox" value="1" />
  </td>
  <td>Some Content</td>
 </tr>
 <tr>
  <td class="check">
   <input id="check_2" name="check_2" type="checkbox" value="2" />
  </td>
  <td>Some Content</td> 
 </tr>
</table>

For the actions menu we will have the following markup:

<div id="actionsBox" class="actionsBox">
 <div id="actionsBoxMenu" class="menu">
  <span id="cntBoxMenu"></span>
  <a class="button box_action">Archive</a>
  <a class="button box_action">Delete</a>
  <a id="toggleBoxMenu" class="open"></a>
  <a id="closeBoxMenu" class="button">X</a>
 </div> 
 <div class="submenu" style="display:none;">
  <a class="first box_action">Move...</a>
  <a class="box_action">Mark as read</a>
  <a class="box_action">Mark as unread</a>
  <a class="last box_action">Spam</a>
 </div>
</div>

The div with the class submenu will appear when we click on the a with the ID toggleBoxMenu.

The CSS

In the following we will take a look at the style for the actions box. We will be using a lot of CSS 3 properties, so if you want this to work in ancient browsers, you will have to adapt this tiny menu by using images.
We will want to hide the whole menu initially. So, the actionsBox div will have the following style:

.actionsBox{
    font-size:13px;
    font-family:Helvetica,Arial,Verdana;
    font-style:normal;
    left:50%;
    position:absolute;
    top:-50px;
    opacity:0;
    cursor:move;
}

The main menu with the buttons will be styled as follows:

.actionsBox .menu{
    color:#47708F;
    width:240px;
    line-height:30px;
    text-shadow:1px 1px 0px #fff;
    padding:7px; 
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    font-weight:bold;
    border:1px solid #D9EAF2;
    background:#e8f4fa;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.58, rgb(217,234,242)),
        color-stop(0.93, rgb(232,244,250))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(217,234,242) 58%,
        rgb(232,244,250) 93%
        );
    -moz-box-shadow:1px 1px 3px #999;
    -webkit-box-shadow:1px 1px 3px #999;
    box-shadow:1px 1px 3px #999; 
}

We are making heavily use of CSS3 here: the gradient, the rounded border, the box and text shadow will all create a beautiful effect that will make the use of images needless.
The buttons, which will be link elements, will have the following style:

.actionsBox .menu .button{
    padding:4px 7px;
    border:1px solid #D9EAF2;
    cursor:pointer;
    background:#e8f4fa;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.38, rgb(230,243,249)),
        color-stop(0.88, rgb(245,249,250))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(230,243,249) 38%,
        rgb(245,249,250) 88%
        );
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0px 1px 0px #f9f9f9;
    -webkit-box-shadow:0px 1px 0px #f9f9f9;
    box-shadow:0px 1px 0px #f9f9f9;  
}

With the very light box shadow, we are creating a slightly engraved effect. When we hover, we want the element to get a white background:

.actionsBox .menu .button:hover{
    background:#fff;
}

The span in the menu is for displaying the number of selected checkboxes:

.actionsBox .menu span{
    padding:0px 10px;
}

The sub menu will not be displayed initially. We will give it a rounded border at its bottom:

.actionsBox .submenu{
    display:none;
    width:120px;
    margin-left:100px;
    top:46px;
    right:10px;
    background:#fff;
    border:1px solid #D9EAF2;
    border-top:none;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    -moz-box-shadow:0px 1px 4px #ddd;
    -webkit-box-shadow:0px 1px 4px #ddd;
    box-shadow:0px 1px 4px #ddd;
}
.actionsBox .submenu a{
    display:block;
    cursor:pointer;
    padding:10px 15px;
    border-top:1px solid #D9EAF2;
}

The last item will also have a rounded border at the bottom:

.actionsBox .submenu a.last{
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

And the first item will not have a border at the top:

.actionsBox .submenu a.first{
    border-top:none;
}
.actionsBox .submenu a:hover{
    background-color:#f9f9f9;
}

The open/close item will have the following style:

.actionsBox .menu a.open,
.actionsBox .menu a.closed{
    border:1px solid #D9EAF2;
    padding:4px 17px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0px 1px 0px #f9f9f9;
    -webkit-box-shadow:0px 1px 0px #f9f9f9;
    box-shadow:0px 1px 0px #f9f9f9;
    cursor:pointer;
    opacity:0.6;
    margin-right:5px;
}
.actionsBox .menu a.open{
    background:#fff url(../open.png) no-repeat center center;
}
.actionsBox .menu a.closed{
    background:#fff url(../closed.png) no-repeat center center;
}
.actionsBox .menu a.open:hover,
.actionsBox .menu a.closed:hover{
    opacity:1.0;
}

And that’s the style. Of course, you will have to adapt this if you are going to use this in your web application. In IE you can see that the style stays very simple.
Now, let’s add the jQuery magic!

The JavaScript

First, let’s include the jQuery script and also the jQuery UI script because we are going to make our little menu draggable.
So, the main idea is to have our menu appear whenever the user checks a checkbox. We also want it to disappear when there are no checkboxes selected and we want to make the menu draggable. Additionally, the menu should follow the user when he scrolls the page.
We will also change the class of the table row to “selected” whenever we select a checkbox. (You can check out the style for the table and that class in the ZIP file.)
We add the following function:

$(function() {
 /* tells us if we dragged the box */
 var dragged = false;
 
 /* timeout for moving the box when scrolling the window */
 var moveBoxTimeout;
 
 /* make the actionsBox draggable */
 $('#actionsBox').draggable({
  start: function(event, ui) {
   dragged = true;
  },
  stop: function(event, ui) {
   var $actionsBox = $('#actionsBox');
   /*
   calculate the current distance from the 
   window's top until the element;
   this value is going to be used later on, 
   to move the box after we scroll
    */
   $actionsBox.data('distanceTop',parseFloat($actionsBox.css('top'),10) - $(document).scrollTop());
  }
 });
 
 /*
 when clicking on an input (checkbox),
 change the class of the table row,
 and show the actions box
  */
 $('#mytable input[type="checkbox"]').bind('click',function(e) {
  var $this = $(this);
  if($this.is(':checked'))
   $this.parents('tr:first').addClass('selected');
  else
   $this.parents('tr:first').removeClass('selected');
  showActionsBox();
 });
 
 function showActionsBox(){
  /* number of checked inputs */
  var BoxesChecked = $('#mytable input:checked').length;
  /* update the number of checked inputs */
  $('#cntBoxMenu').html(BoxesChecked);
  /*
  if there is at least one selected, show the BoxActions Menu
  otherwise hide it
   */
  var $actionsBox = $('#actionsBox');
  if(BoxesChecked > 0){
   /*
   if we didn't drag, then the box stays where it is;
   we know that the position is the document's current top
   plus the previous distance that the box had relative 
   to the window's top (distanceTop)
    */
   if(!dragged)
    $actionsBox.stop(true).animate({
     'top': parseInt(15 + $(document).scrollTop()) + 'px',
     'opacity':'1'
    },500);
   else
    $actionsBox.stop(true).animate({
     'top': parseInt($(document).scrollTop() + $actionsBox.data('distanceTop')) + 'px',
     'opacity':'1'
    },500);
  }
  else{
   $actionsBox.stop(true).animate({
    'top': parseInt($(document).scrollTop() - 50) + 'px',
    'opacity':'0'
   },500,function(){
    $(this).css('left','50%');
    dragged = false;
    /* if the submenu was open we hide it again */
    var $toggleBoxMenu = $('#toggleBoxMenu');
    if($toggleBoxMenu.hasClass('closed')){
     $toggleBoxMenu.click();
    }
   });
  }
 }
 
 /*
 when scrolling, move the box to the right place
  */
 $(window).scroll(function(){
  clearTimeout(moveBoxTimeout);
  moveBoxTimeout = setTimeout(showActionsBox,500);
 });
 
 /* open sub box menu for other actions */
 $('#toggleBoxMenu').toggle(
 function(e){
  $(this).addClass('closed').removeClass('open');
  $('#actionsBox .submenu').stop(true,true).slideDown();
 },
 function(e){
  $(this).addClass('open').removeClass('closed');
  $('#actionsBox .submenu').stop(true,true).slideUp();
 }
);
 
 /*
 close the actions box menu:
 hides it, and then removes the element from the DOM,
 meaning that it will no longer appear
  */
 $('#closeBoxMenu').bind('click',function(e){
  $('#actionsBox').animate({
   'top':'-50px',
   'opacity':'0'
  },1000,function(){
   $(this).remove();
  });
 });
 
 /*
 as an example, for all the actions (className:box_action)
 alert the values of the checked inputs
  */
 $('#actionsBox .box_action').bind('click',function(e){
  var ids = '';
  $('#mytable input:checked').each(function(e,i){
   var $this = $(this);
   ids += 'id : ' + $this.attr('id') + ' , value : ' + $this.val() + '\n';
  });
  alert('checked inputs:\n'+ids);
 });
});

The close button will make the actions box disappear completely. You can change that behavior by adapting the function. You might want that the user gets his menu back after he clicks on more checkboxes.
The last function is an example of how to get the values of the checked items. You can adapt this to suit your needs and to process the checked values further.
And that’s it! I hope you liked it and find it useful!
 Download Source

Compact News Previewer with jQuery

Today we will create a news previewer that let’s you show your latest articles or news in a compact way. The news previewer will show some list of articles on the left side and the preview of the article with a longer description on the right. Once a news on the left is clicked, the preview will slide in.
Let’s start with the markup.

Animated Form Switching with jQuery

In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.
We will ensure that the form switch works as well when JavaScript is disabled in which case we will simply jump to the other’s form page.
So, let’s begin by creating and styling the three forms.
We will ensure that the form switch works as well when JavaScript is disabled in which case we will simply jump to the other’s form page.
So, let’s begin by creating and styling the three forms.

The Markup

We will create three different forms, a login form, a registration form and a password reminder form with just one input field. They will all have different sizes and numbers of inputs.
First, we will create a wrapper for all three forms.

<div id="form_wrapper" class="form_wrapper">
<!-- We will add our forms here -->
</div>

Then we will add each form element to the wrapper and insert the necessary input fields. Each form is going to have a heading and a bottom box with the submit button. The registration form, which will be our first form, will have two columns that will float next to each other:

<form class="register">
 <h3>Register</h3>
 <div class="column">
  <div>
   <label>First Name:</label>
   <input type="text" />
  </div>
  <div>
   <label>Last Name:</label>
   <input type="text" />
  </div>
  <div>
   <label>Website:</label>
   <input type="text" value="http://"/>
  </div>
 </div>
 <div class="column">
  <div>
   <label>Username:</label>
   <input type="text"/>
  </div>
  <div>
   <label>Email:</label>
   <input type="text" />
  </div>
  <div>
   <label>Password:</label>
   <input type="password" />
  </div>
 </div>
 <div class="bottom">
  <div class="remember">
   <input type="checkbox" />
  </div>
  <input type="submit" value="Register" />
  <a href="index.html" rel="login" class="linkform">
   You have an account already? Log in here
  </a>
  <div class="clear"></div>
 </div>
</form>

Now we will add the login form. This form is going to be the one shown when the user visits the site. That’s why we will give it another special class “active”:

<form class="login active">
 <h3>Login</h3>
 <div>
  <label>Username:</label>
  <input type="text" />
 </div>
 <div>
  <label>Password: 
   <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">
    Forgot your password?
   </a>
  </label>
  <input type="password" />
 </div>
 <div class="bottom">
  <div class="remember"><input type="checkbox" />
   <span>Keep me logged in</span>
  </div>
  <input type="submit" value="Login"></input>
  <a href="register.html" rel="register" class="linkform">
   You don't have an account yet? Register here
  </a>
  <div class="clear"></div>
 </div>
</form>

And finally, we will add the password reminder form:

<form class="forgot_password">
 <h3>Forgot Password</h3>
 <div>
  <label>Username or Email:</label>
  <input type="text" />
 </div>
 <div class="bottom">
  <input type="submit" value="Send reminder"></input>
  <a href="index.html" rel="login" class="linkform">
   Suddenly remebered? Log in here
  </a>
  <a href="register.html" rel="register" class="linkform">
   You don't have an account? Register here
  </a>
  <div class="clear"></div>
 </div>
</form>

The link elements that point to another form will all share the class “linkform” and in order for us to know which form to show when a user clicks the link, we will add the reference into the “rel” attribute. For example, the link “You don’t have an account? Register here” will have a rel attribute value of “register” since we want to show the registration form when we click on the link.
As you might have noticed, the “href” attribute will point to the static HTML page with the respective form. The link from the previous example will point to the index.html which contains our login form. This link will come into use, when JavaScript is disabled.
Now, let’s spice these forms up using some neat CSS3 properties.

The CSS

Let’s start with the form wrapper. We will give it a white background color, which will be the color we see, when the form is switching:

.form_wrapper{
 background:#fff;
 border:1px solid #ddd;
 margin:0 auto;
 width:350px;
 font-size:16px;
 -moz-box-shadow:1px 1px 7px #ccc;
 -webkit-box-shadow:1px 1px 7px #ccc;
 box-shadow:1px 1px 7px #ccc;
}

The heading of each form will have the following style:

.form_wrapper h3{
 padding:20px 30px 20px 30px;
 background-color:#444;
 color:#fff;
 font-size:25px;
 border-bottom:1px solid #ddd;
}

We want the forms not be displayed initially, but we will add a class that tells us that the form is active and should be visible:

.form_wrapper form{
 display:none;
 background:#fff;
}
form.active{
 display:block;
}

We will define now the width for each form. In our JavaScript function we will animate the form wrapper to the respective dimension:

form.login{
 width:350px;
}
form.register{
 width:550px;
}
form.forgot_password{
 width:300px;
}

The columns in the registration form will be floating next to each other:

.form_wrapper .column{
 width:47%;
 float:left;
}

The links in all our forms will have the following style:

.form_wrapper a{
 text-decoration:none;
 color:#777;
 font-size:12px;
}
.form_wrapper a:hover{
 color:#000;
}

Label elements have an inline style by default. We want our labels to be block elements:

.form_wrapper label{
 display:block;
 padding:10px 30px 0px 30px;
 margin:10px 0px 0px 0px;
}

We will style the inputs with some nice CSS3 properties, giving them a gradient as background and some neat box shadow:

.form_wrapper input[type="text"],
.form_wrapper input[type="password"]{
 border: solid 1px #E5E5E5;
 margin: 5px 30px 0px 30px;
 padding: 9px;
 display:block;
 font-size:16px;
 width:76%;
 background: #FFFFFF;
 background: 
  -webkit-gradient(
   linear, 
   left top, 
   left 25, 
   from(#FFFFFF), 
   color-stop(4%, #EEEEEE), 
   to(#FFFFFF)
  );
 background: 
  -moz-linear-gradient(
   top, 
   #FFFFFF,
   #EEEEEE 1px, 
   #FFFFFF 25px
   );
 -moz-box-shadow: 0px 0px 8px #f0f0f0;
 -webkit-box-shadow: 0px 0px 8px #f0f0f0;
 box-shadow: 0px 0px 8px #f0f0f0;
}
.form_wrapper input[type="text"]:focus,
.form_wrapper input[type="password"]:focus{
 background:#feffef;
}

The bottom part of each form will be similar to the heading background:

.form_wrapper .bottom{
 background-color:#444;
 border-top:1px solid #ddd;
 margin-top:20px;
 clear:both;
 color:#fff;
 text-shadow:1px 1px 1px #000;
}

The link elements will have the following style:

.form_wrapper .bottom a{
 display:block;
 clear:both;
 padding:10px 30px;
 text-align:right;
 color:#ffa800;
 text-shadow:1px 1px 1px #000;
}
.form_wrapper a.forgot{
 float:right;
 font-style:italic;
 line-height:24px;
 color:#ffa800;
 text-shadow:1px 1px 1px #fff;
}
.form_wrapper a.forgot:hover{
 color:#000;
}

We will make the wrapper for the remember me checkbox float:

.form_wrapper div.remember{
 float:left;
 width:140px;
 margin:20px 0px 20px 30px;
 font-size:11px;
}
.form_wrapper div.remember input{
 float:left;
 margin:2px 5px 0px 0px;
}

The submit button will have a very subtle inset shadow, nothing special:

.form_wrapper input[type="submit"] {
 background: #e3e3e3;
 border: 1px solid #ccc;
 color: #333;
 font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
 font-size: 14px;
 font-weight: bold;
 padding: 8px 0 9px;
 text-align: center;
 width: 150px;
 cursor:pointer;
 float:right;
 margin:15px 20px 10px 10px;
 text-shadow: 0 1px 0px #fff;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 -moz-box-shadow: 0px 0px 2px #fff inset;
 -webkit-box-shadow: 0px 0px 2px #fff inset;
 box-shadow: 0px 0px 2px #fff inset;
}
.form_wrapper input[type="submit"]:hover {
 background: #d9d9d9;
 -moz-box-shadow: 0px 0px 2px #eaeaea inset;
 -webkit-box-shadow: 0px 0px 2px #eaeaea inset;
 box-shadow: 0px 0px 2px #eaeaea inset;
 color: #222;
}

And that’s all the style! Let’s add some Rock’n Roll with jQuery!

The JavaScript

The idea is to animate to the size of the new form and to switch to it, i.e. show it. So, first we will cache some elements:

//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),

//the current form is the one with class "active"
$currentForm = $form_wrapper.children('form.active'),
 
//the switch form links
$linkform  = $form_wrapper.find('.linkform');

We’ll get the width and height of each form to store it for later when we want to animate to it:

       
$form_wrapper.children('form').each(function(i){
 var $theForm = $(this);
 //solve the inline display none problem when using fadeIn/fadeOut
 if(!$theForm.hasClass('active'))
  $theForm.hide();
 $theForm.data({
  width : $theForm.width(),
  height : $theForm.height()
 });
});

Now, we will call the function that sets the dimension of the wrapper to the one of the current form:

setWrapperWidth();

When we click a “switch link”, we want to hide the current form, since we know that we’ll switch to another one. We’ll animate the form wrapper’s width and height to the width and height of the new form. After the animation is done, we show the new form:

$linkform.bind('click',function(e){
 var $link = $(this);
 var target = $link.attr('rel');
 $currentForm.fadeOut(400,function(){
  //remove class "active" from current form
  $currentForm.removeClass('active');
  //new current form
  $currentForm= $form_wrapper.children('form.'+target);
  //animate the wrapper
  $form_wrapper.stop()
      .animate({
      width : $currentForm.data('width') + 'px',
      height : $currentForm.data('height') + 'px'
      },500,function(){
      //new form gets class "active"
      $currentForm.addClass('active');
      //show the new form
      $currentForm.fadeIn(400);
      });
 });
 e.preventDefault();
});

The function that sets the width to the wrapper simply sets its css properties. We want to ensure that the wrapper has the right width and height set when we load the page.

function setWrapperWidth(){
 $form_wrapper.css({
  width : $currentForm.data('width') + 'px',
  height : $currentForm.data('height') + 'px'
 });
}

For the demo we disabled the submit buttons. If you use them, you will need to check which form is being submitted and give the class “active” to the form you want to switch to, i.e. show:

$form_wrapper.find('input[type="submit"]')
    .click(function(e){
    e.preventDefault();
    }); 

And that’s it! We really hope you enjoyed the tutorial and find it useful!
 Download Source

Interactive Google Map using the Twitter API

In today’s tutorial you learned how to use a geocoding service and how to use the Twitter API. An important fact to remember is that Google has imposed some limits to its geocoding service. Maximum number of requests in one day from a single IP address is 2500. Also, Twitter will rate limit the IP address from which the request was made.
Stay tuned for the next tutorial!

Scrollbar Visibility with jScrollPane

Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. Today we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.
jScrollPane was created by Kevin Luck and you can read more about it here:
jScrollPane – cross browser styleable scrollbars with jQuery and CSS

Animated Buttons with CSS3

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.
The icons used in some of the examples are by webiconset.com and the symbol font is by Just Be Nice
We’ll go through every example and see how the HTML structure looks and what the styles for the normal, the hover and the active states are.
Please note that the animations/transitions will only work in browsers that support those CSS3 properties.

Rocking and Rolling Rounded Menu with jQuery

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

The Markup

For this menu we will not create a list, but div elements for each menu item. We will pack the menu items in a main div called menu. Each item will have an icon as link element and a content div with the heading and a paragraph where we will add links or a search box:

<div class="menu">
 <div class="item">
  <a class="link icon_mail"></a>
  <div class="item_content">
   <h2>Contact us</h2>
   <p>
    <a href="#">eMail</a>
    <a href="#">Twitter</a>
    <a href="#">Facebook</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_help"></a>
  <div class="item_content">
   <h2>Help</h2>
   <p>
    <a href="#">FAQ</a>
    <a href="#">Live Support</a>
    <a href="#">Tickets</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_find"></a>
  <div class="item_content">
   <h2>Search</h2>
   <p>
    <input type="text"></input>
    <a href="">Go</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_photos"></a>
  <div class="item_content">
   <h2>Image Gallery</h2>
   <p>
    <a href="#">Categories</a>
    <a href="#">Archives</a>
    <a href="#">Featured</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_home"></a>
  <div class="item_content">
   <h2>Start from here</h2>
   <p>
    <a href="#">Services</a>
    <a href="#">Portfolio</a>
    <a href="#">Pricing</a>
   </p>
  </div>
 </div>
</div>

Initially, the item div will be just as big to surround the icon, we will make it expand then and we will reveal the content afterward.

The CSS

The general style for the menu like the font will be defined as follows:

.menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}

The items inside of the menu will be floating right, since we want the items to expand to the left and push the other items away:

.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

Then we define the style of the icons (the link class) in the following way:

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(../images/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(../images/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(../images/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(../images/photos.png) no-repeat top left;
}

The other content elements we will style as follows:

.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}

With a white text-shadow we can create a nice engraved text effect.
Ok, let’s add some magic.

The JavaScript

First, we need to add the script inclusions of jQuery and the other two scripts of Zachary.
Then we will add the following functions:

$('.item').hover(
 function(){
  var $this = $(this);
  expand($this);
 },
 function(){
  var $this = $(this);
  collapse($this);
 }
);
function expand($elem){
 var angle = 0;
 var t = setInterval(function () {
  if(angle == 1440){
   clearInterval(t);
   return;
  }
  angle += 40;
  $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
 },10);
 $elem.stop().animate({width:'268px'}, 1000)
 .find('.item_content').fadeIn(400,function(){
  $(this).find('p').stop(true,true).fadeIn(600);
 });
}
function collapse($elem){
 var angle = 1440;
 var t = setInterval(function () {
  if(angle == 0){
   clearInterval(t);
   return;
  }
  angle -= 40;
  $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
 },10);
 $elem.stop().animate({width:'52px'}, 1000)
 .find('.item_content').stop(true,true).fadeOut()
          .find('p').stop(true,true).fadeOut();
}

To make things easier, we created two functions, one for expanding an item and one for collapsing it. The expand function will make the icon rotate 4 times around itself (360 times 4 are 1440). We will also make the item expand by animating an increase in its width. Then, we let the content appear, first the whole div and then the paragraph element.
The collapse function will rotate the icon back, decrease the width of the item and make the content disappear.

Download Source