Archive | Javascript RSS feed for this section

Jquery Dialog slow to open

11 Sep

Here is a good way to speed up jQuery dialogs. This happens when there is a lot of data/html inside the dialog:

http://johnculviner.com/a-jquery-ui-dialog-open-performance-issue-and-how-to-fix-it/

This reduced load time from about 4000ms to about 1100ms.

To summarize (in case the above page changes), you detach the container’s children before you open it, then you re-attach once it is open:

var $dialogContainer = $('#contrib-dialog');
var $detachedChildren = $dialogContainer.children().detach();
$('#contrib-dialog').dialog({
  modal: 1,
  autoOpen: 0,
  height: 'auto',
  width: 985,
  title: "Yup",
 open: function () {
   $detachedChildren.appendTo($dialogContainer);
  }
}).dialog('open');
Advertisements

Javascript timing

10 Sep

Quick/dirty way to time functions in javascript

console.time("hi")
myfunction()
console.timeEnd("hi")

shiny tool tips from codecanyon

2 Jul

I am using Shiny Tooltips from code canyon.

Unfortunately there was no way to position the tooltips to appear UNDER an anchor.

I added this in tooltip.js, around line 157:

if($this.hasClass("effect_under")) {
top = top + $currentTooltip.innerHeight() + 30 + 20 ;
 $currentTooltip.children(".arrow").css({
 "bottom" : bottom + $currentTooltip.innerHeight()+5 ,
 "border-left" : "20px solid transparent",
 "border-right" : "20px solid transparent",
 "border-bottom" : "5px solid #ADDF79",
 "border-top" : "0px",
 "border-bottom-width" : "20px"
 });
}

So now you can just add the class “effect_under” to your tooltip and the tooltip will appear under the element instead of over it.

The ‘border-bottom’ colour controls the colour, could use a class here instead…