Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Location
    North East, Maryland
    Posts
    102
    Thanks
    17
    Thanked 1 Time in 1 Post

    Resize full page to fit in browser window, width AND DEPTH

    I’m working on a webpage slideshow process and I need some help.

    I’ve used reveal.js, a nice process, but every slide has to be in the same HTML file, so adding/inserting pages becomes quite a process.

    My idea is to have each page a separate HTML file and have a user created “Slides.js” file that defines the list of pages and subpages. That way you can insert, delete, or move pages around without a lot of hassle.

    var slides = [
    "Intro.html",
    "SlideShow.html",
    "jsTrace.html",
    "v jsTraceOn.html",
    "v HowItWorks.html",
    "Slides.html",
    "v Slides2.html",
    "Process.html",
    "v TraceIt.html",
    "Future.html"
    ];

    I have the basic slide presentation working fine. SlideShow.js, my code, will use the “v “ prefix in Slides.js, if any, to build a map of the pages and their dropdowns. Each page passes to the next page it’s index within the map so that it understands what page each arrow key is pointing to as you move through the slides.

    Each page consists of two divisions; the compass which tells you which arrow keys are available, and the fullpage which contains whatever you want to display on that slide.

    I want to be able to display the page, then just before the /body command, if you want to, insert a call to “resize.js” which will change the zoom, shrink only, of the fullpage division so that it will display completely in the browser window.

    What is the proper coding for resize.js that will work on all browsers? Again, the code needs to look at the size of div=fullpage then change the browser zoom factor if the entire full page division is not visible.

    Again, the purpose is that each page can be built and tested independently and then simply edit the Slides.js file to insert lines like “v MoreInformation.html”,

    PS: I’m more than happy to share all of the code with the group if they are interested.
    Last edited by vinyl-junkie; Oct 2nd, 2018 at 03:49 PM. Reason: reduced font size
    My favorite quote is by Andrew S. Tanenbaum in Computer Networks, 2nd ed., p. 254 published in 1988, “The nice thing about standards is that you have so many to choose from.”

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,889
    Thanks
    58
    Thanked 693 Times in 688 Posts
    Hello again PapaGeek. I'm wondering why this isn't a job for CSS?

  3. #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    North East, Maryland
    Posts
    102
    Thanks
    17
    Thanked 1 Time in 1 Post
    I don't care if it is CSS or javascript, i just want to create the page with text, headings, tables, images, anything, enclose it in div=fullpage /div and have the entire page display top to bottom, left to right, without scrolling.
    My favorite quote is by Andrew S. Tanenbaum in Computer Networks, 2nd ed., p. 254 published in 1988, “The nice thing about standards is that you have so many to choose from.”

  4. #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,889
    Thanks
    58
    Thanked 693 Times in 688 Posts
    I'm sure the folks over at the CSS branch would have more fun with this, but I'd say something like
    css:
    Code:
    html,body{ 
       margin:0; 
       padding:0; 
       height:100%; 
       width:100%; 
    }
    
    
    #fullpage{
      height:100%;
      width:100%;
      overflow:hidden;
    }

  5. #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    North East, Maryland
    Posts
    102
    Thanks
    17
    Thanked 1 Time in 1 Post
    tried that css coding, it had no effect on making the entire page visable at a lower zoom

    PS: I'm in the process of creating a demo of this code on my website. Have to ask if this is OK with the rules of the forum.

    I have made one change, I am no longer attempting to call the resize function at the end of the page. I have added a parameter to my SlideShow.js function so that the main body onload function call can pass a yes or no parameter to that function so it can resize the entire page if requested.
    Last edited by PapaGeek; Oct 4th, 2018 at 07:32 PM.
    My favorite quote is by Andrew S. Tanenbaum in Computer Networks, 2nd ed., p. 254 published in 1988, “The nice thing about standards is that you have so many to choose from.”

  6. #6
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,192
    Thanks
    6
    Thanked 1,345 Times in 1,314 Posts
    I have no idea what you’re really trying to do but the trick to fully scaling websites is to use the vw (viewport width) and/or vh (viewport height) units in combination with em sizes, and possibly with aspect ratio media queries. For example, you can specify a standard width of the page at which it should have a specific font size (let’s say 16px general font size at a viewport width of 800px). And you can construct all your sizes (paddings, margins, etc.) around this using em units.

    Now, by specifying (or converting to, respectively) a general font size in vw the entire content would scale proportionally. In the above mentioned case you’d calculate 16*100/800 which equals 2, i. e. you’d specify a body font size of 2vw (that’s two percent of the viewport width) and there you go, the entire page scales if the viewport width is changing.

    Of course, nothing will happen if the viewport height is changing, and you still need to cater for different aspect ratios because a website isn’t a static thing. And that’s where aspect ratio CSS media queries come into play. You can change the layout completely depending on whether a viewport is higher than wide or square or whatever. It probably sounds complicated but if you want to do something properly you need to consider all cases.

    Quote Originally Posted by PapaGeek View Post
    PS: I'm in the process of creating a demo of this code on my website. Have to ask if this is OK with the rules of the forum.
    Yes, please provide as much code as possible so we can see what you’re doing.

  7. #7
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,216
    Thanks
    4
    Thanked 470 Times in 458 Posts
    I'm not sure how what you are asking is practical or even viable -- at least from an accessibility standpoint -- given the plethora of screen sizes, aspect ratios, pixels per inch, etc, etc. There's a reason you don't see the vast majority of websites pulling this type of stunt, and why the handful of sites that try it are inaccessible useless trash.

    BUT that would hinge on what your content and layout are. If you really have little to no content it's possible, but then why have a website?

    I think we'd have to see at LEAST your content to say more, but it SOUNDS like something I'd be telling you not to even try.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  8. #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    North East, Maryland
    Posts
    102
    Thanks
    17
    Thanked 1 Time in 1 Post
    As my user name indicates, I am a computer geek. I often find myself in situations where it is helpful to give a sort of slideshow presentation to a small group of people that I am talking to. As geekie as I am, I do not have a laptop with PowerPoint with me at all times.

    I have published some slide show presentations on the web which make it possible for me to use any computer that anyone has with them to display the individual slides and use only the arrow keys on the keyboard to move from one slide to the next.

    Bring up the first slide:
    “This is what your tax brackets look like when you are working”
    CLICK
    “and this is what they could look like while you are retired and receiving Social Security Benefits”
    “the jump to the 40.7% marginal tax bracket at a gross income levels of only $50,000 is not a joke, it is real, and”
    CLICK
    “this is how the IRS makes you pay that rate”
    CLICK … CLICK …

    Each slide is a single screen load. I design them for my screen at home, but the laptop that I am using might be a different resolution, and I want each entire page to display without the need to scroll the page. I just use the arrow keys to move from one full page display to the next!

    There is a program out there called reveal.js, but it does have some flaws on large presentations, and it only uses one HTML file. Each page is a separate layer and the arrow keys merely hide and reveal each layer as it is called for. Since the entire presentation is a single HTML file, inserting, deleting, or moving slides around can become very complex. I’m trying to write something similar where each slide is a separate HTML file with the list of slides/filenames, in a separate JavaScript file.

    Like I said, I am willing to publish where I am so far on my personal website and make all of the code available if that is permitted by the forum rules!
    Last edited by PapaGeek; Oct 8th, 2018 at 07:12 PM.
    My favorite quote is by Andrew S. Tanenbaum in Computer Networks, 2nd ed., p. 254 published in 1988, “The nice thing about standards is that you have so many to choose from.”

  9. #9
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,192
    Thanks
    6
    Thanked 1,345 Times in 1,314 Posts
    Quote Originally Posted by PapaGeek View Post
    I’m trying to write something similar where each slide is a separate HTML file with the list of slides/filenames, in a separate JavaScript file.
    If all you are doing is moving one slide back or forward you don’t need a list of slides/filenames in a JS file. All you need is links to the next and previous pages on the pages and have a JS function read the link URLs to do some AJAX loading of the next or previous slides, respectively.

    Quote Originally Posted by PapaGeek View Post
    Like I said, I am willing to publish where I am so far on my personal website and make all of the code available if that is permitted by the forum rules!
    And like I said, yes, please provide as much code as possible so we can see what you’re doing.

  10. #10
    Regular Coder
    Join Date
    Jul 2011
    Location
    North East, Maryland
    Posts
    102
    Thanks
    17
    Thanked 1 Time in 1 Post
    Sorry for taking so long to post these examples. I am in no way qualified to give financial advice, but I have created a website to warn my friends about the massive marginal tax rates they can face during retirement.

    An example of the new JavaScript that I am trying to write to create on-line Slide Shows is located at http://www.papageek.com/SlideShow Feel free to look at the pages and download any or all of the included scripts. Everything is located in that single directory.

    My current site is a slide show created with Reveal. http://www.paralleltaxation.com The site currently references the pre 2018 tax rates and I want to update it with the latest tax information. If you want to see an example of how each page (layer) is resized, visit this site and change the size of your browser window. The auto-resize to make each page fit completely on the screen is what I’m trying to duplicate!

    The way that Reveal works is that every page of your presentation is in the same html file, each page is just a different layer that can be exposed one at a time. Maintenance of that file, especially if there are a lot of pages to add or delete can be a considerable task.

    Reveal does provide a lot power point features for fading from one page to the next, having the pages rotate into position, background music, etc. But I have no need for the fancy presentation of the data.

    So, I’m trying to create a process to simply change from one html file to the next using your keyboard arrow keys so the presenter can continue to stay in contact with the audience and not turn their attention to the screen to move the mouse to the next link.

    One of the best features of Reveal is that the pages can be displayed on any size browser screen. The process will look at each page (layer), and resize it to fill the screen using either zoom or scale functionality.

    This is the feature that I am trying to recreate so that I can design a slideshow for one of the most popular screen resolutions, but it will display “completely” on any screen that is available to me when someone asks me a question.

    PS: Did you know that, if you are getting Social Security and also have Long Term Gains from your other investments, taking an extra $1,000 out of your IRA or 401K could cause a tax increase of $499.50! Don’t feel bad if you did not know that, very few people do, and they are shocked when I show them how that happens.
    Last edited by PapaGeek; Oct 14th, 2018 at 07:50 AM.
    My favorite quote is by Andrew S. Tanenbaum in Computer Networks, 2nd ed., p. 254 published in 1988, “The nice thing about standards is that you have so many to choose from.”


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •