For web resources

Author: Ahmed Elkadery

$(Element).floatdialog(dialog id, options {backgroundcolor, speed, event, effect, move, closeClass} )

To View the Demo click here

Futures:

1- Can Load with page started

2- Can Run sound with starting dialog

3- Can Select the Sound Path

See more Here

The Demo Code:

<div id="loaddialog">

    <a href="javascript:void(0);">X</a>

    <h1>Load Event with sound effect - sample demo</h1>

    <h2>This is a sample demo of the ExpBuilder Float Dialog v2.0</h2>

    <div>

       This is the Load Event with sound effect, It appeare when page is start

       &nbsp;<b><a href="#sampledemoviewsource">Check "sample demo" view Source</a></b>

    </div>

</div>

<script>
$(document).floatdialog("loaddialog", {event: "load", sound: true});
</script>

To Download Click Here

Ok, this is going to be a tutorial that will show you how to build the frontend of a PHP/MYSQL based chatbox that has a WYSIWYG built in.

First we need to set up the mySQL database:
We’re going to call this table chatmessages for this tutorial. It needs 5 fields:

ID – Bigint, primary , auto increment
name – varchar 255
IP – varchar 255
postime – bigint
message – I’d say tinytext, but you can do medium text if you want your users to be able to post over 400 chars per post.

The second table is for a list of all ipbans:
IPID – Auto generated IP, primary Auto increment, bigint
IP – varchar 255 – this is where we wil store the actual IP

So you need 3 files for the main chatbox.

1 file we’ll call chatbox.php as the main file to hold the other two frames.

Another file called chatlog.php that will Display the messages and a third file called send.php we’ll use to send the messages.

The later 2 files will be iframes in the first file.
We also need a connect.php file for mySQL database connection:

<?php

$db = mysql_connect("localhost", "username", "password") or die("Could not connect."); //username and password

if(!$db) 

	die("no db");

if(!mysql_select_db("database_name",$db)) //database name

 	die("No database selected.");

if(!get_magic_quotes_gpc())

{

  $_GET = array_map('mysql_real_escape_string', $_GET); 

  $_POST = array_map('mysql_real_escape_string', $_POST); 

  $_COOKIE = array_map('mysql_real_escape_string', $_COOKIE);

}

else

{  

   $_GET = array_map('stripslashes', $_GET); 

   $_POST = array_map('stripslashes', $_POST); 

   $_COOKIE = array_map('stripslashes', $_COOKIE);

   $_GET = array_map('mysql_real_escape_string', $_GET); 

   $_POST = array_map('mysql_real_escape_string', $_POST); 

   $_COOKIE = array_map('mysql_real_escape_string', $_COOKIE);

}

?>

First we will work on submit.php
<?php

include "connect.php";

if(isset($_POST['submit'])) //if submit button push has been detected

{

   $message=$_POST['message'];

   $name=$_POST['name'];

   if(strlen($message)<1)

   {

      print "You did not input a message";

   }

   else if(strlen($name)<1)

   {

      print "You did not enter a name, please try again.";

   }

   else

   {

      $message=strip_tags($message);

      $IP=$_SERVER["REMOTE_ADDR"]; //grabs poster's IP

      $checkforbanned="SELECT IP from ipbans where IP='$IP'";

      $checkforbanned2=mysql_query($checkforbanned) or die("Could not check for banned IPS");

      if(mysql_num_rows($checkforbanned2)>0) //IP is in the banned list

      {

         print "You IP is banned from posting.";

      }

      else

      {

         $thedate = date("U"); //grab date and time of the post

         $insertmessage="INSERT into chatmessages (name,IP,postime,message) values('$name','$IP','$thedate','$message')";

         mysql_query($insertmessage) or die("Could not insert message");

      }

   }

}

print "<form action='submit.php' method='post' name='form'>";

print "Your name:<br>";

print "<input type='text' name='name' size='20'><br>";

print "Your message:<br>";

print "<textarea name='message' cols='40' rows='2'></textarea><br>";

print "<a onClick=\"addSmiley(':)')\"><img src='images/smile.gif'></a> "; //replace images/smile.gif with the relative path of your smiley

print "<a onClick=\"addSmiley(':(')\"><img src='images/sad.gif'></a> ";

print "<a onClick=\"addSmiley(';)')\"><img src='images/wink.gif'></a> ";

print "<input type='submit' name='submit' value='submit'></form>";

print "<script language=\"Java Script\" type=\"text/javascript\">\n";

print "function addSmiley(textToAdd)\n";

print "{\n";

print "document.form.message.value += textToAdd;";

print "document.form.message.focus();\n";

print "}\n";

print "</script>\n";

print "<br><br>";

?> 

This is the file that will submit a user's message into th database. At  the bottom you see the form that asks for your poster's name and
 the message he wants to post. The onclick and following javascript  function allows for clickable smilies. If you want more, simple add more  smilies in and copy and paste more:
print "<a onClick=\"addSmiley(':(')\"><img src='images/sad.gif'></a> ";

lines in, change the   into the character you want for your smiley and  the image path to the image path of your smiley.
 The code that comes in the:
if(isset($_POST['submit'])) //if submit button push has been detected

{

case is basically validation code for message, it checks to make sure  the poster's name and message is at least 1 character long  and if it  isn't, it doesn't post and gives an error message telling them that one  of the required fields is not valid. Next it gets the poster's posting  IP with the $_SERVER["REMOTE_ADDR"] function and checks that IP against  the table of banned IP with $checkforbanned. If the IP is found in the  list of banned IPS, it throws an error message saying that your IP is  banned and does not post the message. Finally, if all the conditions are  met, it grabs the current unix timestamp wth $date("U") and posts all  the information into the message database.

 Now lets look at chatlog.php, the file that displays the messages, the  newest messages will be posted at the bottom:
<?php

include "connect.php";

$getnummessages="SELECT COUNT(*) as messagecount from chatmessages";

$getnummessages2=mysql_query($getnummessages) or die("blah");

$getnummessages3= mysql_result($getnummessages2, 0);

if($getnummessages3>21)

{

   $startrow=$getmessages3-20;

}

else

{

  $startrow=1;

}

$getmsg="SELECT name, message from chatmessages order by postime ASC limit $startrow,$getnummessages3";

$getmsg2=mysql_query($getmsg) or die(mysql_error());

while($getmsg3=mysql_fetch_array($getmsg2))

{

  $message=Smiley($message); //Smiley faces

   print "<font color='red'><b>$getmsg3[name]:</b></font> $getmsg3[message]<br>";

}

function Smiley($texttoreplace)

{

    $smilies=array( 

    ':)' => "<img src='images/smile.gif'>",

    ':blush' =>"<img src='images/blush.gif'>",

    ':angry' =>"<img src='images/angry.gif'>",

    ':o'=>     "<img src='images/shocked.gif'>",  

    'fuck'=>"$#$%",

    'Fuck'=>"&$#@"

    );

    $texttoreplace=str_replace(array_keys($smilies), array_values($smilies), $texttoreplace);

    return $texttoreplace;

}

?>

<script>

  setTimeout("window.location.replace('chatlog.php')",2000);

</script>

Basically , this first counts the number of messages there are in the  database first, then subtracts 20 from that number and stored that value  in $startrow.
 Then we grab all the messages from $startrow to the last message in the  database and look through the array to display the 20 messages, with the  latest message at the bottom. The smilies function replaces the smiley  characters with the actual smiley images, not that this can also be used  as a bad words
 filter. The last line simply refreshes the page automatically every 2  seconds, so that new messags will automatically come up, just like a  real chatroom.

 Now we can look at chatframe.php which is a simple page with two iframes  to hold the submit page and the chatlog page.

 chatframe.php
<?

print "<iframe src='chatlog.php'  name='chatlogframe' width='350' height='400'></iframe>";

print "<br><br>";

print "<iframe src='submit.php' width='350' height='150' frameborder='0'></iframe><br><br>";

?>

There's really nothing to this file, just two iframes to hold the other  two files.

 The next post will be the admin files.

• Intro
• Folder Structure
• MySQL Table
• Html And Css
  • main.css
  • index.php
• AJAX And Javascript
  • Event Listeners For `Reply` Link
  • Event Listener For Comment Submitting
  • Generating Comments
  • Saving Comments And AJAX
• Conclusion

In this tutorial we will create multi level comments. You must have seen comments on youtube and that they have levels depending on who replied to who. That’s exactly what we will build.

Intro Top

I’ve seen that most of scripts online execute query to check if comment has child elements. Let’s say you have 10 comments and each of them has 1 child element. You would execute 1 query to get all those 10 comment (first level) and then for each of them to check if it has child. And then for each child to check if that comment has childs to. That would be 1 + 10 + 10 = 21. That’s 21 query for nothing. It’s easier to do it with just one query that will load all comments and then to structure them in an multidimensional array. For that purpose we will use walker class that you can download here and read tutorial how we made it here. So let’s start working on it.

Folder Structure Top

Folder structure is very simple. jQuery folder has jQuery v1.3.2. We have two image files used for loader and to style comments. In our lib folder we have walker class that I mentioned before and we have some php file that we’ll later talk about.

Muti Level Comments Folder Structure

MySQL Table Top

We’ll have very simple MySQL table. Table will have 7 fields.

• id – unique ID
• name – name of comment author
• email – e-mail of comment author
• url – url of comment author (optional)
• parent – ID of parent comment (if no parent then equals to 0)
• date – date that comment was posted
• message – comment message

Html And Css Top

Now we’ll do some html and css. I won’t explan what I’ve done here. There are many good css and html tutorial on net.

main.css Top

This is content of main.css file.

index.php Top

This is source of index.php file.

AJAX And Javascript Top

Now we will build JavaScript and add Ajax support. As you all know, when using jQuery you have to write your code when DOM is loaded like this. We’ll also add variable ajax that will disable making new AJAX call while there is still one active.

When we have this, we’ll write our code for AJAX. After our variable we’ll call function loadComments() that will load comment from our database using AJAX (we’ll create this function next).

So, this will be our function that will load comment from server. For more details about AJAX and what we did you can find here. This is code for function (paste it outside of upper part of code).

Now we’ll create event listeners for two actions:

1. when user clicks on `Reply` link
2. when user submits comment.

Event Listeners For `Reply` Link Top

This listeners calls function that check if comment exists. If comment does not exist, user can not make a reply to this comment. If comment exists, AJAX returns name of comment author that we use to construct string `Write reply to comment posted by %name%` where %name% is name returned from AJAX.

First we check if we are in AJAX, and if we are, we just return false. If we are not, then we do AJAX call. This is event listener.

Event Listener For Comment Submitting Top

This listener submits form to PHP file on server if there is no AJAX running.

PHP

Now we’ll do PHP part. This part generates comments and saves them. First we need to create db.php file. It’s just simple connection to database.

Now we’ll do other parts as well.

Generating Comments Top

For this purpose we’ll use my walker class that you can get here.

First we have to include db.php and walker.php in our file.

Now we will create commentWalker class that will extend walker class. We will use this class to style our comments.

Now we’ll create function buildComments() that will be used to build comments. First we check if passed comments are null and if they are we use comments from parent class. If count of comments is less then one, then we echo message  There are no comments to display. to buffer and return it. If there are comments, then we start building them. We just go through each comment and if it has child elements, we just call this function again. We also increment $lv by 1 to make comments flat at certain level. At end we just return what we’ve build.

At the end we just have to create SQL query that will pull data from database and call this class and its functions.

Saving Comments And AJAX Top

Here we have to require db.php. This will be fairly simple file. We’ll just check what kind of request are we doing and check data if they need to be checked. There is really noting complicated. We’ll use a variable $response to save response data and at the end echo it in JSON format.

$(Element).floatdialog(dialog id, options {backgroundcolor, speed, event, effect, move, closeClass} )

To Ses the Demo: http://www.expbuilder.com/testpages/floatdialog/

Explain:
Demo 1 – Default use

HTML Code:

<a id="demo1" href="javascript :void(0);">Clicking Here</a>

<div id="dialog1">

    <a href="javascript :void(0);">X</a>

    <h1>Demo1 - Default use</h1>

    <h2>This is a demo of the JQuery Float Dialog v1.0</h2>

    <div>

       this is the default use, you can do this demo by your self !

       &nbsp;<b><a href="#demo1viewsource">Check demo1 view Source</a></b>

    </div>

</div>

Javascipt Code:

<script>

    $("#demo1").floatdialog("dialog1");

</script>

Demo 2 – Options

1- move

[ default - down - up - left - right - slidedown ]
HTML Code:

<a id="demo2" href="javascript :void(0);">Slide down</a>

<div id="dialog2">

    <a href="javascript :void(0);">X</a>

    <h1>Demo2 - Options - slide Down</h1>

    <h2>This is a demo of the JQuery Float Dialog v1.0</h2>

    <div>

       you can make the box is slide down .. also can make it slide up, left and right

       &nbsp;<b><a href="#demo2viewsource">Check demo2 view Source</a></b>

    </div>

</div>

Javascipt Code

<script>

    $("#demo2").floatdialog("dialog2", {move: 'down'});

</script>

2- effect

[ true - false ]

<script>

    $("#demo3").floatdialog("dialog3", {effect: false});

</script>

3- speed

[ slow - fast - number ]

<script>

    $("#demo4").floatdialog("dialog4", {speed: 'fast'});

</script>

4- event

[ click - mouseover ...ect ]

<script>

    $("#demo4").floatdialog("dialog4", {speed: 'fast'});

</script>

5- backgroundcolor

[ color ]

<script>

    $("#demo6").floatdialog("dialog6", {backgroundcolor: 'red'});

</script>

<script>

    $("#demo6").floatdialog("dialog6", {backgroundcolor: '#CC0033'});

</script>

6- closeClass

[ Dialog Close button class ]

Default: closebutton

<a id="demo6" href="javascript :void(0);">You can change the close button class to what you want</a>

<div id="dialog6">

    <a href="javascript :void(0);">X</a>

    <h1>Demo2 - Options - Close button class</h1>

    <h2>This is a demo of the JQuery Float Dialog v1.0</h2>

    <div>

       You can change the close button class to what you want

    </div>

</div>

<script>

    $("#demo6").floatdialog("dialog6", {closeClass: '.myclosebutton'});

</script>

Download JQuery Float Dialog v1.0

1- Download jQuery JavaScript Library – jquery-1.3.2.min.js
2- JQuery Float Dialog v1.0 – jquery.floatdialog.zip
Download this demos

- jquery.floatdialog.package.zip JQuery Float Dialog v1.0 SetUp

A. Head Tag

1- css code:

<style>

.disable_masking

{

    z-index: 6001;

    position: absolute;

    display: none;

}

.closebutton

{

    float: right;

    text-decoration: none;

}

</style>

2- Import files:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="jquery.floatdialog.js"></script>

B. Body Tag

1- HTML & JavaScript Code:

<a id="linkid" href="javascript :void(0);">Clicking Here</a>

<div id="dialogid">

    <a href="javascript :void(0);">X</a>

    <h1>DIALOG DATA HERE !</h1>

</div>

<script>

    $("#linkid").floatdialog("dialogid");

</script>

===========================
Powered by: Ahmed Elkadrey – Expbuilder.com

In-place editing with contentEditable property and jQuery

Firefox 3 was released on June 17, 2008, and from that time, Firefox 2 browser share is quickly dropping. Very soon it will become inefficient to continue supporting it. And we will be able to use a lot of new Firefox 3 features, such as canvas support, CSS and DOM improvements and other. I am really glad that Firefox3 supports the “contentEditable” property. Setting this attribute to “true” allows you to make parts of a document editable. This attribute was already supported by IE6/7/8, Safari, Chrome and Opera. So now we can start using it in our applications.

To test “contentEditable” I made a plugin that allows you to convert parts of the page into editable areas, just click on them and when you finish editing click outside. If you convert an inline element (h1…h5, p ) with this script, the line breaks will be disabled.

<link href="editableText.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="../jquery.editableText.js" type="text/javascript"></script>

jQuery(function($){
     $('.editableText').editableText({
          // default value
          newlinesEnabled: false
     });

     // we will add more code here
});

 //  bind an event listener that will be called when
   //  user saves changed content
   $('.editableText').change(function(){
         var newValue = $(this).html();

         // do something
         // For example, you could place an AJAX call here:
        $.ajax({
          type: "POST",
          url: "some.php",
          data: "newfieldvalue=" + newValue,
          success: function(msg){
            alert( "Data Saved: " + msg );
          }
       });
   });
event.