background-position RTL jQuery plugin

כיצד להגדיר background-position כשמדובר באתרים עם rtl ?

התחלתי לעצב אתר כשקבלתי עיצוב מותאם לאנגלית והייתי צריך לשנות אותו לעברית,

על ההתחלה נתקלתי בבעייה הבאה:

נקח לדוגמא את ה - css הבא:

body
{
    background-image: url('Penguins.jpg');
    background-repeat: repeat-y;
    background-position-x: 30px;
}

css פשוט ביותר שיגרום לתמונה מסויימת להתחיל בשלושים פיקסל ימינה, מה יקרה עם נוסיף את השורה הבאה:

direction: rtl;

האתר יעבור לצד ימין, כשתמונת הרקע נשארה תקועה בצד שמאל, בעוד שהכוונה כרגע שמצד ימין של האתר יהיה רווח של שלושים פיקסל לשמאל.

(פתרון ביניים הוא לעבוד באחוזים (95%) אבל במקרה כזה מיקום התמונה עלול להשתנות בשינוי גודל החלון)

ב - css3 כבר תיקנו את הבעייה על ידי הקוד הבא:

background-position-x: right 30px;

אבל עד כמה שידוע לי הדפדפן היחיד שתומך בזה הוא (נכון להיום) IE9.

חפשתי הרבה זמן בגוגל אך לא מצאתי פיתרון, בסופו של תהליך הגעתי למסקנה שעלי לכתוב סקריפט שיזיז את התמונה בהתאם למיקום החלון.

אתמול קראתי בפוסט של שי רייטן על כתיבת jQuery plugin - החלטתי לנסות, והנה התוצאה.

 
(function ($) {
    $.fn.backgroundPositionRTL = function (imgWidth, rightPosition) {
        var $element = this;
 
        $(window).resize(function () {
            changePosition();
        });
 
        (changePosition = function () {
            var position = ($(window).width() - (imgWidth + rightPosition)) - $element.position().left;
            $element.css('background-position-x', position + 'px');
        })();
    }
})(jQuery);
 
 
 

בקריאה לפונקציה (ע"י סלקטור כלשהו) נשלח את גודל התמונה וכמה להזיז מימין.

נרשם לאירוע של שינוי גודל החלון ונפעיל את הפונקציה שיודעת לשנות את המיקום בהתאמה, (בסוף הפונקציה של changePosition יש () וזהו כדי להפעיל בפעם הראשונה את הסקריפט לפני שהיה שינוי בגודל החלון.

כעת השימוש יהיה בצורה הבאה:

$(document).ready(function () {
    $(document.body).backgroundPositionRTL(410, 30);
});

עוד דוגמא לשימוש:

.div1
{
    background-image: url('Penguins.jpg');
    background-repeat: no-repeat;
    background-position-x: right 50px;
    width: 600px;
    height: 500px;
    border: 1px solid black;
}
 
$('.div1').backgroundPositionRTL(410, 50);