Partage
  • Partager sur Facebook
  • Partager sur Twitter

(jquery) script menu animé

riadh1992
11 juin 2010 à 10:18:16

Puisque je suis un vrais debutant dans la language javascript, j'ai commencé à utiliser des scripts prêtes à utlisés depuis des sites internets.
Et me voila une probleme dans ma premiere essais.
j'aime faire un systeme news similaire à celui dans l'image dans ce site Image utilisateur

j'ai utilisé le meme code source de ce site et le meme script mais ça ne fonctionne pas et me donne une image vide.
j'ai bien revise mais j'ai pas trouvé la faute.
s'il vous plais quelqu'un peut m'aider.. ^^ 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar" dir="rtl" >
   <head>
       <title>الصفحة الرئيسية</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	   <link rel="stylesheet" type="text/css" href="top5_news.css"/>
	   <script type="text/javascript" src="top5news_script.js"></script>
   </head>
   <body>


<!-- first of all include the top 5 news in the website --> 
<div id="top5_loader" class="ajax_loader" style="width:100%; text-align:center; height:200px; display:block"></div> 
<div id="slideshow_data" style="display:none"> 
			<div id="slide_0"> 
		<span id="title">صور مقر المنتخب الإسباني في جنوب أفريقيا</span> 
		<span id="image">/images/news/large/33fefb05721e15d3_2303.jpg</span> 
		<span id="image_thumb">/images/news/small/33fefb05721e15d3_2303.jpg</span> 
		<span id="category">كأس العالم 2010</span> 
		<span id="caption"></span> 
		<span id="source">getscore.net</span> 
		<span id="description">نشرت صحيفة ماركا الإسبانية مجموعة من الصور لمقر المنتخب الإسباني في جنوب أفريقيا.المقر تميز بالفخامة و توفير كل وسائل الراحة</span> 
		<span id="news_link">/news/2303/%D9%83%D8%A3%D8%B3-%D8%A7%D9%84%D8%B9%D8%A7%D9%84%D9%85-2010/%D8%B5%D9%88%D8%B1-%D9%85%D9%82%D8%B1-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AE%D8%A8-%D8%A7%D9%84%D8%A5%D8%B3%D8%A8%D8%A7%D9%86%D9%8A-%D9%81%D9%8A-%D8%AC%D9%86%D9%88%D8%A8-%D8%A3%D9%81%D8%B1%D9%8A%D9%82%D9%8A%D8%A7</span> 
	</div> 
			<div id="slide_1"> 
		<span id="title">ستويشكوف: إبراهيموفيتش سيذهب إلى مانشستر سيتي</span> 
		<span id="image">/images/news/large/ebfeedf51a2dcf17_2302.jpg</span> 
		<span id="image_thumb">/images/news/small/ebfeedf51a2dcf17_2302.jpg</span> 
		<span id="category">الكرة الإسبانية</span> 
		<span id="caption"></span> 
		<span id="source">getscore.net</span> 
		<span id="description">أكد أسطورة برشلونة السابق البلغاري هريستو ستويشكوف أن السويدي زلاتان إبراهيموفيتش لاعب برشلونة سينتقل إلى مانشستر سيتي هذا الموسم.ستويشكوف وصف إبراهيموفيتش &quot;بالفاشل&quot;، واكد مرة اخرى انتقاله إلى نادي مانشستر سيتي.وأضاف: &quot;إبراهيموفيتش لاعب جيد، ولكن ليس مع برشلونة، أعتقد انه سيكون أفضل من</span> 
		<span id="news_link">/news/2302/%D8%A7%D9%84%D9%83%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D8%B3%D8%A8%D8%A7%D9%86%D9%8A%D8%A9/%D8%B3%D8%AA%D9%88%D9%8A%D8%B4%D9%83%D9%88%D9%81-%D8%A5%D8%A8%D8%B1%D8%A7%D9%87%D9%8A%D9%85%D9%88%D9%81%D9%8A%D8%AA%D8%B4-%D8%B3%D9%8A%D8%B0%D9%87%D8%A8-%D8%A5%D9%84%D9%89-%D9%85%D8%A7%D9%86%D8%B4%D8%B3%D8%AA%D8%B1-%D8%B3%D9%8A%D8%AA%D9%8A</span> 
	</div> 
			<div id="slide_2"> 
		<span id="title">بيليه: أتوقع أن تكون المباراة النهائية بين البرازيل و إسبانيا</span> 
		<span id="image">/images/news/large/5174af3ae98a5ec1_2301.jpg</span> 
		<span id="image_thumb">/images/news/small/5174af3ae98a5ec1_2301.jpg</span> 
		<span id="category">كأس العالم 2010</span> 
		<span id="caption"></span> 
		<span id="source">getscore.net</span> 
		<span id="description">توقع الجوهرة السوداء وأسطورة الكرة البرازيلية بيليه أن يصل منتخبا البرازيل و إسبانيا إلى نهائي بطولة كأس العالم و التي ستبدأ غدا الجمعة.بيليه قال في مقابلة نشرتها صحيفة الدايلي ميرور البريطانية أن هذه البطولة ستكون مميزة جدا، كونها ستقام في بلد أفريقي، وأيضا بسبب قوة الفرق المشاركة والتي</span> 
		<span id="news_link">/news/2301/%D9%83%D8%A3%D8%B3-%D8%A7%D9%84%D8%B9%D8%A7%D9%84%D9%85-2010/%D8%A8%D9%8A%D9%84%D9%8A%D9%87-%D8%A3%D8%AA%D9%88%D9%82%D8%B9-%D8%A3%D9%86-%D8%AA%D9%83%D9%88%D9%86-%D8%A7%D9%84%D9%85%D8%A8%D8%A7%D8%B1%D8%A7%D8%A9-%D8%A7%D9%84%D9%86%D9%87%D8%A7%D8%A6%D9%8A%D8%A9-%D8%A8%D9%8A%D9%86-%D8%A7%D9%84%D8%A8%D8%B1%D8%A7%D8%B2%D9%8A%D9%84-%D8%A5%D8%B3%D8%A8%D8%A7%D9%86%D9%8A%D8%A7</span> 
	</div> 
			<div id="slide_3"> 
		<span id="title">برشلونة يفكر في سيلفا في حال فشل صفقة شراء فابريغاس</span> 
		<span id="image">/images/news/large/1b4ac2b3555ad0c5_2300.jpg</span> 
		<span id="image_thumb">/images/news/small/1b4ac2b3555ad0c5_2300.jpg</span> 
		<span id="category">الكرة الإسبانية</span> 
		<span id="caption"></span> 
		<span id="source">getscore.net</span> 
		<span id="description">تحدثت تقارير صحفية عن نية نادي برشلونة تقديم عرض لنادي فالنسيا من أجل ضم دايفيد سيلفا في حال فشلت صفقة انتقال فابريجاس من آرسنال.فالنسيا بدوره قد أبدى نيته التخلي عن سيلفا مقابل المبلغ المطلوب و الذي لم يتم الأفصاح عنه رسميا حتى الآن.الجدير بالذكر أن مانشستر يونايتد و ريال مدريد مهتمين</span> 
		<span id="news_link">/news/2300/%D8%A7%D9%84%D9%83%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D8%B3%D8%A8%D8%A7%D9%86%D9%8A%D8%A9/%D8%A8%D8%B1%D8%B4%D9%84%D9%88%D9%86%D8%A9-%D9%8A%D9%81%D9%83%D8%B1-%D9%81%D9%8A-%D8%B3%D9%8A%D9%84%D9%81%D8%A7-%D9%81%D9%8A-%D8%AD%D8%A7%D9%84-%D9%81%D8%B4%D9%84-%D8%B5%D9%81%D9%82%D8%A9-%D8%B4%D8%B1%D8%A7%D8%A1-%D9%81%D8%A7%D8%A8%D8%B1%D9%8A%D8%BA%D8%A7%D8%B3</span> 
	</div> 
			<div id="slide_4"> 
		<span id="title">وكيل كاكا: أنشيلوتي قال لي أنه يريد كاكا في تشلسي</span> 
		<span id="image">/images/news/large/8da14483337f7f25_2299.jpg</span> 
		<span id="image_thumb">/images/news/small/8da14483337f7f25_2299.jpg</span> 
		<span id="category">الكرة الإنجليزية</span> 
		<span id="caption"></span> 
		<span id="source">getscore.net</span> 
		<span id="description">تحدث الإيطالي إنزو برونزيتي وكيل أعمال كاكا عن ما حدث بينه وبين أنشيلوتي والحوار الذي دار بينهما، والذي عبر من خلاله عن مدى اهمامه بضم البرازيلي كاكا إلى صفوف البلوز.أنشيلوتي قال لإنزو: &quot;أريد كاكا في فريقي، ولكنني أحاول أن أقنع أبراموفيتش في هذه الصفقة&quot;.يذكر أن تشيلسي و أنشيلوتي أبدا</span> 
		<span id="news_link">/news/2299/%D8%A7%D9%84%D9%83%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D9%86%D8%AC%D9%84%D9%8A%D8%B2%D9%8A%D8%A9/%D9%88%D9%83%D9%8A%D9%84-%D9%83%D8%A7%D9%83%D8%A7-%D8%A3%D9%86%D8%B4%D9%8A%D9%84%D9%88%D8%AA%D9%8A-%D9%82%D8%A7%D9%84-%D9%84%D9%8A-%D8%A3%D9%86%D9%87-%D9%8A%D8%B1%D9%8A%D8%AF-%D9%83%D8%A7%D9%83%D8%A7-%D9%81%D9%8A-%D8%AA%D8%B4%D9%84%D8%B3%D9%8A</span> 
	</div> 
		</div> 
 
<div id="top5_holder" style="display:none"> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="top5"> 
  <tr> 
    <td width="4">&nbsp;</td> 
    <td width="204" align="left" valign="top" id="slideshow_menu"></td> 
    <td width="4">&nbsp;</td> 
    <td width="440" valign="top" style="padding-top:4px"> 
    <div style="position: relative; width:440px; height: 250px"> 
	    <div id="sn_image"><!-- DYNAMIC CONTENTS [image] --></div> 
    	<div id="news_slide_gradient" /> 
		<div id="news_slide_title" class="style7"> 
			<div id="news_slide_category"><!-- DYNAMIC CONTENTS [category] --></div> 
			<div id="sn_title"><!-- DYNAMIC CONTENTS [title] --></div> 
		</div> 
		<div id="news_slide_desc" class="style6"> 
	   		<span id="sn_description"><!-- DYNAMIC CONTENTS [description] --></span> 
	   		<a class="white" id="sn_link" href="">... المزيد</a> 
	   </div> 
	</div> 
    </td> 
    <td width="4" valign="top"> 
    </td> 
  </tr> 
</table> 
</div> 
</body>
</html>


//global configuration
var total_news = 5;
var loop_interval = 8000;
var current_id = 0;
var interval = null;

var images_array = new Array();
var images_thumb_array = new Array();

var main_images = new Array();
var thumb_images = new Array();

$(document).ready(function(){
  //display the ajax loader
  $('#top5_loader').show();

  //preload the thumb images
  $('#slideshow_data').find('span[id="image"]').each(function(ind,ele){
		images_array[ind] = $(ele).html();
   });
  //preload the news images
  $('#slideshow_data').find('span[id="image_thumb"]').each(function(ind,ele){
		images_thumb_array[ind] = $(ele).html();
   });
   //call the preload the images function
   preloadimages();

  //start left side menu
  $('#slideshow_data').find('div[id*="slide_"]').each(function(ind,ele){
	 _title = $(ele).find('span[id="title"]').html();
	 _position = 'item_' + ind;
	 _image_thumb = $(ele).find('span[id="image_thumb"]').html();

	 $('#slideshow_menu').append('<div style="height:65px; width:204px;"><div id="'+_position+'" style="position:absolute;z-index:2;overflow:visible;cursor:pointer;width:204px">'+
	 '<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">'+
        '<tr>'+
          '<td align="right" class="style7">'+_title+'</td>'+
          '<td width="4" align="right">&nbsp;</td>'+
          '<td id="thumb_holder_'+ind+'" height="60"></td>'+
          '<td width="4" align="right">&nbsp;</td>'+
        '</tr>'+
        '<tr>'+
        	'<td colspan="4" align="right">'+
            '<img src="/images/gfx/spacer1.jpg" width="201" height="1">'+
            '</td>'+
        '</tr>'+
      '</table>'+
      '</div>'+
      '<div class="top5_thumb_cell">'+
      '</div></div>');

	  //attache the image
	  $("#thumb_holder_"+ind).html(thumb_images[ind]);

      //attach onmouseover event-handler for the menu
	  $('#item_'+ind).hover(function(){
  		load_news(ind)
  	  }, function(){
  		loop_news_again(ind)
  	  }
	  )

  	  //attach onClick event-handler for the menu
	  $('#item_'+ind).click(function(){
  		window.location = $("#slide_" + ind).find('span[id="news_link"]').html();
  	  })
 })


  //loop through the news
  //setTimeout("foo()", 3000);
  loop_news();
  $('#top5_loader').hide();
  $('.news_ticker_container').show();
  $('#top5_holder').show();
  interval = window.setInterval("loop_news()", loop_interval);
 });

/**
 *
 * @access public
 * @return void
 **/
function foo()
{
  $('#ajax_loader').hide();
  $('#top5_holder').show();
}

function preloadimages()
{
	for (i=0;i<images_array.length;i++)
	{
		main_images[i] = new Image(440,250);
		main_images[i].setAttribute('border', 0);
		main_images[i].src=images_array[i];

		thumb_images[i] = new Image(60,34);
		thumb_images[i].setAttribute('border', 0);
		thumb_images[i].src=images_thumb_array[i];
	}
}

function load_news(id)
{
    //$("#logger").append('t');
	current_id = id;
	clearInterval(interval);
	loop_news(id);
	//interval = window.setInterval("loop_news()", loop_interval);
}

function loop_news_again(id){
	current_id = id+1;
	clearInterval(interval);
	interval = window.setInterval("loop_news()", loop_interval);
}

function loop_news()
{
   if(parseInt(current_id) % total_news == 0)
   {
		current_id = 0;
   }

   id = current_id;
   var news_div = $("#slide_" + id);

   //Get data
   var title = $(news_div).find('span[id="title"]');
   var image = $(news_div).find('span[id="image"]');
   var caption = $(news_div).find('span[id="caption"]');
   var source = $(news_div).find('span[id="source"]');
   var description = $(news_div).find('span[id="description"]');
   var news_link = $(news_div).find('span[id="news_link"]');
   var category = $(news_div).find('span[id="category"]');

   $("#sn_image").hide();
   //hide all the data
   $("#div_img_caption").hide();
   $("#sn_caption").hide();
   $("#div_smart_video").hide();
   $("#sn_source").hide();
   $("#sn_more_div").hide();
   $("#sn_divider").hide();
   $("#sn_image").hide();

   //Assign data
   $("#sn_title").html(title.html());
   $("#sn_description").html(description.html());
   $("#news_slide_category").html(category.html());
   $("#sn_image").html(main_images[id]);
   $("#sn_link").attr('href', news_link.html());

   //attach onclick event-handler for the image
   $("#news_slide_gradient").click(function(){
   window.location = news_link.html();
   });

   //Apply fadein/fadeout effect on the image
   $("#sn_image").fadeIn(500);
   //$("#sn_image").show();

   //remove all the selected and replace it
   //remove all the selected and replace it
   $("#slideshow_menu").find("div[class='top5_thumb_cell_selected']").each(function(ind,elem){
		$(elem).removeClass('top5_thumb_cell_selected');
		$(elem).addClass('top5_thumb_cell');
   });

   $("#item_"+id).next().removeClass('top5_thumb_cell');
   $("#item_"+id).next().addClass('top5_thumb_cell_selected');

   //show more link
   $("#sn_more_div").show();
   $("#sn_divider").show();
   $("#sn_loader").hide();

   current_id++;
}


/*top5_news*/
.top5{
background : #3366CC url(img/slide_bk.jpg) no-repeat;
}

#news_slide_desc{
position: absolute;
top: 250px;
padding: 2px 3px;
}

#sn_image{
z-index:1;
position: absolute;
top:0px;
right:0px;
overflow:visible;
}

#news_slide_gradient{
z-index:2;
position: absolute;
width:440px;
height:250px;
bottom:0px;
right:0px;
background: url(img/news_gradient.png) repeat-x scroll center bottom;
cursor: pointer;
}

#news_slide_title{
z-index:3;
position: absolute;
bottom:0px;
right:0px;
padding:8px 5px;
font-size:14px;
}


#news_slide_category, .top5_date{
font-size:11px;
font-weight: bold;
margin-bottom:3px;
}

.news_source{
color: #3366cc;
font-weight: bold;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}

.style6 {
	font-family: Tahoma,Helvetica,Arial,sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	text-align:justify;
	direction:rtl;
	line-height:16px;

}
.style7 {
	color: #FFFFFF;
	font-family: Tahoma,Helvetica,Arial,sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-align: right;
	direction:rtl;
	padding-left: 2px;
	padding-right: 1px;
	line-height: 14px;
}


a.white:link {
	text-decoration: none;
	color: #FFF;
}
a.white:visited {
	text-decoration: none;
	color: #FFF;
}
a.white:hover {
	text-decoration: underline;
	color: #FFF;
}
a.white:active {
	text-decoration: none;
	color: #FFF;
}



  • Partager sur Facebook
  • Partager sur Twitter
Golmote
  • Javascript
11 juin 2010 à 12:32:57

T'aider à trouver une faute dans un copier-coller... La demande est osée ! :o

Regarde la console d'erreur de Firefox, elle te dira surement ce qui ne va pas.
  • Partager sur Facebook
  • Partager sur Twitter
riadh1992
11 juin 2010 à 22:38:39

allez les zeros, il n'y a pas des idées!!!
:o
  • Partager sur Facebook
  • Partager sur Twitter
Golmote
  • Javascript
11 juin 2010 à 23:14:05

... ... ... ... ... La console d'erreurs j'ai dit.
C'est une idée.
  • Partager sur Facebook
  • Partager sur Twitter
riadh1992
12 juin 2010 à 9:02:19

Mercie Golmote

je sais pas c quoi la console d'erreurs firefoxs la premiere fois mais j'ai fait un recherche google et je le trouvé

mercie ^^
  • Partager sur Facebook
  • Partager sur Twitter
zingwai
12 juin 2010 à 10:23:45

Le SdZ ne fait pas de code à la demande.
Demander de l'aide sur un code qui ne t'appartient pas ne sert à rien. Apprends toi-même le javascript !
  • Partager sur Facebook
  • Partager sur Twitter
Pwaite.net > Transfert de crédit téléphonique et monétisation de site web                                                                                        « I am awesome »