Author Topic: Any web designers in the house? - Departing from Wix.com  (Read 5538 times)

0 Members and 1 Guest are viewing this topic.

Offline Pete

  • Forum Resident
  • Posts: 2361
  • Cuz I sez so, varmint!
    • View Profile
Re: Any web designers in the house? - Departing from Wix.com
« Reply #45 on: December 19, 2019, 05:19:42 pm »
Hi Tempo,

Is this the effect what you wanted kept in the website? I coded it separately, to try it out. I think it could be added. The Wix site uses javascript for this, but this simpler I put together is all CSS...

Code: Text: [Select]
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.   <style type="text/css">
  5. html {
  6. scroll-behavior: smooth;
  7. }
  8. #navdots {
  9. font-size: 30px;
  10. position: fixed;
  11. top: 120px;
  12. right: 20px;
  13. }
  14. #navdots a:link {
  15. color: rgba(33, 44, 63, 1);
  16. text-decoration: none;
  17. }
  18. /* visited link */
  19. #navdots a:visited {
  20. color: rgba(33, 44, 63, 1);
  21. }
  22. /* mouse over link */
  23. #navdots a:hover {
  24. color: rgba(33, 44, 63, .5);
  25. }
  26. /* selected link */
  27. #navdots a:active {
  28. color: white;
  29. }
  30.   </style>
  31.   <title>crap9</title>
  32. </head>
  33. <body>
  34. <div id="navdots">
  35. <p><a href="#1">●</a></p>
  36. <p><a href="#2">●</a>
  37. </p>
  38. <p><a href="#3">●</a>
  39. </p>
  40. </div>
  41. <div style="text-align: center;">
  42. <p
  43.  style="margin-top: 0px; margin-bottom: 1000px; font-size: 30px; font-weight: bold;"><a
  44.  name="1"></a>[Part
  45. 1]
  46. </p>
  47. <p
  48.  style="margin-top: 0px; margin-bottom: 1000px; font-size: 30px; font-weight: bold;"><a
  49.  name="2"></a>[Part
  50. 2]
  51. </p>
  52. <p
  53.  style="margin-top: 0px; margin-bottom: 1000px; font-size: 30px; font-weight: bold;"><a
  54.  name="3"></a>[Part
  55. 3]
  56. </p>
  57. <p></p>
  58. </div>
  59. </body>
  60. </html>
  61.  

I know, the top button on the website goes to the next divider, but for demo sake I made mine go to the top, middle, and end. Anyway, if it needs to be like the Wix site, that's a very easy adjustment to make. Also, we probably need to give some thought on the height of these divided sections. It seems the entire topic should be able to fit in each screen height, but I'll have to see how that effects a mobile screen. Easy for desktop resolutions, sure, but I'll have to see how the current site handles it on my cell phone. Anyway, if you guys want to keep the "dot" effect, let me know and I'll try adding it to the existing webpage code.

Pete


Want to learn how to write code on cave walls? https://www.tapatalk.com/groups/qbasic/qbasic-f1/

Offline TempodiBasic

  • Forum Resident
  • Posts: 1792
    • View Profile
Re: Any web designers in the house? - Departing from Wix.com
« Reply #46 on: December 19, 2019, 06:18:51 pm »
excellent!
Programming isn't difficult, only it's  consuming time and coffee

Offline Pete

  • Forum Resident
  • Posts: 2361
  • Cuz I sez so, varmint!
    • View Profile
Re: Any web designers in the house? - Departing from Wix.com
« Reply #47 on: December 20, 2019, 12:05:07 am »
Alright then... I added version #19 to the zip file and I updated the copy / paste code, so no need to re-upload the zip. Just save the copy paste code as version 19 if you want to keep the two different versions separate.

Let me know if you want to make adjustments in the container sizes. It's a bit tricky, but I did add some collapsing spacing elements. In other words, my goal was to try to make the display look evenly spaced as the elements changed when downsizing the screen.

Pete
Want to learn how to write code on cave walls? https://www.tapatalk.com/groups/qbasic/qbasic-f1/

Offline Pete

  • Forum Resident
  • Posts: 2361
  • Cuz I sez so, varmint!
    • View Profile
Re: Any web designers in the house? - Departing from Wix.com
« Reply #48 on: December 20, 2019, 01:29:23 pm »
Here's one effect that's really simple to implement, and the Wix page has it, fix the background against scrolling. All we need is this added to the existing background statement...

<div style="background-image: url(bg.jpg); padding-bottom: 40px;">

to...

<div style="background-image: url(bg.jpg); background-attachment: fixed; padding-bottom: 40px;">

Pretty simple, and yet it's a really neat effect. I won't upload it, but like I wrote, it can easily be added along with any other tweaks.

Also, it would be nice to be able to get the existing page elements to fade out or blur when the mobile menu opens. That might require JavaScript.

Pete

Pete


Want to learn how to write code on cave walls? https://www.tapatalk.com/groups/qbasic/qbasic-f1/

Offline TempodiBasic

  • Forum Resident
  • Posts: 1792
    • View Profile
Re: Any web designers in the house? - Departing from Wix.com
« Reply #49 on: December 21, 2019, 06:51:45 am »
Hi Pete

feedback:
in the four browsers Edge, IE, Chrome and Opera the 3 symbols at the right border of the page to navigate are 3 à bt they works fine...
here a sample
  [ You are not allowed to view this attachment ]  


thinking about:
in the WIX version  I find very hard to go to the top of the webpage after visiting one of the three section pointed by this menu of navigation.... and many websites use a link to the top of the page... is this kind of link  or obsolete or unuseful for QB64 webpage?

about
Quote
Let me know if you want to make adjustments in the container sizes. It's a bit tricky, but I did add some collapsing spacing elements. In other words, my goal was to try to make the display look evenly spaced as the elements changed when downsizing the screen.

I think that the answer is of Fellippe. We wait his judgment.
Programming isn't difficult, only it's  consuming time and coffee

Offline Pete

  • Forum Resident
  • Posts: 2361
  • Cuz I sez so, varmint!
    • View Profile
Re: Any web designers in the house? - Departing from Wix.com
« Reply #50 on: December 22, 2019, 03:44:31 pm »
Well I uploaded the code today to correct for a couple of validation errors I found. One interesting one... I went to validate it at W3C and I had to comment out the "full screen" attribute of the youtube frame to get it to pass. For some reason, the html validation won't accept ALLOW and it didn't help by changing the HTML Doc Type to accept frames. So for now, I just commented it out. YouTube still plays, it just won't respond to a full screen click anymore. If the full screen attributes are replaced, and they need to be replaced below the src attribute, as indicated in the comment tag, the videos can again be played full screen, but we get these two warnings (Two, because I have a larger and smaller video embedded for cell and desktop devices)...


Quote
    Error Line 610, Column 8: there is no attribute "ALLOW"

     allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

    ✉

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
    Error Line 611, Column 18: there is no attribute "ALLOWFULLSCREEN"

     allowfullscreen="" frameborder="0" height="175"

    ✉

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Anyway, let me know what you guys want to do about the vid, or if you know of a fix. I mean the page will work either way, but it is nice to have a validated page, whenever possible. O, the CSS was validated as well.

Pete

PS About the Opera GX. I suspect it is just not translating the Unicode used for the < > previous, next arrows. I mean if push comes to shove a photoshop image could be inserted, instead. Unicode was used for the three menu navigation dots, the email symbol, and the previous / next slide show buttons.
Want to learn how to write code on cave walls? https://www.tapatalk.com/groups/qbasic/qbasic-f1/

Offline TempodiBasic

  • Forum Resident
  • Posts: 1792
    • View Profile
Re: Any web designers in the house? - Departing from Wix.com
« Reply #51 on: December 22, 2019, 04:53:32 pm »
in the last session of loading the webpage in different browsers i have took apart OperaGx and I use only Opera standard.
However I agree with you that it seems an error in translating the unicode code.
Programming isn't difficult, only it's  consuming time and coffee