Faire en sorte qu'une icone puisse se déplacer dans un post

par nj1984 Jeu 8 Sep 2011 - 20:17

Bonjour ^^

j'ai créé mon forum il y a un peu plus d'un an
c'est un forum de tutoriel pour paint shop pro

et pour suivre les tutoriels j'avais modifier un template afin de pouvoir placer une fleche au début de chacun de mes tutos que les membres pouvait déplacer a leur guise dans mon post, ce qui leur permettait de suivre le tutoriel plus facilement

voilà la fleche en question : Faire en sorte qu'une icone puisse se déplacer dans un post 10042901571428470

Faire en sorte qu'une icone puisse se déplacer dans un post 10042901571428470

il me suffisait de coller ce code :

Code:: <img src="http://nsa15.casimages.com/img/2010/04/29/10042901571428470.gif" class="drag">

dans mon post et ça marchait, on cliquait une fois pour la prendre, et on cliquait une seconde fois pour la déposer ou on le désirait.

Aujourd'hui je voudrais aider une amie a faire la même chose sur son forum
sauf que en modifiant son template, et la feuille de style ça ne marche toujours pas :'(

a savoir que l'une comme l'autre utilisons déjà ceci : https://forum.forumactif.com/t273372-faire-apparaitre-une-image-sur-un-lien

j'espere que vous pourrez m'aider
bonne soirée

par Ea Jeu 8 Sep 2011 - 21:08

Bonjour,

Et donc quel est le script que vous mettiez qui vous permettait de faire cela ?

par nj1984 Jeu 8 Sep 2011 - 21:18

alors dans mon forum j'ai deux template de modifier :

overall_header comme ceci :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> {META_FAVICO} {META} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script><script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />  <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); pm.focus();   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); report.focus();   ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;  //]]> </script> {GREETING_POPUP}  <style type="text/css"> #hitskin_preview { margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 100%; height: 65px; background: url('http://2img.net/i/fa/hitskin/hitskin_bar.png') repeat-x left -15px; color: #fff; } * html #hitskin_preview { /* Fix for IE6 since it doesn't implement fixed positionning */ position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop); z-index: 2; background: transparent url('http://2img.net/i/fa/hitskin/hitskin_bar-ie6.gif') repeat-x left -15px; } * html { /* Gunlaug's Speed fix for the above positionning fix. Sorry for the fix for the fix */ background: #fff url(foo) fixed; } #hitskin_preview h1 { float: left; margin: 3px 0 0 0; padding: 0 0 0 10px; font: italic normal 25px Arial,sans serif; color: #fff; } #hitskin_preview h1 img { vertical-align: middle; } #hitskin_preview em { color: #7CBA2C; font-weight: bold; } #hitskin_preview a { color: #fff; } #hitskin_preview a:hover { text-decoration: underline; } #hitskin_preview .content { text-align: right; } #hitskin_preview .content p { margin: 4px 1em 0px 1em; font-size: 13px; line-height: 1.8em; color: #fff; font-weight: bold; } #hitskin_preview .content p span { font-weight: normal; font-size: 0.8em; } body { margin-top: 40px !important; } {hitskin_preview.HITSKIN_RTL_CSS} </style>  <script> /* Script écrit par Vincent Peybernes http://zonescript.forumactif.com */ jQuery(document).ready(function(){ activeDrag = 0 ; jQuery(".drag").click(function(){ drag = jQuery(this); activeDrag++; if ( activeDrag > 1 ) { activeDrag = 0 ; } if ( activeDrag == 1 ) { drag.css("opacity","0.5").css("position","absolute"); jQuery().mousemove(function(e){ if ( activeDrag == 1 ){ drag.css("top",e.pageY-15); drag.css("left",e.pageX-15); } }); } if ( activeDrag == 0 ) { jQuery(this).css("opacity","1"); return ; } }); }); </script> </head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">  <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br /> <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div>  <a name="top"></a> {JAVASCRIPT} <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr>  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td> <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DESCRIPTION}<br /> </span> </td>   <td align="center" width="100%" valign="middle"> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a><br /> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DESCRIPTION}</span> </td>   <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DESCRIPTION}<br /> </span> </td> <td> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a> </td>  </tr> </table> <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table> <div style="clear: both;"></div>  <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </td> </tr> </table> </div>  <div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="{C1SIZE}"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> </td> <td valign="top" width="100%">  </td> </tr> </tbody> </table> </div> </div> </td> </tr> </table> </body> </html>

et topics_list_box :

Code:: <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".description").each(function(){ var content = jQuery(this).html(); var detector = /\[img\](.*)\[\/img\]/ ; var url = detector.exec(content ); content = content.replace(url[0],"<div class='topicImage'><img src='"+url[1]+"'/></div>"); jQuery(this).html(content); }); jQuery("div.topictitle").mouseover(function(){ jQuery(this).parent().find(".topicImage").fadeIn(1500); }); jQuery("div.topictitle").mouseout(function(){ jQuery(this).parent().find(".topicImage").fadeOut(1500); }); }); </script>  <script type="text/javascript"> function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() { var all_checked = true; for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) { if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') { all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked; } } document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked; } function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() { for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) { if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') { document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked; } } } </script>  <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th> <th align="center" nowrap="nowrap" width="80"> {topics_list_box.row.L_REPLIES} </th> <th align="center" nowrap="nowrap" width="100"> {topics_list_box.row.L_AUTHOR} </th> <th align="center" nowrap="nowrap" width="50"> {topics_list_box.row.L_VIEWS} </th> <th align="center" nowrap="nowrap" width="150"> {topics_list_box.row.L_LASTPOST} </th>  <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>  </tr>  <tr> <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td> </tr>   <tr> <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td> </tr>   {topics_list_box.row.END_TABLE_STICKY} <tr>  <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>  <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>  <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>  <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%"> <div class="topictitle"> {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE} <h2 class="topic-title"> <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> </h2> </div>  <div class="description genmed"> {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} </div>  <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> <span class="gensmall">{topics_list_box.row.GOTO_PAGE}{topics_list_box.row.TOPIC_NAV_TREE} </span> </td> <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td> <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td> <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td> <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td>  <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>  </tr>  <tr> <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td> </tr>  <tr> <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <span class="gensmall">{PAGINATION}</span></td> <td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td> </tr> </table> </td> </tr>  </table><br class="gensmall" />

et pour la feuille de style :

Code:: .topicImage { position : absolute ; display : none ; background : #FFFFFF ; border : solid 1px; padding : 10px ; } .drag{position:relative;cursor:hand}

en faisant pareil sur le forum de ma copine ça ne marche pas alors qu'on a la meme version :'(

j'oublie surement quelque chose
merci d'avance

par Ea Jeu 8 Sep 2011 - 21:21

Vous pouvez donner le lien d'un sujet où ça marche et le lien d'un sujet du forum où ça ne marche pas ?

À première vue il y a tout ce qu'il faut dans les 2 modifications de template =]

par nj1984 Ven 9 Sep 2011 - 8:44

les deux forum sont bloqués, si vous n'etes pas inscrit vous ne pouvez pas y accéder :'(

En modifiant correctement le template + la feuille de style, mon amie a un soucis avec la deuxième ligne d'un titre ( la description) ça lui mets n'importe quoi au lieu de ce qu'elle avais marqué
ça peux venir de quoi ?

ps : merci pour votre aide =)

par nj1984 Ven 9 Sep 2011 - 10:21

Voilà, nous avons réessayer ce matin, ça ne déforme plus les description dans les titres ^^
mais la fleche ne marche toujours pas

voilà ce que ça donne chez moi :