[تحدي JQuery !] اريد طريقة لحل مشكلة CSS داخل X ربما حلها بالـ JQuery, ممكن مساعدة؟

**المظفر بالله** · 23-04-2011

السلام عليكم ورحمة الله وبركاته

اخواني الكرام عندي مشكلة بتعديل برمجية معمولة على JSP , المهم المشكلة انه اريد تعريب البرمجية, المشكلة هي ان الستايل الموجود في هذه المنتج رغم انه عالمي ان الستايل موجود على شكل inline style بمعنى كل تاج ينعمل له اتريبيوت style وينكتب الستايل داخله, للتوضيح انظروا المثال التالي:

الملف يحتوي على اكواد HTML :

<div style="text-align: left; margin-left:2px;">Something</div>

طبعا المشكلة انه عدد ملفات الجي اس بي كبير جداً, لكن اريد ان اضع كود في الهيدر يقوم بقراءة كل الصفحة وقلب الستايلات بحيث يصبح

<div style="text-align: right; margin-right:2px;">Something</div>

هل هذا ممكن بالجيكويري ؟؟؟؟

بمعنى اريد ان يبحث كود الجيكويري عن كل tag عنده style يخص text-align ويقرأه ويقوم بكتابة عكسه, ان كان left يجعله right والعكس صحيح !!!

بحيث احافظ على الملفات بدون تعديل, وبنفس الوقت يكون مريح؟

تحدي صحيح

وشكراً لكم ...

**خالد الحضري** · 23-04-2011

سهلة إن شاء الله

جرب التالي في الهيدر (JQuery)

كود PHP:


<script type="text/javascript">
$(document).ready(function() {
    $('*').css({
        'text-align': 'right' ,
        'margin-left' : '0' ,
        'margin-right' : '2px'
    });
});
</script>

وفقك الله .

**ahmad sadiq** · 23-04-2011

جرب هذا:

كود HTML:

<!DOCTYPE html>
<html>
<head>
 
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
 <div style="text-align: left; margin-left:2px;background:red">Something left</div>
 <div style="text-align: right; margin-right:2px;;background:blue">Something right</div>
<script>
    $(document).ready(function () {
      $("*").each(function (i) {
        if ($(this).css("text-align") != "right") {
          $(this).css({
        'text-align': 'right' ,
        'margin-left' : '0' ,
        'margin-right' : '2px'
    });
        } else {
          $(this).css({
        'text-align': 'left' ,
        'margin-left' : '2px' ,
        'margin-right' : '0px'
    });
        }
      });
    });
</script>

</body>
</html>

**المظفر بالله** · 23-04-2011

المشاركة الأصلية كتبت بواسطة ahmad sadiq مشاهدة المشاركة

جرب هذا:

كود HTML:

<!DOCTYPE html>
<html>
<head>
 
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
 <div style="text-align: left; margin-left:2px;background:red">Something left</div>
 <div style="text-align: right; margin-right:2px;;background:blue">Something right</div>
<script>
    $(document).ready(function () {
      $("*").each(function (i) {
        if ($(this).css("text-align") != "right") {
          $(this).css({
        'text-align': 'right' ,
        'margin-left' : '0' ,
        'margin-right' : '2px'
    });
        } else {
          $(this).css({
        'text-align': 'left' ,
        'margin-left' : '2px' ,
        'margin-right' : '0px'
    });
        }
      });
    });
</script>

</body>
</html>

صدق غابت عن بالي, لا اعرف لماذا فكرت انه الامر معقد وترسخت هذه الفكرة ببالي حتى ظننت انه حلها تحدي

, << خبرتي بسيطة بالجيكويري

أظن رح تشتغل ان شاء الله ...

الاخ خالد بارك الله فيك , لكن الكود اللي كتبته حضرتك فيه مشكلة انه يعمم على كل التاجز الموجودة في الصفحة, انا اريد فقط قلب الموجود يعني ممكن يكون شمال اخليه يمين والعكس ...

**المظفر بالله** · 23-04-2011

طيب ممكن عمل نفس الشيء بالـ YUI ... ؟

**خالد الحضري** · 23-04-2011

المشاركة الأصلية كتبت بواسطة المظفر بالله مشاهدة المشاركة

الاخ خالد بارك الله فيك , لكن الكود اللي كتبته حضرتك فيه مشكلة انه يعمم على كل التاجز الموجودة في الصفحة, انا اريد فقط قلب الموجود يعني ممكن يكون شمال اخليه يمين والعكس ...

صدقت ، و ردي كان مفتاح فقط و ليس حلا

وفقك الله .

**المظفر بالله** · 23-04-2011

المشاركة الأصلية كتبت بواسطة خالد محمد الحسن مشاهدة المشاركة

صدقت ، و ردي كان مفتاح فقط و ليس حلا

وفقك الله .

بارك الله فيك , لكن تعرف YUI ...

لاكون واضح انا اعدل على الفريسكو , والعربي فيه مشكلة , اقصد الفريسكو اكسبلورر, ففكرت مبدئياً بتعديله بالجيكويري, لكن كنت نسيت انه يتعامل مع YUI فهل يوجد حل

**المظفر بالله** · 24-04-2011

المشاركة الأصلية كتبت بواسطة ahmad sadiq مشاهدة المشاركة

جرب هذا:

كود HTML:

<!DOCTYPE html>
<html>
<head>
 
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
 <div style="text-align: left; margin-left:2px;background:red">Something left</div>
 <div style="text-align: right; margin-right:2px;;background:blue">Something right</div>
<script>
    $(document).ready(function () {
      $("*").each(function (i) {
        if ($(this).css("text-align") != "right") {
          $(this).css({
        'text-align': 'right' ,
        'margin-left' : '0' ,
        'margin-right' : '2px'
    });
        } else {
          $(this).css({
        'text-align': 'left' ,
        'margin-left' : '2px' ,
        'margin-right' : '0px'
    });
        }
      });
    });
</script>

</body>
</html>

بالمناسبة اخي احمد, هنالك تاجز لا تملك margin سيضيف الكود عليها مارجن, هل هذا يؤثر !, لا اقصد بالتأثير المرئي فبتأكيد لن يكون هنالك مشكلة لانه مثلا الافتراضي هو 0 , لكن اقول من حيث السورس كود, هل يؤثر على سرعة التصفح ؟

أظن الجواب لا ! , صحيح ؟

واذا كان عندك علم بالـ YUI هل يوجد حل من خلاله ..

بارك الله فيك

**المظفر بالله** · 24-04-2011

المشاركة الأصلية كتبت بواسطة ahmad sadiq مشاهدة المشاركة

جرب هذا:

كود HTML:

<!DOCTYPE html>
<html>
<head>
 
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
 <div style="text-align: left; margin-left:2px;background:red">Something left</div>
 <div style="text-align: right; margin-right:2px;;background:blue">Something right</div>
<script>
    $(document).ready(function () {
      $("*").each(function (i) {
        if ($(this).css("text-align") != "right") {
          $(this).css({
        'text-align': 'right' ,
        'margin-left' : '0' ,
        'margin-right' : '2px'
    });
        } else {
          $(this).css({
        'text-align': 'left' ,
        'margin-left' : '2px' ,
        'margin-right' : '0px'
    });
        }
      });
    });
</script>

</body>
</html>

وما رأيك بهذا الكود :

كود PHP:


$(function () {
    $("*").each(function (i) {
        var align = $(this).css("text-align");
        var leftPadding = $(this).css("padding-left");
        var rightPadding = $(this).css("padding-right");
        var leftMargin = $(this).css("margin-left");
        var rightMargin = $(this).css("margin-right");
        var floatVal = $(this).css("float");

        if (align == "left") {$(this).css({'text-align': 'right'});} 
        else if (align == "right"){$(this).css({'text-align': 'left'});}
        if (floatVal == "left") {$(this).css({'float': 'right'});}
        else if (floatVal == "right"){$(this).css({'float': 'left'});}
        
        if (rightPadding != leftPadding)
        {
            $(this).css("padding-left") = rightPadding;
            $(this).css("padding-right") = leftPadding;
        }
        if (rightMargin != leftMargin)
        {
            $(this).css("margin-left") = rightMargin;
            $(this).css("margin-right") = leftMargin;
        }
    });
});

وممكن اضيف direction اذا اقتضى الامر رغم انه رح يسبب مصيبة لو كتبته, لانه يكفي وضعه بالبودي لكن اخاف يكون مكتوب بشكل منفصل.

**ahmad sadiq** · 24-04-2011

لا والله ما بعرف بال yui
الصراحة لم يعجبني استعمال مكتبات الجافاسكربت لهذه المهمة
اﻻفضل ان يتم ذلك يدويًا،
عن طريق التعابير القياسية، او عن طريق تطبيق للاخ خليل سليم طرحه لهذا الغرض

**massalha** · 24-04-2011

ممكن حل من عندي يا شباب ...

أن تضيف خاصية كاش لموقعك يقوم بمهمتان:
1. حفظ ملفات كاش
2. قلب الستايل كيفما تريد.

أي ... أن تعمل دالة JS تقوم بقلب الستايل ... وأيضاً تحفظ النتيجة في ملفات كاش ... عصفورين في حجر ...

أو ....

ان تستعمل دريم ويفر مثلاً ... وتقوم بالبحث في كل الملفات التي بها text-align:left وغيرها ... وتقلبها الى التي تريد ... أو
style='text-align:left;padding-right:4px'
الى
class='something'

شكراً

**فهد علي** · 24-04-2011

ولا تتعب نفسك
في ثواني يقلب لك الاستايل.
http://www.ahmadh.com/tools/cssmirror/

الموضوع: [تحدي JQuery !] اريد طريقة لحل مشكلة CSS داخل X ربما حلها بالـ JQuery, ممكن مساعدة؟

أدوات الموضوع

بحث في الموضوع

[تحدي JQuery !] اريد طريقة لحل مشكلة CSS داخل X ربما حلها بالـ JQuery, ممكن مساعدة؟

المواضيع المتشابهه

اريد كود فتح نافذة صغير jquery

[طلب مستعجل] حركة تقلب اخبار او مقالات بالـ JQuery كيف اعملها

صناعة داله داخل jquery

نوافذ استعلامية وتنبيهية بالـ jQuery

ضوابط المشاركة