Monday, June 18, 2012

Watch on style properties using JQuery

Below is the jquery code to apply watch on 'display' property.

<style type="text/css">

#s4-ribbonrow{
display:none;}

</style>



<script type="text/javascript">


$(document).ready(function(){

if(document.getElementById('idAttachmentsRow').style.display == "none")
{
$("input[value='Save']").hide();
}
else
{
$("input[value='Save']").show();

}

// Watch function to check if property value is changed
$.fn.watch = function(props, callback, timeout){
 if(!timeout)
  timeout = 10;
 return this.each(function(){
  var el   = $(this),
   func  = function(){ __check.call(this, el) },
   data  = { props:  props.split(","),
      func:  callback,
      vals:  [] };
  $.each(data.props, function(i) { data.vals[i] = el.css(data.props[i]); });
  el.data(data);
  if (typeof (this.onpropertychange) == "object"){
   el.bind("propertychange", callback);
  } else if ($.browser.mozilla){
   el.bind("DOMAttrModified", callback);
  } else {
   setInterval(func, timeout);
  }
 });
 function __check(el) {
  var data  = el.data(),
   changed = false,
   temp = "";
  for(var i=0;i < data.props.length; i++) {
   temp = el.css(data.props[i]);
   if(data.vals[i] != temp){
    data.vals[i] = temp;
    changed = true;
    break;
   }
  }
  if(changed && data.func) {
   data.func.call(el, data);
  }
 }
}

 jQuery(function($){
 
//Below is watch on sharepoint ribbon  if it changes display to block/inline and to make it none
   $("#s4-ribbonrow").watch('display,', function(){
    $("#s4-ribbonrow").css("display","none");
   },1000);
 
//Below code keep watch on row id display property of a style and hide show sharepoint button based on the row visibility.
$("#idAttachmentsRow").watch('display,', function(){

    if(document.getElementById('idAttachmentsRow').style.display == "none")
{
$("input[value='Save']").hide();
}
else
{
$("input[value='Save']").show();

}

   },1000);
 
 });
</script>

No comments:

Post a Comment