Wishlist and some problems..and some solutions

[Ran zid]

So ive just started shoehorning ajaxchat into my website and ive already made some changes , namely the ability to resize text and the inclusion of the mobile chat code(which is awesome by the way)

but after reading through this group I can see theres still a few things id love to have on this chat to make it complete , some which have been done others which have had no answers sadly , so im going to lay out 

my own wishlist for Ajaxchat , some may be easy some maybe impossible and some might have already been done and ive missed it but if anyone can help me on any of these it would be amazing , im no stranger

to java/php but i'm far from competent so if you reply with some code please make it very very simple with visual aids diagrams and a hug.

so without further adoo the list:

Badges/Avatars for uses in the online list , male/female and custom badges(ranks etc)   - ive seen this mostly done in the admin addon 

Private chats opened up in a popup window while still remaining in the main room on the other window

The ability to hide the emoticons so they are just a button like the color selection(click to popup a list of emoticons)

Popup windows with webcam chat on them - its wild one I know and would require a server of some sort but still I can dream

Username changes colour with their chosen text colour ( instead of having purely default colour for them and different colours for mods/admins) as the badges would denote mod/admin

Links to profiles on forums from the user menu (when you click on their name? in phpbb)

so thats about all I can think of for now but if I come up with new ideas ill throw them up here , if anyone wants the code for text resizing gimme a shout ill be happy to post it up just like any other changes I make that seem good.

Now onto the problems , every now and then some users seem to get a half drawn chat , as in the top buttons are present and the login sound is played , they even show up to other users , but the actual chat box and any theming isn't present.  this seems to be 

purely a chrome issue so far and im not sure if its something to do with adblockers or other addons as theres only 3 users who find the issue , but is this a known thing?

Secondly , despite only working with the config and css files my logs seem to have stopped working.. the page loads up I select the room but nothing comes up , ive got a custom room name and im running the phpbb version ..any ideas?

anyway to finish up thanks to creating a free fast and functional chatroom that does exactly as it says it will , ill be donating as soon as i get some cash in.

[R3bify]

I've got user picked name colours on my chat.
It depends on how you want to go about adding it, I modified SyN's package so my users could pick the colour when editing their profile page. I can throw up how to do that if you want.

If you added functional mobile chat code, would you be able to share it?

[Ran zid]

my only concern with syns package is that i'm not using standalone i'm linking everything to my phpbb forum so I dont really want to have a seperate sign up for chat id like profiles and everything linked in from the site , but yes please if you can throw up the code changes that would be awesome.

the mobile chat was already done by Frug in this thread https://groups.google.com/forum/#!topic/ajax-chat/CeVMSqFVC5A 

but it seemed to be rather to busy for my liking so be warned my mobile chat code does not have a user list nor most of the features (ill add some later) and is just a config change from frugs original code:

this is thrown at the end of the global.css file

@media (max-width: 700px) {

#content #headline { left: 5px; margin: 0; padding: 0; }

#content #statusIconContainer { display: none; }

#content #copyright { display: none; }

#content #logoutChannelContainer { top: 50px; left: 5px; }

#content #logoutChannelContainer label { display: none; }

#content #emoticonsContainer { display: none; }

#content #bbCodeContainer { display: none; }

#content #optionsContainer { height: 8px; bottom: 50px; left: auto}

#content #onlineListContainer { display: none; }

#content #chatList { left: 1px; font-size: 12px; right: 1px;}

#content #submitButtonContainer  { display: none; }

#content #inputFieldContainer #inputField { height: 30px; }

#content #inputFieldContainer { left: 1px; right: 1px; bottom: 1px; }

#content #colorCodesContainer { display: none; }

}

@media (max-width: 480px) {

#content #chatList { left: 0px; border-left: 0; right: 5px; border-right: 0; }

#content #onlineListContainer { display: none; }

#content #bbCodeContainer input, #content #logoutButton, #content #submitButton, #loginContent #loginButton { padding: 0px; display: block; float: left; margin-right: 1px;}

#content #bbCodeContainer { padding: 0; }

}

@media (max-height: 500px) {

#content #bbCodeContainer, #content #optionsContainer { display: none; }

#content #inputFieldContainer #inputField { height: 30px; }

#content #inputFieldContainer { bottom: 5px; }

#content #chatList, #content #onlineListContainer, #content #settingsContainer { bottom: 10px; top: 10px; }

#content #logoutChannelContainer { display: none; }

}

  with this also needed to make it work

Inside lib/template/loggedIn.html add this right after the <head> tag:

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

again this isnt my work its frugs but I changed it so it would be insanely small so that users could get the most chat space on their mobiles.

[R3bify]

Yeah, I did see that modification. I was hoping yours was different because my one user that accesses by mobile was still complaining about it. I'll give yours a shot, though.

 I am personally using a javascript file with an array to hold the values. In order to make it truly user specific for registered users, I'm using the userID to base the detection off of.

***I added a COLOUR column into my registered users database. 

In chat/js/chat.js, add:
userColourPreference: function(userID, userClass) {
  if(userClass != "guest" && userClass != "chatBot") {
       return '<span style="display:inline; font-weight:bold; color:'
  + userColours[userID]
          + ';"';
  } else {
      return '<span class="'
      + userClass
      + '"';
  }
},
What this will do is check to make sure the user isn't a Guest, and that the user isn't the ChatBot (guests will use default guest colour.. as will the ChatBot since the guest number should be random and I didn't want to change the ChatBot.. feel free to modify it if you want)
And then after it checks, it will look for the userColours array (created in another file) and use that colour for the username.

In the same file, find the function:
getChatListMessageString: function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) {
and find the line between + dateTime and + this.getChatListUserNameTitle(userID, userName, userRole, ip) (sorry, I don't have a barebones copy of the file and mine is modified.. I think it is a span tag opening...) and change the line to:
+ this.userColourPreference(userID, userClass)

that way it will call the function to... well set the colour.

Next, in chat/lib/template/loggedIn.html, just before the start of the Javascript file inclusions, add this:
<script src="profiles/user_colours.js" type="text/javascript" charset="UTF-8"></script>
Your file may be in another directory. Change the path accordingly.

 

user_colours.js should look something like this:
var userColours = new Array();
userColours[1] = "red";
userColours[3] = "red";
userColours[4] = "gray";
userColours[5] = "fuchsia";
userColours[6] = "blue"; 

where the number is the userID

Here is what chat/profiles/profile_saved.php modifications I did will look like.

After

$aboutme = mysql_real_escape_string(nl2br(htmlentities(strip_tags(trim($_SESSION['about_me'])))));

my page looks like

$allowed_colours = array( "gray", "silver", "yellow", "orange", "red", "fuchsia", "purple", "navy", "blue", "aqua", "teal", "green", "lime", "olive", "maroon" );

if(in_array($colour, $allowed_colours))

{

mysql_query("UPDATE ajax_chat_registered_members SET COLOUR='$colour' WHERE id='$id'");

}

else

{

mysql_query("UPDATE ajax_chat_registered_members SET COLOUR='gray' WHERE id='$id'");

}

and then after

echo "<div id=PageTitle align=center><br/><hr>";

echo "<h1>".$user."'s Profile was Saved!</h1>";

echo "<hr><br/>";

echo "<h3>Returning you to your profile page!</h3>";

I have:

$userinfo = "user_colours.js";

unlink($userinfo);

$Handle = fopen($userinfo, 'wb');

$update = mysql_query("SELECT * FROM ajax_chat_registered_members") or die(mysql_error());

fwrite($Handle, pack("CCC",0xef,0xbb,0xbf));

$Data = "var userColours = new Array();\n"; 

fwrite($Handle, $Data);

 

while($update2 = mysql_fetch_array( $update )){

$user_id = $update2['ID'];

$user_colour = $update2['COLOUR'];

///////////////////////////////////////////////////

//Writes all colour preferences to user_colours.txt

///////////////////////////////////////////////////

    

 $Data = "userColours[$user_id] = \"$user_colour\";\n"; 

 fwrite($Handle, $Data); 

}

///////////////////////////////////

//Closes and saves user_colours.txt

///////////////////////////////////

 fclose($Handle);

 chmod($userinfo, 0755);  

So what this does is recreate the array that contains the users colours.

I can try and give you a hand modifying this if you aren't running the mod. Just let me know.

The only other change that I made was adding in a display on the my_profile.php page for the chosen colour, and a box to set it on the edit_profile.php page.

[Ran zid]

thanks that code works beautifully , what kind of issues are you having with the mobile code? 

[R3bify]

It doesn't scale the same on all screen sizes. Just nitpicky users, really.

[Ran zid]

So far ive had users with iphone 4's , a few different android devices and 1 ipad test it and while im told it looks a little odd on the ipad its still fully functional :/  maybe theres something else going on?

[R3bify]

One of my users says that the last message is always underneath the textbox. I feel like there should be detection for mobile devices and just a separate page made for mobile use, without most of of the buttons and emoticons, or maybe a container that holds them and disappears after you press a button or something. 

[Ran zid]

Ive had that problem aswell , its all about the sizes and locations of each of the elements that you define in the css code , I cant remember off the top of my head which is the actual text box but if you reduce the size of it then it shouldn't be obscured by anything, ill grab my code when i can and post it up as I solved this already but it really is just a size and position thing.