Code Needs Editing For Floating Chatbox (Javascripting)
5 posters
Page 1 of 1
Code Needs Editing For Floating Chatbox (Javascripting)
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;
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
Thanks In Advance,
Kempo.
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?">
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
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
Re: Code Needs Editing For Floating Chatbox (Javascripting)
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
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
- Posts : 22186
Reputation : 1839
Language : test
Re: Code Needs Editing For Floating Chatbox (Javascripting)
well my description gave the exact specifics, but if it means that much, I'll just switch the two around....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 titlesThe 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
Kempo- New Member
- Posts : 10
Reputation : 0
Language : English
Re: Code Needs Editing For Floating Chatbox (Javascripting)
hmm...... seems like you guys have as little idea as me......
well I'll give it one last bump before giving up hope......
well I'll give it one last bump before giving up hope......
Kempo- New Member
- Posts : 10
Reputation : 0
Language : English
Re: Code Needs Editing For Floating Chatbox (Javascripting)
Don't give up hope. I have absolutaly no idea how, but I almost do. So, others will
~Valo
~Valo
Puttfunhouse.- Forumember
- Posts : 58
Reputation : 0
Language : English
Location : ****
Re: Code Needs Editing For Floating Chatbox (Javascripting)
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.
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.
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>
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.
Re: Code Needs Editing For Floating Chatbox (Javascripting)
Excellent works perfect cheers mate
Jay Hatchell- New Member
- Posts : 15
Reputation : 0
Language : English
Re: Code Needs Editing For Floating Chatbox (Javascripting)
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....
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.
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
Re: Code Needs Editing For Floating Chatbox (Javascripting)
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
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)
to upload/host your own file in case the script is deleted.
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>
to upload/host your own file in case the script is deleted.
Similar topics
» editing the chatbox with template editing
» CANNOT figure out this floating menu code!
» Code editing
» help me in code editing
» Chatbox Color Editing
» CANNOT figure out this floating menu code!
» Code editing
» help me in code editing
» Chatbox Color Editing
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum