דילוג לתוכן
  • דף הבית
  • קטגוריות
  • פוסטים אחרונים
  • משתמשים
  • חיפוש
  • חוקי הפורום
כיווץ
תחומים

תחומים - פורום חרדי מקצועי

💡 רוצה לזכור קריאת שמע בזמן? לחץ כאן!
  1. דף הבית
  2. על הפורום
  3. מדריך לשימוש בפורום
  4. מדריך | להוספת תצוגה מקדימה לנושאים

מדריך | להוספת תצוגה מקדימה לנושאים

מתוזמן נעוץ נעול הועבר מדריך לשימוש בפורום
7 פוסטים 3 כותבים 846 צפיות
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • פישלפ מנותק
    פישלפ מנותק
    פישל
    כתב ב נערך לאחרונה על ידי פישל
    #1

    סקריפט תצוגה מקדימה לנושאים

    אשתדל לכתוב את המדריך מפורט כמה שיותר
    הקרדיט לא מגיע לי אלא ל@yossiz שכתב זאת במקצועות

    הפורום כאן גודל מיום ליום ויוצא שאנחנו צריכים לפתוח הרבה נושאים שהכותרת שלהם לא ברורה

    המדריך הזה יחסוך ממכם זמן ע"י שהוא יציג חלון מרחף מעל הנושא כתצוגה מקדימה במקום לפתוח אותו

    בכדי שהסקריפט יעבוד יש שני חלקים שצריכים לעשות
    1 לבנות סקריפט JS
    2 לבנות סקריפט CSS

    הסקריפט JS יגרום לתצוגה מקדימה אך לא במקום הנכון אלא מתחת לנושא
    וזה מקפיץ ומבלבל
    לכן מגיע הוספת הCSS שהוא הגורם שממקם אותו במקום מעל וכן לא יקפיץ נושא אחר

    אז מתחילים
    נתקין את התוסף Tampermonkey
    לדפדפן כרום
    לדפדפן פיירפוקס

    לאחר ההתקנה נלחץ על התוסף בצד שמאל למעלה
    שם נלחץ על זה

    1.png

    (התמונה באדיבות פישל ולא@yossiz 😁 )
    שזה הוספת סקריפט חדש

    בחלון שנפתח נעשה קונטרל+A
    נמחק הכול שם
    ונדביק את זה

    // ==UserScript==
    // @name         Nodebb topic preview
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  Add a preview bubble when hovering over topic titles in Nodebb based forums
    // @author       yossizahn
    // @match        https://tchumim.com/*
    // @match        http://forum.netfree.link/*
    // @grant        none
    // ==/UserScript==
    
    (function() {
        'use strict';
        function onhover() {
            /* globals require, $, socket, app */
            var self = $(this);
            if (!self.data('preview-loaded')) {
                socket.emit('topics.loadMore', {
                    tid: self.data('my-tid'),
                    after: 0,
                    count: 1,
                    direction: 1
                }, (e, d) => {
                    self.data('preview-loaded', 1);
                    require('translator').translate(e ? '<span style="color:red;">שגיאה: </span>' + e.message : d.mainPost.content,
                                                    (d) => {
                        if (app.user.uid === 0) {
                            d = d.replace(/\|\|.*\|\|/g,'<a href="https://mitmachim.top/login">תוכן מוסתר - לצפיה הרשמו או התחברו</a>');
                        } else {
                            d = d.replace(/\|\|/g,'');
                        }
                        $('#preview-' + self.data('my-tid')).children().html(d.replace(/\|\|/g,''));
                    });
                }
                           );
            }
            $('#preview-' + self.data('my-tid')).stop(true).delay(500).fadeIn();
        }
    
        function onunhover() {
            $('#preview-' + $(this).data('my-tid')).stop(true).fadeOut();
        }
    
        $(window).on('action:topics.loaded', (event, data) => {
            for (let topic of data.topics) {
                let topicElem = $('[data-tid="' + topic.tid + '"]');
                createPreview(topicElem);
            }
        });
    
        function addTopicTools() {
            let topicelems = $('[component="category/topic"]');
            topicelems.each((i, elem) => {
                createPreview($(elem));
            });
        }
    
        function createPreview(topicElem) {
            let tid = parseInt(topicElem.attr('data-tid'));
            if (!$('#preview-' + tid).length) {
                topicElem.find('.content').append('<div class="post-preview" id="preview-' + tid + '"><div class="wrap-post-preview">טוען...</div></div>');
                topicElem.find('.post-preview').hover(function(){$(this).stop(true).fadeIn();},function(){$(this).delay(600).fadeOut();});
                topicElem.find('[itemprop="url"]').data('my-tid', tid).hover(
                    onhover,
                    onunhover
                );
            }
        }
    
        $(window).on('action:ajaxify.end', addTopicTools);
    
    })();
    

    2.png

    נלחץ file ואז save

    3.png
    כעת נוכל לראות שזה כבר עובד אבל לא במקום
    כעת נשאר רק להעמיד אותו במקום :smile:

    4.png

    נתקין את התוסף לCSS
    לדפדפן כרום
    לדפדפן פיירפוקס

    הקישור לפיירפוקס שבור

    לאחר התקנת התוסף נפתח את האתר תחומים דף הבית

    ונלחץ על התוסף החדש
    יפתח לנו חלון שם נדביק את הקוד הבא
    (אין צורך למחוק את התוכן שלפני זה נמחק אטומטי)

    .post-preview {
        position: absolute;
        background: white;
        border-radius: 5px;
        box-shadow: 2px 2px 13px 4px rgba(0,0,0,0.5);
        right: 100px;
        padding: 10px 15px;
        bottom: calc(100% + 10px);
        z-index: 1111;
        max-height: 200px;
        display: none;
        max-width: 400px;
    }
     
    .wrap-post-preview::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
     
    .wrap-post-preview::-webkit-scrollbar-thumb {
      background: #666;
      border-radius: 20px;
    }
     
    .wrap-post-preview::-webkit-scrollbar-track {
      background: #ddd;
      border-radius: 20px;
    }
     
    .post-preview p {
    	font-size: 14px
    }
     
    .post-preview p:last-of-type {
        margin: 0;
    }
     
    .wrap-post-preview {
    	max-height: 160px;
    	overflow: auto;
    	padding: 0 0 0 7px;
    }
     
    .post-preview li {
    	border-bottom: 0;
    	height: max-content !important;
    	outline: none;
    	font-size: 10px;
    	padding: 10px;
    	border: none;
    	box-shadow: none
    }
     
    .post-preview .category-item {
    	outline: none;
    	border: none;
    	box-shadow: none
    }
     
    .post-preview .emoji {
    	width: 23px !important;
    	height: 23px !important
    }
     
    .post-preview img {
    	width: auto !important;
    	height: auto !important;
    	max-width: 300px !important;
    	display: inline !important;
    	border-radius: 0 !important
    }
    

    נלחץ על איפה שיש 3
    5.png

    נאפשר אותו
    6.png
    אפשר לראות בתמונה שהוא מכיל את הנתונים על האתר תחומים (https://tchumim.com/)
    נוכל לסגור את החלון נפתח את נושאים שלא נקראו
    וואלה 😀😀😀😀
    7.png

    נא לא להגיב סתם, למען הסדר הטוב

    נ.ב. זה עובד גם על פורום נטפרי כך כתבו בJS אפשר כמובן להוסיף עוד אתרים שלא קיים

    פ מעלה ומורידמ 3 תגובות תגובה אחרונה
    14
    • פ מנותק
      פ מנותק
      פלורידה
      השיב לפישל ב נערך לאחרונה על ידי
      #2

      @פישל אמר במדריך | להוספת תצוגה מקדימה לנושאים:

      הקישור לפיירפוקס שבור

      אולי יש תוסף אחר של css שיכול להועיל?

      תגובה 1 תגובה אחרונה
      0
      • מעלה ומורידמ מנותק
        מעלה ומורידמ מנותק
        מעלה ומוריד
        השיב לפישל ב נערך לאחרונה על ידי מעלה ומוריד
        #3

        @פישל אמר במדריך | להוספת תצוגה מקדימה לנושאים:

        נא לא להגיב סתם, למען הסדר הטוב

        אני לא יודע כמה אתה מכיר את הבית הזה, אבל המשפט הזה הרבה יותר ממיותר. פה, זה לא שם.

        לגופו של עניין
        רק לציין שאפשר לשים את כל הסקריפטים שכתב @yossiz ע"ש במקצועות ותמצאו נחת
        כמו כן, תמונות תוכל להכניס בינתיים בדרך עקיפה, של להעלות במק"א ולהכניס לינק be32e005-d132-4b64-9d8a-27e96f2142eb-image.png

        @פלורידה מי שלא מעוניין בתוסף אפקטיבי לעריכת הCSS יכול להשתמש בזה, https://chrome.google.com/webstore/detail/css-and-javascript-inject/ckddknfdmcemedlmmebildepcmneakaa
        הוא יותר נעים, וגם אין בו את הדיליי המעצבן שיש בהנ"ל.

        מנע בזבוז זמן, זכה את הרבים!

        פישלפ תגובה 1 תגובה אחרונה
        2
        • פישלפ מנותק
          פישלפ מנותק
          פישל
          השיב למעלה ומוריד ב נערך לאחרונה על ידי פישל
          #4

          @מעלה-ומוריד אמר במדריך | להוספת תצוגה מקדימה לנושאים:

          @פישל אמר במדריך | להוספת תצוגה מקדימה לנושאים:

          נא לא להגיב סתם, למען הסדר הטוב

          אני לא יודע כמה אתה מכיר את הבית הזה, אבל המשפט הזה הרבה יותר ממיותר. פה, זה לא שם.

          לא הבנתי איפה זה אצלך זה פה ואיפה אצלך זה שם
          אם אתה רוצה לבלגן את הפורום בשמחה זה לא הפורום שלי
          אני אישית אחרי שעבדתי על זה קשה המון זמן אני חושב שזה יהיה יותר יפה ומסודר שזה ישאר כך

          לגופו של עניין
          רק לציין שאפשר לשים את כל הסקריפטים שכתב @yossiz ע"ש במקצועות ותמצאו נחת

          משפט מחכים מאוד
          אתה גם יכול לקחת את כל פורום מתמחים טופ ופרוג
          ולהספים גם בדרך (כפי מה שנראה הכיוון שלך)
          כתבתי זאת כמו שכתבתי למעלה
          הפורום ברוך ה' גדול ואיתו כמות הפוסטים
          במתמחים לדוג' יש עקיפה מוגברת על כותרת לא תקינה כאן מרחמים על אנשים ולכן הרבה פוסטים צריך לבדוק
          המדריך שהבאתי בהחלט מועיל בכדי לא לגזול סתם
          וכך גם להצליח לעזור לכולם

          כמו כן, תמונות תוכל להכניס בינתיים בדרך עקיפה, של להעלות במק"א ולהכניס לינק be32e005-d132-4b64-9d8a-27e96f2142eb-image.png

          תודה על ההערה
          יתכן ויש איזה בעיה כבר העשה רענון קישח וכדו והעלה את התמונות

          תוקן כבר התמונות

          @פלורידה מי שלא מעוניין בתוסף אפקטיבי לעריכת הCSS יכול להשתמש בזה, https://chrome.google.com/webstore/detail/css-and-javascript-inject/ckddknfdmcemedlmmebildepcmneakaa
          הוא יותר נעים, וגם אין בו את הדיליי המעצבן שיש בהנ"ל.

          לא יודע איזה תוסף הבאת
          אבל פלורידה מחפש תוסף לפיירפוקס לCSS
          מה שאני הבאתי באתר המקור שבור משום מה

          תגובה 1 תגובה אחרונה
          4
          • פ מנותק
            פ מנותק
            פלורידה
            השיב לפישל ב נערך לאחרונה על ידי
            #5

            @פישל משום מה אצלי זה נכנס מתחת לפס העליון.
            נראה ככה:
            אני מתייג את היוצר @yossiz
            e02439f3-f44e-412e-b522-26d5dd831f20-תמונה.png

            פ תגובה 1 תגובה אחרונה
            0
            • פ מנותק
              פ מנותק
              פלורידה
              השיב לפלורידה ב נערך לאחרונה על ידי
              #6

              @הערשלה
              הפיתרון הוא להוסיף בערך הזה

               z-index: 1111;
              

              אני נתתי לו ערך גבוה במיוחד של 1111
              אפשר לתת לו גם הרבה פחות

              פישלפ תגובה 1 תגובה אחרונה
              4
              • פישלפ מנותק
                פישלפ מנותק
                פישל
                השיב לפלורידה ב נערך לאחרונה על ידי
                #7

                @פלורידה אמר במדריך | להוספת תצוגה מקדימה לנושאים:

                @הערשלה
                הפיתרון הוא להוסיף בערך הזה

                 z-index: 1111;
                

                אני נתתי לו ערך גבוה במיוחד של 1111
                אפשר לתת לו גם הרבה פחות

                ערכתי תודה חח

                תגובה 1 תגובה אחרונה
                5

                בא תתחבר לדף היומי!
                • התחברות

                • אין לך חשבון עדיין? הרשמה

                • התחברו או הירשמו כדי לחפש.
                • פוסט ראשון
                  פוסט אחרון
                0
                • דף הבית
                • קטגוריות
                • פוסטים אחרונים
                • משתמשים
                • חיפוש
                • חוקי הפורום