Popup Chatbox is not working correctly.

 The Popup Chatbox is not working correctly. 

 

Code:

   /*Chatbox*/
    #chatButton{
    box-shadow:0px 10px 6px rgba(255,255,255, 0.2) inset, 0px -10px 6px rgba(0,0,0, 0.2) inset;
    padding:10px 20px 10px 20px;
    background-color:#257;
    border:1px solid #146;
    font-weight:bold;
    font-size:10px;
    z-index:999;
    color:#fff;
    }
    #chatButton:hover{
    cursor:pointer;
    color:#ff8;
    background-color:#368;
    }
    #chatBox iframe{
    z-index:999;
    border:none;
    height:50%;
    width:65%;
    }

Added The Javascript Code

Code:

  jQuery(document).ready(function(){
    jQuery('body').append('<span id="chatButton" title="Open/Close Chatbox">Open Chat</span><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div>');
    jQuery('#chatBox').hide();
    jQuery('#chatButton').css('position', 'fixed').css('right', '0px').css('bottom', '0px');
    jQuery('#chatBox iframe').css('position', 'fixed').css('right', '10px').css('bottom', '45px');
    if(!document.getElementById('logout')){
    jQuery('#chatButton').hide();
    jQuery('#chatBox').hide();}
    jQuery('#chatButton').click(function(){
    jQuery('#chatBox').fadeToggle();
    });
    });

Put the result is above the beginning of this topic.

Hello,

Are you using a small screen ?

If so try setting the dimension values in pixels :

Code:

   #chatBox iframe{
    z-index:999;
    border:none;
    height:250px;
    width:500px;
    }

No I am not. I used snipping tool and use that image only.

Did you try changing your CSS to what I posted above ?

Yes, I just just have, but still nothing.

perchance are you setting the dimensions of all iframes ?

You can try this :

Code:

#chatBox iframe { width:500px !important; height:250px !important; }

Code:

/*Chatbox*/
    #chatButton{
    box-shadow:0px 10px 6px rgba(255,255,255, 0.2) inset, 0px -10px 6px rgba(0,0,0, 0.2) inset;
    padding:10px 20px 10px 20px;
    background-color:#257;
    border:1px solid #146;
    font-weight:bold;
    font-size:10px;
    z-index:999;
    color:#fff;
    }
    #chatButton:hover{
    cursor:pointer;
    color:#ff8;
    background-color:#368;
    }
    #chatBox iframe { width:500px !important; height:250px !important; }
    }

it says there's something wrong with the code

You have an extra curly bracket at the bottom.

replace by :

Code:

    /*Chatbox*/
        #chatButton{
        box-shadow:0px 10px 6px rgba(255,255,255, 0.2) inset, 0px -10px 6px rgba(0,0,0, 0.2) inset;
        padding:10px 20px 10px 20px;
        background-color:#257;
        border:1px solid #146;
        font-weight:bold;
        font-size:10px;
        z-index:999;
        color:#fff;
        }
        #chatButton:hover{
        cursor:pointer;
        color:#ff8;
        background-color:#368;
        }
        #chatBox iframe { width:500px !important; height:250px !important; }

Still the issue

Please post a link to the forum you have this applied to.

Thanks in advance

The CSS I gave you before should work.

Try placing this at the TOP of your stylesheet :

Code:

#chatBox iframe { width:500px !important; height:250px !important; }

When I look at the bottom of your stylesheet I am seeing a lot of errors. Primarily this :

Code:

\A
}
\A \A #s4 {
\A background:url("http://urldel'image.jpg") no-repeat #030303
}

Ange Tuteur wrote:The CSS I gave you before should work.

Try placing this at the TOP of your stylesheet :

Code:

#chatBox iframe { width:500px !important; height:250px !important; }

When I look at the bottom of your stylesheet I am seeing a lot of errors. Primarily this :

Code:

\A
}
\A \A #s4 {
\A background:url("http://urldel'image.jpg") no-repeat #030303
}

This is not my forum. I am one of the adminstrators and my friend wants me to help. Should we wait for him to come?

Remove the \A's will make the CSS valid.

Did the CSS above work ?

No. I think I should wait for my friend to come because I don't know if that will mess up the slides.

I saw nothing in the CSS with the /A. Also on the bottom left of the forum, the "Open Chat" duplicates.