How do I vertically Scroll variable length text? (iframe doesn't allow it)

  • I am pulling my hair out trying to create a way to scroll some text!

    I have what is a NEWS feed. Each line can be 3 lines of text or 143 lines of text, and 1 or many items. These are held in a SQL database which I read in.

    • I have tried loading an iFrame but while it is ALMOST perfect, for some inexplicable reason, iFrame doesn't support scroll bars! That would have been perfect otherwise. So iFrame can't be used.
    • Text box was a close second but they don't support scroll bars either (directly)
    • Sprite Font also doesn't allow scrolling. I can create a tall object but scrolling it I think could be tricky based on varied lengths.
    • HTML Elements looked promising, but I'll confess I couldn't figure out how to relatively easily use it.

    Any input?

  • not sure if this is too convoluted...

    but one way is to put the information on its own layer, set it's parallax to 100,100. Then the top layer set parallax to 0,0. Cut a hole in the top layer so you can see the info layer underneath.

    drive.google.com/file/d/1ah04db8yi1E81GPtk8ijarXiVBY08mzS/view

    just need to figure a way to do a scroll percentage so the scroll button doesn't go off screen.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Previously I used the text box to accomplish this and it was a challenge. I'm going to be adding in news to my app and I'll use the HTMLElement.

    To set up the HTMLElement, the text property under HTML holds your news. If you use HTML, check the box "Text like HTML".

    To get the scrolling you'll have to make changes to the 'inline style' properties.

    Make sure the word-break is set to what you want. Break-word will wrap the text based on spaces in your sentences.

    overflow-x will add in a horizontal scroll bar. Set it to hidden if you don't want a horizontal scroll.

    overflow-y will add in the vertical scroll bar. Set it to auto or scroll. If set to scroll, a vertical bar will always appear. If set to auto, the vertical bar will only appear when the text is larger than the box.

    You should get something that looks like this:

    The author of the HTMLElement also created a CSS injector that makes it real easy to add in your own css styles:

    construct.net/en/make-games/addons/166/inject-css

    If you play around with CSS much, you can come up with something like this which is also the HTMLElement:

  • And a quick suggestion.

    I use codepen.io to test out what I'm going to be doing in the HTMLElement. On that site, I can play around with the HTML, the CSS and any JS (which the CSS Injector also handles) and make it look and function exactly as I want.

    Oh, and to confirm how you're doing it does work, that skill tree in the second image, that's generated on-the-fly from several MySQL tables. I use an AJAX call to a PHP file which builds the HTML and sends it back to the client in a JSON. I then save the HTML as a global variable. This allows me to do some cool stuff as I can do a 'replace' on the HTML variable to search for specific codes I included to make instant changes. Then, I set the HTMLElement.text to that variable.

    If done right, HTMLElement will even respond to clicks on the HTML and call functions in C3.

    Take the time to learn it, you'll love it for doing news.

  • Thanks folks,

    Fengist, thats so helpful! I figured the HTML Element would do it, but I just didn't get a lot of it. I tried just adding the text, but I think I'll give it another go as it is a 'clean' solution imho.

    Appreciate the info.

  • No problem. The HTMLElement can be quite confusing as it uses some rather unconventional methods to achieve what it does. It took me a good while to figure it out from his examples. I've figured out how to use most of it and the power it has and the unique abilities it gives C3 is pretty amazing. If you have any questions, just ask.

  • Fengist - So after a quick run through I can see that appears that we destroy the canvas to display the elements. This I can live with, assuming that I can just add a function to a button trigger to load a new layout.

    I played around a little, since I have limited HTML/CSS skills, but I've a developer background and I'm a whizz at Google so I'll figure that part out.

    I did get some text to display along with scroll bars. I couldn't get the right width, but I'll work on that too.

    If you have any samples akin to your second screen shot that you can share, it would help a lot since I work a lot better with working examples. I have used some of the supplied ones, but they appeared to hold a lot more information than I needed. If none are available, thats fine, don't ask, don't get :)

    I'll play around more with codepen and scratchpad and see what I can muddle together. Once I have one running, the rest should fall into place quite easily.

    I'm assuming you don't know if I can open another web URL using the HTML Element? I created a lot of data entry points using xCRUD to view/maintain data, but the scroll bars missing on iFrame kill it. I could use the same methodology with the news if I could open the URL.

    ** Edit: I tried adding an iframe to the HTML, but whenever I select the menu option on the phone, it hangs the browser :( - I wanted to check scroll bars didn't work still - This is all I have in there: <iframe src="https://www.fingerscrossed.org/c3/xcnews.php?mode=edit" width="400" height="400"></iframe>

    Thanks again.

  • I can give you a couple of examples. One is my main menu and the other is for the skill tree you see above. I'll try to explain the menu as it's a LOT simpler. The skill tree gets pretty complex. Here goes. Let me know if I don't make sense here.

    The first thing you have to realize is that HTMLElement is designed to work with chunks of HTML and not full web pages. It doesn't surprise me that an iframe in the middle of it produced unexpected results. It doesn't expect to see <head><body><script> tags and the like. It's kinda an iframe all to itself but it doesn't need all the trappings of a full web page.

    Here's the codepen for my main menu. One thing to consider is this HTML is static. I put it in the element's text and don't change it. It changes itself.

    codepen.io/Fengist/pen/LoWwGq

    On the left in the HTML block you'll see two chunks of HTML. The first thing to realize is that the second isn't displayed and it is the HTML I actually have in my HTMLElement. The first chunk is what the HTML looks like after I'm done with it inside C3. I put it there so you can see how it actually looks and can play with it.

    In the second chunk you'll see odd things like {{Menu1}} and {{Menu2}}. These represent instance variables on the HTMLELement. I created instance variables that exactly match what's in those brackets, i.e. Menu1, Menu2, etc. and I left them as empty strings.

    On the start of the first layout where the menu is visible I call a function called ClearMenu like this:

    -> Functions: Call ClearMenu (selectedMenu: 1)

    The function looks like this:

    * On function 'ClearMenu'

    * Parameter 'selectedMenu' (Number)

    -> HTMLElement: Set Menu1 to ""

    -> HTMLElement: Set Menu2 to ""

    ----+ System: selectedMenu = 1

    -----> HTMLElement: Set Menu1 to "><a class=""active"""

    -----> HTMLElement: Set Menu2 to " el-on:onclick=""menuFunction(2);""><a "

    ----+ System: selectedMenu = 2

    -----> HTMLElement: Set Menu2 to "><a class='active'"

    -----> HTMLElement: Set Menu1 to " el-on:onclick=""menuFunction(1);""><a "

    In this example I'm only working with Menu1 and Menu2 to make it brief. What this function does is first sets all of the instance variables to an empty string. This resets the HTML back to it's original state with the {{Menu1}},{{Menu2}}... etc. Then, depending on the value of the parameter passed (1 in this case.) It sets the instance variable to:

    ><a class=""active

    It sets all of the other instance variables to:

    el-on:onclick=""menuFunction(2);""><a

    With the 2 being the parameter I'm passing to menuFunction. Others would be 3, 4, etc. You can see that in the codepen.

    When HTMLElement looks at the text, it replaces {{Menu1}} with whatever the value of instance variable Menu1 is.

    So, the HTML for Menu1 changes from this:

    <li {{Menu1}}>Dashboard</a></li>

    to this:

    <li><a class="active">Dashboard</a></li>

    And all I did was change the instance variables.

    What this does, and you can see this in the codepen, is adds in the class="active" tag. In my CSS I have that so that the background changes color to indicate that it's the one selected.

    The other lines get changed from (for example) this:

    <li {{Menu2}}>Skills</a></li>

    to this:

    <li el-on:onclick="menuFunction(2);"><a>Skills</a></li>

    That el-on:onclick is a special code used by HTMLElement to perform an on-click event. In this case, when you click on that list item, it will call a function in Construct. Here, it calls menuFunction and passes 2 as the parameter. That function looks like this:

    * On function 'menuFunction'

    * Parameter 'MenuRequested' (Number)

    ----+ System: MenuRequested = 1

    -----> System: Go to Layout 1

    ----+ System: MenuRequested = 2

    -----> System: Go to Skills Layout

    (shortened for brevity)

    When that function is called, it simply tells Construct to open a specific layout. In this case, the parameter is 2 so it opens the Skills Layout.

    In the On Start of Layout for the Skills Layout I call this again:

    -> Functions: Call ClearMenu (selectedMenu: 2)

    Which resets the instance variables back to empty strings, replaces {{Menu2}} with the 'active' tag and all of the others get replaced with the el-on:onclick tag.

    When this all comes together, it creates an HTML menu system inside Construct. When a user clicks on a list item, it opens a different layout, highlights the selected menu item, disables it from being clicked on (you don't want them loading the same layout over and over again) and resets the others so that they can be clicked on.

    I hope that explains it.

    The skill tree is much more complex. You can find it here:

    codepen.io/Fengist/pen/oOjgBw

    The huge difference between the two is that the skill tree HTML is built by a PHP script and sent to the client as a JSON. The HTML you see on the left is the output of that PHP script. Each of those list items is built from several MySQL tables. Because users can 'train' skills, this has to be a dynamic list as things like skill in training and the users level in a skill have to be timely. Using the el-on:onclick code along with some creative HTML, users can click on a 'learn' button inside the HTML and it calls a function that fires off an AJAX to update the database to record which skill the user is learning. It then, updates the HTML and sends it back to the client. If you'll notice, one of those progress bars is 'pulsing' to indicate which skill is currently in training. It also fires other functions to highlight specific list items to indicate which is selected. For that, rather than 80 odd instance variables like in the menu, I do a simple string 'replace' to set one class to the 'active'. And it does other things. If a list item is clicked, it fires off an AJAX call that returns a description of the skill, the time it will take to train and training prerequisites and loads that HTML response into yet another HTMLElement.

    I've only been working with this plugin for a few weeks and there are still a lot of things I haven't experimented with, like all of the 'EVENT' settings at the bottom of the properties. I believe, the author originally put those in to do the things I'm already doing with the HTML el-on code. He added in that el-on after he had all those settings and it replaced many of those. But if you look, you can even set up events to change the HTML based on keyboard events, mouse events and even HTML form events (like you can call a function when a form submit button is clicked!).

    The beauty of this plugin is that you can include all of the power of HTML, CSS and JS onto a Construct form or, you can just have chunks. Rather than reloading entire web pages when a user clicks on an item (as you would with straight HTML), you just reload or change what's in the HTMLElement.

    I know this is a tldr but you asked for it. Hope this helps.

  • Here, as simple as I can make it:

    construct.net/en/tutorials/adding-html-news-construct-2226

  • Fengist - Wow!

    I can't thank you enough for the time you spent both writing the replies and putting up the tutorial. It is truly appreciated. Now I'll go and see what I can absorb from it!

    You rock.

    Thank you

  • Actually, I needed a good excuse to get the news added into my current project so, your need for information and my need to get it done coincided. Writing the tutorial was just me vocalizing and testing how I planned to make it work.

    Hope you understand it.

  • Yes, largely it made sense, I especially like the instance variables as I expect I will use them quite extensively.

    I followed the tutorial, and while it worked out the box, I did have one issue that I experienced in my first attempts.

    The window in your tutorial was nicely placed and aligned. Mine wasn't...

    The first image is the placement of the HTML Element, with only the parameters set as instructed in the tutorial.

    When I run it, I get this somewhat runaway window. With research I saw some CSS clip commands, but I'm not sure thats what I want.

    My Output.

  • One other thing, I can't seem to get any of these to work on an iPhone - do you know if its compatible? Most of my efforts are mobile directed so its a dealbreaker :)

    (Generally I use Chrome for remote previews but it just hangs)

  • Yea, placements... that is a science unto itself. While most games are satisfied to let Construct's automatic placement handle things, I end up putting gobs of elements on a layout that I want to size and scale based on how large the browser is. I have a whole huge function that I run whenever the browser is resized or a layout is loaded that manually puts every element on that layout exactly where I want it based on the viewport height and width. The reason I took a moment to reply now is because I'm taking a break from trying to line up a chat HTMLElement properly.

    As for mobile, I have no idea if it would work or not. I'm working on a laptop/desktop based game so I have no need to test it on anything other than Safari. I would assume that it should as HTMLElement is just JS. If there's any way to open a browser console on an Apple device, look for JS errors.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)