IE7 & IE8 issues

Hi,

These are some script i founded when try fixed issues with IE7 & IE8:

1. background-size CSS:
1. ouisremi - BackgroundSize:
• Required jQuery 1.7.2
• Can not integrate with Twitter Bootstrap
• Perfect for single one
• https://github.com/louisremi/jquery.backgroundSize.js/blob/master/demo/index.html
2. aramkocharyan - CSS-Background-Size-jQuery-Plugin:
• Using javascript get width and height of window size added style elements for img tag
• Not perfect
• https://github.com/aramkocharyan/CSS-Background-Size-jQuery-Plugin
2. rounded-corner:
1. CSS3 PIE:
• Can not works well when using menu hover
• Perfect for static elements
• http://css3pie.com/
2. jQuery Corner:
• Auto added white space for rounded-corner, it's not transparent
• Perfect for white background
• http://jquery.malsup.com/corner/
3. jQuery Curvy Corners:
• Required jQuery 1.4.2
• http://code.google.com/p/jquerycurvycorners/downloads/list
• http://blue-anvil.com/jquerycurvycorners/test.html
• Latest version is: 1.8.2

Good luck!

jQuery - Delete cache with jQuery Mobile

This is function will help me delete cache when I build website for mobile:

$(function(){
    $('div').live('pagehide', function (event, ui) {
      var $this = $(this);
      if ($this.attr('ID') !== undefined && $this.attr('data-cache') !== undefined && $this.attr('data-cache') == "never") {
        var page = $this.attr('ID');
        $(document.getElementById(page)).remove();
      }
    });
});


OR

$(document).bind("mobileinit", function () {
    $.mobile.hashListeningEnabled = false;
    $.mobile.ajaxEnabled = false;
});


OR

$(document).ready(function() {
    $('form, a').removeAttr('data-ajax');
    $('form, a').attr('data-ajax', false);
});



Good luck!

jQuery - Datepicker Renderer

This is example about Datepicker Renderer:

var themeRollerRenderer = {
 picker: '<div {popup:start} id="ui-datepicker-div"{popup:end} class="ui-datepicker ui-widget ' +
     'ui-widget-content ui-helper-clearfix ui-corner-all{inline:start} ui-datepicker-inline{inline:end}">' +
     '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">' +
     '{link:prev}{link:today}{link:next}</div>{months}' +
     '{popup:start}<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ' +
     'ui-corner-all">{button:clear}{button:close}</div>{popup:end}' +
     '<div class="ui-helper-clearfix"></div></div>',
 monthRow: '<div class="ui-datepicker-row-break">{months}</div>',
 month: '<div class="ui-datepicker-group">' +
     '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">{monthHeader:MM yyyy}</div>' +
     '<table class="ui-datepicker-calendar"><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table></div>',
 weekHeader: '<tr>{days}</tr>',
 dayHeader: '<th>{day}</th>',
 week: '<tr>{days}</tr>',
 day: '<td>{day}</td>',
 monthSelector: '.ui-datepicker-group',
 daySelector: 'td',
 rtlClass: 'ui-datepicker-rtl',
 multiClass: 'ui-datepicker-multi',
 defaultClass: 'ui-state-default',
 selectedClass: 'ui-state-active',
 highlightedClass: 'ui-state-hover',
 todayClass: 'ui-state-highlight',
 otherMonthClass: 'ui-datepicker-other-month',
 weekendClass: 'ui-datepicker-week-end',
 commandClass: 'ui-datepicker-cmd',
 commandButtonClass: 'ui-state-default ui-corner-all',
 commandLinkClass: '',
 disabledClass: 'ui-datepicker-disabled'
};

$('.datepicker').datepick({
 alignment: 'bottom',
 showOtherMonths: true,
 selectOtherMonths: true,
 dateFormat: 'dd-mm-yyyy',
 renderer: {
     picker: '<div class="datepick block-border clearfix form">' +
             '<div class="mini-calendar clearfix">' +
                     '{link:prev}{link:today}{link:next}' +
                 '{months}' +
             '</div>' +
         '</div>',
     monthRow: '{months}',
     month: '<div class="calendar-controls">' +
                 '{monthHeader:M yyyy}' +
             '</div>' +
             '<table cellspacing="0">' +
                 '<thead>{weekHeader}</thead>' +
                 '<tbody>{weeks}</tbody></table>',
     weekHeader: '<tr>{days}</tr>',
     dayHeader: '<th>{day}</th>',
     week: '<tr>{days}</tr>',
     day: '<td>{day}</td>',
     monthSelector: '.month',
     daySelector: 'td',
     rtlClass: 'rtl',
     multiClass: 'multi',
     defaultClass: 'default',
     selectedClass: 'selected',
     highlightedClass: 'highlight',
     todayClass: 'today',
     otherMonthClass: 'other-month',
     weekendClass: 'week-end',
     commandClass: 'calendar',
     commandLinkClass: 'button',
     disabledClass: 'unavailable',
     }
 });
});

And this is some example about Datepicker with other choose:

• http://keith-wood.name/datepick.html
• http://keith-wood.name/datepickRef.html
• http://www.assembla.com/code/ultimogol/subversion/nodes/trunk/ultimogol-app/src/main/webapp/libraries/jquery_calendar/jquery.datepick.ext.js?rev=9

Twitter Bootstrap

Hi,

These some example website using bootstrap:

1. http://chanantechnologies.com
2. http://wbpreview.com/previews/WB0164888

Have fun!