The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Code Needs Editing For Floating Chatbox (Javascripting)

View previous topic View next topic Go down

Code Needs Editing For Floating Chatbox (Javascripting)

Post by Kempo on August 25th 2010, 9:42 pm

Well. Here's how it is.

My members have been requesting for some time that I change the chatbox, so that it can be accessed on any page of the forum; rather than just the home page. Now; I know for a fact that it's quite simple to edit the template of the page header, so it can be displayed just below the forum header. However, that's not what I'm trying to do, as it just makes it have the same problem of not being able to access it whilst scrolling down.

What I ideally want; and know is possible despite the difficulties of coding; is a javascript code which I can put into the template; to make the chatbox float above the forum, and will be movable by the user by clicking and holding on the object. An example of what I'm trying to say; and an example code is found here
the code for my chatbox, in HTML is as follows;
Code:
<IFRAME HEIGHT=200; WIDTH =900; SRC="http://www.joinfty.com/chatbox/chatbox.forum?">
and after attempting to put that into the editor on the link given; I know that this is very possible. However the site doesn't give the edited code which I want; and seeing that I only have a fairly limited knowledge of Javascript; I am not sure how to edit the given example coding, to make my desired outcome.

Finally; I would like to create a widget to make this object appear on the press of a button. I'll put the widget in the sidebar; so at the end of it all; I should have a result like this. This link may also help with the first code needed; because it's exactly the kind of effect I'm trying to pull off; only the code on this site is for putting up a youtube video, rather than my chatbox, and like I said; I'm a Javascript noob, so don't really know how to change the playvid function to a function which will show my chatbox.


so yeah.

If any of you are up for a challenge; and are capable of fairly advanced javascript; I would be incredibly grateful if you could help me out with my little problem Smile



Thanks In Advance,
Kempo.


Last edited by Kempo on September 2nd 2010, 4:23 pm; edited 2 times in total

Kempo
New Member

Posts : 10
Reputation : 0
Language : English

Back to top Go down

Re: Code Needs Editing For Floating Chatbox (Javascripting)

Post by MrMario on August 25th 2010, 10:57 pm

Hi, your title being non explicit and therefore not facilitating research via the search option, I'm not answering (nor is any other member) until you change your title for an explicit one, related to your problem
Why we ask for explicit titles
The forum's search engine bases its research on keywords found in topic titles.

When you do a research, do you use "help", "urgent", "problem", "SOS" or "question" as keywords to look for topics about your problem/question?
Certainly not! So this is why it is important to use titles related to your problem/question. Doing this makes the researches much easier for visitors who use the search engine to get an answer to their question.
Thanks for your understanding.

Cordially
Forumotion Staff

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

Re: Code Needs Editing For Floating Chatbox (Javascripting)

Post by Kempo on August 26th 2010, 10:24 pm

@MrMario wrote: Hi, your title being non explicit and therefore not facilitating research via the search option, I'm not answering (nor is any other member) until you change your title for an explicit one, related to your problem
Why we ask for explicit titles
The forum's search engine bases its research on keywords found in topic titles.

When you do a research, do you use "help", "urgent", "problem", "SOS" or "question" as keywords to look for topics about your problem/question?
Certainly not! So this is why it is important to use titles related to your problem/question. Doing this makes the researches much easier for visitors who use the search engine to get an answer to their question.
Thanks for your understanding.

Cordially
Forumotion Staff


well my description gave the exact specifics, but if it means that much, I'll just switch the two around....

Kempo
New Member

Posts : 10
Reputation : 0
Language : English

Back to top Go down

Re: Code Needs Editing For Floating Chatbox (Javascripting)

Post by Kempo on September 2nd 2010, 4:25 pm

hmm...... seems like you guys have as little idea as me......

well I'll give it one last bump before giving up hope...... Sad

Kempo
New Member

Posts : 10
Reputation : 0
Language : English

Back to top Go down

Re: Code Needs Editing For Floating Chatbox (Javascripting)

Post by Puttfunhouse. on September 2nd 2010, 11:31 pm

Don't give up hope. I have absolutaly no idea how, but I almost do. So, others will Smile

~Valo

Puttfunhouse.
Forumember

Posts : 58
Reputation : 0
Language : English
Location : ****

Back to top Go down

Re: Code Needs Editing For Floating Chatbox (Javascripting)

Post by RoNo on September 3rd 2010, 12:35 am

You could save space (& a lot of coding) by using a popup chat.

Example:
Click the Zone3 Popup Chatbox link →on this page (scroll down)

Try adding this code to a *portal *widget
or add it to the homepage message content field on the ACP.
Code:
<a onclick="window.open('http://zone3.forumotion.com/chatbox/chatbox.forum', 'popup1', 'width=830,height=350,height=200,left=150,top=250'); return false" href="http://zone3.forumotion.com/chatbox/chatbox.forum" target="popup1" style="text-decoration: none;"><b>Popup Chatbox<b></a>
Add your forum address to the chatbox link in the code above.
Example: YOUR_FORUM_ADDRESS_HERE.net/chatbox/chatbox.forum

I've heard:
Being forced to view a chatbox iframe at the top of a page or
follow-floating down a page can be irritating for some visitors.



Another example: (click)


You could position it on the left or right side of the window
and keep an eye on the chat as you browse the forum/web.

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

Re: Code Needs Editing For Floating Chatbox (Javascripting)

Post by Jay Hatchell on September 3rd 2010, 3:24 am

Excellent works perfect cheers mate

Jay Hatchell
New Member

Male Posts : 15
Reputation : 0
Language : English

Back to top Go down

Re: Code Needs Editing For Floating Chatbox (Javascripting)

Post by Kempo on December 8th 2010, 8:45 pm

ok, so an update to the thread;

I appreciate the suggestion, and have been using it until now, but I have just found an excellent code which does pretty much what I want.

I've edited it slightly so that it works how I want it to, and I've tested it in a HTML code tester and it works great; so here it is....


Code:
 
<!DOCTYPE html>
 
<html>
 
<!--
   This is a jQuery Tools standalone demo. Feel free to copy/paste.
                                                          
   http://flowplayer.org/tools/demos/
   
   Do *not* reference CSS files and images from flowplayer.org when in production 
 
   Enjoy!
-->
 
<head>
   <title>The Official Fortay Gaming Clan Chatbox</title>
 
   <!-- include the Tools -->
   <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
   
 
   <!-- standalone page styling (can be removed) -->
   <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>   
 
 
   <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-basic.css"/>
   
   <style>
   /* some styling for triggers */
   #triggers {
      text-align:center;
   }
   
   #triggers img {
      cursor:pointer;
      margin:0 5px;
      background-color:#fff;
      border:1px solid #ccc;
      padding:2px;
   
      -moz-border-radius:4px;
      -webkit-border-radius:4px;
      
   }
   
   
   
   /* styling for elements inside overlay */
   .details {
      position:absolute;
      top:15px;
      right:15px;
      font-size:11px;
      color:#fff;
      width:150px;
   }
   
   .details h3 {
      color:#aba;
      font-size:15px;
      margin:0 0 -10px 0;
   }
   </style>
</head>
 
<body>
 
<!-- trigger elements -->
<div id="triggers">
   <img src="http://i26.tinypic.com/261mcf6.jpg" rel="#chat1"/>
   </div>
 
<!-- overlays -->
<div class="simple_overlay" id="chat1">
   <EMBED><IFRAME HEIGHT=200; WIDTH =900; SRC="http://www.joinfty.com/chatbox/chatbox.forum?"></IFRAME></EMBED>
 
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {
 
 
 
$("img[rel]").overlay();
});
</script>
 
 
 
</body>
 
</html>


The only problem is that I don't know how to insert it properly into my forumotion site. Everything I've tried thus far hasn't worked (using templates, CSS, and widgets)

any suggestions?


Thanks,
Kempo.

Kempo
New Member

Posts : 10
Reputation : 0
Language : English

Back to top Go down

Re: Code Needs Editing For Floating Chatbox (Javascripting)

Post by RoNo on December 8th 2010, 9:39 pm

Scripts with dollar sign characters won't work
on fm sites... you'll need to host/link them at
a site such as youravascript.com

Remove this bottom script
Code:
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {
 
 
 
$("img[rel]").overlay();
});
</script>

Create a file in notepad or TextPad with script code only
( no <script> </script> tags )
save it as: flowplay.js & host/link it.

Example (replace your bottom script with this)
Code:
<script type="text/javascript" src="http://yourjavascript.com/28611150412/flowplay.js"></script>
You can use that script but, to be sure, it's a good idea
to upload/host your own file in case the script is deleted.

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum