Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Putting a floating chat on my site

    Hi CodingForums! This is my first time visiting here but here's my question.

    I own a website and a forum and am in a network with a few other forums. I wanted to add a floating chat bar (just like the one on Facebook or Gmail) where the users of the forum could chat while browsing the forum. Is there a free service that can provide this? I thought about using Zopim, which is actually quite close to what I want, with a floating minimizable chatbox on the bottom right corner, but it's not really a chatroom but more of a staff-to-customer application where the staff answers from elsewhere.

    Something that works as a floating toolbar with a minimizable chat room would be great. I've attempted to create my own chatroom and then float it on the site using javascript but it isn't working too well...

    Any ideas?

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    I think ajaxim would probably do what you want; you'd need to customize the script a bit to fit it into your page(s), but it's a nice floatable IM application.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bdl View Post
    I think ajaxim would probably do what you want; you'd need to customize the script a bit to fit it into your page(s), but it's a nice floatable IM application.
    Thanks, but it looks quite complicated...

    Here is the code I patched together. How can I remove the excess black border around it and also make the two images become included in the clickable?

    Code:
    <script language='javascript'>
    NS_ActualOpen=window.open;
    function NS_NullWindow(){this.window;}
    function 
    NS_NewOpen(url,nam,atr){return(new NS_NullWindow());}
    window.open=NS_NewOpen;
    </script>
    
    <div id="fixeddiv" style="
        position:absolute;
        width:230;height:380;right:0px;bottom:0px;
        background:#000000;">
    <script type="text/javascript"> 
    <!-- 
    var aPrefix = 'pr'; 
    
    function getCurrentState(mID) { 
    // returnvalues: 1 (closed), 2 (opened) 
    return document.cookie.substr(document.cookie.indexOf(mID+'=') + mID.length +1, 1); 
    } 
    
    function initMenu(mID) { 
    // make the header clickable, assign an ID 
    var kids = document.getElementById(mID).childNodes; 
    for (var i = 0; i < kids.length; i++) { 
    if (kids[i].className == 'header') { 
    kids[i].onclick = toggleMenu; 
    kids[i].id = aPrefix + mID; 
    } 
    } 
    // show or hide the menu 
    showMenu(mID); 
    } 
    
    function showMenu(mID) { 
    var currentState = getCurrentState(mID); 
    document.getElementById(aPrefix+mID).title = (currentState == 1? 'show' : 'hide') + ' this menu'; 
    document.getElementById(aPrefix+mID).style.cursor = 'pointer'; 
    var kids = document.getElementById(mID).childNodes; 
    for (var i = 0; i < kids.length; i++) { 
    if (kids[i].tagName == 'LI' && kids[i].className!= 'header') { 
    kids[i].style.display = currentState == 1? 'none' : 'block'; 
    } 
    } 
    } 
    
    function toggleMenu(e) { 
    if (window.event) e = window.event; 
    var mID = e.srcElement? e.srcElement.id : e.target.id; 
    mID = mID.substr(aPrefix.length); 
    // write the cookie 
    var oneyear = new Date(); oneyear.setFullYear(oneyear.getFullYear() + 1); 
    document.cookie = mID + '=' + (getCurrentState(mID) == 1? 2 : 1) + '; expires=' + oneyear.toGMTString() + '; path=/'; 
    // show or hide the menu 
    showMenu(mID); 
    } 
    // --> 
    </script> 
    
    <ul id="menu2"> 
    <li class="header"><img src="http://209.85.62.24/static/1/collapse.png"><img src="http://209.85.62.24/static/1/expand.png">Show/Hide Chat</li> 
    <li><div style="width:400px"><style>.mcrmeebo { display: block; background:url("http://widget.meebo.com/r.gif") no-repeat top 
    
    right; } .mcrmeebo:hover { background:url("http://widget.meebo.com/ro.gif") no-repeat top right; } </style><object 
    
    width="400" height="380"><param name="movie" value="http://widget.meebo.com/mcr.swf?id=DxeNTmkOrD"></param><embed 
    
    src="http://widget.meebo.com/mcr.swf?id=DxeNTmkOrD" type="application/x-shockwave-flash" width="400" height="380" 
    
    /></object></div></li>
    </ul> 
    <script type="text/javascript">initMenu('menu2');</script> 
    
    </div>
    <script type="text/javascript"><!--
    /* Script by: www.jtricks.com
     * Version: 20071127
     * Latest version:
     * www.jtricks.com/javascript/navigation/fixed_menu.html
     */
    fixedMenuId = 'fixeddiv';
    
    var fixedMenu = 
    {
        hasInner: typeof(window.innerWidth) == 'number',
        hasElement: document.documentElement != null
           && document.documentElement.clientWidth,
    
        menu: document.getElementById
            ? document.getElementById(fixedMenuId)
            : document.all
              ? document.all[fixedMenuId]
              : document.layers[fixedMenuId]
    };
    
    fixedMenu.computeShifts = function()
    {
        fixedMenu.shiftX = fixedMenu.hasInner
            ? pageXOffset
            : fixedMenu.hasElement
              ? document.documentElement.scrollLeft
              : document.body.scrollLeft;
        if (fixedMenu.targetLeft > 0)
            fixedMenu.shiftX += fixedMenu.targetLeft;
        else
        {
            fixedMenu.shiftX += 
                (fixedMenu.hasElement
                  ? document.documentElement.clientWidth
                  : fixedMenu.hasInner
                    ? window.innerWidth - 0
                    : document.body.clientWidth)
                - fixedMenu.targetRight
                - fixedMenu.menu.offsetWidth;
        }
    
        fixedMenu.shiftY = fixedMenu.hasInner
            ? pageYOffset
            : fixedMenu.hasElement
              ? document.documentElement.scrollTop
              : document.body.scrollTop;
        if (fixedMenu.targetTop > 0)
            fixedMenu.shiftY += fixedMenu.targetTop;
        else
        {
            fixedMenu.shiftY += 
                (fixedMenu.hasElement
                ? document.documentElement.clientHeight
                : fixedMenu.hasInner
                  ? window.innerHeight - 0
                  : document.body.clientHeight)
                - fixedMenu.targetBottom
                - fixedMenu.menu.offsetHeight;
        }
    };
    
    fixedMenu.moveMenu = function()
    {
        fixedMenu.computeShifts();
    
        if (fixedMenu.currentX != fixedMenu.shiftX
            || fixedMenu.currentY != fixedMenu.shiftY)
        {
            fixedMenu.currentX = fixedMenu.shiftX;
            fixedMenu.currentY = fixedMenu.shiftY;
    
            if (document.layers)
            {
                fixedMenu.menu.left = fixedMenu.currentX;
                fixedMenu.menu.top = fixedMenu.currentY;
            }
            else
            {
                fixedMenu.menu.style.left = fixedMenu.currentX + 'px';
                fixedMenu.menu.style.top = fixedMenu.currentY + 'px';
            }
        }
    
        fixedMenu.menu.style.right = '';
        fixedMenu.menu.style.bottom = '';
    };
    
    fixedMenu.floatMenu = function()
    {
        fixedMenu.moveMenu();
        setTimeout('fixedMenu.floatMenu()', 0);
    };
    
    // addEvent designed by Aaron Moore
    fixedMenu.addEvent = function(element, listener, handler)
    {
        if(typeof element[listener] != 'function' || 
           typeof element[listener + '_num'] == 'undefined')
        {
            element[listener + '_num'] = 0;
            if (typeof element[listener] == 'function')
            {
                element[listener + 0] = element[listener];
                element[listener + '_num']++;
            }
            element[listener] = function(e)
            {
                var r = true;
                e = (e) ? e : window.event;
                for(var i = 0; i < element[listener + '_num']; i++)
                    if(element[listener + i](e) === false)
                        r = false;
                return r;
            }
        }
    
        //if handler is not already stored, assign it
        for(var i = 0; i < element[listener + '_num']; i++)
            if(element[listener + i] == handler)
                return;
        element[listener + element[listener + '_num']] = handler;
        element[listener + '_num']++;
    };
    
    fixedMenu.supportsFixed = function()
    {
        var testDiv = document.createElement("div");
        testDiv.id = "testingPositionFixed";
        testDiv.style.position = "fixed";
        testDiv.style.top = "0px";
        testDiv.style.right = "0px";
        document.body.appendChild(testDiv);
        var offset = 1;
        if (typeof testDiv.offsetTop == "number"
            && testDiv.offsetTop != null 
            && testDiv.offsetTop != "undefined")
        {
            offset = parseInt(testDiv.offsetTop);
        }
        if (offset == 0)
        {
            return true;
        }
    
        return false;
    };
    
    fixedMenu.init = function()
    {
        if (fixedMenu.supportsFixed())
            fixedMenu.menu.style.position = "fixed";
        else
        {
            var ob = 
                document.layers 
                ? fixedMenu.menu 
                : fixedMenu.menu.style;
    
            fixedMenu.targetLeft = parseInt(ob.left);
            fixedMenu.targetTop = parseInt(ob.top);
            fixedMenu.targetRight = parseInt(ob.right);
            fixedMenu.targetBottom = parseInt(ob.bottom);
    
            if (document.layers)
            {
                menu.left = 0;
                menu.top = 0;
            }
            fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);
            fixedMenu.floatMenu();
        }
    };
    
    fixedMenu.addEvent(window, 'onload', fixedMenu.init);
    //--></script>
    <script type="text/javascript"><!--
    /* Script by: www.jtricks.com
     * Version: 20080801
     * Latest version:
     * www.jtricks.com/javascript/navigation/floating_close.html
     */
    floatingMenu.hide = function()
    {
        floatingMenu.menu.style.display='none';
        return false;
    }
    
    floatingMenu.show = function()
    {
        floatingMenu.menu.style.display='block';
        return false;
    }
    //--></script>


  •  

    LinkBacks (?)

    1. 09-15-2014, 09:21 AM
    2. 06-03-2014, 05:31 PM
    3. 02-25-2014, 09:14 AM

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •