Blogs » phpFox - Social Networking Script

The Basics:

Since JQuery is a Javascript library we need to include it in out html document:

HTML:

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

This is all it takes to include A js file in an html document.

Also, JQuery extends the html DOM so we can refer to any id using #nav, like this:

HTML:

$("#divId")....

from there you can act upon the element with id "divId"

Ok, having said that we now can move on to the fun part :)

Effects available

JQuery comes with many effects available from the get go, we cannot look at every one of them but here is a link to a nice JQuery page

Effect::Show

The show effect is a nice one, like the name suggest it shows hidden elements (only hidden elements, if you want new elements like createNode-like then you have to create them hidden).
This function can receive 2 parameters, the first one is the speed we want, how long the animation should run and its set in milliseconds, but JQuery is so flexible it also understands "slow", "normal" and "fast". The second parameter is a callback function, a function that will be run after the animation completes:

HTML:

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function hShow()
{
$("p").show("slow");
}
</script>
</head>
<body>
<input type="button" onClick="hShow();" value="show paragraph">
<p style="display:none"> This is the hidden paragraph </p>
</body>
</html>

Pretty neat huh? :) feel free to play around with this as it can become very useful in your apps.

Effect::Hide

I wont dwell into this one too much because its basically the same as show, even same prototype, the point here is that it hides already visible elements.

Effect::Toggle

This nicey here is a combination of the two above, if its hidden toggles it shown, if its shown switch to hidden:

HTML:

<html>

<head>

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function hToggle()
{
$("p").toggle("slow");
}

</script>
</head>
<body>
<input type="button" onClick="hToggle();" value="show paragraph" id="bEffect">
<p style="display:none"> This is the hidden paragraph </p>
Third post

</body>

</html>

Now although the official documentation doesnt say if it allows a parameter or two or not I've tried the speed parameter like in the show/hide effects and its worked fine for me so guess its only an outdated doc there. Try using the "slow", "normal" and "fast" ones to see what I mean ;)

Effect::SlideDown and SlideUp

Both of these effects reveal hidden content, and accept the speed parameter:

HTML:

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function hSlideUp()
{
$("p").slideUp("slow");
}
function hSlideDown()
{
$("p").slideDown("fast");
}

</script>
</head>
<body>
<input type="button" onClick="hSlideUp();" value="Slide Up" id="bEffect">
<input type="button" onClick="hSlideDown();" value="Slide Down" id="bEffect">
<p style="display:none">
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
</p>

</body>

</html>

There is also an effect toggle for this, like the toggle in the show and hide only this one is called: slideToggle()

Effect::FadeIn

The fade in effect changes the opacity of an element from zero to completely visible, pretty cool effect if you ask me, in the official documentation comes an example of a censor message, this is accomplish by having a hidden div inside the outer div, and using the callback parameter, like this:

HTML:

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function hFadeIn()
{

$("#censor").fadeIn(5000, function() // this is the fadeIn for the outer div
{
$("#censorTxt").fadeIn(4000) // this is the fadeIn for the text
}
);
}
</script>
</head>
<body>
<input type="button" onClick="hFadeIn();" value="Fade In" id="bEffect">

<p style="" id="nav">
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
<div id="censor" style="display:none; width:300px; height:300px; background:red; position:absolute; top:0; left:0">
<div id="censorTxt" style="display:none; color:yellow">CENSORED!</div>
</div>
</p>

</body>

</html>

The trick there is using css to position the red div on top of the text.

And last but by no means least...

Effect:Animate

This very well may be the best "effect" available, it isnt really an efefct but a means to create custom effects, for example you can have a div enlarged and its text made bigger, like this:

HTML:

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function hAnimate()
{
$("#nav").animate({width:"50%", fontSize: "30px", opacity: 0.3, borderwidth: "15px"}, 4000);
}

</script>
</head>
<body>
<input type="button" onClick="hAnimate();" value="Animate" id="bEffect">
<div style="background: yellow; width:100%" id="nav">
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
</div>
</body>

</html>

In the first parameter you make an array with the target result you want, here I tried text-align and background and those 2 so dont rely on every tag you know to work here, still this offers great flexibility and can come up as a great way to make your pages live a little ;)

Hope you liked this small post about effects and can profit from it

"Be well" (taken from Demolition Man hehe) :)

Tags: jQuery, effects

phpFox Konsort Version 2 (Part 2)

Posted October 25, 2008 by Raymond Benc in phpFox v2

This entry is the continuation of my first entry which had info on our new engine that will be powering phpFox2.

Database & Supported DB Drivers

phpFox2 unlike all of our past versions will support MySQL (MySQLi), Postgresql, Oracle, MsSql and SQlite. Postgresql, MySQL (MySQLi) and SQlite will be released with the core package. Oracle and Mssql will be released as extra drivers that can be purchased for a set one-time fee.

Method of executing a query will be a little different from the current version released.
An example of a conventional MySQL query:
<code language="php">
$hQuery = mysql_query("SELECT user FROM user");
$aRow = mysql_fetch_array($hQuery);
</code>
With phpFox 1.5+ we use the following method to do the same query:
<code language="php">
$oDb = Database::get();
$aRow = $oDb->getRow("SELECT user FROM user");
</code>
With phpFox2 the same query will be:
<code language="php">
$oDb = Phpfox::getLib('phpfox.database');
$aRow = $oDb->select('user')
->from('user')
->execute('getRow');
</code>
The reason for this change is we added an extra layer that handles all the queries a lot faster then parsing an SQL query depending on the SQL driver you plan on using. By using the database layer we provide it will assure that all your Apps will be compatible with all the database layers provided so no problems will arise for clients.

Friends Feed

There have been many requests asking of we were going to develop a friends feed for phpFox2 and I am glad to say that yes it will be part of phpFox2 and is one of the first things we worked on so its already completed. It will work similar to feeds found on MySpace and Facebook. Admins can control if a feed should only be displayed for friends or anyone joining the site. Because of this option we plan on simply calling it a "News Feed". I may think of another name at a latter time so we are a little original with the feature. The reason you may want to allow anyone to view the feed and not just friends is if you have a brand new site and user content is important so it will be easier for your members to interact with one another. Admins can also control how many feeds can be displayed as well as how long to keep a feed before it is considered old news. For those creating 3rd party apps in the future can use the news feed class via the plug-in system.

Login Method

Your members can either login via their Username, Email or Username and/or Email. Admins have full control over the method of login for their site. We offer at the moment the 3 alternatives which can be controlled direct from your Admin CP.

Multilingual Support

phpFox2 like phpFox 1.6+ will be multilingual complaint. The language packages will work similar to that of the current version, however since phrases are separated by the modules they are created for you will only install the phrases for the modules you have installed. phpFox2 will also only load the phrases for the modules loaded on a specific page that is being displayed. All phrases are stored in the database for easy access for Admins and once ready to be used it is cached. We also developed an option where you could cache phrases that are specifically used for a page instead of loading all the phrases that belong to the modules that are loaded. For example depending on a module it can have 50-100 phrases. If a page you visit has 4 different modules loaded you could have around 250 phrases loaded. Many of which you won't be using. This method is of course still better then loading an entire language package which could have over 3000 phrases, however with this new featured enabled and if the page for example only had 50 phrases it would simply load just those 50 phrases and nothing more. Its not a major user feature, however this has skimmed a lot of milliseconds of a pages overall load when doing our preliminary tests. Benchmarks for this and other tests will be released shortly.

Ajax

We introduced minimal Ajax capabilities with phpFox v1.5.1, we then added more with v1.6.x. phpFox2 will go even further and anything that does not require a feature to be crawled by a search bot we will be using Ajax. Now our goal is to use as much Ajax as possible to make it a lot more user friendly for your members, however we don't want to take it too far so some areas we will be leaving the final decision up to you if you want the feature or page to have Ajax capabilities. For phpFox2 we have created our own Ajax class that will handle all the requests and handle all the output we plan to return back.

JavaScript Library

phpFox2 will be using jQuery as its main JavaScript Library.

Stay tuned for Part 3 for more details on phpFox2.

Tags: phpFox2, jQuery, Database