Konu: Ajax recent topics edit - Son konular listesine görsellik katın  (Okunma sayısı 1023 defa)

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

16 Nisan 2014, 21:45
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

(Üzgünüm. Galeriyi görme yetkiniz yok)
Bir çoğumuz sitelerimizde ajax recent topics modifikasyonunu kullanırız. Bu modifikasyon sayesinde sayfa yenilemeye gerek kalmadan forumlarımıza yeni açılan konulardan ve mevcut konulara bırakılan iletilerden haberdar olabiliyoruz.

Benim çok kullandığım bir özellik olduğu için bu modifikasyonu geliştirdim. 2 gündür buna uğraşıyordum. Neyse ki bu akşam bitirdim.

Söz konusu modifikasyona 3 özellik eklendi. Şöyle ki;
Forumlara yeni ileti bırakıldığında sayfaya bakmamıza gerek kalmaksızın sesli olarak ve görsel olarak 2 kere ikaz edileceğiz. 3 özellik olarak da tablo satır ve sütunlarına border eklendi.

Kullanmak isteyen arkadaşlar aşağıdaki işlem basamaklarını uygulayarak son konular listesine sesli ve görsel zenginlik kazandırabilirler.

1. Sitenize ajax recent topics  modifikasyonunun kurulu ve çalışır durumda varsayarak anlatıma başlıyorum. Ajax recent topics modifikasyonu kurulu olmayan smf kullanıcıları öncelikle ajax recent topics modifikasyonunu kurmalıdır.

2. Temes/default/ dizininde bulunan Recent.template.php dosyanızı ekteki Recent.template.php dosyası ile değiştirin.

3. Ekteki ikaz.gif dosyasını kullandığınız temanın images/icons/ dizinine atın.

4. Kullandığımız temanın css dosyasına da aşağıdaki kodları ekliyoruz.
Kod: [Seç]
.recent-border{border-bottom:1px solid #b7b7b7;border-left:1px solid #b7b7b7;text-align:left;width:auto;}
.recent-border2{border-bottom:1px solid #b7b7b7;border-right:1px solid #b7b7b7; border-left:1px solid #b7b7b7;text-align:center;width:auto;}
.recent-border3{border-bottom:1px solid #b7b7b7;border-left:1px solid #b7b7b7;text-align:center;width:auto;}

5. Bu işlemleri yaptıktan sonra modifikasyon kurulumu tamamlanmıştır. Ancak sistem ses dosyalarını SMF Destek smf mod - smf destek sitemiz üzerinden çekiyor. Ses dosyalarının buradan silinme ihtimaline karşı ekteki ikaz.mp3 ve ikaz.ogg isimli ses dosyalarını kendi hostinginize atıp Recent.template.php dosyanızda bulunan aşağıdaki kodlardaki ses dosyası yollarını kendinize göre editlemeniz menfeatiniz icabıdır.
Kod: [Seç]
   <source src="http://www.smfdestek.com/Themes/default/ikaz.mp3" /> 
   <source src="http://www.smfdestek.com/Themes/default/ikaz.ogg" /> 

« Son Düzenleme: 17 Nisan 2014, 19:45 Gönderen: bolubeyi »

16 Nisan 2014, 22:18
Yanıtla #1
  • *
    • İleti: 153
    • Karma: 1
    • EvcilSevgisi
    • Profili Görüntüle


16 Nisan 2014, 23:29
Yanıtla #2
  • *
    • İleti: 141
    • Karma: 1
    • Forumigo8navigation
    • Profili Görüntüle


17 Nisan 2014, 12:16
Yanıtla #3
  • *
    • İleti: 141
    • Karma: 1
    • Forumigo8navigation
    • Profili Görüntüle

Hocam ses ve yeni ileti görüntüsü bende neden ise çalışmadı.


17 Nisan 2014, 13:07
Yanıtla #4
  • *
    • İleti: 141
    • Karma: 1
    • Forumigo8navigation
    • Profili Görüntüle

Şimdi çalıştı.İkon mesajı açana kadar duruyormu? Aslında ana sayfada Ajaxlı son konuları son 10 konu olarak gösterebilirsek daha güzel olmazmı?


17 Nisan 2014, 16:58
Yanıtla #5
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

icon sayfayı yenileyene kadar açık durur. anasayfadaki son 10 konu daha farklı bir mod. o ayrı bu ayrı. biz mevcut bir modu editledik. ana sayfa için de yapılırsa olur neden olmasın. yapacak adam lazım.


02 Mayıs 2014, 01:39
Yanıtla #6
  • *
    • İleti: 141
    • Karma: 1
    • Forumigo8navigation
    • Profili Görüntüle

Ajaxlı son konuları portalda block olarak oluşturamazmıyız?


02 Mayıs 2014, 02:36
Yanıtla #7
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

hazırlanmış bir anlatım yok. yaparsam paylaşırım.


17 Mayıs 2014, 17:43
Yanıtla #8
  • *
    • İleti: 141
    • Karma: 1
    • Forumigo8navigation
    • Profili Görüntüle

Ajaxlı son konuları php block oluşturarak portal ana sayfada gösterdim.Ama iki tane sorun var.

1-Konular belirlediğiniz saniyeden sonra görünüyor.
2-En son açılan konu listenin en altında duruyor.

Kod: [Seç]
global $context, $txt, $modSettings, $scripturl, $settings;
$alt = false;
echo '
<div class="tborder" ', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? 'style="width: 100%;"' : '', '>
<table border="0" width="100%" cellspacing="0" cellpadding="4" class="t" id="topicTable">
<div class="title_bar">
<h3 class="titlebg centertext">', $txt['recent_topics'], '';

// Are there actually any topics to show?
echo '
<td class="recent-border11"><strong>', $txt['board'], '</strong></td>
<td class="recent-border12"><strong>', $txt['topic'], '</strong></td>
<td class="recent-border13"><strong>', $txt['replies'], '</strong></td>
<td class="recent-border14"><strong>', $txt['started_by'], '</strong></td>
<td class="recent-border15"><strong>', $txt['last_post'], '</strong></td>
<td class="recent-border2"></td>
</h3></div>';
// No topics.... just say, "sorry bub".
if (empty($context['topics']))
echo '
<tr id="no_topics">
<td class="arppost arp_left" colspan="6"><strong>', $txt[151], '</strong></td>';

else
foreach ($context['topics'] as $topic)
{
echo '
<tr class="windowbg', ($alt ? '2' : ''), '" id="topic_', $topic['id'], '">
<td class="recent-border11">', $topic['board']['link'], '</td>
<td class="recent-border12">', $topic['link'], '</td>
<td class="recent-border13">', $topic['replies'], '</td>
<td class="recent-border14">', $topic['firstPoster']['lnk'], ' <br />', $topic['firstPoster']['time'], '</td>
<td class="recent-border15">', $topic['lastPoster']['link'], '<br />', $topic['lastPoster']['time'], '</td>
<td class="recent-border2"><a href="', $topic['lastPost']['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt['last_post'], '" title="', $txt['last_post'], '" /></a></td>
</tr>';
$alt = !$alt;
}
echo '
</table>
</div>';







// Now for all of the javascript stuff
echo '
<script language="Javascript" type="text/javascript"><!-- // -->
var last_post = ', (!empty($context['last_post_time']) ? $context['last_post_time'] : 0), ';
var time_interval = ', $modSettings['number_recent_topics_interval'] * 1000, ';
var max_topics = ', $modSettings['number_recent_topics'], ';

var interval_id = setInterval( "getTopics()", time_interval);

function getTopics()
{
if (window.XMLHttpRequest)
getXMLDocument("', $scripturl, '?action=recenttopics;latest="   last_post   ";xml", gotTopics);
else
clearInterval(interval_id);
}

function gotTopics(XMLDoc)
{
var updated_time = XMLDoc.getElementsByTagName("smf")[0].getElementsByTagName("lastTime")[0];
var topics = XMLDoc.getElementsByTagName("smf")[0].getElementsByTagName("topic");
var topic, id_topic, board, subject, replies, firstPost, lastPost, link;
var myTable = document.getElementById("topicTable"), oldRow, myRow, myCell, myData, rowCount;

// If this exists, we have at least one updated/new topic
if (updated_time)
{
// Update the last post time
last_post = updated_time.childNodes[0].nodeValue;

// No Messages message?  Ditch it!
// Note, this should only happen if there are literally zero topics
// on the board when a user visits this page.
if (document.getElementById("no_topics") != null)
myTable.deleteRow(-1);

// If the topic is already in the list, remove it
for (var i = 0; i < topics.length; i  )
{
topic = XMLDoc.getElementsByTagName("smf")[0].getElementsByTagName("topic")[i];
id_topic = topic.getElementsByTagName("id")[0].childNodes[0].nodeValue;
if ((oldRow = document.getElementById("topic_"   id_topic)) != null)
myTable.deleteRow(oldRow.rowIndex);
}

// Are we going to exceed the maximum topic count allowed?
while (((myTable.rows.length - 1   topics.length) - max_topics) > 0)
myTable.deleteRow(-1);

// Now start the insertion
for (var i = 0; i < topics.length; i  )
{
// Lets get all of our data
topic = XMLDoc.getElementsByTagName("smf")[0].getElementsByTagName("topic")[i];
id_topic = topic.getElementsByTagName("id")[0].childNodes[0].nodeValue;
board = topic.getElementsByTagName("board")[0].childNodes[0].nodeValue;
subject = topic.getElementsByTagName("subject")[0].childNodes[0].nodeValue;
replies = topic.getElementsByTagName("replies")[0].childNodes[0].nodeValue;
firstPost = topic.getElementsByTagName("first")[0].childNodes[0].nodeValue;
lastPost = topic.getElementsByTagName("last")[0].childNodes[0].nodeValue;
link = topic.getElementsByTagName("lastLink")[0].childNodes[0].nodeValue;
// Now to create the new row...
myRow = myTable.insertRow(1);
myRow.id = "topic_"   id_topic;
myRow.className = "windowbg";
// First the Board
myCell = myRow.insertCell(-1);
myCell.className = "recent-border";
myCell.style.borderLeft = "1px solid rgb(183, 183, 183)";
myCell.style.borderBottom = "1px solid rgb(183, 183, 183)";
setInnerHTML(myCell, board);
// Then subject
myCell = myRow.insertCell(-1);
myCell.style.borderLeft = "1px solid rgb(183, 183, 183)";
myCell.style.borderBottom = "1px solid rgb(183, 183, 183)";
setInnerHTML(myCell, subject);
// replies
myCell = myRow.insertCell(-1);
myCell.align = "center"
myCell.style.borderBottom = "1px solid rgb(183, 183, 183)";
myCell.style.borderLeft = "1px solid rgb(183, 183, 183)";
setInnerHTML(myCell, replies);
// first post
myCell = myRow.insertCell(-1);
myCell.align = "left"
myCell.style.borderBottom = "1px solid rgb(183, 183, 183)";
myCell.style.borderLeft = "1px solid rgb(183, 183, 183)";
setInnerHTML(myCell, firstPost);
// last post
myCell = myRow.insertCell(-1);
myCell.align = "left"
myCell.style.borderLeft = "1px solid rgb(183, 183, 183)";
myCell.style.borderBottom = "1px solid rgb(183, 183, 183)";
setInnerHTML(myCell, lastPost);
// last post
myCell = myRow.insertCell(-1);
myCell.align = "center"
myCell.style.borderRight = "1px solid rgb(183, 183, 183)";
myCell.style.borderLeft = "1px solid rgb(183, 183, 183)";
myCell.style.borderBottom = "1px solid rgb(183, 183, 183)";
setInnerHTML(myCell, link);
}

correctAltBG(myTable, "tr");
}
}

function correctAltBG(oElement, sChild)
{
element = oElement.getElementsByTagName(sChild);
var i = element.length;
while (i--)
{
if (element[i].id.indexOf("topic_") > -1)
if (i % 2 == 0)
element[i].className = "windowbg2";
else
element[i].className = "windowbg";
}
}
// ]]></script><br />';

İndex.css
Kod: [Seç]
.recent-border11{border-bottom:1px solid #b7b7b7;border-left:1px solid #b7b7b7;text-align:left;width:22%}
.recent-border12{border-bottom:1px solid #b7b7b7;border-right:1px solid #b7b7b7;border-left:1px solid #b7b7b7;text-align:center;width:32%}
.recent-border13{border-bottom:1px solid #b7b7b7;border-left:1px solid #b7b7b7;text-align:center;width:6%}
.recent-border14{border-bottom:1px solid #b7b7b7;border-left:1px solid #b7b7b7;text-align:left;width:20%}
.recent-border15{border-bottom:1px solid #b7b7b7;border-left:1px solid #b7b7b7;text-align:left;width:20%}