问:
Move Chat bubble to right
I am trying to create a chat window from the reference
https://bootsnipp.com/snippets/featured/open-in-chat-popup-box-chat-popup
(a big thanks to Gurdeep Osahan for making this open to everyone).
I am trying to build a communication between Client and Vendor.
I want the to be aligned on left, which is already there so no efforts on that, and vendor on the right, which is creating headache for me.I have no idea from where to start. I tried "pull-right", but everything messes up on that .I am completely new to UI design. Any help/suggestions to proceed will be very helpful. I have attached the link here.
JSFiddle

Edit 1:
I thing I couldn't explain my question correctly.
I want the To and From inside the div to be on different side.

  $(function(){
$("#addClass").click(function () {

          $('#qnimate').addClass('popup-box-on');
            });

            $("#removeClass").click(function () {
          $('#qnimate').removeClass('popup-box-on');
            });
  })```
<pre class="snippet-code-css lang-css prettyprint-override"><code>
.popup-box {
   background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    right: 70px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popup-box-on {
    display: block !important;
}
.popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
     font-family: Oswald;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
    /*border: 1px solid #7b7b7b;*/
    border-radius: 50%;
    width: 44px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 40px !important;
    margin: 7px;
    padding: 5px !important;
     border: medium none;
    width: 95% !important;
}
.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}

.popup-box .popup-messages {
    background: #3f9684 none repeat scroll 0 0;
    height: 275px;
    overflow: auto;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);

}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
 margin: 0 8px 0 0;
 vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
 padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
 color: #303030;
}

.popup-messages abbr.timestamp {
    background: #3f9684  none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 49px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-nameTo {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 150px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    /*border: 1px solid #fff;*/
 background: #3f9684  none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}
.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
 background:#3f9684;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
 background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
 bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {

    border-color: transparent #dfece7 transparent transparent;

}
.direct-chat-text::after, .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}</code>```

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 Open in chat

 Vendor

                <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">

                </button>

Email Chat

            <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"></button>

                October 8th, 2015

                    Client

                    Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?

                    3.36 PM

                October 9th, 2015

                    Vendor

                    All Good Bro. How are you?

                    3.36 PM

        <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>

            <button class="bg_none"> </button>
            <button class="bg_none pull-right"> </button>

```

答:
Give left:70px instead of right to .popup-boxclass.

$(function() {
  $("#addClass").click(function() {
     $('#qnimate').addClass('popup-box-on');
  });

  $("#removeClass").click(function() {
     $('#qnimate').removeClass('popup-box-on');
  });
})```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.popup-box {
   background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    left: 70px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popup-box-on {
    display: block !important;
}
.popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
     font-family: Oswald;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
    /*border: 1px solid #7b7b7b;*/
    border-radius: 50%;
    width: 44px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 40px !important;
    margin: 7px;
    padding: 5px !important;
     border: medium none;
    width: 95% !important;
}
.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}

.popup-box .popup-messages {
    background: #3f9684 none repeat scroll 0 0;
    height: 275px;
    overflow: auto;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);

}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
 margin: 0 8px 0 0;
 vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
 padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
 color: #303030;
}

.popup-messages abbr.timestamp {
    background: #3f9684  none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 49px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-nameTo {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 150px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    /*border: 1px solid #fff;*/
 background: #3f9684  none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}
.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
 background:#3f9684;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
 background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
 bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {

    border-color: transparent #dfece7 transparent transparent;

}
.direct-chat-text::after, .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}</code>```

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

 Open in chat

 Vendor

        <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">

        </button>

Email Chat

      <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"></button>

        October 8th, 2015

          Client

          Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?

          3.36 PM

        October 9th, 2015

          Vendor

          All Good Bro. How are you?

          3.36 PM

    <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>

      <button class="bg_none"> </button>
      <button class="bg_none pull-right"> </button>

```

Title: Move Chat bubble to right

Body:
I am trying to create a chat window from the reference
https://bootsnipp.com/snippets/featured/open-in-chat-popup-box-chat-popup
(a big thanks to Gurdeep Osahan for making this open to everyone).
I am trying to build a communication between Client and Vendor.
I want the to be aligned on left, which is already there so no efforts on that, and vendor on the right, which is creating headache for me.I have no idea from where to start. I tried "pull-right", but everything messes up on that .I am completely new to UI design. Any help/suggestions to proceed will be very helpful. I have attached the link here.
JSFiddle

Edit 1:
I thing I couldn't explain my question correctly.
I want the To and From inside the div to be on different side.

  $(function(){
$("#addClass").click(function () {

          $('#qnimate').addClass('popup-box-on');
            });

            $("#removeClass").click(function () {
          $('#qnimate').removeClass('popup-box-on');
            });
  })

.popup-box {
   background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    right: 70px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popup-box-on {
    display: block !important;
}
.popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
     font-family: Oswald;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
    /*border: 1px solid #7b7b7b;*/
    border-radius: 50%;
    width: 44px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 40px !important;
    margin: 7px;
    padding: 5px !important;
     border: medium none;
    width: 95% !important;
}
.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}

.popup-box .popup-messages {
    background: #3f9684 none repeat scroll 0 0;
    height: 275px;
    overflow: auto;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);

}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
 margin: 0 8px 0 0;
 vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
 padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
 color: #303030;
}

.popup-messages abbr.timestamp {
    background: #3f9684  none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 49px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-nameTo {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 150px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    /*border: 1px solid #fff;*/
 background: #3f9684  none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}
.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
 background:#3f9684;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
 background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
 bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {

    border-color: transparent #dfece7 transparent transparent;

}
.direct-chat-text::after, .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 Open in chat

 Vendor

                <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">

                </button>

Email Chat

            <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"></button>

                October 8th, 2015

                    Client

                    Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?

                    3.36 PM

                October 9th, 2015

                    Vendor

                    All Good Bro. How are you?

                    3.36 PM

        <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>

            <button class="bg_none"> </button>
            <button class="bg_none pull-right"> </button>

Body:
Give left:70px instead of right to .popup-boxclass.

$(function() {
  $("#addClass").click(function() {
     $('#qnimate').addClass('popup-box-on');
  });

  $("#removeClass").click(function() {
     $('#qnimate').removeClass('popup-box-on');
  });
})

.popup-box {
   background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    left: 70px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popup-box-on {
    display: block !important;
}
.popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
     font-family: Oswald;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
    /*border: 1px solid #7b7b7b;*/
    border-radius: 50%;
    width: 44px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 40px !important;
    margin: 7px;
    padding: 5px !important;
     border: medium none;
    width: 95% !important;
}
.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}

.popup-box .popup-messages {
    background: #3f9684 none repeat scroll 0 0;
    height: 275px;
    overflow: auto;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);

}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
 margin: 0 8px 0 0;
 vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
 padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
 color: #303030;
}

.popup-messages abbr.timestamp {
    background: #3f9684  none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 49px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-nameTo {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 150px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    /*border: 1px solid #fff;*/
 background: #3f9684  none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}
.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
 background:#3f9684;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
 background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
 bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {

    border-color: transparent #dfece7 transparent transparent;

}
.direct-chat-text::after, .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Open in chat </a>
<div class="popup-box chat-popup" id="qnimate">
  <div class="popup-head">
    <div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Vendor</div>
    <div class="popup-head-right pull-right">
      <div class="btn-group">
        <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
        <i class="glyphicon glyphicon-cog"></i>
        </button>
        <ul role="menu" class="dropdown-menu pull-right">
          <li><a href="#">Email Chat</a></li>
        </ul>
      </div>
      <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
    </div>
  </div>
  <div class="popup-messages">
    <div class="direct-chat-messages">
      <div class="chat-box-single-line">
        <abbr class="timestamp">October 8th, 2015</abbr>
      </div>
      <!-- Message. Default to the left -->
      <div class="direct-chat-msg">
        <div class="direct-chat-info clearfix">
          <span class="direct-chat-name pull-left">Client</span>
        </div>
        <!-- /.direct-chat-info -->
        <img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img">
        <!-- /.direct-chat-img -->
        <div class="direct-chat-text">
          Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?
        </div>
        <div class="direct-chat-info clearfix">
          <span class="direct-chat-timestamp pull-right">3.36 PM</span>
        </div>
        <!-- /.direct-chat-text -->
      </div>
      <!-- /.direct-chat-msg -->
      <div class="chat-box-single-line">
        <abbr class="timestamp">October 9th, 2015</abbr>
      </div>
      <!-- Message. Default to the left -->
      <div class="direct-chat-msg">
        <div class="direct-chat-info clearfix">
          <span class="direct-chat-name">Vendor</span>
        </div>
        <!-- /.direct-chat-info -->
        <img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img">
        <!-- /.direct-chat-img -->
        <div class="direct-chat-text">
          All Good Bro. How are you?
        </div>
        <div class="direct-chat-info clearfix">
          <span class="direct-chat-timestamp pull-right">3.36 PM</span>
        </div>
        <!-- /.direct-chat-text -->
      </div>
      <!-- /.direct-chat-msg -->
    </div>
  </div>
  <div class="popup-messages-footer">
    <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
    <div class="btn-footer">
      <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
      <button class="bg_none pull-right"><i class="glyphicon glyphicon-play"></i> </button>
    </div>
  </div>
</div>


来源: stackexchange

问:
android.view.InflateException: Binary XML file line #976: Error inflating class android.widget.ToggleButton
I've got this this app which I'm developing, it perfectly works on android Emulator nexus 5  device, but when I'm trying it out on a real physical device, it crashes!
there are two activities, the first one (the main) has no problem, but there is a button, which I use to go to the next activity, when I click it, the app crashes and goes out!
so I used the USB debugging tool, and here is the Logcat:

```<code>11-17 13:04:31.898 3096-3096/com.dall.filmanlevel1 E/AndroidRuntime: FATAL EXCEPTION: main
 java.lang.RuntimeException: Unable to start activity ComponentInfo{com.dall.filmanlevel1/com.dall.filmanlevel1.FilManInShop}: android.view.InflateException: Binary XML file line #976: Error inflating class android.widget.ToggleButton
     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2343)
     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2395)
     at android.app.ActivityThread.access$600(ActivityThread.java:162)
     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1364)
     at android.os.Handler.dispatchMessage(Handler.java:107)
     at android.os.Looper.loop(Looper.java:194)
     at android.app.ActivityThread.main(ActivityThread.java:5392)
     at java.lang.reflect.Method.invokeNative(Native Method)
     at java.lang.reflect.Method.invoke(Method.java:525)
     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:833)
     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:600)
     at dalvik.system.NativeStart.main(Native Method)
  Caused by: android.view.InflateException: Binary XML file line #976: Error inflating class android.widget.ToggleButton
     at android.view.LayoutInflater.createView(LayoutInflater.java:613)
     at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:56)
     at android.view.LayoutInflater.onCreateView(LayoutInflater.java:660)
     at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:685)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:746)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:749)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
     at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:292)
     at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
     at com.dall.filmanlevel1.FilManInShop.onCreate(FilManInShop.java:35)
     at android.app.Activity.performCreate(Activity.java:5122)
     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1081)
     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2307)
     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2395)
     at android.app.ActivityThread.access$600(ActivityThread.java:162)
     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1364)
     at android.os.Handler.dispatchMessage(Handler.java:107)
     at android.os.Looper.loop(Looper.java:194)
     at android.app.ActivityThread.main(ActivityThread.java:5392)
     at java.lang.reflect.Method.invokeNative(Native Method)
     at java.lang.reflect.Method.invoke(Method.java:525)
     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:833)
     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:600)
     at dalvik.system.NativeStart.main(Native Method)
  Caused by: java.lang.reflect.InvocationTargetException
     at java.lang.reflect.Constructor.constructNative(Native Method)
     at java.lang.reflect.Constructor.newInstance(Constructor.java:417)
     at android.view.LayoutInflater.createView(LayoutInflater.java:587)
     at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:56)
     at android.view.LayoutInflater.onCreateView(LayoutInflater.java:660)
     at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:685)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:746)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:749)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
     at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:292)
     at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
     at com.dall.filmanlevel1.FilManInShop.onCreate(FilManInShop.java:35)
     at android.app.Activity.performCreate(Activity.java:5122)
     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1081)
     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2307)
     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2395)
     at android.app.ActivityThread.access$600(ActivityThread.java:162)
     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1364)
     at android.os.Handler.dispatchMessage(Handler.java:107)
     at android.os.Looper.loop(Looper.java:194)
     at android.app.ActivityThread.main(ActivityThread.java:5392)
     at java.lang.reflect.Method.invokeNative(Native Method)
     at java.lang.reflect.Method.invoke(Method.java:525)
     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:833)
     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:600)
     at dalvik.system.NativeStart.main(Native Method)
  Caused by: android.content.res.Resources$NotFoundException: Resource is not a Drawable (color or path): TypedValue{t=0x1/d=0x7f02009e a=-1 r=0x7f02009e}
     at android.content.res.Resources.loadDrawable(Resources.java:1967)
     at android.content.res.TypedArray.getDrawable(TypedArray.java:601)
     at android.view.View.<init>(View.java:3341)
     at android.widget.TextView.<init>(TextView.java:591)
     at android.widget.Button.<init>(Button.java:107)
     at android.widget.CompoundButton.<init>(CompoundButton.java:68)
     at android.widget.ToggleButton.<init>(ToggleButton.java:51)
     at android.widget.ToggleButton.<init>(ToggleButton.java:64)
     at java.lang.reflect.Constructor.constructNative(Native Method)
     at java.lang.reflect.Constructor.newInstance(Constructor.java:417)
     at android.view.LayoutInflater.createView(LayoutInflater.java:587)
     at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:56)
     at android.view.LayoutInflater.onCreateView(LayoutInflater.java:660)
     at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:685)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:746)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:749)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
     at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:292)
     at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
     at com.dall.filmanlevel1.FilManInShop.onCreate(FilManInShop.java:35)
     at android.app.Activity.performCreate(Activity.java:5122)
     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1081)
     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2307)
     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2395)
     at android.app.ActivityThread.access$600(ActivityThread.java:162)
     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1364)
     at android.os.Handler.dispatchMessage(Handler.java:107)
     at android.os.Looper.loop(Looper.java:194)
     at android.app.ActivityThread.main(ActivityThread.java:5392)
     at java.lang.reflect.Method.invokeNative(Native Method)
     at java.lang.reflect.Method.invoke(Method.java:525)
     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:833)
     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:600)
     at dalvik.system.NativeStart.main(Native Method)
</code>```

any kind of help will be appreciated!

here is the XML file, thank you guys.

```<code><?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
tools:context="com.dall.filmanlevel1.FilManInShop">

<TextView
    android:id="@+id/textView0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:text="in the shop"
    android:textColor="@color/colorPrimaryDark"
    android:textSize="20sp" />

<ScrollView
    android:id="@+id/theScroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/tableRow"
    android:layout_alignLeft="@+id/tableRow"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignStart="@+id/tableRow"
    android:layout_below="@+id/textView0">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="I am a doctor at the London hospital. "
            android:textSize="16sp" />

        <TextView
            android:id="@+id/filamnCInshoptt1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text=""
            android:textColor="@color/colorPrimary"
            android:textSize="16sp" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/filmanpic1" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="I read the writing under the picture."
            android:textSize="16sp" />

        <TextView
            android:id="@+id/filamnCInshoptt2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text=""
            android:textColor="@color/colorPrimary"
            android:textSize="16sp" />

    </LinearLayout>
</ScrollView>

<TableRow
    android:id="@+id/tableRow"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:orientation="vertical">

    <CheckBox
        android:id="@+id/tarjomeBox"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="3dp"
        android:layout_weight=".8"
        android:text="translate" />

    <SeekBar
        android:id="@+id/seekVoice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="3dp"
        android:layout_weight="1.5" />

    <ToggleButton
        android:id="@+id/playStopVoice"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_margin="3dp"
        android:layout_weight=".5"
        android:background="@drawable/toggle_button_background"
        android:text="ToggleButton"
        android:textOff=""
        android:textOn="" />

</TableRow>
</code>```

the Picture i added is JPEG format 350*350 pixels and 25kb in size.

here is the Button_bkackground :

```<code><?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/ic_pause_black_48dp" android:state_checked="true"/>

<item android:drawable="@drawable/ic_play_arrow_black_48dp" android:state_checked="false"/>
</code>```

答:
Please add this two in Gradle file (App):

```<code>'com.android.support:design:25.4.0'
'com.android.support:appcompat-v7:25.4.0'
</code>```

I think, its not finding android.widget in your app library. Please include it.

ContentLicense: CC BY-SA 3.0

Body:
I've got this this app which I'm developing, it perfectly works on android Emulator nexus 5  device, but when I'm trying it out on a real physical device, it crashes!
there are two activities, the first one (the main) has no problem, but there is a button, which I use to go to the next activity, when I click it, the app crashes and goes out!
so I used the USB debugging tool, and here is the Logcat:

11-17 13:04:31.898 3096-3096/com.dall.filmanlevel1 E/AndroidRuntime: FATAL EXCEPTION: main
 java.lang.RuntimeException: Unable to start activity ComponentInfo{com.dall.filmanlevel1/com.dall.filmanlevel1.FilManInShop}: android.view.InflateException: Binary XML file line #976: Error inflating class android.widget.ToggleButton
     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2343)
     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2395)
     at android.app.ActivityThread.access$600(ActivityThread.java:162)
     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1364)
     at android.os.Handler.dispatchMessage(Handler.java:107)
     at android.os.Looper.loop(Looper.java:194)
     at android.app.ActivityThread.main(ActivityThread.java:5392)
     at java.lang.reflect.Method.invokeNative(Native Method)
     at java.lang.reflect.Method.invoke(Method.java:525)
     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:833)
     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:600)
     at dalvik.system.NativeStart.main(Native Method)
  Caused by: android.view.InflateException: Binary XML file line #976: Error inflating class android.widget.ToggleButton
     at android.view.LayoutInflater.createView(LayoutInflater.java:613)
     at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:56)
     at android.view.LayoutInflater.onCreateView(LayoutInflater.java:660)
     at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:685)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:746)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:749)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
     at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:292)
     at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
     at com.dall.filmanlevel1.FilManInShop.onCreate(FilManInShop.java:35)
     at android.app.Activity.performCreate(Activity.java:5122)
     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1081)
     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2307)
     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2395)
     at android.app.ActivityThread.access$600(ActivityThread.java:162)
     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1364)
     at android.os.Handler.dispatchMessage(Handler.java:107)
     at android.os.Looper.loop(Looper.java:194)
     at android.app.ActivityThread.main(ActivityThread.java:5392)
     at java.lang.reflect.Method.invokeNative(Native Method)
     at java.lang.reflect.Method.invoke(Method.java:525)
     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:833)
     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:600)
     at dalvik.system.NativeStart.main(Native Method)
  Caused by: java.lang.reflect.InvocationTargetException
     at java.lang.reflect.Constructor.constructNative(Native Method)
     at java.lang.reflect.Constructor.newInstance(Constructor.java:417)
     at android.view.LayoutInflater.createView(LayoutInflater.java:587)
     at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:56)
     at android.view.LayoutInflater.onCreateView(LayoutInflater.java:660)
     at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:685)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:746)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:749)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
     at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:292)
     at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
     at com.dall.filmanlevel1.FilManInShop.onCreate(FilManInShop.java:35)
     at android.app.Activity.performCreate(Activity.java:5122)
     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1081)
     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2307)
     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2395)
     at android.app.ActivityThread.access$600(ActivityThread.java:162)
     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1364)
     at android.os.Handler.dispatchMessage(Handler.java:107)
     at android.os.Looper.loop(Looper.java:194)
     at android.app.ActivityThread.main(ActivityThread.java:5392)
     at java.lang.reflect.Method.invokeNative(Native Method)
     at java.lang.reflect.Method.invoke(Method.java:525)
     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:833)
     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:600)
     at dalvik.system.NativeStart.main(Native Method)
  Caused by: android.content.res.Resources$NotFoundException: Resource is not a Drawable (color or path): TypedValue{t=0x1/d=0x7f02009e a=-1 r=0x7f02009e}
     at android.content.res.Resources.loadDrawable(Resources.java:1967)
     at android.content.res.TypedArray.getDrawable(TypedArray.java:601)
     at android.view.View.<init>(View.java:3341)
     at android.widget.TextView.<init>(TextView.java:591)
     at android.widget.Button.<init>(Button.java:107)
     at android.widget.CompoundButton.<init>(CompoundButton.java:68)
     at android.widget.ToggleButton.<init>(ToggleButton.java:51)
     at android.widget.ToggleButton.<init>(ToggleButton.java:64)
     at java.lang.reflect.Constructor.constructNative(Native Method)
     at java.lang.reflect.Constructor.newInstance(Constructor.java:417)
     at android.view.LayoutInflater.createView(LayoutInflater.java:587)
     at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:56)
     at android.view.LayoutInflater.onCreateView(LayoutInflater.java:660)
     at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:685)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:746)
     at android.view.LayoutInflater.rInflate(LayoutInflater.java:749)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
     at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
     at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:292)
     at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
     at com.dall.filmanlevel1.FilManInShop.onCreate(FilManInShop.java:35)
     at android.app.Activity.performCreate(Activity.java:5122)
     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1081)
     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2307)
     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2395)
     at android.app.ActivityThread.access$600(ActivityThread.java:162)
     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1364)
     at android.os.Handler.dispatchMessage(Handler.java:107)
     at android.os.Looper.loop(Looper.java:194)
     at android.app.ActivityThread.main(ActivityThread.java:5392)
     at java.lang.reflect.Method.invokeNative(Native Method)
     at java.lang.reflect.Method.invoke(Method.java:525)
     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:833)
     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:600)
     at dalvik.system.NativeStart.main(Native Method)

any kind of help will be appreciated!

here is the XML file, thank you guys.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
tools:context="com.dall.filmanlevel1.FilManInShop">

<TextView
    android:id="@+id/textView0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:text="in the shop"
    android:textColor="@color/colorPrimaryDark"
    android:textSize="20sp" />

<ScrollView
    android:id="@+id/theScroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/tableRow"
    android:layout_alignLeft="@+id/tableRow"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignStart="@+id/tableRow"
    android:layout_below="@+id/textView0">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="I am a doctor at the London hospital. "
            android:textSize="16sp" />

        <TextView
            android:id="@+id/filamnCInshoptt1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text=""
            android:textColor="@color/colorPrimary"
            android:textSize="16sp" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/filmanpic1" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="I read the writing under the picture."
            android:textSize="16sp" />

        <TextView
            android:id="@+id/filamnCInshoptt2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text=""
            android:textColor="@color/colorPrimary"
            android:textSize="16sp" />

    </LinearLayout>
</ScrollView>

<TableRow
    android:id="@+id/tableRow"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:orientation="vertical">

    <CheckBox
        android:id="@+id/tarjomeBox"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="3dp"
        android:layout_weight=".8"
        android:text="translate" />

    <SeekBar
        android:id="@+id/seekVoice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="3dp"
        android:layout_weight="1.5" />

    <ToggleButton
        android:id="@+id/playStopVoice"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_margin="3dp"
        android:layout_weight=".5"
        android:background="@drawable/toggle_button_background"
        android:text="ToggleButton"
        android:textOff=""
        android:textOn="" />

</TableRow>

the Picture i added is JPEG format 350*350 pixels and 25kb in size.

here is the Button_bkackground :

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/ic_pause_black_48dp" android:state_checked="true"/>

<item android:drawable="@drawable/ic_play_arrow_black_48dp" android:state_checked="false"/>

Body:
Please add this two in Gradle file (App):

'com.android.support:design:25.4.0'
'com.android.support:appcompat-v7:25.4.0'

I think, its not finding android.widget in your app library. Please include it.


问:
Declaration and use of function in c
I can't find errors in this code. I'm trying to write a program that returns the number of days (ex: 60) in the year based on day, month and year [ex: 1/3/2000 (3 Mar 2000)].

The compiler give me these errors:

too few arguments to function 'day_of_year'

conflicting types for 'day_of_year'

```<code>#include <stdio.h>

int day_of_year(int day, int month, int year);

int main(){
    int day, month, year, i, count=0;
    int a[]={31,28,31,30,31,30,31,31,30,31,30,31};
    printf ("Enter the day: ");
    scanf ("%d", &day);
    printf ("Enter the month: ");
    scanf ("%d", &month);
    printf ("Enter the year: ");
    scanf ("%d", &year);
    count=day_of_year();
    printf ("Count: %d", count);
    return 0;
}

int day_of_year (int day, int month, int year, int i, int count){
    int a[]={31,28,31,30,31,30,31,31,30,31,30,31};
    if (year%4==0) a[2]++;
    count = day;
    for (i=0;i<month;i++)
        count+=a[i];
    return count;
}
</code>```

答:
Apart from mismatching prototype % definition, you are also not passing any arguments to the function.

You have few off-by-one errors. Index in C starts from 0.

Here's a modified version. Pay close attention to the changes in day_of_year function. Particularly, for February, you want to increment a[1] (not a[2]). Similarly, the for loop's condition must be month - 1 (not month).

```<code>#include <stdio.h>

int day_of_year(int day, int month, int year);

int main(){
    int day, month, year, i, count=0;
    int a[]={31,28,31,30,31,30,31,31,30,31,30,31};
    printf ("Enter the day: ");
    scanf ("%d", &day);
    printf ("Enter the month: ");
    scanf ("%d", &month);
    printf ("Enter the year: ");
    scanf ("%d", &year);
    count=day_of_year(day, month, year);
    printf ("Count: %d", count);
    return 0;
}

int day_of_year (int day, int month, int year)
{

    int a[]={31,28,31,30,31,30,31,31,30,31,30,31};
    int count = day, i;

    if (year%4==0) a[1]++;

    for (i=0;i<month - 1;i++)
        count+=a[i];

    return count;
}
</code>```

Title: Declaration and use of function in c

Body:
I can't find errors in this code. I'm trying to write a program that returns the number of days (ex: 60) in the year based on day, month and year [ex: 1/3/2000 (3 Mar 2000)].

The compiler give me these errors:

too few arguments to function 'day_of_year'

conflicting types for 'day_of_year'

#include <stdio.h>

int day_of_year(int day, int month, int year);

int main(){
    int day, month, year, i, count=0;
    int a[]={31,28,31,30,31,30,31,31,30,31,30,31};
    printf ("Enter the day: ");
    scanf ("%d", &day);
    printf ("Enter the month: ");
    scanf ("%d", &month);
    printf ("Enter the year: ");
    scanf ("%d", &year);
    count=day_of_year();
    printf ("Count: %d", count);
    return 0;
}

int day_of_year (int day, int month, int year, int i, int count){
    int a[]={31,28,31,30,31,30,31,31,30,31,30,31};
    if (year%4==0) a[2]++;
    count = day;
    for (i=0;i<month;i++)
        count+=a[i];
    return count;
}

Body:
Apart from mismatching prototype % definition, you are also not passing any arguments to the function.

You have few off-by-one errors. Index in C starts from 0.

Here's a modified version. Pay close attention to the changes in day_of_year function. Particularly, for February, you want to increment a[1] (not a[2]). Similarly, the for loop's condition must be month - 1 (not month).

#include <stdio.h>

int day_of_year(int day, int month, int year);

int main(){
    int day, month, year, i, count=0;
    int a[]={31,28,31,30,31,30,31,31,30,31,30,31};
    printf ("Enter the day: ");
    scanf ("%d", &day);
    printf ("Enter the month: ");
    scanf ("%d", &month);
    printf ("Enter the year: ");
    scanf ("%d", &year);
    count=day_of_year(day, month, year);
    printf ("Count: %d", count);
    return 0;
}

int day_of_year (int day, int month, int year)
{

    int a[]={31,28,31,30,31,30,31,31,30,31,30,31};
    int count = day, i;

    if (year%4==0) a[1]++;

    for (i=0;i<month - 1;i++)
        count+=a[i];

    return count;
}


问:
Round through error SQL Server 2008
I found an weird thing in SQL Server 2008 today. I write a ROUND function, and I test this randomly.

From 9.50-9.99, this line of code:

```<code>SELECT ROUND(X.XX, 0);
</code>```

throws this error:

An error occurred while executing batch.

  Error message is: Arithmetic Overflow.

but from 9.00-9.49 it is working just fine.

Can anybody please let me know what's wrong with that code?

答:
This is because it is trying to implicitly fit this into a numeric(3,2) datatype, which 10.00 will over flow.  You need to cast it to a larger datatype: select round(cast(9.50 as numeric(4,2)),0)

You can run this code to see what the implicit datatype & precision is:

```<code>select SQL_VARIANT_PROPERTY (cast(9.50 as SQL_VARIANT), 'BaseType'),
         SQL_VARIANT_PROPERTY (cast(9.50 as SQL_VARIANT), 'Precision'),
         SQL_VARIANT_PROPERTY (cast(9.50 as SQL_VARIANT), 'Scale')
</code>```

Title: Round through error SQL Server 2008

Body:
I found an weird thing in SQL Server 2008 today. I write a ROUND function, and I test this randomly.

From 9.50-9.99, this line of code:

SELECT ROUND(X.XX, 0);

throws this error:

An error occurred while executing batch.

  Error message is: Arithmetic Overflow.

but from 9.00-9.49 it is working just fine.

Can anybody please let me know what's wrong with that code?

Body:
This is because it is trying to implicitly fit this into a numeric(3,2) datatype, which 10.00 will over flow.  You need to cast it to a larger datatype: select round(cast(9.50 as numeric(4,2)),0)

You can run this code to see what the implicit datatype & precision is:

select SQL_VARIANT_PROPERTY (cast(9.50 as SQL_VARIANT), 'BaseType'),
         SQL_VARIANT_PROPERTY (cast(9.50 as SQL_VARIANT), 'Precision'),
         SQL_VARIANT_PROPERTY (cast(9.50 as SQL_VARIANT), 'Scale')


问:
send a local email with codeIgniter
I try to send a local email with codeIgniter.

```<code>// envoi du mail
 public function envoiMail(){
    $config = Array(
        'protocol' => 'smtp',
        'smtp_host' => 'ssl://smtp.googlemail.com',
        'smtp_port' => 465,
        'smtp_user' => 'xxxxxxx@gmail.cm',
        'smtp_pass' => 'XXXXXX',
        'mailtype'  => 'html',
        'charset'   => 'iso-8859-1',
        'crlf'   => '\r\n',
        'newline'   => '\r\n',
    );
    $sujet = $this->input->post('sujet');
    $message = $this->input->post('message');
    $this->load->library('email', $config);
    $this->email->set_newline("\r\n");
    $this->email->from('xxxx@gmail.com', 'Name');
    $this->email->to('xxxx@yahoo.fr');
    $this->email->subject($sujet);
    $this->email->message($message);
    $this->email->send();
  if($this->email->send()){
      // mail transmis
       echo "ok";
  }else{
      // erreur de transmission
      echo"erreur d'envoi";
  }
 }
</code>```

when I test I get this error:  Message: fsockopen(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed.

答:
In case you are on a shared hosting server, most of the times the ports 25 and 587 will remain blocked. This block is been purposely done by your hosting provider and in case you are using your local machine, then the antivirus/firewall will by default block these port.

In these cases, you will either get connection timeout or socket connection error.

When these ports are blocked, try to connect using port 2525. If you find that port is also blocked, then the only solution is to contact your hosting provider to unblock these ports or disable/edit firewall/antivirus rules.

Most of the hosting providers/antivirus/firewalls by default block these email ports to protect their network from sending any type of spam emails.

Title: send a local email with codeIgniter

Body:
I try to send a local email with codeIgniter.

// envoi du mail
 public function envoiMail(){
    $config = Array(
        'protocol' => 'smtp',
        'smtp_host' => 'ssl://smtp.googlemail.com',
        'smtp_port' => 465,
        'smtp_user' => 'xxxxxxx@gmail.cm',
        'smtp_pass' => 'XXXXXX',
        'mailtype'  => 'html',
        'charset'   => 'iso-8859-1',
        'crlf'   => '\r\n',
        'newline'   => '\r\n',
    );
    $sujet = $this->input->post('sujet');
    $message = $this->input->post('message');
    $this->load->library('email', $config);
    $this->email->set_newline("\r\n");
    $this->email->from('xxxx@gmail.com', 'Name');
    $this->email->to('xxxx@yahoo.fr');
    $this->email->subject($sujet);
    $this->email->message($message);
    $this->email->send();
  if($this->email->send()){
      // mail transmis
       echo "ok";
  }else{
      // erreur de transmission
      echo"erreur d'envoi";
  }
 }

when I test I get this error:  Message: fsockopen(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed.


问:
Data gets mixed up while trying to transfer it to arangodb
I'm trying to transfer ca. 10GB of json data (tweets in my case) to a collection in arangodb. I'm also trying to use joblib for it:

```<code>from ArangoConn import ArangoConn
import Userdata as U

import encodings
from joblib import Parallel,delayed
import json
from glob import glob
import time

def progress(total, prog, start, stri = ""):
    if(prog == 0):
        print("")
        prog = 1;
    perc = prog / total
    diff = time.time() - start
    rem = (diff / prog) * (total - prog)
    bar = ""
    for i in range(0,int(perc*20)):
        bar = bar + "|"
    for i in range(int(perc*20),20):
        bar = bar + " "
    print("\r"+"progress: " + "[" + bar + "] " + str(prog) + " of " +
    str(total) + ": {0:.1f}% ".format(perc * 100) + "- " +
    time.strftime("%H:%M:%S", time.gmtime(rem)) + " " + stri, end="")

def processfile(filepath):
    file = open(filepath,encoding='utf-8')
    s = file.read()
    file.close()
    data = json.loads(s)
    Parallel(n_jobs=12, verbose=0, backend="threading"
    (map(delayed(ArangoConn.createDocFromObject), data))

files = glob(U.path+'/*.json')
i = 1
j = len(files)
starttime = time.time()
for f in files:
    progress(j,i,starttime,f)
    i = i+1
    processfile(f)
</code>```

and

```<code>from pyArango.connection import Connection
import Userdata as U
import time

class ArangoConn:
    def __init__(self,server,user,pw,db,collectionname):
        self.server = server
        self.user = user
        self.pw = pw
        self.db = db
        self.collectionname = collectionname
        self.connection = None
        self.dbHandle = self.connect()
        if not self.dbHandle.hasCollection(name=self.collectionname):
            coll = self.dbHandle.createCollection(name=collectionname)
        else:
            coll = self.dbHandle.collections[collectionname]
        self.collection = coll

    def db_createDocFromObject(self, obj):
        data = obj.__dict__()
        doc = self.collection.createDocument()
        for key,value in data.items():
            doc[key] = value

        doc._key= str(int(round(time.time() * 1000)))
        doc.save()

    def connect(self):
        self.connection = Connection(arangoURL=self.server + ":8529",
        username=self.user, password=self.pw)

        if not self.connection.hasDatabase(self.db):
            db = self.connection.createDatabase(name=self.db)
        else:
            db = self.connection.databases.get(self.db)
        return db

    def disconnect(self):
        self.connection.disconnectSession()

    def getAllData(self):

        docs = []
        for doc in self.collection.fetchAll():
            docs.append(self.doc_to_result(doc))
        return docs

    def addData(self,obj):
            self.db_createDocFromObject(obj)

    def search(self,collection,search,prop):
        docs = []
        aql = """FOR q IN """+collection+""" FILTER q."""+prop+""" LIKE
            "%"""+search+"""%" RETURN q"""
        results = self.dbHandle.AQLQuery(aql, rawResults=False, batchSize=1)
        for doc in results:
            docs.append(self.doc_to_result(doc))
        return docs

    def doc_to_result(self,arangodoc):
        modstore = arangodoc.getStore()
        modstore["_key"] = arangodoc._key
        return modstore

    def db_createDocFromJson(self,json):

        for d in json:
            doc = self.collection.createDocument()
            for key,value in d.items():
                doc[key] = value
            doc._key = str(int(round(time.time() * 1000)))
            doc.save()

    @staticmethod
    def createDocFromObject(obj):
        c = ArangoConn(U.url, U.user, U.pw, U.db, U.collection)
        data = obj
        doc = c.collection.createDocument()
        for key, value in data.items():
            doc[key] = value
        doc._key = doc["id"]
        doc.save()
        c.connection.disconnectSession()
</code>```

It kinda works like that. My problem is that the data that lands in the database is somehow mixed up.

as you can see in the screenshot "id" and "id_str" are not the same - as they should be.

what i investigated so far:

I thought that at some points the default keys in the databese may "collide"
because of the threading so I set the key to the tweet id.

I tried to do it without multiple threads. the threading doesn't seem to be
the problem

I looked at the data I send to the database... everything seems to be fine

But as soon as I communicate with the db the data mixes up.

My professor thought that maybe something in pyarango isn't threadsafe and it messes up the data but I don't think so as threading doesn't seem to be the problem.

I have no ideas left where this behavior could come from...
Any ideas?

答:
The screenshot shows the following values:

```<code>id     : 892886691937214500
id_str : 892886691937214465
</code>```

It looks like somewhere along the way the value is converted to an IEEE754 double, which cannot safely represent the latter value. So there is potentially some precision loss due to conversion.

A quick example in node.js (JavaScript is using IEEE754 doubles for any number values greater than 0xffffffff) shows that this is likely the problem cause:

```<code>$ node
> 892886691937214500
892886691937214500
> 892886691937214465
892886691937214500
</code>```

So the question is where the conversion does happen. Can you check whether the python client program is correctly sending the expected values to ArangoDB, or does it already send the converted/truncated values?

In general, any integer number that exceeds 0x7fffffffffffffff will be truncated when stored in ArangoDB, or converted to an IEEE754 double. This can be avoided by storing the number values inside a string, but of course comparing two number strings will produce different results than comparing two numbers (e.g. "10" < "9" vs. 10 > 9).

Body:
I'm trying to transfer ca. 10GB of json data (tweets in my case) to a collection in arangodb. I'm also trying to use joblib for it:

from ArangoConn import ArangoConn
import Userdata as U

import encodings
from joblib import Parallel,delayed
import json
from glob import glob
import time

def progress(total, prog, start, stri = ""):
    if(prog == 0):
        print("")
        prog = 1;
    perc = prog / total
    diff = time.time() - start
    rem = (diff / prog) * (total - prog)
    bar = ""
    for i in range(0,int(perc*20)):
        bar = bar + "|"
    for i in range(int(perc*20),20):
        bar = bar + " "
    print("\r"+"progress: " + "[" + bar + "] " + str(prog) + " of " +
    str(total) + ": {0:.1f}% ".format(perc * 100) + "- " +
    time.strftime("%H:%M:%S", time.gmtime(rem)) + " " + stri, end="")

def processfile(filepath):
    file = open(filepath,encoding='utf-8')
    s = file.read()
    file.close()
    data = json.loads(s)
    Parallel(n_jobs=12, verbose=0, backend="threading"
    (map(delayed(ArangoConn.createDocFromObject), data))

files = glob(U.path+'/*.json')
i = 1
j = len(files)
starttime = time.time()
for f in files:
    progress(j,i,starttime,f)
    i = i+1
    processfile(f)

and

from pyArango.connection import Connection
import Userdata as U
import time

class ArangoConn:
    def __init__(self,server,user,pw,db,collectionname):
        self.server = server
        self.user = user
        self.pw = pw
        self.db = db
        self.collectionname = collectionname
        self.connection = None
        self.dbHandle = self.connect()
        if not self.dbHandle.hasCollection(name=self.collectionname):
            coll = self.dbHandle.createCollection(name=collectionname)
        else:
            coll = self.dbHandle.collections[collectionname]
        self.collection = coll

    def db_createDocFromObject(self, obj):
        data = obj.__dict__()
        doc = self.collection.createDocument()
        for key,value in data.items():
            doc[key] = value

        doc._key= str(int(round(time.time() * 1000)))
        doc.save()

    def connect(self):
        self.connection = Connection(arangoURL=self.server + ":8529",
        username=self.user, password=self.pw)

        if not self.connection.hasDatabase(self.db):
            db = self.connection.createDatabase(name=self.db)
        else:
            db = self.connection.databases.get(self.db)
        return db

    def disconnect(self):
        self.connection.disconnectSession()

    def getAllData(self):

        docs = []
        for doc in self.collection.fetchAll():
            docs.append(self.doc_to_result(doc))
        return docs

    def addData(self,obj):
            self.db_createDocFromObject(obj)

    def search(self,collection,search,prop):
        docs = []
        aql = """FOR q IN """+collection+""" FILTER q."""+prop+""" LIKE
            "%"""+search+"""%" RETURN q"""
        results = self.dbHandle.AQLQuery(aql, rawResults=False, batchSize=1)
        for doc in results:
            docs.append(self.doc_to_result(doc))
        return docs

    def doc_to_result(self,arangodoc):
        modstore = arangodoc.getStore()
        modstore["_key"] = arangodoc._key
        return modstore

    def db_createDocFromJson(self,json):

        for d in json:
            doc = self.collection.createDocument()
            for key,value in d.items():
                doc[key] = value
            doc._key = str(int(round(time.time() * 1000)))
            doc.save()

    @staticmethod
    def createDocFromObject(obj):
        c = ArangoConn(U.url, U.user, U.pw, U.db, U.collection)
        data = obj
        doc = c.collection.createDocument()
        for key, value in data.items():
            doc[key] = value
        doc._key = doc["id"]
        doc.save()
        c.connection.disconnectSession()

It kinda works like that. My problem is that the data that lands in the database is somehow mixed up.

as you can see in the screenshot "id" and "id_str" are not the same - as they should be.

what i investigated so far:

I thought that at some points the default keys in the databese may "collide"
because of the threading so I set the key to the tweet id.

I tried to do it without multiple threads. the threading doesn't seem to be
the problem

I looked at the data I send to the database... everything seems to be fine

But as soon as I communicate with the db the data mixes up.

My professor thought that maybe something in pyarango isn't threadsafe and it messes up the data but I don't think so as threading doesn't seem to be the problem.

I have no ideas left where this behavior could come from...
Any ideas?

Body:
The screenshot shows the following values:

id     : 892886691937214500
id_str : 892886691937214465

It looks like somewhere along the way the value is converted to an IEEE754 double, which cannot safely represent the latter value. So there is potentially some precision loss due to conversion.

A quick example in node.js (JavaScript is using IEEE754 doubles for any number values greater than 0xffffffff) shows that this is likely the problem cause:

$ node
> 892886691937214500
892886691937214500
> 892886691937214465
892886691937214500

So the question is where the conversion does happen. Can you check whether the python client program is correctly sending the expected values to ArangoDB, or does it already send the converted/truncated values?

In general, any integer number that exceeds 0x7fffffffffffffff will be truncated when stored in ArangoDB, or converted to an IEEE754 double. This can be avoided by storing the number values inside a string, but of course comparing two number strings will produce different results than comparing two numbers (e.g. "10" < "9" vs. 10 > 9).


问:
Remove an overlay of a div on hover
I have a div with a background image and a linear-gradient overlay. I would like to transition the linear-gradient to completely transparent when the div is hovered over.

.board-grid {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.board-focus {
  margin: 10px;
  background: #FFF;
  text-decoration: None;
  border-radius: 10px;
  height:30vh;
  width:25vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-name {
  text-transform: uppercase;
  //max-width: 50%;
  color: #FFF;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="board-grid">

    <div class="board-focus" style="background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://placeimg.com/480/300/any); background-size: cover; background-position: center center; background-repeat: no-repeat;">
      <div class="board-name">
        <p>John Doe</p>
      </div>
    </div>

</div></code>```

Fiddle

答:
  .board-grid {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    .board-focus {
        margin: 10px;
        background: #FFF;
        border-radius: 10px;
        height:30vh;
        width:25vw;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .board-name {
        text-transform: uppercase;
        max-width: 50%;
        color: #FFF;
        z-index: 999;
    }
    .board-focus::after{
        content: ' ' ;
        background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5));
        position: absolute;
        display: block;
        width:100%;
        top:0;
        left:0;
        height:100%;
        border-radius: 10px;
        z-index: 10;
    }
    .board-focus:hover::after{
        content: ' ';
        display: none;
    }```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="board-grid">

        <div class="board-focus" style="background-image: url(https://placeimg.com/480/300/any); background-size: cover; background-position: center center; background-repeat: no-repeat;">
            <div class="board-name">
                <p>John Doe</p>
            </div>
        </div>

</div></code>```

Title: Remove an overlay of a div on hover

Body:
I have a div with a background image and a linear-gradient overlay. I would like to transition the linear-gradient to completely transparent when the div is hovered over.

.board-grid {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.board-focus {
  margin: 10px;
  background: #FFF;
  text-decoration: None;
  border-radius: 10px;
  height:30vh;
  width:25vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-name {
  text-transform: uppercase;
  //max-width: 50%;
  color: #FFF;
}

John Doe

Fiddle

Body:
  .board-grid {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    .board-focus {
        margin: 10px;
        background: #FFF;
        border-radius: 10px;
        height:30vh;
        width:25vw;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .board-name {
        text-transform: uppercase;
        max-width: 50%;
        color: #FFF;
        z-index: 999;
    }
    .board-focus::after{
        content: ' ' ;
        background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5));
        position: absolute;
        display: block;
        width:100%;
        top:0;
        left:0;
        height:100%;
        border-radius: 10px;
        z-index: 10;
    }
    .board-focus:hover::after{
        content: ' ';
        display: none;
    }

<div class="board-grid">
    <a href='' style="text-decoration: none">
        <div class="board-focus" style="background-image: url(https://placeimg.com/480/300/any); background-size: cover; background-position: center center; background-repeat: no-repeat;">
            <div class="board-name">
                <p>John Doe</p>
            </div>
        </div>
    </a>
</div>


问:
jQuery callback syntax
I am learning jQuery, and am trying to understand how the callback works. I know what it does (calls some function after finishing with the first one), but it's the syntax that thrown me off a bit. I have this code:

```<code>showMenuElement( 0 ); // call to initiate the menu

function showMenuElement( x ) {
    x += 1; // cycling through elements
    if (x < 4) {
        var el = "#menu-" + x;
        $( el ).fadeIn( 1000, showMenuElement(x) ); // show one element, then show next in line
    }
}
</code>```

...and it doesn't work like I want it to, as it shows all the menu items at once!
(here's the working fiddle: fiddle 1)

However, if I add the function() {...} part, like this:

```<code>showMenuElement( 0 ); // call to initiate the menu

function showMenuElement( x ) {
    x += 1; // cycling through elements
    if (x < 4) {
        var el = "#menu-" + x;
        $( el ).fadeIn( 1000, function() { showMenuElement(x) } ); // show one element, then show next in line
    }
}
</code>```

then it works like a charm, showing one item after another (as per fiddle 2).

I am looking for the explanation for why it does behave this way?
I though, that since it's a callback, it will look for a name of a function to implement, so what does the writing function() {...} explicitly changes?

答:
First method won't work as you are expecting. Because you are executing the function and passing the return value of 'showMenuElement' as callback.

But in second case you passing anonymous function as callback.Here it works.

Remove () from the method i.e write the line as

$( el ).fadeIn( 1000, showMenuElement );

Then callback works.

But you have to deal with the x parameter in different way.

Title: jQuery callback syntax

Body:
I am learning jQuery, and am trying to understand how the callback works. I know what it does (calls some function after finishing with the first one), but it's the syntax that thrown me off a bit. I have this code:

showMenuElement( 0 ); // call to initiate the menu

function showMenuElement( x ) {
    x += 1; // cycling through elements
    if (x < 4) {
        var el = "#menu-" + x;
        $( el ).fadeIn( 1000, showMenuElement(x) ); // show one element, then show next in line
    }
}

...and it doesn't work like I want it to, as it shows all the menu items at once!
(here's the working fiddle: fiddle 1)

However, if I add the function() {...} part, like this:

showMenuElement( 0 ); // call to initiate the menu

function showMenuElement( x ) {
    x += 1; // cycling through elements
    if (x < 4) {
        var el = "#menu-" + x;
        $( el ).fadeIn( 1000, function() { showMenuElement(x) } ); // show one element, then show next in line
    }
}

then it works like a charm, showing one item after another (as per fiddle 2).

I am looking for the explanation for why it does behave this way?
I though, that since it's a callback, it will look for a name of a function to implement, so what does the writing function() {...} explicitly changes?


问:
php://input is empty for requests less than 10MB
Problem:

Raw POST requests lower than 10MB don't reach php://input buffer. I have no problem with requests over 10MB.

Anyone having a clue?

System:

OS: Ubuntu 16.04

Software: Apache with Nginx & PHP 7

Story:

I have used blueimp jQuery fileupload on one of my website. The files that I upload are large, over 1GB. The upload script uploads in chunks of 10MB, but the last chunk never gets uploaded. When I lowered the chunk size to 5MB, not even the first chunk gets uploaded.

I have watched the upload in Firefox developer tools, the request is made and it's valid.

```<code>var abort_transfer = false;
$('#fileupload').fileupload({
    url: 'my_url',
    dataType: 'json',
    maxChunkSize: 1000000,
    add: function(e, data) {
        data.submit();
    },
    send: function(e, data) {
        $('button[type="submit"]').prop("disabled", true);
    },
    done: function(e, data) {
        console.log('done', e, data);
        $('button[type="submit"]').prop("disabled", false);
    },
    fail: function(e, data) {
        console.log('fail', e, data);
    },
    chunksend: function(e, data) {
        if (abort_transfer) return false;
    },
    chunkdone: function(e, data) {
        if (data['jqXHR']['responseJSON']['status'] == 'nok') {
            abort_transfer = true;
            console.log('chunkdone', data['jqXHR']['responseJSON']);
        }
    },
    progressall: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress').css('width', progress + '%').text(progress + '%');
    },
    formData: function(form) {
        return [
            {name: 'action', value: 'upload-large-file'}
        ];
    }
})
.prop('disabled', !$.support.fileInput);
</code>```

答:
I found the problem.

My PHP settings were:

upload_max_filesize 2M

post_max_size 8M

TL & DR

I didn't had code to handle the last chunk in $_POST

I lowered the chunk size to either upload_max_filesize or either  post_max_size, whichever is lower, minus the boundaries

Something peculiar

The blueimp jQuery fileupload sends the chunks in php//:input buffer, but the last chunk. The last chunk is sent in $_POST.

What I have changed

I added code to handle the last chunk in $_POST:

Because the $_POST chunk was bigger then the upload_max_filesize, it didn't arrived (gave error 1 in $_FILES['file']['error']).

I lowered the chunk size:

```<code>$post_max_size = (int)ini_get('post_max_size') * (substr(ini_get('post_max_size'), -1) == 'M' ? pow(1024, 2) : pow(1024, 3));
$upload_max_filesize = (int)ini_get('upload_max_filesize') * (substr(ini_get('upload_max_filesize'), -1) == 'M' ? pow(1024, 2) : pow(1024, 3));
$chunk_size = min($post_max_size, $upload_max_filesize) - (10 * 1024);
</code>```

Also, note that a chunk is higher then the set value because it contain the boundaries and post data. So, the $chunk_size was lowered 10KB to be sure.

Body:
Problem:

Raw POST requests lower than 10MB don't reach php://input buffer. I have no problem with requests over 10MB.

Anyone having a clue?

System:

OS: Ubuntu 16.04

Software: Apache with Nginx & PHP 7

Story:

I have used blueimp jQuery fileupload on one of my website. The files that I upload are large, over 1GB. The upload script uploads in chunks of 10MB, but the last chunk never gets uploaded. When I lowered the chunk size to 5MB, not even the first chunk gets uploaded.

I have watched the upload in Firefox developer tools, the request is made and it's valid.

var abort_transfer = false;
$('#fileupload').fileupload({
    url: 'my_url',
    dataType: 'json',
    maxChunkSize: 1000000,
    add: function(e, data) {
        data.submit();
    },
    send: function(e, data) {
        $('button[type="submit"]').prop("disabled", true);
    },
    done: function(e, data) {
        console.log('done', e, data);
        $('button[type="submit"]').prop("disabled", false);
    },
    fail: function(e, data) {
        console.log('fail', e, data);
    },
    chunksend: function(e, data) {
        if (abort_transfer) return false;
    },
    chunkdone: function(e, data) {
        if (data['jqXHR']['responseJSON']['status'] == 'nok') {
            abort_transfer = true;
            console.log('chunkdone', data['jqXHR']['responseJSON']);
        }
    },
    progressall: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress').css('width', progress + '%').text(progress + '%');
    },
    formData: function(form) {
        return [
            {name: 'action', value: 'upload-large-file'}
        ];
    }
})
.prop('disabled', !$.support.fileInput);

Body:
I found the problem.

My PHP settings were:

upload_max_filesize 2M

post_max_size 8M

TL & DR

I didn't had code to handle the last chunk in $_POST

I lowered the chunk size to either upload_max_filesize or either  post_max_size, whichever is lower, minus the boundaries

Something peculiar

The blueimp jQuery fileupload sends the chunks in php//:input buffer, but the last chunk. The last chunk is sent in $_POST.

What I have changed

I added code to handle the last chunk in $_POST:

Because the $_POST chunk was bigger then the upload_max_filesize, it didn't arrived (gave error 1 in $_FILES['file']['error']).

I lowered the chunk size:

$post_max_size = (int)ini_get('post_max_size') * (substr(ini_get('post_max_size'), -1) == 'M' ? pow(1024, 2) : pow(1024, 3));
$upload_max_filesize = (int)ini_get('upload_max_filesize') * (substr(ini_get('upload_max_filesize'), -1) == 'M' ? pow(1024, 2) : pow(1024, 3));
$chunk_size = min($post_max_size, $upload_max_filesize) - (10 * 1024);

Also, note that a chunk is higher then the set value because it contain the boundaries and post data. So, the $chunk_size was lowered 10KB to be sure.