Development Tutorials

phpFox2 Beta 2 has arrived. With this release we are introducing the Video module and a few other modules that complement it as well as other modules we have introduced in the past.

We will shortly cover what is new with Beta2, if you would like to catch up with what our past Alpha/Beta versions introduced you can find more information here...


Whats new in phpFox2 Beta2

Video

Beta2 introduces the Video module. We first introduced a Video module with v1.6.x and we have rebuilt that module for v2 and have looked into adding some new features to it over the next few beta releases and future updates. What we have worked on so far is the ability to upload videos from your computer to your web server and then have FFMPEG or MENCODER convert the video into a flash media format allowing us to then display the video using our default media player Flowplayer, which we introduced with Beta 1 and used it for our Music module.

While uploading a video, depending on the file size limit you set via your AdminCP; which is user group specific may take some time to upload and during that time we display a form so the user can start filling out information about the video. Such as the title, category it belongs to and a description. Once the video is uploaded it will convert the video so Flowplayer can properly render it. With a future release we are working on creating a cron script that will run when specified so users will not have to wait long during the entire upload/conversion process.

Once a video has been uploaded and when being viewed users can leave comments on the video. They can also rate the video. We also provide embedding codes for users in case they want to embed the video on another site. We also provide a Share link, which using the Share module allows users to share the video on 3rd party sites. We have also introduced the Report module with beta 2 and we will go into further details in a little bit, however just to summarize we have included a link where users can report videos if they deem necessary.

Editing a video can be done by either viewing the video or by browsing videos and hovering over the video image to find the edit link. The edit form will show up on the spot and use AJAX to update the video. There is also an advanced form, which allows you to edit the videos image, title, category and description as well as other fields/settings that will be added in the future such as privacy settings.

Each video can belong to one parent category and as many child categories. Categories are controlled by Admins direct from the AdminCP and works similar to how categories work with the Group, Event, Marketplace modules.

On each form that permits embedding of videos we have added a video attachment link. This link can be found on for example when adding comments, blogs, forum threads. Basically any form that has a text-area and supports our text editor. This feature allows users to either upload a video from their computer or directly share videos from sites like YouTube, MySpace etc... (Currently only testing with YouTube).

In v1.6.x we have a feature called "Add Video Stream", which would allow you to add videos from 3rd party sites (eg. YouTube, MySpace). We have included this feature with v2 and instead will be called "Video Sharing" or "Share a Video". Currently we are only testing support with YouTube and unlike how it worked in the past we will embed the actual YouTube video with the embed code they provide and not use our own Flowplayer to render their FLV file. The reason for this change is to first abide by their embedding policy and to respect the privacy of the user that uploaded the video on YouTube as there is an option to disable video embedding. If this is the case we are unable to "share" the video on our site. When adding a video from YouTube we not only pick up the title and image of the video like we have done in the past we also pick up the description and duration of the video so we have all the information needed to display videos on our site. Once video tagging is supported with v2 we will also pick up on tags.

Features planned to be added...
  • Include other video sites (eg MySpace, MetaCafe etc...)
  • Advanced embed options
  • FLV conversion cron background process (optional)
  • Privacy settings
  • Featured Videos
  • Video tagging
  • Add to Favourite
  • Advanced search filter
  • Related videos block
  • Users latest videos block
  • Video subscriptions

Notice: The feature to upload/convert videos is disabled by default as your server is required to have 3rd party script installed. Our documentation provides information on...

Groups

Our Group module has been updated and now includes the Video & Shoutbox fully integrated into each group.

News/Friends Feed

Updated how we display feeds. Instead of showing a 20x20 profile image for each user in the feed we now display a 50x50 profile image and only display these images when viewing feeds on the sites index page. The profile image is hidden in the feed when viewing feeds on a users profile. We have also removed the image associated to each feed as the profile image now replaces this image, however we will bring back these small icons when viewing feeds on a users profile since it currently only displays the text for the feed and can look rather plain.

Report

Beta 2 introduces the Report module. This module connects to all modules that have the ability to post items where other users can view it. Such items are blogs, videos, songs, groups etc... On each of these items a "Report" link is provided. We provide basic default categories for the report and these categories can be edited/deleted from the AdminCP. You can also add categories as well as create categories for a specific module. As an Admin you can view reported items from the AdminCP and can mass ignore reports or click on the report to view them and from there edit/delete them if necessary. We plan on adding the ability to delete items directly from the report section in the AdminCP. Each item will only show up once in the list and if reported more then once it will display the total amount of reports. Here we plan on adding a link to display all the reports separately. Each user can only report on an item once.

Notice: If you delete an item that has been reported it will not remove it automatically from the list. We plan on adding this functionality with a later release.

Rate

Our Rate module similar to our Report module works together with other modules in order for it to function. We currently provide the ability to rate videos, songs & music albums with this module. The idea behind this module is to allow us to rate any item on the site (if the option is enabled by Admins) and create a centralized page of all the "top rated" items on the site.

Music

Our music module has been updated to not allow musicians the ability to edit their gender and date of birth. It will also not display these fields on their profile. When editing their account instead of using the phrase "Full Name" we changed it with "Artist/Band Name". You are now able to add songs to your profile if you are not a musician. This can be done by viewing a song and clicking on the "Add to Profile" link/image. Support was added so you can share/rate both albums and songs. The "Play All" link can now play all the songs within the album without the need to click on "play" each time.

Change Logs


We have added a spec log here and a SVN change log here for Beta2.

Known Issues


Several known issues worth mentioning.
  • Continued issues with Internet Explorer 6 & 7 (Menus, BBCode etc...)
  • MySQL in strict mode causing install issues. If you encounter this please report it.
  • Windows servers have not been tested thoroughly.
  • Usage of the PHP mktime() function causing problems since there is no support for years prior to 1970, thus causing problems when users register.
  • YouTube videos being added via the video module may not import the latest data for the video due to a cache on YouTube's API thus allowing videos even if they have recently changed the embed/privacy settings.

To view more known issues check our bug tracker.

Live Demo


View this beta demo in action here.

Download


phpFox2 Beta2 can be downloaded direct from the clients area. When you have selected a license and reached the download page look for phpFox2 Beta2? to download the product.

Requirements


The current requirements are based on what phpFox2 has been tested on.
  • PHP Version - 5+
  • MySQL Version - 4.1+
  • Web Server - Apache
  • Operating System - Linux
  • GD complied with your PHP Build - Yes
  • PHP memory_limit - 32M

Notice: In order to run the music module:
  • PHP file_uploads - "1"
  • PHP post_max_size - "40M"
  • PHP max_input_time - "-1"
  • PHP upload_max_filesize - "38M"

Notice: In order to run the video module:

Developers Documentation


Our developers documentation can be found here.

Feedback & Bugs


Your feedback is appreciated, please feel free to leave them here. We also provide a bug tracker here so we can get ahead and start squashing bugs.

Next Release


Stay tuned for our next Beta release (June 3, 2009).

Good luck and Enjoy phpFox2 Beta2!
Tags: phpFox2

phpFox2 has reached its final Alpha release. Our next release will be our first Beta and there will be four Beta versions before we move onto RC (Release Candidate) versions. Alpha4 introduces 3 larger modules for the public to test as well as several improvements/fixes on the modules we introduced in past versions.

We will shortly cover what is new with Alpha4, however if you would like to catch up with what our 3 past Alphas introduced you can find more information here...


Before we go on with what Alpha4 introduces we need to mention that this is not a finalized product and it is not supported by the phpFox staff. Similar to past Alpha versions this Alpha release is intended for the public to test and provide feedback on what can be improved with the core product and modules.

As this is our final Alpha release our next stage is releasing Beta versions. Our Beta versions similar to Alphas will not be supported by the phpFox staff. We are at a point where the products core engine and modular design is finalized and this will not be changed during Beta stages unless it requires a reconstruction due to a major flaw. During the Beta stage, we will still be developing onto the product to improve all the available modules that will be part of the final stable release. We will still continue to take in requests during Beta, however during that stage our main focus will be improving and fixing all the completed modules. Our Beta release will not include an upgrade script.

There will be 4 Beta versions and we will then move onto the RC (Release Candidate) stage. RC will be the final stage before our Stable release. Our RC version will not introduce any new features or modules unless a feature is designed to replace a feature that contains a flaw. RC versions will introduce an upgrade script that will allow you to upgrade any version of phpFox to v2. Since RC versions will be considered as "finalized" products we will move all hard coded phrases into the default language package, recheck all pages to be XHTML valid and add the final plug-in hooks in the script based on 3rd party developers feedback. Our RC version similar to Alpha and Beta versions will not be supported by the phpFox staff.

Marketplace

phpFox2 Alpha4 introduces the Marketplace module. This module will replace the Classified module we have with all past versions of phpFox as there is more we want to do with this module.

Currently each listing can belong to multiple categories based on a parent/child setup. For example if a listing belongs to a parent category "Car" we display sub-categories for the parent category and it could be Convertibles, Coupes, Hybrids etc.. Each sub-category can have its own set of sub-categories and there is no limit on how many child sub-categories can be created.

Each listing requires to have a title, which is what is used to create a unique URL string for SEO. Short and Full descriptions are supported and adding a price tag for the listing is as well. Currently we only have support for the USD currency, however with a later release we will introduce support to add more currencies direct from the AdminCP.

We have added support to have up to X (where X is defined by Admins) images per listing. Users can add/delete images even after they created the listing. Users can also control which image will be the default image that will be displayed when browsing the marketplace.

When adding or editing a listing a user can directly invite members or guests to view their listing. If editing they can manage this list by viewing who viewed their listing or hasn't.

When viewing a listing users can add comments as well as share the listing. Each listing will be displayed on a users profile.

There is still a lot we want to add with this module and include...
  • Control if users can add comments on your own listing.
  • AJAX popup private message tool so users do not have to leave the page to contact the seller.
  • Tagging.
  • Enable Captcha when adding a listing (User Group Param Setting).
  • Privacy Settings.
  • Featured Listings.
  • "Report a Listing" tool.
  • Short description text counter.
  • Update category usage count each time the category is used.
  • "Total Views" count on listings (User Controlled Feature).
  • Custom Fields. This feature will allow Admins the ability to create custom fields for each category. For example for the category "Car" we could have custom fields such as Color, Transmission, Make etc...
  • Location field should default to the users set location.
  • Give out X (where X is an AdminCP setting) points to user for each listing they add.
  • Add default listing image to the news feed. (Currently only text info displayed).
  • Feature to rate/review a listing.
  • Feature to rate/view the seller/buyer.
  • Section to view ratings/reviews of a listing.
  • Section to view ratings/reviews for a seller/buyer.
  • When viewing a listing display a "More items from this seller" block.
  • When viewing a listing display more detailed information about the seller (eg. Points, Rating, Reviews etc...).
  • Feature to pay for items using one of the provided payment gateways (eg. Paypal, 2checkout etc...).
  • Ability to attach "downloadable" goods, where listing owners can control when items can be downloaded (eg. after/before purchase).
  • Send listing owner an email when one of their invites viewed their listing. (Privacy controlled).
  • Add a search tool for the invite list. (Only for Listing owners).
  • Simple/Advanced search filter.

The list of features provided is part of our future spec list for this specific module and there is no set version/date as to when all these features will be completed. We mainly wanted to share this information with the community as we are getting closer to our Beta release and we feel its time for us to release more information on what some of the final features will be. Note that this is not a final list of features for this module and the door is still open for feature requests.

Currently this module comes with several known issues...
  • Invite routine works for guests to send an invitation, however there is no way to track if they visited the listing so they are always listed under "Not Responded".
  • When creating categories there is no check if a category with the same name already exists in the parent category.
  • The index page for the Marketplace does not include an SQL conditional statement, however this needs to be added once privacy settings are introduced.
  • When viewing a listing and displaying the attached images there needs to be a border around each image since some images have a white background and its hard to identify where the image starts/ends.
  • Auto complete of categories not working when posting the add/edit form when you have failed the validation.
  • BBCode and Emoticons not working on IE.

Events

Similar to the Marketplace module and how we handle categories, each Event can belong to one parent category and as many child sub-categories. When creating an event you can attach an image and directly invite your friends or guests.

Based on how other modules work the title of the event will create a unique URL string for SEO and will add a unique keyword and description to the pages meta tags.

The Event module currently offers the core functionality of what v1.6 provides (RSVP & Commenting), with the exception of extras like sub-categories and an image attachment. Each event you belong too will be displayed on your profile.

Here is a list of some of the future features planned for this module...
  • Privacy Settings.
  • Add default event image to the news feed (Currently supports a text feed).
  • Enable Captcha when creating an event (User Group Param Setting).
  • Featured Events.
  • Reporting an event.
  • Update category usage count each time the category is used.
  • "Total Views" count on events (User Controlled Feature).
  • Give out X (where X is an AdminCP setting) points to user for each event they add.
  • If inviting a guest give them a unique ID so if they RSVP as a guest and sign up we know which user to add to the RSVP list.
  • Add a count to the RSVP list (eg. Attending, Maybe, Can't Make It, Not Responded).
  • Add a search tool for the guest list. (Only for Event owners).
  • Feature to block a user from joining your own event.
  • Send out a notification email to event attendees so they know the event is going to start in X days/hours.
  • Feature to mass mail attendees.
  • Enable attachments.
  • Block to display the most popular events.
  • Simple/Advanced search filter.
  • Tab to display events from: Today, Tomorrow, This Week, This Weekend.
  • Notify event owner when someone joined their event (User Setting).
  • Feature to add Admins for your event to help run the event.
  • Include Photo and Video module.

  • When selecting a "start" or "end" date provide a small calendar to select the date (This feature will be built into other modules as well when there is an area to select a day/month/year.

Currently this module comes with several known issues...
  • When creating categories there is no check if a category with the same name already exists in the parent category.
  • Auto complete of categories not working when posting the add/edit form when you have failed the validation.
  • BBCode and Emoticons not working on IE.
  • Breadcrumb for sub pages needs to be added (eg. My Events, Events I'm Attending).
  • Check to make sure the "end date" is not set before the "start date".
  • Check to make sure the "start date" is not starting in the past, currently there is minimal support for this; however because of the time zone feature and no support yet for DST this cannot be fixed until those are fixed.
  • Disable the ability to edit an event if is closed (eg. past event).

Groups

Our Groups module we wanted to hold off until our first Beta release, however we felt Alpha4 was a good time to introduce this module for public testing as this specific module requires a connection of sorts with other modules. We have designed this module and designing other modules with the ability to make a connection with each other to create a community within a community.

For example with this release we included 3 modules to connect with the parent group module. You may have noticed Comments throughout the site already so this connection is nothing new, however the Group module includes an Event and User module connection. The Event connection allows you to create events within the Group. The User connection allows you to use the same browse tool found in the public browse page to browse members of the group. With this concept we will be able to connect other modules in the future such as Photos, Forums, Polls etc...

Each group similar to a Marketplace listing or an Event can belong to a category and as many child sub-categories. Each group can have a custom photo and while creating/editing a group you can invite your friends or guests to join the group. You can even manage group invites and delete any members from it.

On your profile we list all the groups you belong to for others to see. Each group has a unique name based on the group name provided by the creator. Unlike other modules that prepends a category or controller placeholder to view an item, groups will have its own unique URL name similar to your profile. If the name of your group is "phpfox" the URL based on the setting you have for URL rewriting could look like one of the following:

Each group can also be customized to have their own theme. This uses the new designer tool, which is also included on your profile. With this tool you can currently select a theme for your group and drag-and-drop boxes.

Here is a short video on how to customize your group:



Here is a list of some of the future plans we have for this module:
  • Privacy Settings (Public / Private)
  • Add default group image to the news feed (Currently supports a text feed).
  • Enable Captcha when creating a group (User Group Param Setting).
  • Featured Groups.
  • Reporting a Group.
  • Update category usage count each time the category is used.
  • Total ViewsӔ count on groups (User Controlled Feature).
  • Give out X (where X is an AdminCP setting) points to user for each group they create.
  • Move the "Manage Members" to the main "Members" section so we can utilize the search filter.
  • Enable attachments.
  • Block to display the most popular groups.
  • Simple/Advanced search filter.
  • Notify group owner when someone joined the group (User Setting).
  • Feature to add Admins for your group.
  • Include connections to other modules. (eg. Photo, Forum, Poll, Quiz, Video, Music etc...).

Currently this module comes with several known issues
  • When creating categories there is no check if a category with the same name already exists in the parent category.
  • Auto complete of categories not working when posting the add/edit form when you have failed the validation.
  • BBCode and Emoticons not working on IE.
  • Breadcrumb for sub pages needs to be added (eg. My Groups, My Group Memberships).
  • There are no privacy settings yet, anyone can join a group as well as create events for the group.

Site Customizer

We have introduced a new tool with Alpha4. We are calling it a Site Customizer at the moment as it does the job of allowing you to custom the site. It currently only works in 3 areas. We mentioned this feature in use earlier when introducing our Group module. This tool is designed to work with any area of the site, those areas simply need to have proper "callback" calls in order for the tool to work. First, lets look over how to change the theme we are using for the entire site. This can be done from the sites index page once logged in. Click on "Site Themes" and you can select what theme you would like to browse the entire site in. Here is an example of how to do this:



Note that the new "test" theme we provided is only out for testing and there are many things that do not look "right" with the theme, we basically created it to distinguish it from our default theme.

When using this tool on your profile you can select a theme for your profile which others and yourself can see once you select and save a new theme. Blocks can also be moved to a specific location on your profile and we have added a "Block" link which will toggle all the blocks to make it easier to drag-and-drop them. Here is an example of this tool in action:



Dragging and dropping of blocks currently only works on your own profile or on your own group. We want to include this on the sites index page as well so you can control how the index page is displayed. This tool will also include a feature to add/remove blocks and an advanced CSS editor to manipulate the layout of the page (Profile and Groups only).

AJAX Notifications

With past versions of our Alphas we introduced our notification system. Similar to how it works with v1.6 it can be by default found in the sites index page once a user has logged in. Once a user has browsed away from that page they receive no direct notifications. With Alpha4 we are introducing 2 methods to notifying users wherever they are on the site.

For the first method we added an icon beside where we can change our site status. Once a user receives a new notification or request based on the theme used, the background of the icon will turn gold. There wasn't much thought into the design at the moment or the icon, however the idea behind this feature is to notify the user if they have a new message or friends requests anywhere on the site without being too obtrusive.

The other option we provide is an AJAX request that can be called every X (where X is defined by an Admin) minutes to see if a user has a new notification. If they do they will receive a "slide up" near the bottom right of their browser screen, similar to what you get with MSN messenger on Windows.

Both these features are disabled by default as it requires your server to handle 2 extra SQL queries and the extra AJAX requests to check for new messages. Note that you can disable the AJAX calls and simply use the first method.

Here is an example of how this feature will work:


There isn't any settings to disable this feature just yet other then from the AdminCP. We will be adding a setting so users can disable this feature if they want, as well as an Admin override to disallow users from being able to enable/disable this feature.

Things To Test

Alpha4 has introduced some changes to how our core engine works based on feedback from our community, which alters the functionality and usability in many if not all the modules we provide.

These changes include:
  1. ALT + 255 - The issue with using ALT codes and especially with #255 is this turns into a "blank" space, which allows data to be entered into the database such as when commenting on a users profile. Once displayed it looks like a blank comment. For more information on ALT codes go here. We need help testing where "ALT + 255" can still be added. If you find where please report it to our bug tracker with a full path to where it can be done on our live demo.
  2. Non Alphanumeric & Non Latin Characters - With providing a multilingual product we strive to not only provide our clients with the ability to use it with different language packages but to also allow their members to post data from languages that do not use Latin characters and display them correctly. To solve this problem we convert all data inserted into the database into UNICODE allowing browsers to properly output characters without the need to rely on the database collations or websites character encodings. We need further testing done with such characters as there has been issues that have come up during the Alpha phases, however each one so far has been fixed. To test this specific issue try to add non alphanumeric & non Latin characters when posting anything on the site.
  3. BBCode - With past versions BBCode was not working when adding more then one BBCode in a string. Note, that in some forms the BBCode editor does not work with IE. Issue related to BBCode not working correctly has been fixed, however we need a little more testing in this area. To test this specific issue try to add blogs with as many BBCodes as you can.
  4. Comments - We redesigned how we enter comments into the database in relation to the news feed. Since we need to modify comments if a news feed has been modified we need to include a connection between the 2 modules. To test this issue simply add/edit/delete comments anywhere you find the possibility to add a comment.
  5. HTML Parser Modified - When you enter data into the database such as a blog post we parse the text and save a "fixed" version of your entry so when we display it we save PHP the hassle of parsing the data each time a new person views the item. The issue we have dealt with for a very long time, even with v1.6 is to allow HTML and at the same time keep the site safe. This is always risky when allowing HTML. Another problem was characters such as ">" and "<" would also be removed since we used the function provided by PHP to strip HTML tags. With Alpha4 we have developed a new method to help the HTML parser. Since this routine is fairly new all sections will have to be retested to make sure XSS, CSS and general JavaScript, BBCode exploits do not come up. To test this you will need to add data anywhere on the site and try to exploit the site by means of a XSS, CSS, JavaScript or BBCode. Here is a cheat sheet for XSS exploits.
    Notice: We found an issue already with this new change and it is where you are unable to quote text strings (eg. within the forums).


If you encounter any of the mentioned issues please report them to our bug tracker.

Live Demo

View this alpha demo in action here.

Download

phpFox2 Alpha4 can be downloaded direct from the clients area. When you have selected a license and reached the download page look for œphpFox2 Alpha 4? to download the product.

Developers Documentation

Our developers documentation can be found here.

Change Logs

We have added a spec log here and a SVN change log here for Alpha4.

Feedback and Bugs

Your feedback is appreciated, please feel free to leave them here. We also provide a bug tracker here so we can get ahead and start squashing bugs.

Next Release

Stay tuned for our first Beta release (May 6, 2009), which will introduce more modules to test and updates on the current modules released.

Good luck and Enjoy Alpha4!
Tags: phpFox2
Backup phpfox sites
Posted December 16, 2008 by Purefan in Development Tutorials

Hey guys!

Saw a post in the forums yesterday and thought that even while it is very easy to backup a site some might not be aware of how to do it, so instead of writing a step by step tut I thought a video would explain it better so here it is:

Backup phpfox sites

Hope its clear enough and you can all profit from it

Tags: backup, video
JQuery :: effects
Posted October 30, 2008 by Purefan in Development Tutorials

Hello all!

In this primer I wanted to talk about JQuery a little and focus on the visual effects it allows.

JQuery is a JavaScript library, it is very very robust and provides awesome features, among the most important is the extension of the html DOM into a JSON like schema which allows ajax interaction very easily and many visual aids.

First we need to get a copy of JQuery, as of this writing the latest version is 1.2.6 and can be downloaded here.

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
Tableless design
Posted October 28, 2008 by Purefan in Development Tutorials

Aloha guys!

Today I wanted to talk about tableless design, have to admit it was a rather rough change for me and one of the steps my therapist suggested was to talk about it (lol!)

So, maybe you remember a couple of years ago (when internet was still a little less than 80% porn) that everything was done using tables, oh those were the days... but the real reason why everything was done with tables is because there was not another powerful enough alternative, so even when the almighty W3 said "Tables for layout is wrong..." there was not another way to accomplish the visual effects that we wanted. But hey! times change and internet browsers developers started listening to the W3 and for a couple of years now the html dom standard does offer all the ways needed to make an outstanding web page/site without using tables for the layout.

"But hey Mickey, it works fine with tables why make it more complicated?" The real thing is that it doesnt have to be more complicated, and once you learn the how-to you'll understand that tables are not a presentation tool... except for tables ;)

So lets see if it really is that much better, lets make a 3 columns page without using tables!

First the html:

HTML:
<html>
<head>
<title>
Tableless layout
</title>
<style type="text/css">
@import "mystyle.css";
</style>
</head>
<body>
<div id="mainDiv">
<div id="divLeft" class="left-div">
Here some links
</div>

<div id="divCenter" class="center-div">
Here goes the content
</div>

<div id="divRight" class="right-div">
Here some advertisements
</div>
</div>
</body>
</html>


As you can see this is a pretty simple html page, but the point is demonstrated here easy enough, there is a div as a big container, it contains all the elements in the page, I put it here just to make it look a little nicer.

Then we have 3 divs, nothing too important there just simple divs with an id, we will now use CSS to position and format those divs, as its recommended by the W3:

CSS:
#mainDiv
{
background-color: #ec4b4b;
height: 500px;
}

#divCenter
{
position: absolute;
top: 50px;
width: 500px;
background-color: #4bec4f;
text-align: center;
height: 200px;
margin-left: 28%;
}

#divLeft
{
position:absolute;
left: 50px;
top: 50px;
width: 250px;
height: 200px;
background-color: #4b80ec;
margin: 0;
text-align: center;
}
#divRight
{
margin: 0;
position:absolute;
right: 50px;
top: 50px;
height: 200px;
background-color: #ecdf4b;
width: 25%;
text-align: center;

}


There are several properties in that css, but the important ones are the width, which can be set as a percentage or as a fixed number of px or with another measure unit called em, although its mostly used in the W3 for font sizing. Another important property is the position which when set to absolute allows us to position its element in any part of the window and thats what we use here. Then we only need to set the margins for the elements and thats it! we have a nice looking page like the one shown here:

Tableless positioning

There are other ways to achieve this, Ive tried them and at least in firefox some didnt work, this is the first one that I found first to work fine and comply with the W3 css standards, feel free to try it here

So, hope you liked this post and to all the developers that will be working around version 2, hope it helps you either refresh your knowledge or get more acquainted with the how-to

See you around!
Tags: css, tableless
Displaying 1 to 5 of 6