Website Ideas » jQuery http://www.website-ideas.co.uk All the design inspiration you will need Sat, 12 Nov 2011 06:54:13 +0000 en hourly 1 http://wordpress.org/?v=3.0 Pagination with PHP, jQuery and MySQL. http://www.website-ideas.co.uk/2011/09/29/pagination-with-php-jquery-and-mysql/ http://www.website-ideas.co.uk/2011/09/29/pagination-with-php-jquery-and-mysql/#comments Thu, 29 Sep 2011 14:46:47 +0000 admin http://www.website-ideas.co.uk/?p=1411 So many emails hit my inbox with readers asking me how to implement pagination with php. So i decided to put one together using Jquery, php and Mysql. It looks difficult, but its rather simple.

The Structure contains three PHP files and two js files includes jQuery plugin.

-database.php (Database Configuration)
-pagination.php
-paginationdata.php

Database Table

CREATE TABLE users
(
users_id INT PRIMARY KEY AUTO_INCREMENT,
user TEXT
);

config.php
You have to change hostname, username, password and databasename.

<!--?php $mysql_hostname = "localhost"; $mysql_user = "username"; $mysql_password = "password"; $mysql_database = "database"; $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong"); mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong"); ?-->


pagination.php
User interface page.

<!--?php include('config.php'); $per_page = 9; //Calculating no of pages $sql = "select * from users"; $result = mysql_query($sql); $count = mysql_num_rows($result); $pages = ceil($count/$per_page) ?-->
<ul id="pagination"> <!--?php<br /--> //Pagination Numbers
for($i=1; $i&lt;=$pages; $i++)
{
echo '
    <li id="'.$i.'">'.$i.'</li>
';
}
?&gt;</ul>

paginationdata.php
Simple php script display data from the users table.

<!--?php include('config.php'); $per_page = 9; if($_GET) { $page=$_GET['page']; } $start = ($page-1)*$per_page; $sql = "select * from users order by user_id limit $start,$per_page"; $result = mysql_query($sql); ?-->

Demo To Follow Shortly! & Download

]]> http://www.website-ideas.co.uk/2011/09/29/pagination-with-php-jquery-and-mysql/feed/ 0 Sliding login panel with jQuery http://www.website-ideas.co.uk/2011/02/22/sliding-login-panel-with-jquery/ http://www.website-ideas.co.uk/2011/02/22/sliding-login-panel-with-jquery/#comments Tue, 22 Feb 2011 17:30:46 +0000 admin http://www.website-ideas.co.uk/?p=819 Came across this great script for slide down login

This script is based on a previous script “Show/Hide Login Panel with Mootools 1.2″ but now works with jQuery 1.3.2 instead of Mootools 1.2.

Please note the Login and Register forms in this demo will not work “out of the box” without a user login system pre-installed on your site (e.g. PHP/MySQL user login system)! However, most of the CMS such as Joomla, Drupal, WordPress, etc have a login system integrated in their platform. So if you are using one, read their documentation to see how you could implement this script into your CMS.

Demo and Download

]]> http://www.website-ideas.co.uk/2011/02/22/sliding-login-panel-with-jquery/feed/ 0 jQuery lightBox plugin http://www.website-ideas.co.uk/2010/05/17/jquery-lightbox-plugin/ http://www.website-ideas.co.uk/2010/05/17/jquery-lightbox-plugin/#comments Mon, 17 May 2010 18:32:22 +0000 admin http://www.website-ideas.co.uk/?p=680 jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

lightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar.

The better way to know what is jQuery lightBox plugin, click the Example tab above and see it in action.

Download here: http://leandrovieira.com/download/7/

]]> http://www.website-ideas.co.uk/2010/05/17/jquery-lightbox-plugin/feed/ 0 jQuery Form Field Validation Plugin http://www.website-ideas.co.uk/2010/05/17/jquery-form-field-validation-plugin/ http://www.website-ideas.co.uk/2010/05/17/jquery-form-field-validation-plugin/#comments Mon, 17 May 2010 18:15:14 +0000 admin http://www.website-ideas.co.uk/?p=676 jVal is a jQuery form field validation plugin that provides an appealing animated message flyout that doesn’t impede form layout/design while being user-friendly.

FEATURES
  • Current development version is only 8KB and 5.8KB minified
  • Check validity of field values within a certain container or block element based off simple INPUT tag attributes
  • Easy configuration of validity checks per field as per attributes in the INPUT tag
  • Check the validity of all fields within a certain container with a single function call
  • Check the validity of a single field when the user clicks away firing the onBlur event
  • Prevent the user to input specific characters into the field and notify them it’s not allowed

ASSETS As they currently reside on Google Code

Demo : http://www.overset.com/2008/07/31/jval–jquery-form-field-validation-plugin/

]]> http://www.website-ideas.co.uk/2010/05/17/jquery-form-field-validation-plugin/feed/ 0 Creating Slick Forms Using Ajax, jQuery & CSS http://www.website-ideas.co.uk/2010/05/16/creating-slick-forms-using-ajax-jquery-css/ http://www.website-ideas.co.uk/2010/05/16/creating-slick-forms-using-ajax-jquery-css/#comments Sun, 16 May 2010 17:48:10 +0000 admin http://www.website-ideas.co.uk/?p=671 Here is 10 Impressive techniques using some jQuery magic to spice up those old registrations forms and any form you might have on your website.

View them here!

]]> http://www.website-ideas.co.uk/2010/05/16/creating-slick-forms-using-ajax-jquery-css/feed/ 0 jQuery Autocomplete http://www.website-ideas.co.uk/2010/05/16/jquery-autocomplete/ http://www.website-ideas.co.uk/2010/05/16/jquery-autocomplete/#comments Sun, 16 May 2010 17:38:09 +0000 admin http://www.website-ideas.co.uk/?p=662 This script is based on jQuery Autocomplete plugin made by PengoWorks. It has many options and is quite easy to setup in your page. You can pass advanced options as a JavaScript object, hashes etc. It’s easily to edit the style of the dropdown result box, there are a couple of css classes.

View the demo and get the files here:

body {color: white;background: #52616F;}
a { color: white; }
</style>
<title>j</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />

</head>
<body>

<form onsubmit="return false;" action="">
<p>
Ajax City Autocomplete: (try a few examples like: 'Little Grebe', 'Black-crowned Night Heron', 'Kentish Plover')<br />
<input type="text" style="width: 200px;" value="" id="CityAjax" class="ac_input"/>
<input type="button" onclick="lookupAjax();" value="Get Value"/>
</p>
</form>

<script type="text/javascript">
function findValue(li) {
if( li == null ) return alert("No match!");

// if coming from an AJAX call, let's use the CityId as the value
if( !!li.extra ) var sValue = li.extra[0];

// otherwise, let's just display the value in the text box
else var sValue = li.selectValue;

//alert("The value you selected was: " + sValue);
}

function selectItem(li) {
findValue(li);
}

function formatItem(row) {
return row[0] + " (id: " + row[1] + ")";
}

function lookupAjax(){
var oSuggest = $("#CityAjax")[0].autocompleter;
oSuggest.findValue();
return false;
}

function lookupLocal(){
var oSuggest = $("#CityLocal")[0].autocompleter;

oSuggest.findValue();

return false;
}


$("#CityAjax").autocomplete(
"autocomplete.php",
{
delay:10,
minChars:2,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true
}
);

</script>
</body>
</html>
]]> http://www.website-ideas.co.uk/2010/05/16/jquery-autocomplete/feed/ 0 Facebook Style Footer Admin Panel Part 1 http://www.website-ideas.co.uk/2010/05/16/facebook-style-footer-admin-panel-part-1/ http://www.website-ideas.co.uk/2010/05/16/facebook-style-footer-admin-panel-part-1/#comments Sun, 16 May 2010 16:25:30 +0000 admin http://www.website-ideas.co.uk/?p=657 Learn how to recreate the Facebook footer admin panel with CSS and jQuery. Facebook has many Ajax driven features and applications that are very impressive, and one of the things I particularly like is the footer admin panel, where it neatly organizes frequently used links and applications.

01_finaldemo

Read how to do it !!!!

]]> http://www.website-ideas.co.uk/2010/05/16/facebook-style-footer-admin-panel-part-1/feed/ 1 Top jQuery plugins for web 2.0 effects http://www.website-ideas.co.uk/2008/09/25/top-jquery-plugins-for-web-20-effects/ http://www.website-ideas.co.uk/2008/09/25/top-jquery-plugins-for-web-20-effects/#comments Thu, 25 Sep 2008 08:44:53 +0000 admin http://www.website-ideas.co.uk/?p=342 OK, so allot of you are asking me, why move from mootools? Simple really, my answer to them was jQuery. jQuery can help you make your website more interactive, fun and more web 2.0. In short jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. So here is a small list of great plugins for this fantastic framework.

1) Accordion Content/ Menu script

A jQuery powered accordion content script. Group contents together and reveal them on demand when the user clicks on headers. Specify whether only one content within the group should be open at any given time, style the headers depending on their content state, and enable persistence so the state of the contents is preserved within a browser session.

For script and demo…

2) Ajax Tooltip script

This script enhances the default “title” attribute of HTML so certain tooltips can instead get their contents from an external file, with rich HTML content and all.

For script and demo…

3) Animated Collapsible DIV

This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth “Web 2.0 style” animation.

For script and demo…

4) Autocomplete

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

For scripts and demo…

5) Drop Shadow

This plugin creates soft drop shadows behind page elements, including text and transparent images. It accepts options for the horizontal and vertical offsets, amount of blur, opacity, and color.

For script and demo…

6) Drop Down Panel script

Drop Down Panel adds a pull down panel to the top of your page that contains external content fetched via Ajax.

For script and demo…

please keep a eye on this list, plugins will be added daily

]]> http://www.website-ideas.co.uk/2008/09/25/top-jquery-plugins-for-web-20-effects/feed/ 6