1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.



Collapsible Cbox/shoutbox

Discussion in 'General' started by kismet, Jan 31, 2011.

Page 1 of 12
  1. Offline

    kismet "hack it 'til it works"

    • Graphics Artist
    • 'D Contributor
    Member Since:
    Feb 9, 2008
    Total Posts:
    7,639
    Likes Received:
    1,381
    Gender:
    Female
    Location:
    the internet
    • Awards
    Note: Any problems you have with this code, shoot me a PM [IMG]
    Credit: If you use this for your site/skin, it would be nice if you provided credit where the skin-maker name is mentioned, or where the credits are.
    Hack for SMF: Here!

    COLLAPSIBLE CBOX




    Disclaimer: this code'll work for skins which conform to w3 standards.



    Written by: kismet
    Coding help / Inspiration: Request from Lorreign & Rosalieart turned re-usable. [IMG]
    Preview: http://z7.invisionfree.com/Ama_Nesciri
    What it does: Pop-in/pop-out Cbox; positions vary

    Installation Instructions:
    You lovely Zetaboards and Jcink users SKIP THIS STEP and go to the Code section.
    First off, in the header (between <head> and </head> of your document (in the Javascript box), put in this line:
    Code: Select
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
    Now you have to think of how we want our cbox to appear. Do you want a horizontal button or a vertical one?

    Update for those who have issues with the cookies version: PM me for info if you need more help with it: if you've got more than one version of jQuery on the page, please make sure you only have ONE. You only need one, anyway. This widget works with most versions of jQuery, if not all, so just pick the one that fits your site best (latest, if you like) and make sure it's only referenced once on the page. Jcink users, you already have it in your <% JAVASCRIPT %> tag, so you don't need to add it.

    Code:
    Depending on what you want, pick one of the following two:

    1) Right under the code you've just added, put in this code for horizontal buttons:
    Code: Select
    <script type='text/javascript'>
/**code written by kismet of RPG-Directory.com**/
$(function(){ $('#horizontal-toggle').click(function(){ $('#chatter').toggle(); });});</script>
    OR
    For persistent Cbox states (with cookies), put this in instead:
    Code: Select
    <script type='text/javascript' src='http://yourjavascript.com/1336423188/jquery.cookie.min.js'></script>
<script type='text/javascript'>
/**code written by kismet of RPG-Directory.com**/
$(function(){
var website = 'YOURWEBSITENAME';
var cookie1 = website+'cbox'; if($.cookie(cookie1) === 'on' || $.cookie(cookie1) === null){ $('#chatter').hide(); } else { $('#chatter').show(); } $('#horizontal-toggle').click(function(){ if($.cookie(cookie1) === 'on' || $.cookie(cookie1) === null){ $.cookie(cookie1, 'off'); $('#chatter').show(); } else { $('#chatter').hide(); $.cookie(cookie1, 'on'); } }); }); </script>
    Remember to replace YOURWEBSITENAME with the name of your website, with NO SPACES and USING NO MORE THAN 10 LETTERS.
    For all those who have their own hosting sites, would you mind hosting the code in bold on your own? It would be awesome if you did, thanks! XD

    At the end of your code for your body (before the </body> tag). IPB 1.3 (Invisionfree) users should put this after their very last </div> or </table> tag, in the box marked Footer of the Board Wrappers.
    Code: Select
    <div id='horizontal-toggle'>[b]Toggle Cbox[/b]</div>
<div id='chatter'>
<!--PUT IN YOUR CBOX/SHOUTBOX ETC CODE HERE-->
</div>
    2) Right under the code you've just added, put in this code for vertical buttons:
    Code: Select
    <script type='text/javascript'>
/**code written by kismet of RPG-Directory.com**/
$(function(){ $('#vertical-toggle').click(function(){ $('#chatter').toggle(); });});</script>
    OR
    For persistent Cbox states (with cookies), put this in instead:
    Code: Select
    <script type='text/javascript' src='http://yourjavascript.com/1211131136/jquery.cookie.js'></script>
<script type='text/javascript'>
/**code written by kismet of RPG-Directory.com**/
$(function(){
var website = 'YOURWEBSITENAME';
var cookie1 = website+'cbox'; if($.cookie(cookie1) === 'on' || $.cookie(cookie1) === null){ $('#chatter').hide(); } else { $('#chatter').show(); } $('#vertical-toggle').click(function(){ if($.cookie(cookie1) === 'on' || $.cookie(cookie1) === null){ $.cookie(cookie1, 'off'); $('#chatter').show(); } else { $('#chatter').hide(); $.cookie(cookie1, 'on'); } }); }); </script>
    Remember to replace YOURWEBSITENAME with the name of your website, with NO SPACES and USING NO MORE THAN 10 LETTERS.
    For all those who have their own hosting sites, would you mind hosting the code in bold on your own? It would be awesome if you did, thanks! XD

    At the end of your code for your body (before the </body> tag), i.e., after the very last </div> or </table> tag, in the box marked Footer of the Board Wrappers.
    Code: Select
    <div id='vertical-toggle'>
<ul><li>T</li>
<li>o</li>
<li>g</li>
<li>g</li>
<li>l</li>
<li>e</li>
<li> </li>
<li>C</li>
<li>b</li>
<li>o</li>
<li>x</li></ul></div>
<div id='chatter'>
<!--PUT IN YOUR CBOX/SHOUTBOX ETC CODE HERE-->
</div>
    Feel free to change the button text to your liking, but be careful to keep the <li> tags before and after each letter.

    Now you need to choose where on the page you want your button and cbox to be. Options are top-left, top-right, bottom-left, bottom-right. This is determined by CSS. Pick one of the following code blurbs and put it preferably at the end of your Style Sheet/CSS. Feel free to change the CSS to match the colour scheme of your site:

    For Horizontal Bottom-Right Corner:
    Code: Select
    #horizontal-toggle {
 
position: fixed;
bottom: 0px;
right: 35px;
width: 320px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px 0px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px;
color: #888;
text-align: center;
cursor: pointer;
}
 
#chatter {
padding: 10px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
position: fixed;
bottom: 35px;
right: 35px;
z-index: 100;
display: none;
}
    For Vertical Bottom-Right Corner:
    Code: Select
    #vertical-toggle {
position: fixed;
bottom: 35px;
right: 0px;
height: 343px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
cursor: pointer;
padding: 0px 5px;
}
#vertical-toggle ul {
list-style: none;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px;
color: #888;
text-align: center;
padding: 5px;
margin: 0px;
margin-top: 80px;
}
 
#chatter {
padding: 10px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
position: fixed;
bottom: 35px;
right: 35px;
z-index: 100;
display: none;
}
    For Horizontal Bottom-Left Corner:
    Code: Select
    #horizontal-toggle {
position: fixed;
bottom: 0px;
left: 35px;
width: 320px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px 0px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px;
color: #888;
text-align: center;
cursor: pointer;
}
 
#chatter {
padding: 10px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
position: fixed;
bottom: 35px;
left: 35px;
z-index: 100;
display: none;
}
    For Vertical Bottom-Left Corner:
    Code: Select
    #vertical-toggle {
position: fixed;
bottom: 35px;
left: 0px;
height: 343px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
cursor: pointer;
padding: 0px 5px;
}
#vertical-toggle ul {
list-style: none;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px;
color: #888;
text-align: center;
padding: 5px;
margin: 0px;
margin-top: 80px;
}
 
#chatter {
padding: 10px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
position: fixed;
bottom: 35px;
left: 35px;
z-index: 100;
display: none;
}
    For Horizontal Top-Right Corner:
    Code: Select
    #horizontal-toggle {
position: fixed;
top: 0px;
right: 35px;
width: 320px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px 0px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px;
color: #888;
text-align: center;
cursor: pointer;
}
 
#chatter {
padding: 10px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
position: fixed;
top: 35px;
right: 35px;
z-index: 100;
display: none;
}
    For Vertical Top-Right Corner:
    Code: Select
    #vertical-toggle {
position: fixed;
top: 35px;
right: 0px;
height: 343px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
cursor: pointer;
padding: 0px 5px;
}
#vertical-toggle ul {
list-style: none;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px;
color: #888;
text-align: center;
padding: 5px;
margin: 0px;
margin-top: 80px;
}
 
#chatter {
padding: 10px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
position: fixed;
top: 35px;
right: 35px;
z-index: 100;
display: none;
}
    For Horizontal Top-Left Corner:
    Code: Select
    #horizontal-toggle {
position: fixed;
top: 0px;
left: 35px;
width: 320px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px 0px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px;
color: #888;
text-align: center;
cursor: pointer;
}
 
#chatter {
padding: 10px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
position: fixed;
top: 35px;
left: 35px;
z-index: 100;
display: none;
}
    For Vertical Top-Right Corner:
    Code: Select
    #vertical-toggle {
position: fixed;
top: 35px;
left: 0px;
height: 343px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
cursor: pointer;
padding: 0px 5px;
}
#vertical-toggle ul {
list-style: none;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px;
color: #888;
text-align: center;
padding: 5px;
margin: 0px;
margin-top: 80px;
}
 
#chatter {
padding: 10px;
background-image: url(YOUR URL);
background-color: #??????;
border: 1px solid #d4d0d9;
position: fixed;
top: 35px;
left: 35px;
z-index: 100;
display: none;
}
    Internet Explorer Compatibility
    This documentation should tell you how to solve the issue of IE incompatibility. If you have problems with that, don't hesitate to shoot me a PM.
    kismet, Jan 31, 2011
    #1
    Asper Florent, TenthMuse, Misha and 11 others like this.
  2. Offline

    Lorreign did I put on deodorant this morning?

    Member Since:
    Sep 30, 2007
    Total Posts:
    6,466
    Likes Received:
    3,905
    Gender:
    Female
    Location:
    North Carolina
    • Awards
    *gives lots of love*
    Lorreign, Jan 31, 2011
    #2
  3. Offline

    SpazzyMal BO_OBIES?!

    • Support Coder
    Member Since:
    Sep 19, 2007
    Total Posts:
    2,111
    Likes Received:
    127
    Gender:
    Female
    • Awards
    <div align=center><span style='font-size:17pt;line-height:100%'>ACCEPTED GENERAL CODE</span>
    <span style='font-size:11pt;line-height:100%'>[color=7f323a]THANK YOU FOR YOUR SUBMISSION[/color]</span>
    Thank you for submitting to our codex and giving forums everywhere an easily installable piece of code to enrich their board! Keep up the great work and we look forward to seeing more from you!</div>
    SpazzyMal, Jan 31, 2011
    #3
  4. Offline

    LOLABEE Wit beyond measure is man’s greatest treasure.

    Member Since:
    Jun 23, 2010
    Total Posts:
    624
    Likes Received:
    120
    Gender:
    Female
    Location:
    US
    I've been looking for one of these! Thanks so much! :D I'm going to be using it on Charming.

    EDIT:
    Actually I need some help. This is what it looks like on my test board: http://z15.invisionfree.com/Charmingstestboard/index.php?

    The section I have in my javascript:
    Code: Select
    <script type=&#39;text/javascript&#39; src=&#39;https&#58;//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js&#39;></script><script type=&#39;text/javascript&#39;>$&#40;function&#40;&#41;{ $&#40;&#39;#vertical-toggle&#39;&#41;.click&#40;function&#40;&#41;{ $&#40;&#39;#chatter&#39;&#41;.toggle&#40;&#41;; }&#41;;}&#41;;</script>
    The part about it in my footers (it's at the very bottom of my footers):
    Code: Select
    <div id=&#39;vertical-toggle&#39;>
<ul><li>T</li>
<li>o</li>
<li>g</li>
<li>g</li>
<li>l</li>
<li>e</li>
<li>&nbsp;</li>
<li>C</li>
<li>b</li>
<li>o</li>
<li>x</li></ul></div>
<div id=&#39;chatter&#39;>
<!--PUT IN YOUR CBOX/SHOUTBOX ETC CODE HERE-->
</div>
<div id=&#39;chatter&#39;>
<!--PUT IN YOUR CBOX/SHOUTBOX ETC CODE HERE--><!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id=&#34;cboxdiv&#34; style=&#34;text-align&#58; center; line-height&#58; 0&#34;>
<div><iframe frameborder=&#34;0&#34; width=&#34;180&#34; height=&#34;210&#34; src=&#34;http&#58;//www5.cbox.ws/box/?boxid=527065&amp;boxtag=1s12ay&amp;sec=main&#34; marginheight=&#34;2&#34; marginwidth=&#34;2&#34; scrolling=&#34;auto&#34; allowtransparency=&#34;yes&#34; name=&#34;cboxmain&#34; style=&#34;border&#58;#FFFFFF 1px solid;&#34; id=&#34;cboxmain&#34;></iframe></div>
<div><iframe frameborder=&#34;0&#34; width=&#34;180&#34; height=&#34;75&#34; src=&#34;http&#58;//www5.cbox.ws/box/?boxid=527065&amp;boxtag=1s12ay&amp;sec=form&#34; marginheight=&#34;2&#34; marginwidth=&#34;2&#34; scrolling=&#34;no&#34; allowtransparency=&#34;yes&#34; name=&#34;cboxform&#34; style=&#34;border&#58;#FFFFFF 1px solid;border-top&#58;0px&#34; id=&#34;cboxform&#34;></iframe></div>
</div>
<!-- END CBOX -->
</div>
    And my CSS:
    Code: Select
    #vertical-toggle {
position&#58; fixed;
bottom&#58; 35px;
right&#58; 0px;
height&#58; 210px; //make sure this is the total height of your cbox/shoutbox
-webkit-border-radius&#58; 15px; //keep this in if you want round corners
-moz-border-radius&#58; 15px; //keep this in if you want round corners
border-radius&#58; 15px; //keep this in if you want round corners
background-image&#58; url&#40;http&#58;//img.photobucket.com/albums/v709/kiwi_collective/background-3.pngL&#41;; //if you have a pattern for your bg put it here
background-color&#58; #ffffff; //if needed, preferably like your background
border&#58; 1px solid #ffffff; //preferably like the background of your row4 or similar
cursor&#58; pointer;
padding&#58; 0px 5px;
}
#vertical-toggle ul {
list-style&#58; none;
font-family&#58; Verdana, Tahoma, Arial, sans-serif;
font-size&#58; 11px;
color&#58; #ffffff; //preferably a colour that matches your skin, but contrasts with the background of the button
text-align&#58; center;
padding&#58; 5px;
margin&#58; 0px;
margin-top&#58; 80px; // adjust this to centre your text vertically in the div
}

#chatter {
padding&#58; 10px;
background-image&#58; url&#40;YOUR URL&#41;; //if you have a pattern for your bg put it here
background-color&#58; #ffffff; //if needed, preferably like your background
border&#58; 1px solid #ffffff; //preferably like the background of your row4 or similar
position&#58; fixed;
bottom&#58; 35px;
right&#58; 35px;
display&#58; none; //do not change this!!
}
    LOLABEE, Feb 2, 2011
    #4
  5. Offline

    sarahj Oh wait..was that...did your hairline just recede?

    Member Since:
    Dec 6, 2007
    Total Posts:
    1,574
    Likes Received:
    8
    • Awards
    ^ Same problem on my test board. Also tried vertical-bottom-left.
    sarahj, Feb 2, 2011
    #5
  6. Offline

    LOLABEE Wit beyond measure is man’s greatest treasure.

    Member Since:
    Jun 23, 2010
    Total Posts:
    624
    Likes Received:
    120
    Gender:
    Female
    Location:
    US
    Okay, I figured it out by viewing the page source of the preview website I think there was a part of the code that was missing in the javascript section. Not sure, but here it what I have now:

    For the Javascript section:
    Code: Select
    <script type=&#39;text/javascript&#39; src=&#39;https&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&#39;></script>
<script type=&#39;text/javascript&#39;>
$&#40;function&#40;&#41;{
$&#40;&#39;#horizontal-toggle&#39;&#41;.text&#40;&#39;Show Cbox&#39;&#41;;
$&#40;&#39;#vertical-toggle&#39;&#41;.click&#40;function&#40;&#41;{ 
$&#40;&#39;#chatter&#39;&#41;.toggle&#40;&#41;;
if&#40;$&#40;&#39;#horizontal-toggle&#39;&#41;.text&#40;&#41;==&#39;Show Cbox&#39;&#41;
$&#40;&#39;#horizontal-toggle&#39;&#41;.text&#40;&#39;Hide Cbox&#39;&#41;;
else $&#40;&#39;#horizontal-toggle&#39;&#41;.text&#40;&#39;Show Cbox&#39;&#41;;
}&#41;;
$&#40;&#39;#horizontal-toggle&#39;&#41;.click&#40;function&#40;&#41;{ 
$&#40;&#39;#chatter&#39;&#41;.toggle&#40;&#41;;
if&#40;$&#40;&#39;#horizontal-toggle&#39;&#41;.text&#40;&#41;==&#39;Show Cbox&#39;&#41;
$&#40;&#39;#horizontal-toggle&#39;&#41;.text&#40;&#39;Hide Cbox&#39;&#41;;
else $&#40;&#39;#horizontal-toggle&#39;&#41;.text&#40;&#39;Show Cbox&#39;&#41;;
}&#41;;
}&#41;;</script>
    And footers:
    Code: Select
    <div id=&#39;horizontal-toggle&#39;>Toggle Cbox</div>
<div id=&#39;vertical-toggle&#39;><ul>
<li>T</li>
<li>o</li>
<li>g</li>
<li>g</li>
<li>l</li>
<li>e</li>
<li>&nbsp;</li>
<li>C</li>

<li>b</li>
<li>o</li>
<li>x</li></ul></div>
<div id=&#39;chatter&#39;>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id=&#34;cboxdiv&#34; style=&#34;text-align&#58; center; line-height&#58; 0&#34;>
<div><iframe frameborder=&#34;0&#34; width=&#34;300&#34; height=&#34;245&#34; src=&#34;http&#58;//www5.cbox.ws/box/?boxid=527065&amp;boxtag=1s12ay&amp;sec=main&#34; marginheight=&#34;2&#34; marginwidth=&#34;2&#34; scrolling=&#34;auto&#34; allowtransparency=&#34;yes&#34; name=&#34;cboxmain&#34; style=&#34;border&#58;#FFFFFF 1px solid;&#34; id=&#34;cboxmain&#34;></iframe></div>
<div><iframe frameborder=&#34;0&#34; width=&#34;300&#34; height=&#34;75&#34; src=&#34;http&#58;//www5.cbox.ws/box/?boxid=527065&amp;boxtag=1s12ay&amp;sec=form&#34; marginheight=&#34;2&#34; marginwidth=&#34;2&#34; scrolling=&#34;no&#34; allowtransparency=&#34;yes&#34; name=&#34;cboxform&#34; style=&#34;border&#58;#FFFFFF 1px solid;border-top&#58;0px&#34; id=&#34;cboxform&#34;></iframe></div>
</div>
<!-- END CBOX -->
</div>
    The CSS part looks the same as the code provided in the first post.

    EDIT:
    It works perfectly on my test board, but when I put it on my regular board nothing shows up. I think it might be because I have conflicting codes, but I really don't know.
    My Javascript:

    EDIT2:
    Figured it out again. It was conflicting with the mod I had in the footers that added a link to the top 10 posters of the day at the bottom of the forum. I removed that and now it's working great. Yay for deductive reasoning! :D
    LOLABEE, Feb 2, 2011
    #6
  7. Offline

    kismet "hack it 'til it works"

    • Graphics Artist
    • 'D Contributor
    Member Since:
    Feb 9, 2008
    Total Posts:
    7,639
    Likes Received:
    1,381
    Gender:
    Female
    Location:
    the internet
    • Awards
    There was nothing missing from the code - the extra code that was on my testboard (which has now been removed) was to change text, not anything else.

    If it wasn't working, it was something missing when you translated it from this thread to your site.

    In your example here:
    You put the chatter element twice and closed it three times, which would have made any code not work.

    Edit: Ooops, my fault as well: managed to give you guys the wrong library; should be fine now.
    kismet, Feb 3, 2011
    #7
  8. Offline

    Lorreign did I put on deodorant this morning?

    Member Since:
    Sep 30, 2007
    Total Posts:
    6,466
    Likes Received:
    3,905
    Gender:
    Female
    Location:
    North Carolina
    • Awards
    hey kismet, it doesn't seem to be working for me either. nothing toggles when I click at it.

    when you get a chance, can you look at it on my testboard and tell me what I've done wrong?

    http://z10.invisionfree.com/lorrmazing/index.php?

    my javascript

    Code: Select
    <script type=&#39;text/javascript&#39; src=&#39;https&#58;//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js&#39;></script>
<script type=&#39;text/javascript&#39;>
/**code written by kismet of RPG-Directory.com**/
$&#40;function&#40;&#41;{ $&#40;&#39;#vertical-toggle&#39;&#41;.click&#40;function&#40;&#41;{ $&#40;&#39;#chatter&#39;&#41;.toggle&#40;&#41;; }&#41;;}&#41;;</script>
    and board footer

    Code: Select
    <div id=&#39;vertical-toggle&#39;>
<ul><li>T</li>
<li>o</li>
<li>g</li>
<li>g</li>
<li>l</li>
<li>e</li>
<li>&nbsp;</li>
<li>C</li>
<li>b</li>
<li>o</li>
<li>x</li></ul></div>
<div id=&#39;chatter&#39;>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id=&#34;cboxdiv&#34; style=&#34;text-align&#58; center; line-height&#58; 0&#34;>
<div><iframe frameborder=&#34;0&#34; width=&#34;200&#34; height=&#34;179&#34; src=&#34;http&#58;//www4.cbox.ws/box/?boxid=3867647&amp;boxtag=9vfcww&amp;sec=main&#34; marginheight=&#34;2&#34; marginwidth=&#34;2&#34; scrolling=&#34;auto&#34; allowtransparency=&#34;yes&#34; name=&#34;cboxmain&#34; style=&#34;border&#58; 0px solid;&#34; id=&#34;cboxmain&#34;></iframe></div>
<div><iframe frameborder=&#34;0&#34; width=&#34;200&#34; height=&#34;82&#34; src=&#34;http&#58;//www4.cbox.ws/box/?boxid=3867647&amp;boxtag=9vfcww&amp;sec=form&#34; marginheight=&#34;2&#34; marginwidth=&#34;2&#34; scrolling=&#34;no&#34; allowtransparency=&#34;yes&#34; name=&#34;cboxform&#34; style=&#34;border&#58; 0px solid;border-top&#58;0px&#34; id=&#34;cboxform&#34;></iframe></div>
</div>
<!-- END CBOX -->
</div>
    the css isn't changed yet (just copied yours straight from here) but that wouldn't make it not work, would it?
    Lorreign, Feb 3, 2011
    #8
  9. Offline

    kismet "hack it 'til it works"

    • Graphics Artist
    • 'D Contributor
    Member Since:
    Feb 9, 2008
    Total Posts:
    7,639
    Likes Received:
    1,381
    Gender:
    Female
    Location:
    the internet
    • Awards
    If the CSS is just like it is here, it may be broken, and render the whole thing unusable. Try adding the link you have for your BG instead of 'URL HERE'.

    Also the header script should be without the '-ui' bit:
    kismet, Feb 4, 2011
    #9
  10. Offline

    RhapsodyInk Member

    Member Since:
    Sep 5, 2008
    Total Posts:
    89
    Likes Received:
    0
    Gender:
    Female
    Location:
    Ontario, Canada
    so I've been play with this and can't figure out what's wrong, can someone help? I'm trying to do the vertical bottom right hand corner option. On my site, the toggle appears but instead of opening on the right hand side like it's suppose to, it opens all the way down at the bottom of my page in the center. Anyone have any ideas?


    JAVASCRIPT
    Code: Select
    <script type=&#39;text/javascript&#39; src=&#39;https&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&#39;></script>
<script type=&#39;text/javascript&#39;>
/**code written by kismet of RPG-Directory.com**/
$&#40;function&#40;&#41;{ $&#40;&#39;#vertical-toggle&#39;&#41;.click&#40;function&#40;&#41;{ $&#40;&#39;#chatter&#39;&#41;.toggle&#40;&#41;; }&#41;;}&#41;;</script>

    FOOTER
    Code: Select
    <div id=&#39;vertical-toggle&#39;>
<ul><li>T</li>
<li>o</li>
<li>g</li>
<li>g</li>
<li>l</li>
<li>e</li>
<li>&nbsp;</li>
<li>C</li>
<li>b</li>
<li>o</li>
<li>x</li></ul></div>
<div id=&#39;chatter&#39;>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id=&#34;cboxdiv&#34; style=&#34;text-align&#58; center; line-height&#58; 0&#34;>
<div><iframe frameborder=&#34;0&#34; width=&#34;300&#34; height=&#34;343&#34; src=&#34;http&#58;//www4.cbox.ws/box/?boxid=3882053&amp;boxtag=yyf535&amp;sec=main&#34; marginheight=&#34;2&#34; marginwidth=&#34;2&#34; scrolling=&#34;auto&#34; allowtransparency=&#34;yes&#34; name=&#34;cboxmain&#34; style=&#34;border&#58;#FFFFFF 1px solid;&#34; id=&#34;cboxmain&#34;></iframe></div>
<div><iframe frameborder=&#34;0&#34; width=&#34;300&#34; height=&#34;75&#34; src=&#34;http&#58;//www4.cbox.ws/box/?boxid=3882053&amp;boxtag=yyf535&amp;sec=form&#34; marginheight=&#34;2&#34; marginwidth=&#34;2&#34; scrolling=&#34;no&#34; allowtransparency=&#34;yes&#34; name=&#34;cboxform&#34; style=&#34;border&#58;#FFFFFF 1px solid;border-top&#58;0px&#34; id=&#34;cboxform&#34;></iframe></div>
</div>
<!-- END CBOX -->
</div>
    CSS
    Code: Select
    #vertical-toggle {
position&#58; fixed;
bottom&#58; 35px;
right&#58; 0px;
height&#58; 343px; //make sure this is the total height of your cbox/shoutbox
-webkit-border-radius&#58; 15px; //keep this in if you want round corners
-moz-border-radius&#58; 15px; //keep this in if you want round corners
border-radius&#58; 15px; //keep this in if you want round corners
background-image&#58; url&#40;http&#58;//i205.photobucket.com/albums/bb314/CriminalAffair/Ocean%20of%20Emptiness/ANNOUNCEMENTbg.png&#41;; //if you have a pattern for your bg put it here
background-color&#58; #404040; //if needed, preferably like your background
border&#58; 1px solid #d4d0d9; //preferably like the background of your row4 or similar
cursor&#58; pointer;
padding&#58; 0px 5px;
}
#vertical-toggle ul {
list-style&#58; none;
font-family&#58; Verdana, Tahoma, Arial, sans-serif;
font-size&#58; 11px;
color&#58; #888; //preferably a colour that matches your skin, but contrasts with the background of the button
text-align&#58; center;
padding&#58; 5px;
margin&#58; 0px;
margin-top&#58; 80px; // adjust this to centre your text vertically in the div
}

#chatter {
padding&#58; 10px;
background-image&#58; url&#40;http&#58;//i205.photobucket.com/albums/bb314/CriminalAffair/Ocean%20of%20Emptiness/ANNOUNCEMENTbg.png&#41;; //if you have a pattern for your bg put it here
background-color&#58; #404040; //if needed, preferably like your background
border&#58; 1px solid #d4d0d9; //preferably like the background of your row4 or similar
position&#58; fixed;
bottom&#58; 35px;
right&#58; 35px;
display&#58; none; //do not change this!!
}
    RhapsodyInk, Feb 9, 2011
    #10
  11. Offline

    kismet "hack it 'til it works"

    • Graphics Artist
    • 'D Contributor
    Member Since:
    Feb 9, 2008
    Total Posts:
    7,639
    Likes Received:
    1,381
    Gender:
    Female
    Location:
    the internet
    • Awards
    Can you link me to your site?
    kismet, Feb 10, 2011
    #11
  12. Offline

    RhapsodyInk Member

    Member Since:
    Sep 5, 2008
    Total Posts:
    89
    Likes Received:
    0
    Gender:
    Female
    Location:
    Ontario, Canada
    Hi Kismet,

    I PMed you the linkage as well as log in info so you can access the site if need be :)
    RhapsodyInk, Feb 10, 2011
    #12
  13. Offline

    sellaphix formerly dinn

    • Community Challenger
    Member Since:
    Nov 25, 2008
    Total Posts:
    981
    Likes Received:
    504
    Location:
    Iowa
    Where would we stick these codes for Simple Machines Forum?
    sellaphix, Feb 10, 2011
    #13
  14. Offline

    kismet "hack it 'til it works"

    • Graphics Artist
    • 'D Contributor
    Member Since:
    Feb 9, 2008
    Total Posts:
    7,639
    Likes Received:
    1,381
    Gender:
    Female
    Location:
    the internet
    • Awards
    Dinn: I'm not familiar with the layout of the code for SMF, but I imagine the HTML goes anywhere after your last wrapper tag.
    kismet, Feb 10, 2011
    #14
  15. Offline

    blaine Member

    Member Since:
    Jun 2, 2008
    Total Posts:
    118
    Likes Received:
    0
    Whoa, awesome code! Would you let me use the toggle cbox code as a toggle information box instead? Credit would still be given to you for the code.
    blaine, Feb 13, 2011
    #15
  16. Offline

    Dun Member

    Member Since:
    May 15, 2008
    Total Posts:
    2,721
    Likes Received:
    3,575
    Gender:
    Female
    Location:
    Initium
    • Awards
    I'm pretty sure that this code is the coolest thing since sliced bread. I'm enjoying it thoroughly at Initium, where I previously had to scroll all the way to the bottom of the page to see the Cbox. Now I'm able to keep the Cbox with me while I scroll, and having the Cbox toggle button visible all the time reminds me to check for new messages. :) It was extremely easy for me to customize and install . . . and that's noteworthy because I am an idiot when it comes to coding.

    Thanks, kismet! ;)
    Dun, Feb 13, 2011
    #16
  17. Offline

    kismet "hack it 'til it works"

    • Graphics Artist
    • 'D Contributor
    Member Since:
    Feb 9, 2008
    Total Posts:
    7,639
    Likes Received:
    1,381
    Gender:
    Female
    Location:
    the internet
    • Awards
    Sure. :)

    And thanks Dun!
    kismet, Feb 14, 2011
    #17
  18. Offline

    RhapsodyInk Member

    Member Since:
    Sep 5, 2008
    Total Posts:
    89
    Likes Received:
    0
    Gender:
    Female
    Location:
    Ontario, Canada
    Just an update: the code is working a-okay now! Seems that it wasn't a problem with the code itself but just some conflicting errors! Thanks to Kismet though, who ever so patiently helped me sort it all out anyways! You rock ^.^
    RhapsodyInk, Feb 14, 2011
    #18
  19. Offline

    Lorreign did I put on deodorant this morning?

    Member Since:
    Sep 30, 2007
    Total Posts:
    6,466
    Likes Received:
    3,905
    Gender:
    Female
    Location:
    North Carolina
    • Awards
    any idea how to make the javascript work on ipb3? I've opened the globalTemplate and have tried putting it in a couple of places between the head tags and certain places make my click it menus expand automatically when I put it in, and if I put it above those it just doesn't do anything.

    Code: Select
    <head>
Â<meta http-equiv=&#34;content-type&#34; content=&#34;text/html; charset={$this->settings&#91;&#39;gb_char_set&#39;&#93;}&#34; />
Â<title>{$header_items&#91;&#39;title&#39;&#93;}<if test=&#34;pagenumberintitle&#58;&#124;&#58;$header_items&#91;&#39;page&#39;&#93;&#34;> {$this->lang->words&#91;&#39;page_title_page&#39;&#93;} {$header_items&#91;&#39;page&#39;&#93;}</if></title>
Â<link rel=&#34;shortcut icon&#34; href=&#39;<if test=&#34;$this->registry->output->isHTTPS&#34;>{$this->settings&#91;&#39;board_url_https&#39;&#93;}<else />{$this->settings&#91;&#39;board_url&#39;&#93;}</if>/favicon.ico&#39; />
Â<link rel=&#34;image_src&#34; href=&#39;{$this->settings&#91;&#39;meta_imagesrc&#39;&#93;}&#39; />
<script type=&#39;text/javascript&#39;>
Â//<&#91;!CDATA&#91;
Â	jsDebug = {parse expression=&#34;intval&#40;$this->settings&#91;&#39;_jsDebug&#39;&#93;&#41;&#34;}; /* Must come before JS includes */ Â	USE_RTE = <if test=&#34;userte&#58;&#124;&#58;$this->memberData&#91;&#39;members_editor_choice&#39;&#93; == &#39;rte&#39; && $this->memberData&#91;&#39;_canUseRTE&#39;&#93; === TRUE&#34;>1<else />0</if>;
Â	DISABLE_AJAX = parseInt&#40;{$this->settings&#91;&#39;disable_text_ajax&#39;&#93;}&#41;; /* Disables ajax requests where text is sent to the DB; helpful for charset issues */
Â	inACP Â = false;
Â//&#93;&#93;>
Â</script>
Â{parse template=&#34;includeCSS&#34; group=&#34;global&#34; params=&#34;$css&#34;}
Â{parse template=&#34;includeMeta&#34; group=&#34;global&#34; params=&#34;$metaTags&#34;}
Â<meta property=&#34;og&#58;title&#34; content=&#34;{IPSText&#58;&#58;htmlspecialchars&#40; str_replace&#40; &#39; - &#39; . $this->settings&#91;&#39;board_name&#39;&#93;, &#39;&#39;, $header_items&#91;&#39;title&#39;&#93; &#41; &#41;}&#34;/>
Â<meta property=&#34;og&#58;site_name&#34; content=&#34;{$this->settings&#91;&#39;board_name&#39;&#93;}&#34;/>
Â<meta property=&#34;og&#58;image&#34; content=&#34;{$this->settings&#91;&#39;meta_imagesrc&#39;&#93;}&#34;/>
Â{parse template=&#34;includeJS&#34; group=&#34;global&#34; params=&#34;$jsModules&#34;}
Â{parse template=&#34;includeFeeds&#34; group=&#34;global&#34; params=&#34;$documentHeadItems&#34;}
Â{parse template=&#34;includeRTL&#34; group=&#34;global&#34; params=&#34;&#34;} Â
Â{parse template=&#34;includeVars&#34; group=&#34;global&#34; params=&#34;&#34;}
Â<script type=&#39;text/javascript&#39;>
Â	Loader.boot&#40;&#41;;
Â</script>

</head>
    Lorreign, Feb 14, 2011
    #19
  20. Offline

    kismet "hack it 'til it works"

    • Graphics Artist
    • 'D Contributor
    Member Since:
    Feb 9, 2008
    Total Posts:
    7,639
    Likes Received:
    1,381
    Gender:
    Female
    Location:
    the internet
    • Awards
    Which ones are your click it menus and how are they expanding?
    kismet, Feb 15, 2011
    #20
Page 1 of 12
Tags: kiscodes, collapsible box, kismet, javascript, widget

Share This Page