Responsive Modal or Popup – only CSS and Animation

Responsive modal or popup are common features in a web application. They are used to show extra information or a form on the same page as popup above existing content upon clicking to a link or button. This article will help you to create a responsive modal or popup with CSS only.

I have also explained this pure CSS concept along with. So that you can understand how does this thing work. It will help you to change the CSS rule to organize responsive modal in your own way.

Read More

Facebook app is still in development mode & don’t have access

When you setup App on Facebook and try to make login with Facebook available in your script, everything seems fine but when someone attempt to login with a Facebook account he/she gets either of these errors from Facebook: App Not Setup: This app is still in development mode, and you don’t have access to it. Switch to a registered test user or ask an app admin for permissions. The developers of this app have not set up this app properly for Facebook Login.

Read More

Placing text above foreground image in html

It’s quite common to use background image and place text above it but it’s also possible to use image in foreground and place text above foreground image overlay. You can also horizontal center or vertical center the text as explained in the article.

So our page contains a piece of HTML as follow:

Read More

2 ways to center a column in Twitter Bootstrap 3

Here are 2 ways which you can use whenever you need to center a column div within `.container` in Twitter Bootstrap 3 as well as to keep empty space outside the `div` to be evenly distributed. First approach uses offset feature available in Bootstrap while it has a limitation and second approach is using `center-block` class with setting `float: none` in Twitter Bootstrap.

Read More

Make the Footer Stick to the Bottom of a Page

When a page contains a large amount of content, the footer is pushed down off the viewport, and if you scroll down, the page ‘ends’ at the footer. However, If the page has small amount of content, the footer can sometimes ‘cling’ to the bottom of the content, floating halfway down the page, and leaving a blank space underneath, which looks ugly. So we need to make the footer stick to the bottom of page (not always fixed and visible).

Read More

Fancybox ajax content & navigation issue in group & popup

While working with fancybox, you might have noticed that any button or link or input inside fancybox popup just behaves like previous/next item slider, making that coming item to appear in popup rather of doing it’s assigned code on click. All the reason is the width specified for `fancybox-nav` class with higher `z-index` for it.

Read More

escaping special characters in jQuery selector

jQuery is a very powerful javascript library that We use all the time. It’s simple to use, yet easy enough to do very advanced things. Anyone who has used jQuery knows that you can do quite a lot with selectors. One of the caveats that I found is using a selector for a DOM element that contains special characters.

Read More

Getting Checkbox Values in jQuery

Many times we use checkbox in the form control and post the form using jquery ajax and then we are required to access those form data from client side scripts, like Javascript. Among all possible form control, dropdown box, checkbox and radio buttons are having multiple options to select. So, we need to push all selected values of these form controls into an array using Javascript

Read More

Full sized image with Fancybox

I was using Fancybox in one of my websites for showing images in popup. Everybody use Fancyboxto show data in popup with responsive way but here I had a different requirement of showing full sized image with Fancybox.

So same I am sharing here the solution of showing full sized image with Fancybox

Read More

PHP Captcha using jQuery AJAX

Generally We use Captcha in the form to ensure that the form is submitted with manual intervention without any tools or programs. In this article we will show captcha using jQuery from PHP. Using jQuery we can also refresh the captcha code by resending AJAX call to generate new captcha image.

Read More

[ Page 1 of 6 ]