jQuery client plugin migration documentation

When migrating form an older version of the jQuery plugin to a newer version there might be some migration involved. 

This documentation is structured in such a way that, when migrating, you can check if any change is applicable for your situation.


Contents

Changes introduced in HTML elements

Applicable for all new versions since v1.4.0

This version of the plugin features a new ChatToaster client. In general it shouldn't break anything. It could happend that the styling of the skin is very specific and that can break because there is some extra div that wraps the message in the chat.

<div class="chathistory">
  <div class="chatstatusmessage">Your agent</div>
  <div class="message-container client"> <!-- this is new! -->
	<div class="clientname">The client</div>
	This is a test message from the client
  </div>
  <div class="message-container agent"> <!-- this is new! -->
	<div class="agentname">Your agent:</div>
	This is a test message from the agent
  </div>
</div>

jQuery migrate requirements

Applicable for all new versions since v1.2.0

jQuery migrate is no longer required to support jQuery v1.9.x or higher. We do not yet support jQuery v2.x

Accessibility changes - part 1

Applicable for all new versions since v1.1.4

Tooltip support was added in v1.1.4. Some new HTML elements were introduced in the client DOM. Use the following css for default tooltip styling. Feel free to customise.

/* bubble */
.pcac .pcac_tooltip {
  visibility: hidden;
  top: -40px;
  font-weight: bold;
  font-size: 10px;
  color: #fff;
  position: relative;
  width: auto;
  height: auto;
  display: inline-block;
  padding: 5px 10px;
  background: #CD2B27;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  *zoom: expression(
    this.runtimeStyle.zoom="1",
    this.appendChild( document.createElement("small") ).className="after"
  );
}
.pcac .pcac_tooltip .after,
.pcac .pcac_tooltip:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 8px 5px 0;
  border-color: #CD2B27 transparent;
  display: inline-block;
  width: 0;
  z-index: 1;
  bottom: -8px;
  left: 9px;
}

Additionally some extra form-labels were added to comply to the Accessibility Standards. The default skin moves them out of the viewport.

.pcac_label {
	position: absolute;
	left: -900em;
}


Accessibility changes - part 2

Applicable for all new versions since v1.1.5

In v1.1.5 an additional fieldset including legend was added to comply to the Accessibility Standards. The default skin removes the default styling of these elements so the skin stays in tact.

.pcac fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.pcac fieldset legend {
  position: absolute;
  left: -900em;
}