Can you put dynamic content in a box where you scroll the box but not the page?

Ask the community
,
1

Hello, is it possible to make a box or container (or whatever the name is) that can be used to show some dynamic database like name, paragraph, gallery? i tried using iframe but coding for me to access the database and code in the page to let html open dynamic page is very hard. Thank you!

2

Yes. As you said, iFrame is the way to do it (but you’ll have to create the elements by code and won’t be able to drag&drop elements).

3

Thank you for the confirmation. Now my next problem is how to fetch dynamic link in database to iframe. do you have any tutorial or the code? i’ve been trying to look at the forum and i cant find one. should i put the wix code in this page with iframe? or the previous page with button that let user go to this page with iframe?

4

First of all retrieve the link (if you use a dataset, do by using .getCurrentItem() ).
Then pass the link to the htmlComponenet using .postMessage()

5

Thanks to your suggestion, it worked! I use getCurrentItem() in the page, but i use .src for the link. But i dont really understand how post message work, so i use src. can you explain whats the advantage of using postmessage?

$w.onReady( function ()
{
let item = $w( “#dynamicDataset” ).getCurrentItem().iFrameDynamic ;
$w( “#html1” ).src = item ;
});

My next question is, how to scale the page in the #html1? i used
since i give the link from wix code to iframe, i cant scale the windows loaded using this :

#wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; } #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; } #frame { -ms-zoom: 0.6; -moz-transform: scale(0.6); -moz-transform-origin: 0px 0; -o-transform: scale(0.6); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }

Thanks a lot before!

6 
$w.onReady(() => {
    $w("#dynamicDataset").onReady(() => {
        let link = $w("#dynamicDataset").getCurrentItem().iFrameDynamic;
        $w("#html1").postMessage(link);
    })
})

As for the code inside the iFrame, have a look here:
HtmlComponent - Velo API Reference - Wix.com (in the example0

7 
Sorry, this is the example for the page. the one i should use is the display received message only right?  i dont need to send message to the page code if i dont need it, also for the part when a message is received right?


<script type="text/javascript">
function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      console.log("HTML Code Element received a message!");
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML = msg;
  sendReturnMessage("Message from the HTML Component!");
}



// send message to the page code
function sendReturnMessage(msg) {
  window.parent.postMessage(msg, "http://mysite.com");
}

So if im not mistaken, this is the part i only need is:

// display received message
function insertMessage(msg) { document.getElementById(‘demo’).innerHTML = msg; }

If you dont mind, can you explain a little bit more . which one i should change? I’m still grasping the whole syntax, cause im not familiar with wix code. If im not mistaken, i should change msg->link right? and what should i change for demo?

If my question is too much, please ignore this. Thanks before for your help!