Glenugie Posted November 16, 2009 Share Posted November 16, 2009 I've managed to get a customised chat script written up with some help for my website, but I'm not happy with the PM system. The chatbox has two frames, one for the chat, and one for a list of online players. I want to be able to click on a link in the online frame that will open up a window that will send a PM directly to that user. I know the code behind it, it's just making a window appear that will only show a brief message saying who the PM is going to, and a text box to take the message. I don't think window.open would be the solution to this problem. Any advice or help would be appreciated Thanks in advance, ~Glenugie~ Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted November 16, 2009 Share Posted November 16, 2009 My advice would be using jQuery/jQuerUI to do this.. jQuery can do all that you are wanting and is relatively simple to implement. Take a look at the jquery ui dialog function for what your wanting specifically. Quote Link to comment Share on other sites More sharing options...
Glenugie Posted November 16, 2009 Author Share Posted November 16, 2009 Any chance you could simplify that a bit? I'm not very experienced with javascript. Thanks for the reply by the way ~Glenugie~ Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted November 17, 2009 Share Posted November 17, 2009 Heres an example of what I mean. The below code will show a button on the page and when you click the button a "send message" window will pop up. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script> <style type="text/css"> body { font-size: 62.5%; } label{ display:block; } textarea { margin-bottom:12px; width:95%; padding: .4em; } .ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none; !important; cursor:pointer; position: relative; text-align: center; } .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em; } </style> <script type="text/javascript"> $(function() { $("#dialog").dialog({ bgiframe: true, autoOpen: false, // height: 300, modal: true, buttons: { 'Send': function() { //some function $(this).dialog('close'); } }, Cancel: function() { $(this).dialog('close'); } }); $('#send-message').click(function() { $('#dialog').dialog('open'); }) .hover( function(){ $(this).addClass("ui-state-hover"); }, function(){ $(this).removeClass("ui-state-hover"); } ).mousedown(function(){ $(this).addClass("ui-state-active"); }) .mouseup(function(){ $(this).removeClass("ui-state-active"); }); }); </script> </head> <body> <div class="demo"> <div id="dialog"> <form> <div>Message to: somebody</div> <label for="message">Message</label> <textarea class="ui-widget-content ui-corner-all" ></textarea> </form> </div> <button id="send-message" class="ui-button ui-state-default ui-corner-all">Send A Message</button> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.