File-Hunter.com lay-out issue / Frames / HTML5

Prophet (3426)

14-09-2017, 12:29

Right now I am using frames on the MSX part of my website to get a menu with 256px wide pictures on the leftside of the screen:

This has a few disadvanteges:

* It's not HTML5 compliant
* It doesn't allow for the WebMSX emulator to run full screen
* It screws up bookmarks to the site

I have been looking at iframes which are HTML5 compliant but this will still give the standard bookmarking problems. Besides that: it will not allow WebMSX to go full screen. I have also been looking at culomns but I can't find a way to give the first culomn a fixed width somehow. I don't mind updating all 170 .html files, but I would be really interested in finding a solution which will give me the same layout & functionality in decent HTML5 and being able to get the emulator run Full Screen.
The server can handle .PHP & Perl scripts.

Por Pencioner

Scribe (1610)

14-09-2017, 12:52

maybe use tables for formatting with some decent css? https://css-tricks.com/fixing-tables-long-strings/

in the ideal world you'd like to use no tables but div's though, but as a simple fast solution, this might work too

Por djh1697

Paragon (1735)

14-09-2017, 16:14

To use in full screen, i right click the games i want, and click "open in new window". I am then able to click to run webMSX in full screen

Por tfh

Prophet (3426)

14-09-2017, 16:44

djh1697 wrote:

To use in full screen, i right click the games i want, and click "open in new window". I am then able to click to run webMSX in full screen

That works fine indeed, but I would prefer that my visitors automatically have this function enabled, especially when surfing the erg on a mobile device.

Por ren

Paragon (1947)

14-09-2017, 17:45

170 .html files is crazy whilst in fact you just need one template.
(i)frames is indeed not the solution. With semantic HTML & CSS you can create the layout you currently have without resorting to frames.

You can do basically:

100% PHP solution: 1 server side template, complete HTML page (with no frames) is returned every time.
Meh..
All JS: just use a data array with your game info. You can re-init/start WebMSX when user clicks screenshot. Initial render / template may be (and preferably) provided by server;
Hybrid: request only the part of your page you want to refresh from the server.

Given the fact you like your stats/analytics, a caveat regarding 2 & 3: you have to programmatically register a hit (you're using GA right? Or also other stats?)

Option 2 is totally feasible, and, in this case perhaps the most obvious & least bloated choice (even opt. 3 is overkill here). You do have to be willing to learn some JavaScript.

Por Grauw

Ascended (10821)

14-09-2017, 18:37

Option 2 would not have nice links to individual games, unless you specifically add support for it, but that's tricky and can easily break for various edge cases and in various browsers (from experience, and I see that very often). Keeping it simple and plain is better imo.

There should be no need to resort to tables or iframes in principle. Just using CSS, one div for the navigation with a width and position absolute, one div for the content with a left margin equal to the navigation width. Maybe nowadays there are better techniques but that one's pretty old and should work dandily. You can specify a mobile stylesheet for better mobile browser support.

If you do not want to use PHP for generating the navigation, you could either put the navigation in an iframe or insert it with JS. But PHP is better / safer imo. Take care though not to break existing links if you use php. Either set up a rewrite rule or a redirect, or go for the menu-in-iframe option if it's too much trouble.

Por tfh

Prophet (3426)

14-09-2017, 19:24

I have been looking for an elegant solution which will also keep my previous links intact and I think I have found a solution using CSS Grids:

http://www.file-hunter.com/MSX/grid.html

I still have to finetune this and it doesn't work in Opera (mini) and older browsers, but I think this is the way to go :)

Por djh1697

Paragon (1735)

14-09-2017, 19:23

works very well! is it possible to have it default to opening on full screen?

Por tfh

Prophet (3426)

14-09-2017, 19:26

djh1697 wrote:

works very well! is it possible to have it default to opening on full screen?

You mean to open the emulator full screen when you select a game?

Por santiontanon

Paragon (1831)

14-09-2017, 23:40

Nice that fullscreen now works!!!! I would not default to fullscreen though since it feels very intrusive. It's like autoplaying songs when you open a website, which should not even be allowed

Por tfh

Prophet (3426)

15-09-2017, 10:10

I must give a very big THANK YOU to Sandy from Generation-MSX. This morning, I found a complete .PHP solution in my mailbox for the games-section which works perfectly and does everything it should.
The only, relative small, downside is that old direct URL's won't work anymore, but that's a very small tradeoff considering how well this solution works.
Right now, I am filling the the games section. As soon as I am finished, I'll put it online But this will take some time.

Again: Sandy: Thank you VERY VERY MUCH