16
Feb

dynamic forms and handling the data with php and mysql

So, this is my second post and I’m glad that I had some comments on my first post. As the title says this post is all about handling dynamic forms with javascript, php and mysql.

The most beatiful part of this topic is php and javascript and beautiest thing is about interpreted nature of javascript and php. So lets get started without the delay.

The dynamic form has two parts as of my understanding creating forms and hadling data. Creating a dynamic form is straight forward and simple using javascript. So you should be knowing about javascript and jquery before you dive into this post. Dynamic means always changing. Today its one tomorrow is 10 and day after tomorrow it might be 2 again. It doesnt matter its increasing or decreasing but there is always a change in it. For dynamic forms post I chose a commenting script where you can add more comments which can be even 100 or even more. but you are going to submit all those comments at once.

The database we deal with this topic needs to be defined first so thatyou can save your comments. Lets define database first.

As you know a comment needs to have atleast,

  • user who comments
  • his comment itself
  • time at which he commented.

we will capture these informations. But you can have more as per your needs.

The table will look like below.

 

22
Jan

Simple Responsive lightbox or gallery using jquery

This is a simple way and may be a weird way of developing lightbox. But I’m pretty sure that you can do a lot keeping it as a start. Having said that lets get started.

The most important in this lightbox is html and css.  Look at the HTML below it is simple.

 

The above HTML is the layout in which image is going to be displayed. It has a wrapper with an id as vmlightbox. I have four div’s inside the wrapper.

First one will hold the arrow to go back to previous image. Second one to hold the image itself to display. Third one holds arrow to navigate to next image. Last one to close the lightbox. There are no fancy things in there. Its simple as I said.

Now its time to CSS . Before we look into CSS let me show you a layout diagram. Below is the image.

 

Your ads will be inserted here by

Easy AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot OR
Suppress Placement Boxes.

As you can see I planned to place each div’s inside the wrapper like above. I guess you have understood the layout. Now lets see the css code.

The CSS is in its simplest form with wrapper positioned as fixed and other absolutely positioned. The top, left, and right have been used on the child div’s so as to keep them at the positions as in the layout. I have used the width and height in percentages and thats the thing which makes it resized as per the browsers width and height. Note the max-width and max-height used on imagepart.

I have used jquery for the javascript part of this lightbox. I have used a count variable to track the current and next and previous images that has to be displayed and I capture the click events on next, prev and close to increment, decrement and close the lighbox respective operations. Look at the code and it gets the image Urls using the attr function of jquery.

 

Demo
Download code