Jquery: Form validation+Rounded Corners+List Items
This tutorial will teach you 4 things:
* How to apply rounded corners
* Form validation
* Passing variables into a list
* Customizing jquery plugins
Read more... | 28304 bytes more | 2 comments
* How to apply rounded corners
* Form validation
* Passing variables into a list
* Customizing jquery plugins
Tutorial- Javascript+Jquery. A simple Beginning
In this tutorial I will teach you the basics of javascript with jquery. This tutorial is especially geared towards php developers who have been hesitant to venture into javascript.
The question that pops up most often is: why use javascript if I already have PHP? Well, because PHP is a server side language while javascript resides on the client. Actions that are tacky done on PHP, such as table sorting are a breeze on javascript. Mind you that I'm not advocating you drop PHP, on the contrary! If you combine PHP and javascript you can take your code to a whole different level. Let's start.
Before we start, a couple of requirements for this tutorial:
- Go to jquery.com and grab jquery-1.3.2.min.js This is the minified version of jquery. It's great to start learning with. When you are proficient with javascript you might want to get the full version to perform your own hacks.
- Go to getfirebug.com and download firebug.js This is a great development tool that allows you to debug javascript directly through firefox (I'm planning a tutorial just dedicated to this).
-An editor either wysiwyg or ide to change php/html/etc files.
-A local php server. If you are not running one, go check xampp or similar.
First create an empty file called: test.php Inside place this code:
This will popup an alert box that says hello world! Now since we understand php, let's bring the two together. Replace all previous code with this:
We have a php variable called $tst that get's passed into the alert box. Now let's bring in jquery and start making things more interesting. Replace all previous coe in file test.php with this:
Now create another file called myserv.php and place this code inside:
Now test it! What we are doing here is creating an ajax response to our initial test.php file. It takes the form data and passes it to myserv.php through $_GET. The good thing about using jquery $.serialize (found on line 6) is that it will grab all elements in a form. So, even if you add more later on, it will still grab them.
Now a line by line explanation of the javscript code:
Lines 4 and 5 load jquery and firebug
Line 7 All code inside this function only gets processed AFTER the entire page has loaded. This is especially important for us php developers since we have php code many times scattered along our pages.
Line 8 is an event function. Meaning, when an event happens, run the code inside. In this case the event is a "click" and it has been binded to selector "subBut" which is the submit button in our form. So, when someone presses the submit button, the code inside gets executed.
Line 9 is a great jquery function called $.serialize It grabs all form elements inside our form "form1" and correctly formats it to be sent using $_GET to our response page. In order for this to work I created a javascript variable called "formContent". this holds the formated data. NOTE: All variables in javascript must first be declared as such before being used.
Line 10 This is where jquery shines. A simple line that does so much! The selector in this case is a div with id "box". This is where the ajax response will be loaded into. load('myserv.php',formContent) will send the content of our javascript variable "formContent" to the page myserv.php which processes the information then sends back a response.
This is a simple tutorial to get you started. I have more on the way :)
Read more... | 3 comments
The question that pops up most often is: why use javascript if I already have PHP? Well, because PHP is a server side language while javascript resides on the client. Actions that are tacky done on PHP, such as table sorting are a breeze on javascript. Mind you that I'm not advocating you drop PHP, on the contrary! If you combine PHP and javascript you can take your code to a whole different level. Let's start.
Before we start, a couple of requirements for this tutorial:
- Go to jquery.com and grab jquery-1.3.2.min.js This is the minified version of jquery. It's great to start learning with. When you are proficient with javascript you might want to get the full version to perform your own hacks.
- Go to getfirebug.com and download firebug.js This is a great development tool that allows you to debug javascript directly through firefox (I'm planning a tutorial just dedicated to this).
-An editor either wysiwyg or ide to change php/html/etc files.
-A local php server. If you are not running one, go check xampp or similar.
First create an empty file called: test.php Inside place this code:
<script language="javascript">
alert ("hello world");
</script>
This will popup an alert box that says hello world! Now since we understand php, let's bring the two together. Replace all previous code with this:
<?php
$tst = "my name is wally";
?>
<script language="javascript">
alert ("<?php echo $tst; ?>");
</script>
We have a php variable called $tst that get's passed into the alert box. Now let's bring in jquery and start making things more interesting. Replace all previous coe in file test.php with this:
<style type="text/css">
#box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
</style>
<script type="text/javascript" src="firebug.js"></script>
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript">
$(document).ready(function() { //Finish loading the entire page before processing any javascript
$("#subBut").click(function(event) {
var formContent = $("#form1").serialize();
$("#box").load('myserv.php',formContent);
});
});
</script>
<form name="form1" id="form1" method="post" action="">
<label>Name
<input type="text" name="textfield" id="textfield">
</label>
<input type="button" name="subBut" id="subBut" value="Submit">
</form>
<br />
<div id="box">Ajax call</div>
Now create another file called myserv.php and place this code inside:
<?php
echo "hello world! My name is " . $_GET['textfield'];
?>
Now test it! What we are doing here is creating an ajax response to our initial test.php file. It takes the form data and passes it to myserv.php through $_GET. The good thing about using jquery $.serialize (found on line 6) is that it will grab all elements in a form. So, even if you add more later on, it will still grab them.
Now a line by line explanation of the javscript code:
Lines 4 and 5 load jquery and firebug
Line 7 All code inside this function only gets processed AFTER the entire page has loaded. This is especially important for us php developers since we have php code many times scattered along our pages.
Line 8 is an event function. Meaning, when an event happens, run the code inside. In this case the event is a "click" and it has been binded to selector "subBut" which is the submit button in our form. So, when someone presses the submit button, the code inside gets executed.
Line 9 is a great jquery function called $.serialize It grabs all form elements inside our form "form1" and correctly formats it to be sent using $_GET to our response page. In order for this to work I created a javascript variable called "formContent". this holds the formated data. NOTE: All variables in javascript must first be declared as such before being used.
Line 10 This is where jquery shines. A simple line that does so much! The selector in this case is a div with id "box". This is where the ajax response will be loaded into. load('myserv.php',formContent) will send the content of our javascript variable "formContent" to the page myserv.php which processes the information then sends back a response.
This is a simple tutorial to get you started. I have more on the way :)
Xoops-Miniservers (portable localhost development)
The Xoops-Miniservers Project provides WAMP mini-servers (Apache + MySql + Php to Windows) with the CMS XOOPS (Content Management System Xoops) already installed and ready to user's customizes.
The miniservers available (until now) are:
EasyPHP
Lighty2Go
Mowes
Pampa
Server2Go
Uniform
Xampp (lite)
Main features:
Index page (welcome) integred to Xoops directory and documentation (docs, on these versions, incomplete).
Xoops 2.3.3 already installed and configured.
Admin Modules package already installed and configured: Altsys 0.7, Avaman 0.21, Backpack 0.93, Contact 1.6 (with captcha), Membership 2.3, Mysearch 1.1 (with bugfix), Xoopscare 1.3, Xoopsmembers 1.1 and XT-Temas 1.0.
Blog package already installed and configured: Mastop Publish 1.1 (with bugfix to Xoops 2.3.3) and AMS 2.51 final.
Custom server generated directory indices (with Snif - simple and nice index file).
Apanel servers, phpMyadmin, Xoops and modules translated into portuguese (of Brasil).
All servers are portable.
Change logs, allowing easy upgrade and expansion of translations.
Download:http://code.google.com/p/xoops-miniservers/
The Xoops-Miniservers Team
Read more... | 8 comments
The miniservers available (until now) are:
EasyPHP
Lighty2Go
Mowes
Pampa
Server2Go
Uniform
Xampp (lite)
Main features:
Index page (welcome) integred to Xoops directory and documentation (docs, on these versions, incomplete).
Xoops 2.3.3 already installed and configured.
Admin Modules package already installed and configured: Altsys 0.7, Avaman 0.21, Backpack 0.93, Contact 1.6 (with captcha), Membership 2.3, Mysearch 1.1 (with bugfix), Xoopscare 1.3, Xoopsmembers 1.1 and XT-Temas 1.0.
Blog package already installed and configured: Mastop Publish 1.1 (with bugfix to Xoops 2.3.3) and AMS 2.51 final.
Custom server generated directory indices (with Snif - simple and nice index file).
Apanel servers, phpMyadmin, Xoops and modules translated into portuguese (of Brasil).
All servers are portable.
Change logs, allowing easy upgrade and expansion of translations.
Download:http://code.google.com/p/xoops-miniservers/
The Xoops-Miniservers Team
Translation tool : Xtranslate
www.Designburo.nl is pretty proud to present a contribution to the XOOPS community: Xtranslate!
A (windows) tool that should help you translate XOOPS and XOOPS modules into your own language much easier.
It is still in development, but the current version is very useable!
Get it here! (You do need to register, but hey.. its free!)
Change the Web Challenge!
We would like to encourage all XOOPS developers to participate in the "Change the Web Challenge"
Social Actions' Change the Web Challenge is about building innovative tools to help people find and share opportunities to take action on the websites, blogs, and social networks that we all visit everyday.
This sounds like a good opportunity for a XOOPS Module
Check out the Developer Resources for their Social Actions API that you could use.
The Grand Prize is $5,000 with total of $10,000 in cash prizes, but the real prize is the impact your module might have an changing the world.
The submission deadline is Fri, April 3, 2009
Click here for all the details.
And please keep us posted, if you decide to participate.
Documentation on the Api of the Xoops modules
Dev.XooFoo.org, the website for API documentation for modules developers, recently has been changed and updated:
- to make more ergonomic navigation of the XOOPS Core API generated by Doxygen and by PhpXref,
- to add list of international support sites,
- to add links to XooFoo websites.
A second stage has just been finalized with the API documentation of forty modules: AMS, Article 1 and 2, Catads, Cbb 3.0.8 et 4.0, Classifieds, Content, Cryptox, D3pipes, Extcal, Formulize, Liaise, Membership, MPmanager, Multimenu, Mylinks, Mydownloads, Mytabs, News, Pical, PM, Profile, ShoutBox, Tag, Umfrage, Userpoints, Xbs Modgen & Xbs Cdm, Xcake, Xcenter, Xforum, Xgen, Xhld, Xoopscare, Xoopsinfo, Xoopspoll, Xreaggregator, Xsoap, Xtorrent and Yogurt.
This first list will be completed in the next few weeks based on new modules releases/updates, or based on specific requests from users and/or developers.
The goal of this documentation is also to promote the development of new modules. After all, what could be easier than to look at existing modules to see how they've been architectured, which class or function were used ...
All this documentation can be downloaded in e-book (in chm format) on Tutos XooFoo in the section "Outils - Documentation - Xoops".
New Module Logo design for XOOPS 2.3
In preparation for XOOPS 2.3 release, we're changing the Module Logo design.
As mentioned in our WOX Newsletter #10, our XOOPS Friends in Spain Eme3Design developed a new look for the standard Admin Theme (see here...).
We liked the idea a lot, so we've decided to follow it and change the logos for the XOOPS 2.3 release as well, but with a blue color. We believe that the new design makes them look more modern, professional, and hip
We would like to see all the XOOPS modules that have been successfully tested for XOOPS 2.3, to change their logos to the new look, so our users know that a particular module will work in 2.3.
If you have Photoshop, you can also use this Photoshop file to make your logos for XOOPS 2.3.
FYI - We've used images from Crystal Project
Please maintain the XOOPS 2.3 "look & feel" of the logos.
Some of the modules logos could look like this:
Of course, it's up to the module designers to finalize their module's logos, but we hope that the logos will share similar look and feel with XOOPS logos.
As always, we're looking for talented graphic designers to help us and those module developers, who might not be so good in graphics design.
And congratulations to Eme3Design for their great design ideas!
Read more... | 34 comments
As mentioned in our WOX Newsletter #10, our XOOPS Friends in Spain Eme3Design developed a new look for the standard Admin Theme (see here...).
We liked the idea a lot, so we've decided to follow it and change the logos for the XOOPS 2.3 release as well, but with a blue color. We believe that the new design makes them look more modern, professional, and hip
We would like to see all the XOOPS modules that have been successfully tested for XOOPS 2.3, to change their logos to the new look, so our users know that a particular module will work in 2.3.
If you have Photoshop, you can also use this Photoshop file to make your logos for XOOPS 2.3.
FYI - We've used images from Crystal Project
Please maintain the XOOPS 2.3 "look & feel" of the logos.
Some of the modules logos could look like this:
Of course, it's up to the module designers to finalize their module's logos, but we hope that the logos will share similar look and feel with XOOPS logos.
As always, we're looking for talented graphic designers to help us and those module developers, who might not be so good in graphics design.
And congratulations to Eme3Design for their great design ideas!
Heads up: XOOPS is on Usenet!! :-v
I have some great news for xoops for all the team and people involved, we now have our own complete section in UseNet, if you are wondering what UseNet is you may have at one point seen something like google tunneling you into a group like alt.topics or sci.facility or even soc.something this isn't actually google it is UseNet. Back in the BBS days Usenet was still there. Before TCP/IP was around it use to run on Netbeui and Netbios with it domain lookup and so on running over Netbios and sydnicate with various tiers of services using something similar to a push data system.
You may remember something like fido net (fido7) and so on all BBS' this was all syndicated through UseNet. It is a great honor to be accepted as a project on some of the oldest and often picky infrastructure like UseNet, only the big company in there Omni global instantiations are available on UseNet (Newgroups) like Microsoft or Novell and so on.
If you have a suggestion and as well would like your Support Site on the xoops UseNet abstraction then please contact me I will have it added, remember this is a fantasic addition to their network, you don't find any other CMS or Portal system like Joomla or Drupal or any of the ASP one even mentioned in there. UseNet was the basis of old day forum systems, it is what forum and blogging systems have been modeled on.
The groups currently:
xoops
xoops.announce
xoops.modules
xoops.team.advisors
xoops.team.core
xoops.team.design
xoops.team.documentation
xoops.team.modules
xoops.team.quality.assurance
xoops.team.support
xoops.themes
You will notice in the next couple of days thought the immense networking in UseNet you will see this in your browser.
I will be soon writing a UseNet Syndicator that with a Cron allows you to syndicate your site, ie. News (announces), Forum topics and so on with Usenet and back from Usenet as well.
I was wondering what people think about doing this as well like groups for this:
xoops.support.france
xoops.support.spain
xoops.support.norway
...
For our international support sites, I haven't done this initially as there is no quick point and click solution to the syndication but soon there will be.
Look forward to hearing about your responses.
Read more... | 5 comments
You may remember something like fido net (fido7) and so on all BBS' this was all syndicated through UseNet. It is a great honor to be accepted as a project on some of the oldest and often picky infrastructure like UseNet, only the big company in there Omni global instantiations are available on UseNet (Newgroups) like Microsoft or Novell and so on.
If you have a suggestion and as well would like your Support Site on the xoops UseNet abstraction then please contact me I will have it added, remember this is a fantasic addition to their network, you don't find any other CMS or Portal system like Joomla or Drupal or any of the ASP one even mentioned in there. UseNet was the basis of old day forum systems, it is what forum and blogging systems have been modeled on.
The groups currently:
xoops
xoops.announce
xoops.modules
xoops.team.advisors
xoops.team.core
xoops.team.design
xoops.team.documentation
xoops.team.modules
xoops.team.quality.assurance
xoops.team.support
xoops.themes
You will notice in the next couple of days thought the immense networking in UseNet you will see this in your browser.
I will be soon writing a UseNet Syndicator that with a Cron allows you to syndicate your site, ie. News (announces), Forum topics and so on with Usenet and back from Usenet as well.
I was wondering what people think about doing this as well like groups for this:
xoops.support.france
xoops.support.spain
xoops.support.norway
...
For our international support sites, I haven't done this initially as there is no quick point and click solution to the syndication but soon there will be.
Look forward to hearing about your responses.
Nat Sakimura joins the XOOPS Developement Team
We are very happy to announce that Nat Sakimura, is officially joining the XOOPS Development Team.
Nat Sakimura is the author for XOOPS OpenID module, and he will be implementing OpenID into XOOPS core for XOOPS 2.3* or 2.4, perhaps with another XOOPS core developer, while DJ will be working with him to implement OpenID into XOOPS 3.0
You can download the OpenID module from here...
Please extend a warm "welcome back" to Nat Sakimura.
With this we would like to officially extend an invitation to all past, non-active XOOPS developers to come back and join us on the journey of making XOOPS the best CMS in the world. We are sure that while you were away, you've learned a lot of new things and programming tricks, from which XOOPS could benefit. We've had couple of rough years, but we believe that we are now on track to something really awesome, and we would like you to be part of it.
There will be more exciting news coming....
Read more... | 11 comments
Nat Sakimura is the author for XOOPS OpenID module, and he will be implementing OpenID into XOOPS core for XOOPS 2.3* or 2.4, perhaps with another XOOPS core developer, while DJ will be working with him to implement OpenID into XOOPS 3.0
You can download the OpenID module from here...
Please extend a warm "welcome back" to Nat Sakimura.
With this we would like to officially extend an invitation to all past, non-active XOOPS developers to come back and join us on the journey of making XOOPS the best CMS in the world. We are sure that while you were away, you've learned a lot of new things and programming tricks, from which XOOPS could benefit. We've had couple of rough years, but we believe that we are now on track to something really awesome, and we would like you to be part of it.
There will be more exciting news coming....
Xoops API documentation upgraded
http://Dev.XooFoo.org">
http://Dev.XooFoo.org" />
XooFoo.org and Dev.XooFoo.org are happy to announce the release of XOOPS API Documentation (online and chm e-book).http://Dev.XooFoo.org" />- Online API Documentation for Xoops 2.0.18.1
- Online API Documentation for Xoops 2.2.6
- Online API Documentation for Xoops 2.3.2b
- Online API Documentation for Xoops 3.0 Main
- E-Book Xoops 2.0.18.1 API
- E-Book Xoops 2.2.6 API
- E-Book Xoops 2.3.0 Alpha 3 API (basic package)
- E-Book Xoops 2.3.0 Alpha 3 API (basic + addons package)
- E-Book Xoops 2.3.0 Alpha 3 API (full packages)
- E-Book Xoops 3.0 Main API
- API E-Book for old versions
We also carried out API E-Books for the MyLinks 1.10 and MyDownloads 1.44 modules.
Login
Search
Recent Comments
Who's Online
Donat-O-Meter
| Stats | |
| Goal: | $100.00 |
| Due Date: | Apr 30 |
| Gross Amount: | $0.00 |
| Net Balance: | $0.00 |
| Left to go: | $100.00 |
 |
|
Latest GitHub Commits
Archives
News archives
- January 2017
- November 2016
- October 2016
- September 2016
- August 2016
- July 2016
- June 2016
- May 2016
- April 2016
- March 2016
- February 2016
- January 2016
- December 2015
- November 2015
- October 2015
- September 2015
- July 2015
- May 2015
- April 2015
- March 2015
- February 2015
- January 2015
- December 2014
- November 2014
- October 2014
- September 2014
- August 2014
- July 2014
- June 2014
- May 2014
- April 2014
- March 2014
- February 2014
- January 2014
- December 2013
- November 2013
- October 2013
- September 2013
- August 2013
- July 2013
- June 2013
- May 2013
- April 2013
- March 2013
- February 2013
- January 2013
- December 2012
- November 2012
- October 2012
- September 2012
- August 2012
- July 2012
- June 2012
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
- February 2006
- January 2006
- December 2005
- November 2005
- October 2005
- September 2005
- August 2005
- July 2005
- June 2005
- May 2005
- April 2005
- March 2005
- February 2005
- January 2005
- December 2004
- November 2004
- October 2004
- September 2004
- August 2004
- July 2004
- June 2004
- May 2004
- April 2004
- March 2004
- February 2004
- January 2004
- December 2003
- November 2003
- October 2003
- September 2003
- August 2003
- July 2003
- June 2003
- May 2003
- April 2003
- March 2003
- February 2003
- January 2003
- December 2002
- November 2002
- October 2002
- September 2002
- August 2002
- July 2002
- June 2002
- May 2002
- April 2002
- March 2002
- February 2002
- January 2002
- December 2001
- December 1969