• 0
نيزك

صفحة بداخل صفحة

سؤال

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

أحاول أن أقوم بعمل صفحة index يعرض فيها مجموعة من المواضيع ومن ضمنها مربع هو عبارة عن صفحة أخرى news مثلا يتغير محتواها حسب الرقم الذي يتم أختياره

مثال أخبار الجزيرة الصورة والخبر يتغير حسب الرقم

لا أريده تماما مثل سكربت الجزيرة انما شئ بسيط يؤدي نفس الغرض مثلا صورة وكتابة تتغير

رغم محاولاتي والبحث الطويل إلا أني لم أصل إلى نتيجة ربما لعدم معرفتي بلغة الجافا سكربت

ولكن من الجيد وجود فريق عربي يمكن الرجوع إليه للأستفادة من الخبرات الجماعية

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

9 إجابة على هذا السؤال .

  • 0

اذا كان مقالاتك dynamic اى ستضيف جديد وتعدل وتحذف فيمكنك عمل فلتره باستخدام sql حسب الرقم الموجود فى الرقم في ال url ومنها تظهر اخبار مقالات ,,,,

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

بالتوفيق

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكراً لك اخي الكريم على ردك الطيب

رغم تفاجئي بعدد الردود في مثل هذا الموقع العملاق

فعلا انا استخدم قاعدة بيانات

لكن المشكلة اني اريد تغيير محتوى الصفحة الداخلية دون تحميل البيانات من جديد وإلا كنت أستخدمة الأجاكس

اذا نظرت إلى المثال "أخبار الجزيرة " تجد كل الأخبار تحمل مرة واحدة ثم تقوم بالتنقل بينها بالأرقام دون تجديد التحميل

هل الموضوع صعب لهذه الدرجة أم أن الجميع لم يعرضو كود مشابه

أثناء بحثي وجت اسكربت يقوم بتغيير الصورة وفق ما تختارة من الكمبو بكس ولكن تغيير محتوى صفحة أخري شئ مختلف

هذا كود السكربت

<form name="dynamicselector">
<table border="0" width="250" cellspacing="0" cellpadding="0" height="60">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="1" onChange="generateimage(this.options[this.selectedIndex].value)">
<option value="" selected>اختر الصورة</option>
<option value="036.gif">صورة رقم 1</option>
<option value="103.gif">صورة رقم 2</option>
<option value="105.gif">صورة رقم 3</option>
<option value="131.gif">صورة رقم 4</option>
<option value="216.gif">صورة رقم 5</option>
</select>
<script>

/*
Dynamic Image selector Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

function generateimage(which){
if (document.all){
dynamic3.innerHTML='<center>Loading image...</center>';
dynamic3.innerHTML='<img src="'+which+'">';
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<img src="'+which+'">');
document.dynamic1.document.dynamic2.document.close();
}
else
alert('You need NS 4 or IE 4 to view the images!');
}
</script>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width="100%" height="178"><layer id="dynamic2" width="100%" height="178"><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

كنت قد رددت عليك وأنا في الخارج ولكن قبل عملية الإرسال نفذت البطارية من المحمول :) ولم يتم ارسال الرد , هذا قدرك :)

على كل كنت كاتب وأكيد إلى الآن موجود الرد على المحمول بس بتعرف قلة الحيله بدي أروح أشغله وقصه , لا بعيد الرد مرة ثانيه ولا إني أقوم وأغلب حالي <_<

الحل هو وضع الخبر والصورة في ديف (div) وإخفاء هذا الديف وتسميته بإسم آخرة رقم وهكذا مع جميع الأخبار

ثم تقوم بعمل دالة تأخذ متغير واحد تقوم هذه الدالة بإخفاء جميع الديفز (divs)وإظهار الديف الذي ينتهي إسمه بالرقم الموجود بالمتغير

سأقوم بعمل مثال

<style>
.ne{
border: 5px;
border-style: dotted;
width: 200px;

}


</style>


<body onload="show_news(3)"> .
<script>
function show_news(numb){
var i=1;
for (i=1;i<=5;i++){
document.getElementById('a_' +i).style.visibility='hidden';
document.getElementById('a_' +i).style.display = 'none';
}
document.getElementById('a_' +numb).style.visibility='visible';
document.getElementById('a_' +numb).style.display = 'block';
}

</script>
bla bal bla bla bla bla bla bla <br />bla bla bla bla <br />bla bla bla
bla bla bla bla <br />bla bla bla <br />bla bla bla <br />bla bla
<div>
<div id="a_1" class="ne">bla bla bla bla1 <img src="http://www.arabteam2000-forum.com/style_emoticons/default/Bg_016.gif" alt="" /></div>
<div id="a_2" class="ne">bla bla bla bla2 <img src="http://www.arabteam2000-forum.com/style_emoticons/default/004.gif" alt="" /></div>
<div id="a_3" class="ne">bla bla bla bla3 <img src="http://www.arabteam2000-forum.com/style_emoticons/default/001.gif" alt="" /></div>
<div id="a_4" class="ne">bla bla bla bla4 <img src="http://www.arabteam2000-forum.com/style_emoticons/default/Bg_017.gif" alt="" /></div>
<div id="a_5" class="ne">bla bla bla bla5 <img src="http://www.arabteam2000-forum.com/style_emoticons/default/009.gif" alt="" /></div>
</div>
<a href="#" onclick="show_news(1)"> 1 </a>|
<a href="#" onclick="show_news(2)"> 2 </a>|
<a href="#" onclick="show_news(3)"> 3 </a>|
<a href="#" onclick="show_news(4)"> 4 </a>|
<a href="#" onclick="show_news(5)"> 5 </a>
bla bal bla bla bla bla bla bla <br />bla bla bla bla <br />bla bla bla
bla bla bla bla <br />bla bla bla <br />bla bla bla <br />bla bla
bla bal bla bla bla bla bla bla <br />bla bla bla bla <br />bla bla bla
bla bla bla bla <br />bla bla bla <br />bla bla bla <br />bla bla
bla bal bla bla bla bla bla bla <br />bla bla bla bla <br />bla bla bla
bla bla bla bla <br />bla bla bla <br />bla bla bla <br />bla bla
</body>

post-21336-1240956031_thumb.png

*ملاحظة هذه المقاله مكانها في منتدى الجافاسكريبت وليس هنا وهذا سبب قلة الردود

سبب التعديل إرفاق صورة عن المثال.

تم تعديل بواسطه bastr3
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

ممكن استخدام امر

include

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أشكرك أخي bastr3 على ردك الطيب

فعلا حللت المشكلة

جازاك الله عني خير الجزاء

فقط حللت لي مشكلة

لكن ضهورها جميعا معا في البداية أمر مزعج

ثم لا يوجد تبديل زمني بينها

لا أريد أن أثقل عليك ولكني لا أعلم شئ تقريبا عن الجافا اسكربت

أخي yaco_ara

جربت إستخدام دالة include لكنها لا تقوم بتحميل متقيرات إلى الصفحة الهدف

تم تعديل بواسطه نيزك
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

اعتقد اني وجدت الحل للظهور الأولي يمكننا إضافة الكود في تعريف div لكل خلية كالتالي

<div>
<div id="a_1" class="ne" style="display:none ">bla bla bla bla1 <img src="http://www.arabteam2000-forum.com/style_emoticons/default/Bg_016.gif" alt="" /></div>
<div id="a_2" class="ne" style="display:none ">bla bla bla bla2 <img src="http://www.arabteam2000-forum.com/style_emoticons/default/004.gif" alt="" /></div>
<div id="a_3" class="ne" style="display:none ">bla bla bla bla3 <img src="http://www.arabteam2000-forum.com/style_emoticons/default/001.gif" alt="" /></div>
<div id="a_4" class="ne" style="display:none ">bla bla bla bla4 <img src="http://www.arabteam2000-forum.com/style_emoticons/default/Bg_017.gif" alt="" /></div>
<div id="a_5" class="ne" style="display:none ">bla bla bla bla5 <img src="http://www.arabteam2000-forum.com/style_emoticons/default/009.gif" alt="" /></div>
</div>

فكيف يتم التقليب الزمني

تم تعديل بواسطه نيزك
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

:)

التبديل بينهم في عدة طرق ... الطريقة التقليدية هي من خلال دالة

var t=setTimeout("javascript statement",milliseconds);

والطرق الجديده هي إستخدام المكتبات مثل jquery بتعطي إفيكت وفيد إن وآوت مع ظهور كل خبر

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أين يتم وضعها هل من مثال

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أنا لست قويا في الجافا سكريبت ولكن هذا ماتوصلت له :)

قم بتغيير السكريبت إلى :

<script>
var numb_auto=1;
function show_news(numb){
var i=1;
for (i=1;i<=5;i++){
document.getElementById('a_' +i).style.visibility='hidden';
document.getElementById('a_' +i).style.display = 'none';
}
document.getElementById('a_' +numb).style.visibility='visible';
document.getElementById('a_' +numb).style.display = 'block';
numb_auto=numb_auto+1;


if(numb_auto==6){numb_auto=1;}
setTimeout("show_news("+numb_auto+")",5000);
}

</script>

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .