شريط اخبار لماذا لا يعمل في FireFox/Chrome

بدأه Mohammad Alsadek في 7 أكتوبر 2010 · 6 رد · 580 مشاهدة · في قسم البرمجة بــ Javascript

#17 أكتوبر 2010 في 17:34 صاحب الموضوع

السلام عليكم،

قمت بانشاء شريط اخبار لكني اكتشفت انه يعمل فقط على IE لا اعلم لماذا، هنا الكود كاملاً:

<html>
 <head>
 <style type="text/css">
  span.dt{text-align:right;color:rgb(255,255,255);font-size:12px;font-weight:normal;font-family:"Times New Roman", Times, serif;}
  span.nw{text-align:right;color:rgb(255,255,255);font-size:12px;font-weight:normal;font-family:"tahoma";}
 </style>
  <title>
  </title>
 </head>
 <body bgcolor="#667DB3">
 <div id="disspageie" style="position:absolute;
      background:#667DB3;width:180; height:222;left:0; 
      top:0;margin:0px;overflow:hidden;padding:0px;
      border-style:solid; border-width:1px; 
      border-color:#5C5C5C;"></div>
      <form>
      <div id="spageie" align="right" style="position:absolute; 
      width:180; height:220;left:0; top:0; border-width:0px; 
      overflow:hidden;"></div></form>
      <script language="javascript">
  var titles = new Array();
  var info = new Array();
  var i;
  var tp=0;
  var abs_tp=0;
  var dv = new Array();
  var dv_top=new Array();
  var dv_hgt=new Array();
  var lst_dv=5;
  var ps=0;

  titles[0]=" 25.2.2010 14:32:12 ";
  info[0]="<A href='http://www.walla.co.il'> لقاء معايدة بمناسبة حلول عيد الأضحى في القدس</A>";
  //info[0]=""+" <A href='http://www.walla.co.il'";
  titles[1]=" 25.2.2010 19:32:12";
  info[1]="اطول شلال";
  titles[2]=" 25.2.2010 22:32:12";
  info[2]="مسيرتان احتفالا بالعيد في اللد والرملة ";
  titles[3]=" 25.2.2010 11:32:12";
  info[3]=" لوائح اتهام خطيرة ضد 4 شبان من النقب والشبلي";
  titles[4]=" 25.2.2010 11:32:12";
  info[4]="انقاذ حياة عاملة تنظيف بفندق بايلات";
  titles[5]=" 27.2.2010 18:32:04";
  info[5]="لماذا تم تأجيل زيارة الشاب كريم الى المانيا ؟";

  function mouseover()
  {
   ps=1;
  }

  function mouseout()
  {
   ps=0;
  }

  function create_div_dynamic(d)
  {
   dv[d-1]=document.createElement('div'); 
   dv[d-1].setAttribute('id',"div_"+d);       
   dv[d-1].className="top_"+d;                   
   dv[d-1].style.position="absolute";       
   dv[d-1].style.pixelLeft=0;   
   dv[d-1].style.pixelTop=abs_tp;
   dv[d-1].style.pixelWidth=179;
   dv[d-1].style.pixelHeight=30;
   dv[d-1].style.backgroundColor="#667DB3";
   dv[d-1].innerHTML+= "<span class='dt' align='right'>"+titles[d-1] +"</span>";
   dv[d-1].innerHTML+= "<span class='nw'>"+"<br>" + info[d-1] +"</span>";
   dv[d-1].attachEvent('onmouseover',mouseover);
   dv[d-1].attachEvent('onmouseout',mouseout);
   var ni = document.getElementById('spageie');
   ni.appendChild(dv[d-1]);
  }
  for(i=1;i<7;i++)
  {
   create_div_dynamic(i);
   dv_top[i-1]=abs_tp;
   abs_tp+=document.getElementById('div_'+i).offsetHeight;
   dv_hgt[i-1]=document.getElementById('div_'+i).offsetHeight;
   abs_tp+=20;
  }

  function Animate_News()
  {
   if(ps==0)
   {
    for(i=1;i<7;i++)
    {
     dv_top[i-1]--;
     dv[i-1].style.pixelTop=dv_top[i-1];
     if(dv_top[i-1]<(0-dv_hgt[i-1]))
     {
      if(dv_top[lst_dv]<(220-dv_hgt[lst_dv]))
      {
       dv_top[i-1]=240;
       lst_dv=i-1;
      } 
     }
    }
   } 
   setTimeout('Animate_News()',40);
  }
  setTimeout('Animate_News()',10);
 </script>
 </div>
 </div>
  </body>
</html>

#27 أكتوبر 2010 في 18:31

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

لن استطيع حل مشكلتك ﻷني وقتي ضيق قليلا الآن ولكن سأدلك على مشكلتك :)

أخي أنت تستخدم IE-only javascript method و التي هي :

 attachEvent

هذه الدالة ليست Standard javascript method و إنما هي خاصة فقط بـ IE

لذلك استخدم الدالة البديلة و التي تعتبر Standard و التي هي :

 addEventListener

ابحث عن هذه الدالة و تعلم كيفية التعامل معها بتوفيق الله..

تم تعديل هذه المشاركة بواسطة MoHaMMaD Pro في 7 أكتوبر 2010 في 18:35

Everything will be fine when we TALK LESS, DO MORE

#37 أكتوبر 2010 في 18:50

سوف ابحث عن كيفية استخدامها وجزاك الله عنا كل خير.

#47 أكتوبر 2010 في 22:32

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

عدنا :)

تفضل أخي لقد قمت بتعديل الكود لك و هو يعمل الآن على Firefox

<html>
 <head>
 <style type="text/css">
  span.dt{text-align:right;color:rgb(255,255,255);font-size:12px;font-weight:normal;font-family:"Times New Roman", Times, serif;}
  span.nw{text-align:right;color:rgb(255,255,255);font-size:12px;font-weight:normal;font-family:"tahoma";}
 </style>
  <title>
  </title>
 </head>
 <body bgcolor="#667DB3">
 <div id="disspageie" style="position:absolute;
  	background:#667DB3;width:180; height:222;left:0; 
  	top:0;margin:0px;overflow:hidden;padding:0px;
  	border-style:solid; border-width:1px; 
  	border-color:#5C5C5C;"></div>
  	<form>
  	<div id="spageie" align="right" style="position:absolute; 
  	width:180; height:220;left:0; top:0; border-width:0px; 
  	overflow:hidden;"></div></form>
  	<script language="javascript">
  var titles = new Array();
  var info = new Array();
  var i;
  var tp=0;
  var abs_tp=0;
  var dv = new Array();
  var dv_top=new Array();
  var dv_hgt=new Array();
  var lst_dv=5;
  var ps=0;

  titles[0]=" 25.2.2010 14:32:12 ";
  info[0]="<A href='http://www.walla.co.il'> لقاء معايدة بمناسبة حلول عيد الأضحى في القدس</A>";
  //info[0]=""+" <A href='http://www.walla.co.il'";
  titles[1]=" 25.2.2010 19:32:12";
  info[1]="اطول شلال";
  titles[2]=" 25.2.2010 22:32:12";
  info[2]="مسيرتان احتفالا بالعيد في اللد والرملة ";
  titles[3]=" 25.2.2010 11:32:12";
  info[3]=" لوائح اتهام خطيرة ضد 4 شبان من النقب والشبلي";
  titles[4]=" 25.2.2010 11:32:12";
  info[4]="انقاذ حياة عاملة تنظيف بفندق بايلات";
  titles[5]=" 27.2.2010 18:32:04";
  info[5]="لماذا تم تأجيل زيارة الشاب كريم الى المانيا ؟";

  function mouseover()
  {
   ps=1;
  }

  function mouseout()
  {
   ps=0;
  }

  function create_div_dynamic(d)
  {
   dv[d-1]=document.createElement('div'); 
   dv[d-1].setAttribute('id',"div_"+d);   	
   dv[d-1].className="top_"+d;               	
   dv[d-1].style.position="absolute";   	
   dv[d-1].style.pixelLeft=0;   
   dv[d-1].style.pixelTop=abs_tp;
   dv[d-1].style.pixelWidth=179;
   dv[d-1].style.pixelHeight=30;
   dv[d-1].style.backgroundColor="#667DB3";
   dv[d-1].innerHTML+= "<span class='dt' align='right'>"+titles[d-1] +"</span>";
   dv[d-1].innerHTML+= "<span class='nw'>"+"<br>" + info[d-1] +"</span>";
   dv[d-1].addEventListener('mouseover',mouseover,false);
   dv[d-1].addEventListener('mouseout',mouseout,false);
   var ni = document.getElementById('spageie');
   ni.appendChild(dv[d-1]);
  }
  for(i=1;i<7;i++)
  {
   create_div_dynamic(i);
   dv_top[i-1]=abs_tp;
   abs_tp+=document.getElementById('div_'+i).offsetHeight;
   dv_hgt[i-1]=document.getElementById('div_'+i).offsetHeight;
   abs_tp+=20;
  }

  function Animate_News()
  {
   if(ps==0)
   {
	for(i=1;i<7;i++)
	{
 	dv_top[i-1]--;
 	dv[i-1].style.top=dv_top[i-1];
 	if(dv_top[i-1]<(0-dv_hgt[i-1]))
 	{
  	if(dv_top[lst_dv]<(220-dv_hgt[lst_dv]))
  	{
   	dv_top[i-1]=240;
   	lst_dv=i-1;
  	} 
 	}
	}
   } 
   setTimeout('Animate_News()',40);
  }
  setTimeout('Animate_News()',10);
 </script>
 </div>
 </div>
  </body>
</html>

بالتوفيق أخي..

Everything will be fine when we TALK LESS, DO MORE

#58 أكتوبر 2010 في 09:33

السلام عليكم،

جزاك الله خيراً وشكراً على المجهود. :)

تم تعديل هذه المشاركة بواسطة Mohammad Alsadek في 8 أكتوبر 2010 في 09:33

#68 أكتوبر 2010 في 10:19

عندي اشكالية جديدة "المسافة بين كل TD و TD ليست متطابقة ؟؟!!

في الكود انا استعمل مسافة ثابتة بين العناوين وهي عبارة عن 20 (بكسل):

dv_top[i-1]=abs_tp;  
abs_tp+=document.getElementById('div_'+i).Height;  
dv_hgt[i-1]=document.getElementById('div_'+i).Height;  
abs_tp+=20;

المسافة تعمل جيداً في الــ IE,FireFox ولكن الميسافة تتحول الى "صفر" في الــ Chrome,Safari ??

ما هو السبب ؟

#78 أكتوبر 2010 في 15:49

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

تفضل أخي جرب هذا الكود :

<html>
 <head>
 <style type="text/css">
  span.dt{text-align:right;color:rgb(255,255,255);font-size:12px;font-weight:normal;font-family:"Times New Roman", Times, serif;}
  span.nw{text-align:right;color:rgb(255,255,255);font-size:12px;font-weight:normal;font-family:"tahoma";}
 </style>
  <title>
  </title>
 </head>
 <body bgcolor="#667DB3">
 <div id="disspageie" style="position:absolute;
  	background:#667DB3;width:180; height:222;left:0; 
  	top:0;margin:0px;overflow:hidden;padding:0px;
  	border-style:solid; border-width:1px; 
  	border-color:#5C5C5C;"></div>
  	<form>
  	<div id="spageie" align="right" style="position:absolute; 
  	width:180; height:220;left:0; top:0; border-width:0px; 
  	overflow:hidden;"></div></form>
  	<script language="javascript">
  var titles = new Array();
  var info = new Array();
  var i;
  var tp=0;
  var abs_tp=0;
  var dv = new Array();
  var dv_top=new Array();
  var dv_hgt=new Array();
  var lst_dv=5;
  var ps=0;

  titles[0]=" 25.2.2010 14:32:12 ";
  info[0]="<A href='http://www.walla.co.il'> لقاء معايدة بمناسبة حلول عيد الأضحى في القدس</A>";
  //info[0]=""+" <A href='http://www.walla.co.il'";
  titles[1]=" 25.2.2010 19:32:12";
  info[1]="اطول شلال";
  titles[2]=" 25.2.2010 22:32:12";
  info[2]="مسيرتان احتفالا بالعيد في اللد والرملة ";
  titles[3]=" 25.2.2010 11:32:12";
  info[3]=" لوائح اتهام خطيرة ضد 4 شبان من النقب والشبلي";
  titles[4]=" 25.2.2010 11:32:12";
  info[4]="انقاذ حياة عاملة تنظيف بفندق بايلات";
  titles[5]=" 27.2.2010 18:32:04";
  info[5]="لماذا تم تأجيل زيارة الشاب كريم الى المانيا ؟";

  function mouseover()
  {
   ps=1;
  }

  function mouseout()
  {
   ps=0;
  }

  function create_div_dynamic(d)
  {
   dv[d-1]=document.createElement('div'); 
   dv[d-1].setAttribute('id',"div_"+d);   	
   dv[d-1].className="top_"+d;           		
   dv[d-1].style.position="absolute";   	
   dv[d-1].style.Left=0;   
   dv[d-1].style.Top=abs_tp;
   dv[d-1].style.Width=179;
   dv[d-1].style.Height=30;
   dv[d-1].style.backgroundColor="#667DB3";
   dv[d-1].innerHTML+= "<span class='dt' align='right'>"+titles[d-1] +"</span>";
   dv[d-1].innerHTML+= "<span class='nw'>"+"<br>" + info[d-1] +"</span>";
   dv[d-1].addEventListener('mouseover',mouseover,false);
   dv[d-1].addEventListener('mouseout',mouseout,false);
   var ni = document.getElementById('spageie');
   ni.appendChild(dv[d-1]);
  }
  for(i=1;i<7;i++)
  {
   create_div_dynamic(i);
   dv_top[i-1]=abs_tp;
   abs_tp+=document.getElementById('div_'+i).offsetHeight;
   dv_hgt[i-1]=document.getElementById('div_'+i).offsetHeight;
   abs_tp+=20;
  }

  function Animate_News()
  {
   if(ps==0)
   {
	for(i=1;i<7;i++)
	{
 	dv_top[i-1]--;
 	dv[i-1].style.top=dv_top[i-1];
 	if(dv_top[i-1]<(0-dv_hgt[i-1]))
 	{
  	if(dv_top[lst_dv]<(220-dv_hgt[lst_dv]))
  	{
   	dv_top[i-1]=240;
   	lst_dv=i-1;
  	} 
 	}
	}
   } 
   setTimeout('Animate_News()',40);
  }
  setTimeout('Animate_News()',10);
 </script>
 </div>
 </div>
  </body>
</html>

إن كان يعمل بشكل جيد على جميع المتصفحات فقم بدراسته لاكتشاف الأخطاء التي كانت تسبب لك المشكلة :)

و إن لم يكن يعمل بشكل جيد أخبرنا بذلك (ﻷني عدلته بشكل سريع و بدون تجربة)

تم تعديل هذه المشاركة بواسطة MoHaMMaD Pro في 8 أكتوبر 2010 في 15:51

Everything will be fine when we TALK LESS, DO MORE

مواضيع مشابهة

كيف أعمل شريط اخبار2 رد · 22 سبتمبر 2003
ماهي اللغات البرمجية المستخدمة في برمجة اضافات متصفح Firefox وgoogle Chrome وطبعا Internet Explorer بكل الاصدارات6 رد · 19 سبتمبر 2013
شريط اخر الاخبار من البى بى سى1 رد · 15 نوفمبر 2005
سؤال عن شريط الأخبار3 رد · 4 يناير 2005
شريط الأخبار2 رد · 8 مايو 2008
كيف اعمل شريط متحرك للأخبار2 رد · 15 يوليو 2007

شريط اخبار لماذا لا يعمل في FireFox/Chrome

مواضيع مشابهة

عدد الزوار حالياً