Topic: Tooltip in SP Block

[Skaty]

Hi, i have SP Block that shows first images (with link) specific boards like news. I wanna to ask, how can i make a little tooltip to show topic's title or the topic's content ?

like this.



OR can i entegrate this mod with it ?
http://www.simplemachines.org/community/index.php?topic=336505.0

these are codes codes i'm using in SP block.

Code: [Select]

global $smcFunc, $scripturl;
$boards = array(2);
$request = $smcFunc['db_query']('', '
   SELECT t.id_topic, m.subject, m.body
   FROM {db_prefix}topics AS t
      INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
   WHERE t.id_board IN ({array_int:boards})
   ORDER BY t.id_topic DESC
        LIMIT {int:limit}',
   array(
      'boards' => $boards,
                'limit' => 25,
   )
);
$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
   $topics[] = array(
      'id_topic' => $row['id_topic'],
      'body' => $row['body'],
      'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $row['body'], $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" height="40" width="80" />' : '',
   );
$smcFunc['db_free_result']($request);
echo '
         <center><table>
            <tr>
               <td>
                  <marquee onmouseover="this.stop()" onmouseout="this.start()"  height="100%" scrollamount="0" scrolldelay="0" direction="left"  loop="infinite">
                  <table></center></tr>';
foreach ($topics as $topic)
   echo '
                        <td><div class="mansetyan">
                        <a href="', $scripturl, '?topic=', $topic['id_topic'], '.0"><font color=red size=1 ALIGN="Center" width="50">', $topic['subject'], '</font>', $topic['first_image'], '</a>
                         </td>';
echo '
                       
                     </table>
                  </marquee>
               </td>
         </tr></table></div>';

[Skaty]

any idea for this ??

[Chen Zhen]

Skaty,

  I can give you a tool tip script that is not exactly the same but is close to what you describe. You can adjust its settings and mess with the images to attempt to have it appear exactly as you wish.

Download the attached package and install it on your forum via the package manager.

Use this PHP block after the Tooltips mod is installed:

Code: [Select]

global $smcFunc, $scripturl, $settings;

/* Edit these variables */
$imageWidth = 80;
$imageHeight = 40;
$imageSpacing = 25;
$boards = array(1,2);
$direction = 'right';
$delay = 150;
$showText = false;
$blockHeight = '100%';


if (strpos($blockHeight, '%') === false && (int)$blockHeight > (int)$imageHeight)
  $marginTop = 'margin-top:'.((int)$blockHeight - (int)$imageHeight) . 'px;';
else
  $marginTop = false;

echo '
<script type="text/javascript">
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", "'.$settings['default_theme_url'].'/css/tooltip.css?fin20")
  window.onload = document.getElementsByTagName("head")[0].appendChild(fileref);
</script>';

$request = $smcFunc['db_query']('', '
              SELECT t.id_topic, m.subject, m.body
              FROM {db_prefix}topics AS t
              INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
              WHERE t.id_board IN ({array_int:boards})
              ORDER BY t.id_topic DESC
              LIMIT {int:limit}',
              array(
                'boards' => $boards,
                'limit' => 25,
              )
            );

$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
  $topics[] = array(
              'id_topic' => $row['id_topic'],
              'body' => $row['body'],
              'subject' => $row['subject'],
              'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $row['body'], $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" style="height:'.$imageHeight.'px;width:'.$imageWidth.'px;" />' : '',
              );
$smcFunc['db_free_result']($request);

echo '
<div id="image" style="height:'.$blockHeight.';width:100%;display:block;border:0px;'.$marginTop.'">
  <marquee onMouseover="this.stop()" onMouseout="this.start()" SCROLLDELAY='.$delay.' direction='.$direction.'  loop="infinite">';

foreach ($topics as $key => $topic)
{
  if ($topic['first_image'])
  {
    if ($showText)
      $text = '<br />' . $topic['subject'];
    else
      $text = false;
     
    echo '
    <span  id="hotspot'.$key.'" onmouseover="tooltip.show(\''.$topic['subject'].'\');" onmouseout="tooltip.hide();" style="padding-left:'.((int)$imageSpacing/2).'px;padding-right:'.((int)$imageSpacing/2).'px;text-align:center;display:table-cell;color:red;font-size:10px;">
      <a href="'. $scripturl. '?topic='. $topic['id_topic']. '.0" style="text-decoration:none;">' . $topic['first_image'] . $text . '</a>
    </span>';
  }
                 
}

echo '
  </marquee>
</div>
<script type="text/javascript" src="',$settings['default_theme_url'],'/scripts/tooltip.js?fin20"></script>';


[Skaty]

Thank you Underdog.  But i didn't understand how exatly i can use it. i installed it like use said and created a php block and i use the codes.  but block is showing empty. how exatly i can entegrate these codes together ?

[Chen Zhen]

Skaty,

  I was not sure exactly what you were after regarding the db query. Your original code only grabs the first bbc image (or any initial img code of the message body) of every first post of a thread from the opted board(s) which is what the code I provided does (although it was fixed up a bit). Which images are you attempting to display exactly? I can edit the code to grab the images you are after when I have this info.

[Skaty]

Underdog, i just find some codes that what i need. these codes has a tooltip thing can we entegrate this to mine codes ?


These codes has a something like tooltip it is very nice. i want to entegrate this function to mine codes in first post.

Code: [Select]

<?php
 
//SETUP

$number_of_posts =5; // Kac konu gosermek istiyorsaniz 10 sayisini duzenleyin
$default_avatar = 'http://www.psvitaturkiye.com/forum/Themes/vivanto_20/images/athenea/no_avatar.png'; // Sitenizin avatar urelesini sizinkiyle degisin 'http://www.url.com/image.jpg'

//SETUP END
global $contex, $txt, $settings;
$array = ssi_recentTopics($number_of_posts, null, null, 'array');
echo '
<table class="side_class_row">';
foreach ($array as $post)
{
global $memberContext;
      loadMemberData($post['poster']['id']);
      loadMemberContext($post['poster']['id']);
echo '
  <tr>
<td class="side_class_replies">', $post['replies'], '</td>
            <td  class="side_class_new">';
                if (!empty($post['new']) )
                    echo'';
                else
                    echo'
                    <img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="new" />';
             echo'
            </td>
            <td></td>
     <td><div class="triangle-isosceles" id="a', $post['topic'], '" style="display: none">', $post['preview'], '</div>
                    <a href="'. $post['href']. '" target="_self" onmouseover="document.getElementById(\'a', $post['topic'], '\').style.display = \'block\'" onmouseout="document.getElementById(\'a', $post['topic'], '\').style.display = \'none\'">', $post['short_subject'], '</a>
             </td>
<td>';
            if (!empty($memberContext[$post['poster']['id']]['avatar']['href'])){
echo '<img src="' . $memberContext[$post['poster']['id']]['avatar']['href'] . '" width="30" height="30" alt="', $post['poster']['name'], '" />';
                    }            
            else { 
echo '<img src="' . $default_avatar .'" alt="default_avatar" width="30" height="30" />';
                }
        echo'
            </td>
            <td></td>
     </tr>
        <tr>
            <td colspan="6"><p class="side_class_poster"><span class="floatleft">', $txt['replies'], '</span> ', $post['poster']['link'], ' </p><hr class="side_hr" /></td>
        </tr>';
}
echo '
    </table> 
<style type="text/css"> 
.side_class_poster
{
     font-size:10px;
     margin: 0;
     padding: 0;
     text-align: right;
}
table.side_class_row hr
     margin: 0;
     padding: 0;
}
.side_class_row
{
     padding:4px;
     width: 100%;
}
td.side_class_replies
{
     text-align:center;
     width:3%;
}
td.side_class_new
{
     text-align:center;
     width:4%;
}
.triangle-isosceles {
    position: fixed;
    top: 300px;
    left: 400px;
    padding:15px;
    margin:1em 0 3em;
    color:#fff;
    max-width: 400px;
    border: 1px solid #222222;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow: 3px 3px 39px 2px #222222;
    -webkit-box-shadow: 3px 3px 39px 2px #222222;
    box-shadow: 3px 3px 39px 2px #222222;
    background: #2989d8; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(41,137,216,0.9) 0%, rgba(30,87,153,0.9) 94%, rgba(30,87,153,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,137,216,0.9)), color-stop(94%,rgba(30,87,153,0.9)), color-stop(100%,rgba(30,87,153,0.9)));
    background: -webkit-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: -o-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: -ms-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    }
</style>';
?>

[Divecall]

Maybe this is the solution, but i dont speak turkish...

http://destek.smfmod.com/sp-block-icin-tooltips-t21037.0.html

[Skaty]

That topic is mine too   i find these second codes from there i just entegrate them together. i think it is not too hard but need to know a little php :/

[Chen Zhen]

Skaty,

  The two different codes you posted in this thread leave me puzzled as to exactly what you want to display.
Tell me in words what you want to display and how you want it displayed.

ie.

• Most recent posts or is it most recent topics?
• How many in total you want to display
• Do you want this displayed in a scrolling marquee or do you want it displayed in a table?
• What image do you want to display? ie. the posters avatar? an image from their post? which?
• What text do you want displayed in the tooltip for each image?

If you wish to see an example of the tooltip I posted before, include the necessary board id(s) in the block code ( $boards = array(1,2); )  and then make a new test topic that has a bb-code image in it. I understand it is not the setup you were after but I want to know if that specific tooltip graphic is to your liking else I will show you how to dynamically implement the css from the second code you provided.

[Skaty]

Underdog, first of all thank you for your kind support.

My english is not so good so i'm trying to explain it as much as i can.

the first codes are just fine like i want to. the numbers and image size are correct. just want to add the tooltip in second codes. if you have a chance to try them you will see what i try to say. i can give you my test board if you need.

i can't make it work the codes you where given me. if you have it installed can you just send me a screenshot.

thank you again.


ps: i make it work your codes. it is look well. we can use this one too but still have to entegrate them with my first codes. can you. pls do that which one is easy for you

[Chen Zhen]

Skaty,

  I am still not sure exactly what you want displayed and it would be better for you to explain exactly what it is. You are asking me to merge things from both codes but which specifically? If what I am about to post is not correct then please attempt to translate my previous questions and answer all of them.


Based on the code in your last post, I will show you 2 scenarios that you can use.

#1 will use the tooltip style that I provided & requires that you install the mod spTooltips-v1.0 that I previously gave you.

Code: [Select]

// SETUP - Tooltip#1

$number_of_posts =5; // Kac konu gosermek istiyorsaniz 10 sayisini duzenleyin
$default_avatar = 'http://www.psvitaturkiye.com/forum/Themes/vivanto_20/images/athenea/no_avatar.png'; // Sitenizin avatar urelesini sizinkiyle degisin 'http://www.url.com/image.jpg'

// SETUP END
global $context, $txt, $settings, $memberContext;
$array = ssi_recentTopics($number_of_posts, null, null, 'array');
echo '
<table style="padding:4px;width: 100%;">';
foreach ($array as $post)
{
loadMemberData($post['poster']['id']);
loadMemberContext($post['poster']['id']);
echo '
<tr>
<td style="text-align:center;width:3%;">', $post['replies'], '</td>
<td  style="text-align:center;width:4%;">';
if (empty($post['new']) )
echo'
<img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="new" />';
echo'
</td>
<td>
<script type="text/javascript"><!-- // --><![CDATA[
var postBody_',$post['topic'],' = ', json_encode(iconv($context['character_set'], 'UTF-8', $post['preview'])),'
//]]></script>
</td>
<td>
<a href="'. $post['href']. '" target="_self" onmouseover="tooltip.show(postBody_',$post['topic'],');" onmouseout="tooltip.hide();">', $post['short_subject'], '</a>
</td>
<td>';
if (!empty($memberContext[$post['poster']['id']]['avatar']['href']))
echo '<img src="' . $memberContext[$post['poster']['id']]['avatar']['href'] . '" width="30" height="30" alt="', $post['poster']['name'], '" />';
else 
echo '<img src="' . $default_avatar .'" alt="default_avatar" width="30" height="30" />';
               
echo'
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">
<p style="font-size:10px;margin: 0;padding: 0;text-align: right;"><span class="floatleft">', $txt['replies'], '</span> ', $post['poster']['link'], ' </p>
<hr style="margin: 0;padding: 0;" />
</td>
</tr>';
}
echo '
</table>
<script type="text/javascript">
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", "'.$settings['default_theme_url'].'/css/tooltip.css?fin20")
window.onload = document.getElementsByTagName("head")[0].appendChild(fileref);
</script>
<script type="text/javascript" src="',$settings['default_theme_url'],'/scripts/tooltip.js?fin20"></script>';


#2 For the css styling of the tooltip code you last posted you forgot a curly bracket which is why it would not work. I would also like to point out that you are not supposed to use style code in the body of a HTML page as it belongs in the head of it. I will show you how to dynamically add that css code to the head of your document with the code & file below.

If you opt to use the second (#2) code then make sure to upload the attached css file via FTP to:
/Themes/default/css

Code #2:

Code: [Select]

// SETUP - Tooltip#2

$number_of_posts =5; // Kac konu gosermek istiyorsaniz 10 sayisini duzenleyin
$default_avatar = 'http://www.psvitaturkiye.com/forum/Themes/vivanto_20/images/athenea/no_avatar.png';

// SETUP END
global $context, $txt, $settings, $memberContext;
$array = ssi_recentTopics($number_of_posts, null, null, 'array');
echo '
<table class="side_class_row">';

foreach ($array as $post)
{
loadMemberData($post['poster']['id']);
loadMemberContext($post['poster']['id']);
echo '
<tr>
<td class="side_class_replies">', $post['replies'], '</td>
<td  class="side_class_new">';
if (empty($post['new']) )
echo'
<img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="new" />';

echo'
</td>
<td>&nbsp;</td>
<td>
<div class="triangle-isosceles" id="a', $post['topic'], '" style="display: none">', $post['preview'], '</div>
<a href="'. $post['href']. '" target="_self" onmouseover="document.getElementById(\'a', $post['topic'], '\').style.display = \'block\'" onmouseout="document.getElementById(\'a', $post['topic'], '\').style.display = \'none\'">', $post['short_subject'], '</a>
</td>
<td>';
if (!empty($memberContext[$post['poster']['id']]['avatar']['href']))
echo '
<img src="' . $memberContext[$post['poster']['id']]['avatar']['href'] . '" width="30" height="30" alt="', $post['poster']['name'], '" />';
                               
else 
echo '
<img src="' . $default_avatar .'" alt="default_avatar" width="30" height="30" />';
               
echo'
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">
<p class="side_class_poster"><span class="floatleft">', $txt['replies'], '</span> ', $post['poster']['link'], ' </p>
<hr class="side_hr" />
</td>
</tr>';
}
echo '
</table>
<script type="text/javascript">
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", "'.$settings['default_theme_url'].'/css/tooltip_style.css?fin20")
window.onload = document.getElementsByTagName("head")[0].appendChild(fileref);
</script>';


  Test out the two codes and opt which one you prefer.

[Skaty]

  I am still not sure exactly what you want displayed and it would be better for you to explain exactly what it is. You are asking me to merge things from both codes but which specifically?

Like i said. my first codes are shown what a try to show. can you look at these codes ? i do not want to show posts, i'm showing topics and first image of it. like in my first codes i gave you. these codes are ready. what i want from you is tooltip. and this tooltip is in second codes i gave you in first post. do not touch first codes. just take tooltip properties from second codes and add them to first codes. this is what i want.





and final



i hope this explain what i want.

[Chen Zhen]

Skaty,

What image do you want displayed? The posters avatar or something they attach?

[Skaty]

No need for avatar but we can add a date on it.

Thank you.

[Chen Zhen]

Skaty,

  Here is the code to show most recent topics with their first bbc image included in the body of the first post of those topics (as per your original code). If the starting topic does not have a bbc image included, it will not show it. This is using the tooltip that you provided.

Make sure to have the tooltip_style.css file in the proper directory:
/Themes/default/css/tooltip_style.css

Code: [Select]

global $smcFunc, $scripturl, $settings;

/* Edit these variables */
$imageWidth = 80;
$imageHeight = 40;
$imageSpacing = 25;
$boards = array(1,2);
$direction = 'left';
$delay = 150;
$showText = false;
$blockHeight = '100%';
$showLinks = false;
$maxChars = 150;

/* Do not edit below this line */

if (strpos($blockHeight, '%') === false && (int)$blockHeight > (int)$imageHeight)
$marginTop = 'margin-top:'.((int)$blockHeight - (int)$imageHeight) . 'px;';
else
$marginTop = false;

echo '
<script type="text/javascript">
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", "'.$settings['default_theme_url'].'/css/tooltip_style.css?fin20")
  window.onload = document.getElementsByTagName("head")[0].appendChild(fileref);
</script>';

$request = $smcFunc['db_query']('', '
              SELECT t.id_topic, m.subject, m.body, m.smileys_enabled, m.id_msg
              FROM {db_prefix}topics AS t             
              INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
              WHERE t.id_board IN ({array_int:boards})
              ORDER BY t.id_topic DESC
              LIMIT {int:limit}',
              array(
                'boards' => $boards,
                'limit' => 25,
              )
            );

$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
{
$body = $row['body'];
$row['body'] = strip_tags(strtr(parse_bbc($row['body'], $row['smileys_enabled'], $row['id_msg']), array('<br />' => ' ')));
if (!$showLinks)
$row['body'] = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '[link]',$row['body']);

if ($smcFunc['strlen']($row['body']) > $maxChars)
$row['body'] = $smcFunc['substr']($row['body'], 0, $maxChars) . '...';

censorText($row['subject']);
censorText($row['body']);
        $row['body'] = preg_replace('/\s{2,}/',' ',html_entity_decode($row['body']));
        $row['body'] = wordwrap($row['body'], 60, "<br />\n", true);
$topics[] = array(
'id_topic' => $row['id_topic'],
'body' => $row['body'],
'subject' => $row['subject'],
'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $body, $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" style="height:'.$imageHeight.'px;width:'.$imageWidth.'px;" />' : '',
);
}
$smcFunc['db_free_result']($request);

echo '
<div id="image" style="height:'.$blockHeight.';width:100%;display:block;border:0px;'.$marginTop.'">
<marquee onMouseover="this.stop()" onMouseout="this.start()" scrolldelay='.$delay.' direction='.$direction.'  loop="infinite">';

foreach ($topics as $key => $topic)
{
if ($topic['first_image'])
{
if ($showText)
$text = '<br />' . $topic['subject'];
else
$text = false;

echo '
<div class="triangle-isosceles" id="tooltip', $key, '" style="display: none;">', $topic['body'], '</div>
<span  id="hotspot'.$key.'" onmouseover="document.getElementById(\'tooltip', $key, '\').style.display = \'block\'" onmouseout="document.getElementById(\'tooltip', $key, '\').style.display = \'none\'" style="float:left;padding-left:'.((int)$imageSpacing/2).'px;padding-right:'.((int)$imageSpacing/2).'px;text-align:center;display:table-cell;color:red;font-size:10px;">
<a href="'. $scripturl. '?topic='. $topic['id_topic']. '.0" style="text-decoration:none;">' . $topic['first_image'] . $text . '</a>
</span>';
}
                 
}

echo '
</marquee>
</div>';

  You edit the first few variables to fine tune it how you want. Btw marquee is actually deprecated & should be replaced by a javascript/jQuery equivalent but this is what you originally provided so I used it.

File is attached again.

[Skaty]

Thank you Underdog, you are awesome Finally tooltips are working.

But i don't want a left moving, just want to stop them (no moving). My first codes not moving too. how can i stop it ? i don't like the moving thing, because they are shaking. do you have bette idea ? how is javascript/jQuery thing ?



ps: i deleted the direction thing but still moving
ps2: some of the pictures are two in one block, not a one line, is it because the moving thing ?

[Chen Zhen]

Skaty,

  Your very first code has the marquee code in it which scrolls the content. You asked to have the two codes merged so I included the marquee in the code. This is why I asked you to explain in words for the exact format you were after. Just asking me to merge two codes left me guessing as to which content you wanted to include exactly. If you wanted just icons evenly spaced in horizontal format (without the scrolling marquee) you could have just stated this prior.

  I will rewrite the code in a table that will display it how you describe. How many icons (topics) do you want to display horizontally?
 

[Skaty]

But first codes doesn't scrolling them, and they were horizontally

10 topics and 2px for each image would be good i think 

ps: is it possible to gave a color or some sign for new topics ?

[Chen Zhen]

Skaty,

  If you look at your first code you will see a <marquee> html tag which makes the content scroll horizontally. Perhaps some html was incorrect that was stopping it from scrolling so you did not know it did that? I always double check that mine is error free which imo enabled it to work properly for the code I provide.

  Anyhow, here is a code you can use & no css file is necessary. I assume when you stated 2px you were referring to the spacing of the images. The block shown below will evenly space the images but will only display them on one line. The amount of images can be set at the start of the block code but will be restricted to the width of the block (overflow is hidden). I included the author and date in the tooltip but you can set those to false if you do not want them to show.

Code: [Select]

global $smcFunc, $scripturl;

/* Edit these variables */
$imageWidth = 80;
$imageHeight = 40;
$imageAmount = 5;
$boards = array(1,2);
$showText = false;
$showLinks = false;
$showDate = true;
$showPoster = true;
$maxChars = 150;
$authorText = 'Author: ';
$linebreak = '<hr />';

/* Do not edit below this line */

$count = 0;
$tooltipStyle = '
position: fixed;
    top: 300px;
    left: 400px;
    padding:15px;
    margin:1em 0 3em;
    color:#fff;
    max-width: 400px;
    border: 1px solid #222222;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow: 3px 3px 39px 2px #222222;
    -webkit-box-shadow: 3px 3px 39px 2px #222222;
    box-shadow: 3px 3px 39px 2px #222222;
    background: #2989d8; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(41,137,216,0.9) 0%, rgba(30,87,153,0.9) 94%, rgba(30,87,153,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,137,216,0.9)), color-stop(94%,rgba(30,87,153,0.9)), color-stop(100%,rgba(30,87,153,0.9)));
    background: -webkit-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: -o-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: -ms-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);';

$request = $smcFunc['db_query']('', '
              SELECT t.id_topic, m.subject, m.body, m.smileys_enabled, m.id_msg, m.poster_time, m.id_member
              FROM {db_prefix}topics AS t             
              INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
              WHERE t.id_board IN ({array_int:boards})
              ORDER BY t.id_topic DESC
              LIMIT {int:limit}',
              array(
                'boards' => $boards,
                'limit' => 25,
              )
            );

$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
{
$body = $row['body'];
$row['body'] = strip_tags(strtr(parse_bbc($row['body'], $row['smileys_enabled'], $row['id_msg']), array('<br />' => ' ')));
if (!$showLinks)
$row['body'] = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '[link]',$row['body']);

if ($smcFunc['strlen']($row['body']) > $maxChars)
$row['body'] = $smcFunc['substr']($row['body'], 0, $maxChars) . '...';

censorText($row['subject']);
censorText($row['body']);
        $row['body'] = preg_replace('/\s{2,}/',' ',html_entity_decode($row['body']));
        $row['body'] = wordwrap($row['body'], 60, "<br />\n", true);
$poster = ssi_fetchMember($row['id_member'], false);
$topics[] = array(
'id_topic' => $row['id_topic'],
'body' => $row['body'],
'subject' => $row['subject'],
'poster_id' => $showPoster ? ($authorText . $poster[$row['id_member']]['username'] . '<br />') : false,
'poster_time' => $showDate ? (date("F j, Y, g:i a", $row['poster_time']) . '<br />') : false,
'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $body, $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" style="height:'.$imageHeight.'px;width:'.$imageWidth.'px;" />' : '',
);
}
$smcFunc['db_free_result']($request);

echo '
<table style="width:100%;border:0px;text-align:center;">
<tr class="centertext">';

foreach ($topics as $key => $topic)
{
if ($topic['first_image'])
{
if ($showText)
$text = '<br />' . $topic['subject'];
else
$text = false;

if (!$topic['poster_id'] && !$topic['poster_time'])
$linebreak = false;

echo '               
<td style="font-size:11px;position:relative;">
<div id="tooltip', $key, '" style="display: none;',$tooltipStyle,'">
<span style="font-size:9px;position:relative;">', $topic['poster_id'], $topic['poster_time'], '</span>
', $linebreak, '
<span style="float:left;position:relative;">', $topic['body'], '</span>
</div>
<span  id="hotspot'.$key.'" onmouseover="document.getElementById(\'tooltip', $key, '\').style.display = \'block\'" onmouseout="document.getElementById(\'tooltip', $key, '\').style.display = \'none\'" style="text-align:center;">
<a href="'. $scripturl. '?topic='. $topic['id_topic']. '.0" style="text-decoration:none;">' . $topic['first_image'] . $text . '</a>
</span>
</td>';
$count++;
if ($count >= $imageAmount)
break;   
}             
}

echo '
</tr>
</table>';

  If after attempting to increase the $imageAmount a scroll bar appears (overflow bar) you can get rid of it by editing the block and in the bottom right corner where it says Custom Body Style: you enter this in the input box: overflow:hidden;

[Skaty]

Thank you Underdog, now all is okay i start to using it

[Skaty]

Underdog,

is this can make a cpu load ?

[Chen Zhen]

Underdog,

is this can make a cpu load ?

Skaty,

  I do not understand your question. Can you please attempt to explain this so I may understand exactly what you are asking?
 
Thank you.

[Skaty]

My server cpu load is high then before. Is this php block can make a high cpu load ? when deactivate this php block cpu load is normal again.

[Chen Zhen]

My server cpu load is high then before. Is this php block can make a high cpu load ? when deactivate this php block cpu load is normal again.

Skaty,

  When I test the cpu usage with the code operating (& other content on the same page), it is so minimal that I do not see an issue. Also looking at the code I do not see any issue regarding the loops and/or mysql query.

  Did you adjust the code in your block somehow? If so display it in a code block here so I may peruse it.
 

[Skaty]

i didn't add or change the codes, just put them in a php block.  when a activate the block, i can see 4-5 more processess from cpanel. and if 10 member will be online on my smf, it is given me even 505 error. it is weird. it is effected immediately. i can open pages very fast if the block is deactivated, but when i activated it is slowing so fast, and like i said more processing.

[Chen Zhen]

Skaty,

  I've looked the block code over & don't really see an issue with it. Although we can attempt to limit the db query a little more. How many images are you opting to display and from which board id# specifically? Although this would not cause a 505 error.

  After reading up on a 505 page error (which I have never encountered prior), I found that it occurs when the web server does not support the http protocol being used. This can be caused by a corrupt request, meaning that page errors can cause the page to become corrupt & end up in a 505 error for the client. Although the code I provided is compliant, other code on your forum page is not compliant and imo it is possible that this could cause the page to become corrupt. It would be prudent to fix all the compliancy errors on the page in an attempt to rectify the situation.

  Taking a look at the css you provided (that I used), I see that some of the older cross-browser syntax is no longer necessary. I don't think it should be causing the 505 error issue as those browsers should be compatible with both old & new syntax. Try this code anyhow which only contains the current newer syntax for the background & shadow:

Code: [Select]

global $smcFunc, $scripturl;

/* Edit these variables */
$imageWidth = 80;
$imageHeight = 40;
$imageAmount = 5;
$boards = array(1,2);
$showText = false;
$showLinks = false;
$showDate = true;
$showPoster = true;
$maxChars = 150;
$authorText = 'Author: ';
$linebreak = '<hr />';

/* Do not edit below this line */

$count = 0;
$tooltipStyle = '
position: fixed;
    top: 300px;
    left: 400px;
    padding:15px;
    margin:1em 0 3em;
    color:#fff;
    max-width: 400px;
    border: 1px solid #222222;   
    border-radius:10px;   
    box-shadow: 3px 3px 39px 2px #222222;
    background-color: #2989d8;';

$request = $smcFunc['db_query']('', '
              SELECT t.id_topic, m.subject, m.body, m.smileys_enabled, m.id_msg, m.poster_time, m.id_member
              FROM {db_prefix}topics AS t             
              INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
              WHERE t.id_board IN ({array_int:boards})
              ORDER BY t.id_topic DESC
              LIMIT {int:limit}',
              array(
                'boards' => $boards,
                'limit' => 25,
              )
            );

$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
{
$body = $row['body'];
$row['body'] = strip_tags(strtr(parse_bbc($row['body'], $row['smileys_enabled'], $row['id_msg']), array('<br />' => ' ')));
if (!$showLinks)
$row['body'] = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '[link]',$row['body']);

if ($smcFunc['strlen']($row['body']) > $maxChars)
$row['body'] = $smcFunc['substr']($row['body'], 0, $maxChars) . '...';

censorText($row['subject']);
censorText($row['body']);
        $row['body'] = preg_replace('/\s{2,}/',' ',html_entity_decode($row['body']));
        $row['body'] = wordwrap($row['body'], 60, "<br />\n", true);
$poster = ssi_fetchMember($row['id_member'], false);
$topics[] = array(
'id_topic' => $row['id_topic'],
'body' => $row['body'],
'subject' => $row['subject'],
'poster_id' => $showPoster ? ($authorText . $poster[$row['id_member']]['username'] . '<br />') : false,
'poster_time' => $showDate ? (date("F j, Y, g:i a", $row['poster_time']) . '<br />') : false,
'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $body, $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" style="height:'.$imageHeight.'px;width:'.$imageWidth.'px;" />' : '',
);
}
$smcFunc['db_free_result']($request);

echo '
<table style="width:100%;border:0px;text-align:center;">
<tr class="centertext">';

foreach ($topics as $key => $topic)
{
if ($topic['first_image'])
{
if ($showText)
$text = '<br />' . $topic['subject'];
else
$text = false;

if (!$topic['poster_id'] && !$topic['poster_time'])
$linebreak = false;

echo '               
<td style="font-size:11px;position:relative;">
<div id="tooltip', $key, '" style="display: none;',$tooltipStyle,'">
<span style="font-size:9px;position:relative;">', $topic['poster_id'], $topic['poster_time'], '</span>
', $linebreak, '
<span style="float:left;position:relative;">', $topic['body'], '</span>
</div>
<span  id="hotspot'.$key.'" onmouseover="document.getElementById(\'tooltip', $key, '\').style.display = \'block\'" onmouseout="document.getElementById(\'tooltip', $key, '\').style.display = \'none\'" style="text-align:center;">
<a href="'. $scripturl. '?topic='. $topic['id_topic']. '.0" style="text-decoration:none;">' . $topic['first_image'] . $text . '</a>
</span>
</td>';
$count++;
if ($count >= $imageAmount)
break;   
}             
}

echo '
</tr>
</table>';


[Skaty]

it is given me 505 error when cpu load is too much.  i'm using it with 12 images and 1,2 boards.  when i tried with 4 images it is little bit better but still effect it.  can we change the tooltip's content to just ''topic's title'' ?

[Chen Zhen]

Skaty,

  What I was attempting to inform you with my last post was that it is my opinion that something else is causing your 505 page error. I really do not think that this block should cause any high server load with only displaying 12 images (or 4 as you say you've tested). When I run your forum page through a validation filter, it has many html errors caused by your other blocks.

  For testing purposes, would it be ok to ask you to temporarily disable the top 2 right blocks on your forum page and enable the block I posted? Let your users browse your forum and inform me if the server load is normal after that. I see even more issues other than those blocks but let us try them first if you like.
 

[Skaty]

Thank you for your excellent help Underdog but i coudn't figrured out what is the issue about this. maybe it is my server but i can't use it now. but i live eventually.

thank you again, regards.

[TrickyRicky]

Just what i was looking for thanks.