how to laod Page into a HZ Block or Webpage ?

Wed, 23 Aug 2023 21:55:42 +0200

Hubzilla Support Forum

adminsforum@hubzilla.org

𝓒𝓱𝓻𝓲𝓼 wrote the following post Wed, 23 Aug 2023 21:55:41 +0200

how to laod Page into a HZ Block or Webpage ?

How to load e.g the page /network/?f=&dm=1 into a HZ Block or Webpage?

show all 8 comments

Thu, 24 Aug 2023 08:14:00 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

how to laod Page into a HZ Block or Webpage

without using an iframe - is there a way?

Thu, 24 Aug 2023 13:42:24 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

i really like the HZ Headquarter page /hq - here we can do a lot very fast... but for few things i still have to go to /networks which takes extra time...

so i was think of creating a "SUPER Headquarter" page by adding the stream and the filtered DMs in extra Tabs.

the following code does the job with iframes

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Stream</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">DMs</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">My Activities</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"><iframe src="../network" style="height:300px;width:100%;" title="Stream"></iframe></div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"><iframe src="../network/?f=&dm=1" style="height:300px;width:100%;" title="Iframe DMs"></iframe></div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"><iframe src="../network/?f=&conv=1" style="height:300px;width:100%;" title="My Activities"></iframe></div>
</div>

in the HZ Webpage App i created with this code a HTML Block and placed this Block with the pdl Manager on the /hq page...

Now i have really everything i need on just ONE page. - very very nice

But i was wondering if there is an other way without iframes to do this

Andy Idea?

Thu, 24 Aug 2023 20:35:37 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

you can add as many Tabs your want this way... have to say that this is a huge improvement in UI/UX for me

Thu, 24 Aug 2023 23:39:51 +0200

_jayrope

jrp@hub.kliklak.net

@𝓒𝓱𝓻𝓲𝓼 Haven't tried, but try looking for the respective block in /pdledit and copy it out to your comanche thing.

Fri, 25 Aug 2023 10:02:45 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

@_jayrope so what would be the block for e.g. DMs ? /network/?f=&dm=1 ? This one does not exist - how do you create such a block - just content with no Nav and Siedbars ?

Sun, 27 Aug 2023 11:53:59 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

here is the Bootstrap code which works for my channel - please look up the post under #^https://zotadel.net/channel/support tobe sure you see the original post:

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Stream</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">DMs</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">My Activities</button>
     <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-cloud" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Cloud</button>
     <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-cal" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">CAL</button>
    
     <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-webp" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">WebP</button>

      <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-pdl" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">PDL</button>

      <button class="nav-link" id="nav-wiki-tab" data-bs-toggle="tab" data-bs-target="#nav-wiki" type="button" role="tab" aria-controls="nav-wiki" aria-selected="false">Wiki</button>
  </div>
</nav>

<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"><iframe src="../network" style="height:400px;width:100%;" title="Stream"></iframe></div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"><iframe src="../network/?f=&dm=1" style="height:400px;width:100%;" title="DMs"></iframe></div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"><iframe src="../network/?f=&conv=1" style="height:400px;width:100%;" title="My Activities"></iframe></div>
  <div class="tab-pane fade" id="nav-cloud" role="tabpanel" aria-labelledby="nav-contact-tab"><iframe src="../cloud/chris" style="height:400px;width:100%;" title="Cloud"></iframe></div>
  <div class="tab-pane fade" id="nav-cal" role="tabpanel" aria-labelledby="nav-contact-tab"><iframe src="../cdav/calendar" style="height:400px;width:100%;" title="CAL"></iframe></div>
  
    <div class="tab-pane fade" id="nav-webp" role="tabpanel" aria-labelledby="nav-contact-tab"><iframe src="../webpages/chris" style="height:400px;width:100%;" title="WebP"></iframe></div>
      <div class="tab-pane fade" id="nav-pdl" role="tabpanel" aria-labelledby="nav-contact-tab"><iframe src="../pdledit_gui/hq" style="height:400px;width:100%;" title="PDL"></iframe></div>

      <div class="tab-pane fade" id="nav-wiki" role="tabpanel" aria-labelledby="nav-wiki-tab"><iframe src="../wiki/chris" style="height:500px;width:100%;" title="Wiki"></iframe></div>

just replace "chris" with your channel name

Sun, 27 Aug 2023 12:03:38 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

the code seams to get filtered in user timelines on the different hubs ... in order to see all of the code go to:

#^https://zotadel.net/display/b64.aHR0cHM6Ly96b3RhZGVsLm5ldC9pdGVtLzk3YTkxMDRjLWViZDAtNDZhMC1iNTBhLWFlYmI0ZTg5NmM0MA

Sun, 14 Jan 2024 17:54:51 +0100

Scott M. Stolz

scott@loves.tech

You might be able to do it with an iframe, but I don't think that would be the best route. What functionality are you trying to create? It looks like you are trying to show just DMs in a sidebar, perhaps?