سأحاول أن أشرح طريقة الكود الثالث الذي أدرجه الأخ رضى بطريقتي و الخاص بالمقال حيث أنك عندما تضغط على رابط او صورة ينقسم المقال إلى ثلاث أعمدة عوض عمود واحد
تكلمت رضى في صراع الحضارات
بين div وtable لمن المستقبل
و في رد الأخ فنان العرب قال أن المستقبل لهم الإثنين و إنشاء الله سيتزوجون
هنا سنرى كيف سيكمل كل منهما الآخر
بداية نحتاج ان نحجز مساحة بو سم div و نعطيه إيدي خاص به نفترضه MsgIn لأن به سنضع المقال و لا ننسى أن نعطي ل display في ستايل none أي أن المقال موجود بالصفحة لكن أخفيناه و ستعرف لماذا
نفتح div آخر و نسميه MsgOut هنا سنخرج المقال عن طريق جافا سكريبت بعد ان نسحبه من div الأول وبعد عمل التعديلات الازمة عليه لهذا السبب أخفينا المقال الأول
مطلوب أيضا رابطين عند الضغط على الأول يظهر عمود واحد وعند الضغط على الآخر تظهر ثلاث اعمدة و سيكون كود html هكذا
كود PHP:
<div id="MsgIn" style="display:none">
المقال يوضع ويفضل أن يكون بال HTML
</div>
<A HREF="#" onclick="wclick()">Line</A><BR>
<A HREF="#" onclick="wnormal()">MultiLine</A>
<div id="MsgOut" dir="rtl"></div>
الآن سنأتي لجافا سكريبت و قبل فتح الوسم لنفكر قليلا، عندك مقال لإظهاره كعمود واحد يجب إدخاله وسط جدول ب td واحدة و إعطاء طول و عرض الجدول قيمة مئوية ك
كود PHP:
<TABLE WIDTH="100%" HEIGHT="100%">
<TR>
<TD>المقال</TD>
</TR>
</TABLE>
وللإضهاره في ثلاث أعمدة أنذاك وجب وضع ثلاث من td ليصبح
كود PHP:
<TABLE>
<TR>
<TD>المقال1</TD>
<TD>المقال2</TD>
<TD>المقال3</TD>
</TR>
</TABLE>
لقد جهزت سكريبت يعمل و لشرحه سيطول بنا الموضوع و قد يتشعب لكن إن كانت لك دراية ب javascript فستفهمها و تفهم مكانزماتها
عيبه مقتصر على ie و كونكرور و عند تقسيم المقال قد يقسم الكلمة فتصبح بديتها في هذا العمود و نهايتها في عمود آخر هذه العيوب يمكن أن تتجاوز ,فقط لأني وضعته على عجل
الكود هو
كود PHP:
<div id="MsgIn" style="display:none">
المقال يوضع ويفضل أن يكون بال HTML
</div>
<A HREF="#" onclick="wclick()">MultiLine</A><BR>
<A HREF="#" onclick="wnormal()">Line</A>
<div id="MsgOut" dir="rtl"></div>
<SCRIPT LANGUAGE="JavaScript">
/*
4swalif
Ibrahim Bidi
*/
var a3mida = 3;
var table1 = '<TABLE WIDTH="100%" HEIGHT="100%"><TR><TD>';
var table2 = "</TD></TR></TABLE>";
//
var td = "</TD><TD>";
var z = 0;
wclick = function(){
var MsgIn = document.all.MsgIn.innerHTML;
var lengMsgIn = MsgIn.length;
var m = lengMsgIn / a3mida;
var html = "";
html+= table1;
for(var i=0;i<lengMsgIn+a3mida;i++){
z++;
html+= MsgIn.substring(i,i+1);
if(z>m){html+=td;z=0}
}
html+=table2;
MsgOut.innerHTML = html;
}
wnormal = function(){
var MsgIn = document.all.MsgIn.innerHTML;
var html = table1+MsgIn+table2;
MsgOut.innerHTML = html
}
window.onload = wnormal
</SCRIPT>
تجربة
يفضل إنزاله من المرفقات
و السلام