SHOW:
|
|
- or go back to the newest paste.
| 1 | function setSidebarHeight(){
| |
| 2 | setTimeout(function(){
| |
| 3 | var height = $(document).height(); | |
| 4 | $('.grid_12').each(function () {
| |
| 5 | height -= $(this).outerHeight(); | |
| 6 | }); | |
| 7 | height -= $('#site_info').outerHeight();
| |
| 8 | height-=1; | |
| 9 | //salert(height); | |
| 10 | $('.sidemenu').css('height', height);
| |
| 11 | },100); | |
| 12 | } | |
| 13 | ||
| 14 | //Dashboard chart | |
| 15 | function setupDashboardChart(containerElementId) {
| |
| 16 | - | var s1 = [200, 300, 400, 500, 600, 700, 800, 900, 1000,200, 300, 400, 500, 600, 700, 800, 900, 1000]; |
| 16 | + | var s1 = <?php |
| 17 | /*[200, 300, 400, 500, 600, 700, 800, 900, 1000,200, 300, 400, 500, 600, 700, 800, 900, 1000];*/ | |
| 18 | //=-================ | |
| 19 | $r=mysql_query($sql); | |
| 20 | $ar=array(); | |
| 21 | while($row=mysql_fetch_array($r)){
| |
| 22 | $ar[]=$row['nilainya']; | |
| 23 | } | |
| 24 | echo json_encode($ar); | |
| 25 | ?> | |
| 26 | ||
| 27 | // Can specify a custom tick Array. | |
| 28 | // Ticks should match up one for each y value (category) in the series. | |
| 29 | var ticks = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i','j', 'k', 'l', 'm', 'n', 'o']; | |
| 30 | ||
| 31 | var plot1 = $.jqplot(containerElementId, [s1], {
| |
| 32 | // The "seriesDefaults" option is an options object that will | |
| 33 | // be applied to all series in the chart. | |
| 34 | seriesDefaults: {
| |
| 35 | renderer: $.jqplot.BarRenderer, | |
| 36 | rendererOptions: { fillToZero: true }
| |
| 37 | }, | |
| 38 | // Custom labels for the series are specified with the "label" | |
| 39 | // option on the series option. Here a series option object | |
| 40 | // is specified for each series. | |
| 41 | series: [ | |
| 42 | { label: 'RW' }
| |
| 43 | ||
| 44 | ], | |
| 45 | // Show the legend and put it outside the grid, but inside the | |
| 46 | // plot container, shrinking the grid to accomodate the legend. | |
| 47 | // A value of "outside" would not shrink the grid and allow | |
| 48 | // the legend to overflow the container. | |
| 49 | legend: {
| |
| 50 | show: true, | |
| 51 | placement: 'outsideGrid' | |
| 52 | }, | |
| 53 | axes: {
| |
| 54 | // Use a category axis on the x axis and use our custom ticks. | |
| 55 | xaxis: {
| |
| 56 | renderer: $.jqplot.CategoryAxisRenderer, | |
| 57 | ticks: ticks | |
| 58 | }, | |
| 59 | // Pad the y axis just a little so bars can get close to, but | |
| 60 | // not touch, the grid boundaries. 1.2 is the default padding. | |
| 61 | yaxis: {
| |
| 62 | pad: 1.05, | |
| 63 | tickOptions: { formatString: '$%d' }
| |
| 64 | } | |
| 65 | } | |
| 66 | }); | |
| 67 | } | |
| 68 | //points charts | |
| 69 | ||
| 70 | function drawPointsChart(containerElement) {
| |
| 71 | ||
| 72 | ||
| 73 | var cosPoints = []; | |
| 74 | for (var i = 0; i < 2 * Math.PI; i += 0.4) {
| |
| 75 | cosPoints.push([i, Math.cos(i)]); | |
| 76 | } | |
| 77 | ||
| 78 | var sinPoints = []; | |
| 79 | for (var i = 0; i < 2 * Math.PI; i += 0.4) {
| |
| 80 | sinPoints.push([i, 2 * Math.sin(i - .8)]); | |
| 81 | } | |
| 82 | ||
| 83 | var powPoints1 = []; | |
| 84 | for (var i = 0; i < 2 * Math.PI; i += 0.4) {
| |
| 85 | powPoints1.push([i, 2.5 + Math.pow(i / 4, 2)]); | |
| 86 | } | |
| 87 | ||
| 88 | var powPoints2 = []; | |
| 89 | for (var i = 0; i < 2 * Math.PI; i += 0.4) {
| |
| 90 | powPoints2.push([i, -2.5 - Math.pow(i / 4, 2)]); | |
| 91 | } | |
| 92 | ||
| 93 | var plot3 = $.jqplot(containerElement, [cosPoints, sinPoints, powPoints1, powPoints2], | |
| 94 | {
| |
| 95 | title: 'Line Style Options', | |
| 96 | // Series options are specified as an array of objects, one object | |
| 97 | // for each series. | |
| 98 | series: [ | |
| 99 | {
| |
| 100 | // Change our line width and use a diamond shaped marker. | |
| 101 | lineWidth: 2, | |
| 102 | markerOptions: { style: 'dimaond' }
| |
| 103 | }, | |
| 104 | {
| |
| 105 | // Don't show a line, just show markers. | |
| 106 | // Make the markers 7 pixels with an 'x' style | |
| 107 | showLine: false, | |
| 108 | markerOptions: { size: 7, style: "x" }
| |
| 109 | }, | |
| 110 | {
| |
| 111 | // Use (open) circlular markers. | |
| 112 | markerOptions: { style: "circle" }
| |
| 113 | }, | |
| 114 | {
| |
| 115 | // Use a thicker, 5 pixel line and 10 pixel | |
| 116 | // filled square markers. | |
| 117 | lineWidth: 5, | |
| 118 | markerOptions: { style: "filledSquare", size: 10 }
| |
| 119 | } | |
| 120 | ] | |
| 121 | } | |
| 122 | ); | |
| 123 | ||
| 124 | } | |
| 125 | ||
| 126 | //draw pie chart | |
| 127 | function drawPieChart(containerElement) {
| |
| 128 | var data = [ | |
| 129 | ['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14], | |
| 130 | ['Out of home', 16], ['Commuting', 7], ['Orientation', 9] | |
| 131 | ]; | |
| 132 | var plot1 = jQuery.jqplot('chart1', [data],
| |
| 133 | {
| |
| 134 | seriesDefaults: {
| |
| 135 | // Make this a pie chart. | |
| 136 | renderer: jQuery.jqplot.PieRenderer, | |
| 137 | rendererOptions: {
| |
| 138 | // Put data labels on the pie slices. | |
| 139 | // By default, labels show the percentage of the slice. | |
| 140 | showDataLabels: true | |
| 141 | } | |
| 142 | }, | |
| 143 | legend: { show: true, location: 'e' }
| |
| 144 | } | |
| 145 | ); | |
| 146 | } | |
| 147 | //draw donut chart | |
| 148 | function drawDonutChart(containerElement) {
| |
| 149 | var s1 = [['a', 6], ['b', 8], ['c', 14], ['d', 20]]; | |
| 150 | var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]]; | |
| 151 | ||
| 152 | var plot3 = $.jqplot(containerElement, [s1, s2], {
| |
| 153 | seriesDefaults: {
| |
| 154 | // make this a donut chart. | |
| 155 | renderer: $.jqplot.DonutRenderer, | |
| 156 | rendererOptions: {
| |
| 157 | // Donut's can be cut into slices like pies. | |
| 158 | sliceMargin: 3, | |
| 159 | // Pies and donuts can start at any arbitrary angle. | |
| 160 | startAngle: -90, | |
| 161 | showDataLabels: true, | |
| 162 | // By default, data labels show the percentage of the donut/pie. | |
| 163 | // You can show the data 'value' or data 'label' instead. | |
| 164 | dataLabels: 'value' | |
| 165 | } | |
| 166 | } | |
| 167 | }); | |
| 168 | } | |
| 169 | ||
| 170 | //draw bar chart | |
| 171 | function drawBarchart(containerElement) {
| |
| 172 | var s1 = [200, 600, 700, 1000]; | |
| 173 | var s2 = [460, -210, 690, 820]; | |
| 174 | var s3 = [-260, -440, 320, 200]; | |
| 175 | // Can specify a custom tick Array. | |
| 176 | // Ticks should match up one for each y value (category) in the series. | |
| 177 | var ticks = ['May', 'June', 'July', 'August']; | |
| 178 | ||
| 179 | var plot1 = $.jqplot(containerElement, [s1, s2, s3], {
| |
| 180 | // The "seriesDefaults" option is an options object that will | |
| 181 | // be applied to all series in the chart. | |
| 182 | seriesDefaults: {
| |
| 183 | renderer: $.jqplot.BarRenderer, | |
| 184 | rendererOptions: { fillToZero: true }
| |
| 185 | }, | |
| 186 | // Custom labels for the series are specified with the "label" | |
| 187 | // option on the series option. Here a series option object | |
| 188 | // is specified for each series. | |
| 189 | series: [ | |
| 190 | { label: 'Hotel' },
| |
| 191 | { label: 'Event Regristration' },
| |
| 192 | { label: 'Airfare' }
| |
| 193 | ], | |
| 194 | // Show the legend and put it outside the grid, but inside the | |
| 195 | // plot container, shrinking the grid to accomodate the legend. | |
| 196 | // A value of "outside" would not shrink the grid and allow | |
| 197 | // the legend to overflow the container. | |
| 198 | legend: {
| |
| 199 | show: true, | |
| 200 | placement: 'outsideGrid' | |
| 201 | }, | |
| 202 | axes: {
| |
| 203 | // Use a category axis on the x axis and use our custom ticks. | |
| 204 | xaxis: {
| |
| 205 | renderer: $.jqplot.CategoryAxisRenderer, | |
| 206 | ticks: ticks | |
| 207 | }, | |
| 208 | // Pad the y axis just a little so bars can get close to, but | |
| 209 | // not touch, the grid boundaries. 1.2 is the default padding. | |
| 210 | yaxis: {
| |
| 211 | pad: 1.05, | |
| 212 | tickOptions: { formatString: '$%d' }
| |
| 213 | } | |
| 214 | } | |
| 215 | }); | |
| 216 | } | |
| 217 | //draw bubble chart | |
| 218 | function drawBubbleChart(containerElement) {
| |
| 219 | ||
| 220 | var arr = [[11, 123, 1236, ""], [45, 92, 1067, ""], | |
| 221 | [24, 104, 1176, ""], [50, 23, 610, "A"], | |
| 222 | [18, 17, 539, ""], [7, 89, 864, ""], [2, 13, 1026, ""]]; | |
| 223 | ||
| 224 | var plot1b = $.jqplot(containerElement, [arr], {
| |
| 225 | seriesDefaults: {
| |
| 226 | renderer: $.jqplot.BubbleRenderer, | |
| 227 | rendererOptions: {
| |
| 228 | bubbleAlpha: 0.6, | |
| 229 | highlightAlpha: 0.8, | |
| 230 | showLabels: false | |
| 231 | }, | |
| 232 | shadow: true, | |
| 233 | shadowAlpha: 0.05 | |
| 234 | } | |
| 235 | }); | |
| 236 | ||
| 237 | // Legend is a simple table in the html. | |
| 238 | // Dynamically populate it with the labels from each data value. | |
| 239 | $.each(arr, function (index, val) {
| |
| 240 | $('#' + containerElement).append('<tr><td>' + val[3] + '</td><td>' + val[2] + '</td></tr>');
| |
| 241 | }); | |
| 242 | ||
| 243 | // Now bind function to the highlight event to show the tooltip | |
| 244 | // and highlight the row in the legend. | |
| 245 | $('#' + containerElement).bind('jqplotDataHighlight',
| |
| 246 | function (ev, seriesIndex, pointIndex, data, radius) {
| |
| 247 | var chart_left = $('#' + containerElement).offset().left,
| |
| 248 | chart_top = $('#' + containerElement).offset().top,
| |
| 249 | x = plot1b.axes.xaxis.u2p(data[0]), // convert x axis unita to pixels | |
| 250 | y = plot1b.axes.yaxis.u2p(data[1]); // convert y axis units to pixels | |
| 251 | var color = 'rgb(50%,50%,100%)'; | |
| 252 | $('#tooltip1b').css({ left: chart_left + x + radius + 5, top: chart_top + y });
| |
| 253 | $('#tooltip1b').html('<span style="font-size:14px;font-weight:bold;color:' +
| |
| 254 | color + ';">' + data[3] + '</span><br />' + 'x: ' + data[0] + | |
| 255 | '<br />' + 'y: ' + data[1] + '<br />' + 'r: ' + data[2]); | |
| 256 | $('#tooltip1b').show();
| |
| 257 | $('#legend1b tr').css('background-color', '#ffffff');
| |
| 258 | $('#legend1b tr').eq(pointIndex + 1).css('background-color', color);
| |
| 259 | }); | |
| 260 | ||
| 261 | // Bind a function to the unhighlight event to clean up after highlighting. | |
| 262 | $('#' + containerElement).bind('jqplotDataUnhighlight',
| |
| 263 | function (ev, seriesIndex, pointIndex, data) {
| |
| 264 | $('#tooltip1b').empty();
| |
| 265 | $('#tooltip1b').hide();
| |
| 266 | $('#' + containerElement + ' tr').css('background-color', '#ffffff');
| |
| 267 | }); | |
| 268 | } | |
| 269 | ||
| 270 | //-------------------------------------------------------------- */ | |
| 271 | // Gallery Actions | |
| 272 | //-------------------------------------------------------------- */ | |
| 273 | ||
| 274 | function initializeGallery() {
| |
| 275 | // When hovering over gallery li element | |
| 276 | $("ul.gallery li").hover(function () {
| |
| 277 | ||
| 278 | var $image = (this); | |
| 279 | ||
| 280 | // Shows actions when hovering | |
| 281 | $(this).find(".actions").show();
| |
| 282 | ||
| 283 | // If the "x" icon is pressed, show confirmation (#dialog-confirm) | |
| 284 | $(this).find(".actions .delete").click(function () {
| |
| 285 | ||
| 286 | // Confirmation | |
| 287 | $("#dialog-confirm").dialog({
| |
| 288 | resizable: false, | |
| 289 | modal: true, | |
| 290 | minHeight: 0, | |
| 291 | draggable: false, | |
| 292 | buttons: {
| |
| 293 | "Delete": function () {
| |
| 294 | $(this).dialog("close");
| |
| 295 | ||
| 296 | // Removes image if delete is pressed | |
| 297 | $($image).fadeOut('slow', function () {
| |
| 298 | $($image).remove(); | |
| 299 | }); | |
| 300 | ||
| 301 | }, | |
| 302 | ||
| 303 | // Removes dialog if cancel is pressed | |
| 304 | Cancel: function () {
| |
| 305 | $(this).dialog("close");
| |
| 306 | } | |
| 307 | } | |
| 308 | }); | |
| 309 | ||
| 310 | return false; | |
| 311 | }); | |
| 312 | ||
| 313 | ||
| 314 | // Changes opacity of the image | |
| 315 | $(this).find("img").css("opacity", "0.5");
| |
| 316 | ||
| 317 | // On hover off | |
| 318 | $(this).hover(function () {
| |
| 319 | }, function () {
| |
| 320 | ||
| 321 | // Hides actions when hovering off | |
| 322 | $(this).find(".actions").hide();
| |
| 323 | ||
| 324 | // Changes opacity of the image back to normal | |
| 325 | $(this).find("img").css("opacity", "1");
| |
| 326 | ||
| 327 | }); | |
| 328 | }); | |
| 329 | } | |
| 330 | function setupGallery() {
| |
| 331 | ||
| 332 | initializeGallery(); | |
| 333 | //-------------------------------------------------------------- */ | |
| 334 | // | |
| 335 | // **** Gallery Sorting (Quicksand) **** | |
| 336 | // | |
| 337 | // For more information go to: | |
| 338 | // http://razorjack.net/quicksand/ | |
| 339 | // | |
| 340 | //-------------------------------------------------------------- */ | |
| 341 | ||
| 342 | $('ul.gallery').each(function () {
| |
| 343 | ||
| 344 | // get the action filter option item on page load | |
| 345 | var $fileringType = $("ul.sorting li.active a[data-type]").first().before(this);
| |
| 346 | var $filterType = $($fileringType).attr('data-id');
| |
| 347 | ||
| 348 | var $gallerySorting = $(this).parent().prev().children('ul.sorting');
| |
| 349 | ||
| 350 | // get and assign the ourHolder element to the | |
| 351 | // $holder varible for use later | |
| 352 | var $holder = $(this); | |
| 353 | ||
| 354 | // clone all items within the pre-assigned $holder element | |
| 355 | var $data = $holder.clone(); | |
| 356 | ||
| 357 | // attempt to call Quicksand when a filter option | |
| 358 | // item is clicked | |
| 359 | $($gallerySorting).find("a[data-type]").click(function (e) {
| |
| 360 | // reset the active class on all the buttons | |
| 361 | $($gallerySorting).find("a[data-type].active").removeClass('active');
| |
| 362 | ||
| 363 | // assign the class of the clicked filter option | |
| 364 | // element to our $filterType variable | |
| 365 | var $filterType = $(this).attr('data-type');
| |
| 366 | $(this).addClass('active');
| |
| 367 | if ($filterType == 'all') {
| |
| 368 | // assign all li items to the $filteredData var when | |
| 369 | // the 'All' filter option is clicked | |
| 370 | var $filteredData = $data.find('li');
| |
| 371 | } | |
| 372 | else {
| |
| 373 | // find all li elements that have our required $filterType | |
| 374 | // values for the data-type element | |
| 375 | var $filteredData = $data.find('li[data-type=' + $filterType + ']');
| |
| 376 | } | |
| 377 | ||
| 378 | // call quicksand and assign transition parameters | |
| 379 | $holder.quicksand($filteredData, {
| |
| 380 | duration: 800, | |
| 381 | easing: 'easeInOutQuad', | |
| 382 | useScaling: true, | |
| 383 | adjustHeight: 'auto' | |
| 384 | }, function () {
| |
| 385 | $('.popup').facebox();
| |
| 386 | initializeGallery(); | |
| 387 | }); | |
| 388 | ||
| 389 | return false; | |
| 390 | }); | |
| 391 | ||
| 392 | }); | |
| 393 | } | |
| 394 | ||
| 395 | //setup pretty-photo | |
| 396 | function setupPrettyPhoto() {
| |
| 397 | ||
| 398 | $("a[rel^='prettyPhoto']").prettyPhoto();
| |
| 399 | } | |
| 400 | ||
| 401 | //setup tinyMCE | |
| 402 | ||
| 403 | function setupTinyMCE() {
| |
| 404 | $('textarea.tinymce').tinymce({
| |
| 405 | // Location of TinyMCE script | |
| 406 | script_url: 'js/tiny-mce/tiny_mce.js', | |
| 407 | ||
| 408 | // General options | |
| 409 | theme: "advanced", | |
| 410 | plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", | |
| 411 | ||
| 412 | // Theme options | |
| 413 | theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", | |
| 414 | theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", | |
| 415 | theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", | |
| 416 | theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", | |
| 417 | theme_advanced_toolbar_location: "top", | |
| 418 | theme_advanced_toolbar_align: "left", | |
| 419 | theme_advanced_statusbar_location: "bottom", | |
| 420 | theme_advanced_resizing: true, | |
| 421 | ||
| 422 | // Example content CSS (should be your site CSS) | |
| 423 | content_css: "css/content.css", | |
| 424 | ||
| 425 | // Drop lists for link/image/media/template dialogs | |
| 426 | template_external_list_url: "lists/template_list.js", | |
| 427 | external_link_list_url: "lists/link_list.js", | |
| 428 | external_image_list_url: "lists/image_list.js", | |
| 429 | media_external_list_url: "lists/media_list.js", | |
| 430 | ||
| 431 | // Replace values for the template plugin | |
| 432 | template_replace_values: {
| |
| 433 | username: "Some User", | |
| 434 | staffid: "991234" | |
| 435 | } | |
| 436 | }); | |
| 437 | } | |
| 438 | ||
| 439 | //setup DatePicker | |
| 440 | function setDatePicker(containerElement) {
| |
| 441 | var datePicker = $('#' + containerElement);
| |
| 442 | datePicker.datepicker({
| |
| 443 | showOn: "button", | |
| 444 | buttonImage: "img/calendar.gif", | |
| 445 | buttonImageOnly: true | |
| 446 | }); | |
| 447 | } | |
| 448 | //setup progressbar | |
| 449 | function setupProgressbar(containerElement) {
| |
| 450 | $("#" + containerElement).progressbar({
| |
| 451 | value: 59 | |
| 452 | }); | |
| 453 | } | |
| 454 | ||
| 455 | //setup dialog box | |
| 456 | ||
| 457 | function setupDialogBox(containerElement, associatedButton) {
| |
| 458 | $.fx.speeds._default = 1000; | |
| 459 | $("#" + containerElement).dialog({
| |
| 460 | autoOpen: false, | |
| 461 | show: "blind", | |
| 462 | hide: "explode" | |
| 463 | }); | |
| 464 | ||
| 465 | $("#" + associatedButton).click(function () {
| |
| 466 | $("#" + containerElement).dialog("open");
| |
| 467 | return false; | |
| 468 | }); | |
| 469 | } | |
| 470 | ||
| 471 | //setup accordion | |
| 472 | ||
| 473 | function setupAccordion(containerElement) {
| |
| 474 | $("#" + containerElement).accordion();
| |
| 475 | } | |
| 476 | ||
| 477 | //setup radios and checkboxes | |
| 478 | //function setupGrumbleToolTip(elementid) {
| |
| 479 | // initializeGrumble(elementid); | |
| 480 | // $('#' + elementid).focus(function () {
| |
| 481 | // initializeGrumble(elementid); | |
| 482 | // }); | |
| 483 | //} | |
| 484 | ||
| 485 | //function initializeGrumble(elementid) {
| |
| 486 | // $('#' + elementid).grumble(
| |
| 487 | // {
| |
| 488 | // text: 'Whoaaa, this is a lot of text that i couldn\'t predict', | |
| 489 | // angle: 85, | |
| 490 | // distance: 50, | |
| 491 | // showAfter: 1000, | |
| 492 | // hideAfter: 2000 | |
| 493 | // } | |
| 494 | //); | |
| 495 | //} | |
| 496 | ||
| 497 | //setup left menu | |
| 498 | ||
| 499 | function setupLeftMenu() {
| |
| 500 | $("#section-menu")
| |
| 501 | .accordion({
| |
| 502 | "header": "a.menuitem" | |
| 503 | }) | |
| 504 | .bind("accordionchangestart", function (e, data) {
| |
| 505 | data.newHeader.next().andSelf().addClass("current");
| |
| 506 | data.oldHeader.next().andSelf().removeClass("current");
| |
| 507 | }) | |
| 508 | .find("a.menuitem:first").addClass("current")
| |
| 509 | .next().addClass("current");
| |
| 510 | ||
| 511 | $('#section-menu .submenu').css('height','auto');
| |
| 512 | } |