Browse: AJAX (asynchronous JavaScript and XML)

According to Wikipedia: "With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page"

TinyBox2 is a lightweight (under 5 kb) modal box script that supports iframes and images natively. You can POST using AJAX as welll as callback functions can be passed for load and close events. Clicking ESC will close the modal window. The default styling can be overridden by setting CSS IDs. The script is executed by passing an object due to the large number of options. There is nothing to initialize. You just have to call the function on whatever mouse or browser event you like.

Sample Call
TINY.box.show({url:'advanced.html',width:300,height:150}).

Features include:

  • Support for HTML, IFRAME, URL, or image parameters
  • Easily expand and contract a popup on the fly
  • Fixed Width/Height, Light Mask, Custom Vertical Split
  • Custom Position
  • Enable/disable mask/animation/close button
  • Modal Box closes when pressing `ESC`


12 Professional Admin Panel Skins: Improve your CP Design

Increase Productivity by using a Professional Admin Panel Template

Posted on February 9, 2011, Filled under AJAX, General, HTML & CSS,  Bookmark it

Why are Admin Panels so Important?

Web administrators and web designers don’t realize how important admin panels are until they starting using one of the best admin panels available. Using the wrong type of admin panel can have an impact on productivity and results. What people fail to realize is admin panels are just as important as the functionality of the website and project itself. Installing the right type of fully customized admin panel will lead to an overall increase productivity.

Most people don’t know what they are missing until they switch and start using one of the best CP templates on the Internet. Admin panels should be easy-to-use, but advanced enough to allow web administrators the ability oversee every aspect of a website and project. Admin panels are supposed to make administering a website or project easy not difficult. With over 100+ themes to choose from, why settle for less than the best?

Checkout the best sold Admin Templates from Themeforest…

Catch404 is a jQuery and CSS3 Modal Plugin for showing broken links and 404 errors without users even having to leave the page after they click the actual link. The plugin uses the power of AJAX to check the target clicked link in the background. If the URL is not broken nor generates a 404 error, then the page will load for the user. Otherwise, the visitor would be prompted through an Inline jQuery Modal Window that he is trying to access a non-workable URL address.

Let’s pretend that this is a broken link. Can you imagine that when your users click this link, instead of them being redirected to a 404 error on your site, a friendly modal message pops up on your current page saying that it’s not available?. In that same message box you can then give them a sense of direction so that they’re not lost – you could ask them to click on a contact link to report the link’s broken, offer an alternative mirror, recommend they do a site search for the file or just say that you’re experiencing hosting issues and the file will be back up soon.

Create Professional Secure Forms with CAPTCHA, Realtime Validation and PHP Backend

Create any type of Anti-Spam Forms with AJAX Form Builder

Posted on February 8, 2010, Filled under AJAX, jQuery, PHP,  Bookmark it

Back in the autumn of 2008, I have written a tutorial about how you can create a basic AJAX Contact Form that works with PHP Back-end. The post is one of the most popular here on BitRepository having over 8,000 monthly page views and over 440 comments so far.

Since many people asked me how they can do this and even hired me to offer them assistance with this application, I have decided to write a more advanced script with many features including CAPTCHA and Real-time Validation.

The script can be practically used to create any type of ajaxified, yet secure form that collects data and sends it to your email inbox including but not limited to:

  • Contact/Feedback Form
  • Support Form
  • Customer Survey Form
  • Online Product Order Form
  • Event Registration Form
  • Employment Form
  • Make a Room Reservation Online Form
  • Send Testimonial Form
  • Subscribe to Newsletter Form
  • Gift Order Form


Read more if you are interested in creating interactive web forms without page reload…

iJab is a free web based instant messaging program for XMPP/Jabber. Users can run their own instant messaging, complimenting the XMPP philosophy of a distributed network. iJab is interpreted purely by the client web browser. Hence, it does not require downloading and installing any additional software. iJab also developed iJabBar, a Facebook styled web chat client.

Features include:

  • Based on XMPP protocol and it’s standard
  • Support MSN, AIM transport and any transports in XMPP server
  • Written with GWT and compiled to Javascript files
  • Cross-browser compatible
  • Easy integration with website
  • Supports theme – you can add your own theme
  • Support for 3 modes: stand-alone application, web chat bar in page and live support
  • Sound support
  • User search
  • Smiles support

dhtmlxGrid is an AJAX-driven JavaScript Grid Control that allows easy implementation of nice looking DHTML tables with rich-in-cell editing, fixed multi-line headers/footers, resizable, sortable and draggable columns, built-in searching, grouping and data validation capabilities.

The grid view component is easy to use and provides great flexibility due to its rich client-side API. This grid control is 100% client-side and loads data dinamically through AJAX calls. Thus, it can be integrated with any server side technology (PHP, ASP, Coldfusion, JSP, Ruby-on-rails etc.), providing the possibility to save and update data into the database in real time without page refresh.

Features include:

  • Full control with JavaScript API
  • Simple JavaScript or XML configuration
  • Built-in filtering, searching, grouping
  • Auto-calculated values in footer/header
  • Support for including other grids as subgrids
  • Drag-and-drop rows/columns within grid
  • Different keyboard mappings
  • Easy styling with CSS or predefined skins
  • Detailed documentation
  • Source: http://dhtmlx.com/docs/products/dhtmlxGrid/index.shtml
  • Licenses: Open Source – GPL: Free | Commercial: $199 | Enterprise: $449

Bumpbox is a lightbox that besides the support for opening images, html files, FLV videos, and SWF files, can also be used to open PDF files. The integration of the script is quite simple: you add the scripts in the head section of the page, classes to the links that should use bumpbox and define a rel tag with the size that the lightbox should have. The nice thing about this lightbox is that it detects what kind of file you wish to show in the box, so you do not need to specify the type, easing the process of integration.

bumpbox

Web Based AJAX Events Calendar/Scheduler

Posted on July 24, 2009, Filled under AJAX, JavaScript,  Bookmark it

dhtmlxScheduler is a lightweight and fast-performing Web Based JavaScript events calendar that provides rich and intuitive scheduling solution similar to Microsoft Outlook Calendar, Apple’s iCal or Google Calendar. Since the data is loading via AJAX, the calendar events can be added, modified, and deleted without refreshing the browser’s page. The application offers a built-in solution for recurring events which can be configured on daily, weekly, monthly or yearly basis.

Features include:

  • Ability to create custom views
  • Extended possibilities for customization of the look and feel.
  • Full control with script API
  • Intuitive interface
  • Support for iCal format
  • Compatibility with dhtmlxConnector

dhtmlx-scheduler

dhtmlxScheduler can be integrated with server database by means of dhtmlxConnector or your own server-side code written in any language (PHP, Java, ASP, etc.). Only a couple of code strings needed to set up client-server communication between in-browser events calendar and back-end database.

JS LightBoxes with Fancy Zoom Effect

Posted on July 10, 2009, Filled under AJAX, JavaScript,  Bookmark it

Do you need to implement a lightbox that has the zoom effect when it is triggered? Take a look at the following resources! Some of the frameworks used to develop the scripts are JQuery, MooTools, and Prototype.

fancy-zoom.1.1

FancyZoom 1.1 is a LightBox designed to view images inline without reloading the web page. It provides a smooth, clean, truly Mac-like effect. It’s very simple to implement in the pages of your website and it doesn’t use any JavaScript libraries.

Features include:

  • Easy to implement (requires just two lines of code in your HTML page)
  • Focuses on the smoothest, most polished zooming animation possible
  • Preloads full-size images in the background on link mouseover
  • Offsets the full-size image from the page by drawing a nice drop shadow under it
  • Uses Safari 3′s “box-shadow” feature to draw the drop shadow natively, no images required

jquery-fancy-zoom

jQuery plugin: Fancy Zoom – This is the JQuery version of the FancyZoom script. It comes with a few changes:

  • Fixed the overlay bug in IE6
  • images are resized if size is bigger than document screen
  • FancyZoom can be applied directly on an image, no more link wrapper needed.

Zoomy JavaScript based loosely on Fancy Zoom by Cabel Sasser – Developer John Nunemaker rewrote the original FancyZoom script, making some changes to it such as:

  • Implementation of box rounded corners
  • Works with any HTML (images, text, headings, flash)
  • Width and Height of Zoom Box are configurable through optional setting or CSS

The package contains FancyZoom versions for JQuery, MooTools and Prototype.