Skip to content

Opening links in nodebb widget

Solved Configure
  • @phenomlab the convo we started on nodebb forum, I thought to continue it here.
    Still having the issue of links not loading often in widgets
    Have you been able to take a look?

  • A more efficient way of including this would be to not over complicate it and leverage a standard iframe (providing the CSP headers of the remote site permit this) like below

    <iframe src="https://www.classmarker.com/online-test/start/?quiz=gag66aea7922f0a5" width="700" height="800"></iframe>
    

    This works first time every time on your site as intended.

  • @Panda not yet, will do so later. For continuity, can you provide the code here that you want to use?

  • @phenomlab yes, its just a quiz.

    <script src="https://www.classmarker.com/public/js/embed-classmarker-1.0.0.js?quiz=gag66aea7922f0a5" data-quiz="gag66aea7922f0a5" data-width="700" data-height="800" ></script>
    

    The fact this is so problematic makes me wonder if something should be built into the widget code in nodebb to sort whatever the timing issue is, that causes loading to fail

  • @Panda I’ll test this and revert. Will get back to you later.

  • @Panda It’s not caused by NodeBB, but the way you are calling the URL - see the error message below reported in the console

    embed-classmarker-1.0.0.js?quiz=gag66aea7922f0a5:7  Uncaught TypeError: Failed to construct 'URL': Invalid URL
        at __createIframe (embed-classmarker-1.0.0.js?quiz=gag66aea7922f0a5:7:80)
        at load (embed-classmarker-1.0.0.js?quiz=gag66aea7922f0a5:3:100)
        at embed-classmarker-1.0.0.js?quiz=gag66aea7922f0a5:1:1
    
  • A more efficient way of including this would be to not over complicate it and leverage a standard iframe (providing the CSP headers of the remote site permit this) like below

    <iframe src="https://www.classmarker.com/online-test/start/?quiz=gag66aea7922f0a5" width="700" height="800"></iframe>
    

    This works first time every time on your site as intended.

  • phenomlabundefined phenomlab has marked this topic as solved

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • Page control arrows for PWA

    Solved Customisation
    27
    25 Votes
    27 Posts
    1k Views

    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems.

    /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android }

    Once you’re in that rabbit hole, it’s impossible to get out of it.

  • Composer options on nodebb

    Solved Configure
    8
    3 Votes
    8 Posts
    371 Views

    @Panda You should be able to expose the CSS for these using F12 to get into console

    3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png

    a2b8ed46-4157-4ff2-85f0-576543380107-image.png

    That should then expose the element once selected

    89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png

    Here’s the below CSS you need based on the screenshot provided.

    .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • NodeBB: Upgrading to NodeBB v3.x

    Solved Configure
    6
    0 Votes
    6 Posts
    283 Views

    @mventures You’d need to connect to the server and execute it directly - not on your local terminal. Review the guide below, which will show you how to gain access via SSH to your server

    https://docs.ovh.com/gb/en/dedicated/ssh-introduction/

    Once you have access, you’ll need to navigate to the actual folder where NodeBB is installed

    You’ll then need to change to the directory as shown below

    /home/unbuntu/nodebb

    fdffe673-bf63-4b6d-a728-5506fddc1aff-image.png

    In most cases, initial access takes you to the root of the file system. You can always issue pwd in a Linux terminal which will show you the Present Working Directory. From there, you can issue the command

    cd /home/ubuntu/nodebb

    Once in the NodeBB directory, you’d use the below commands

    ./nodebb stop git fetch && git checkout develop && git reset --hard origin/develop ./nodebb upgrade ./nodebb start

    Line 1 stops the NodeBB instance
    Line 2 gets the latest files from GIT (repository) and then checks out the development branch. It then resets the version you are using to the development branch ready for v3
    Line 3 Runs the upgrade once the new branch is set, and code pulled
    Line 4 Restarts the NodeBB instance after the upgrade has completed

    Note that when you restart NodeBB and log back in, things will look very different to what you had in v2.

  • NodeBB: Creating pages

    Solved Configure
    9
    0 Votes
    9 Posts
    397 Views

    OK, I think I have figured out how to place a link in the footer which will click to a new page.

  • Adding fileWrite to nodebb code

    Solved Configure
    16
    5 Votes
    16 Posts
    702 Views

    @eveh this might be a question for the NodeBB Devs themselves. In all honesty, I’m not entirely sure without having to research this myself.

  • [NodeBB] greeting message

    Solved Customisation
    2
    3 Votes
    2 Posts
    616 Views

    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here

    https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358

  • creating topic specific widgets

    Solved Customisation
    16
    10 Votes
    16 Posts
    952 Views

    @crazycells said in creating topic specific widgets:

    Additionally if hide class exists, why are we re-defining it?

    We’re not 🤭 I misspelled it - it should be hidden

  • nodebb dropdown menu

    Solved Configure
    5
    0 Votes
    5 Posts
    497 Views

    @phenomlab said in nodebb dropdown menu:

    @kurulumu-net You set it like the below example taken from this site

    aae36790-3257-4bb2-ad5a-0d744309876a-image.png

    Which presents this

    77f47260-2941-4afe-9614-8e17dcfc8c19-image.png

    Very interesting…

    I actually thought this wasn’t possible, as I remember it being asked in the NodeBB forum.

    Is this something new that’s been implemented? I’ll 100% be doing that when I’m on the laptop over the weekend.