Results 1 to 6 of 6

Thread: i have an HTML question about divs or frames

  1. #1
    Join Date
    Jan 2010
    Location
    Wheeling WV USA
    Beans
    1,729
    Distro
    Xubuntu 18.04 Bionic Beaver

    i have an HTML question about divs or frames

    i am posting this in the cafe because it is not about Ubuntu. it is about HTML and i don't want to go creating another account somewhere to find an answer.

    i have seen a few web sites that are able to create what look like frames, which i hear are going away. i don't know if they are still using the old frames. but the can make a big area that is larger than the screen, and do scrolling to move around the big area, up/down and left/right. some even have dragging so you can just drag the big area in any direction to change the view.

    what i want to do is create a big area of some specific dimensions larger the screen that can be scrolled in the screen view and open a web site in that area. the intent is to view that site as if i had a larger screen but just view a portion at a time. i can do this in my video driver already but it's a big hassle because i need to completely log out and log in to the new screen size. it disrupts what i am doing. i'd rather have the web browser do it, which it obviously can do.

    does anyone know the HTML to set this up? i'll then make some Python code to generate the HTML dynamically.
    Social distancer, System Administrator, Programmer, Linux advocate, Command Line user, Ham radio operator (KA9WGN/8, tech), Photographer (hobby), occasional tweeter

  2. #2
    Join Date
    Jun 2007
    Location
    Arizona U.S.A.
    Beans
    4,557

    Re: i have an HTML question about divs or frames

    I've made them like you see here:
    https://www.w3schools.com/html/html_iframe.asp
    with two frames - the left frame is an index to other web pages, which open inside the right frame. Both frames are scrolable if a dimension isn't set as a specific number of pixels. Click on "HTML iframes" to read the topic on constructing them. (When I did them, they tag was just <FRAME> not <IFRAME> but the former still works in Firefox).

  3. #3
    Join Date
    Aug 2017
    Beans
    98

    Re: i have an HTML question about divs or frames

    Nearly everything you mention can be achieved with CSS and allowing the browser to do what it does. Frames and iframes are problematic for various reasons I won't get into. You can approach it many ways.

    Dragging is done with jQuery, most often with the jQuery UI plugin (or some framework that incorporates it.)

    When you say "bigger than the screen" are you doing any viewport detection, or have a specific target in mind? The latter would be probably easiest. Off the top of my head, if I have a target content area of 5000 pixels, you could have a wrapper container (body: width 100%) and a div (width: 5000px) inside it. This will allow the browser's natural scrollbars to access the content. You can further control container scrolling with with overflow: scroll which controls both X and Y. You can control each individually with overflow-x and overflow-y. The example below doesn't implement dragging, but it's a starting point. I put a small one inside it so you can see how it works.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Overflow example</title>
      <style type="text/css">
        body {
          width: 90%;
          margin: 1em auto;
        }
        #scroll-me {
          /* not needed in this scenario
          overflow-x: scroll;
          overflow-y: visible;
           */
         background: #f7f7f7;
          width: 5000px;
          /* This is the initial height - content forces it vertically */
          height: 90%;
          top: 1em;
          left: 1em;
          border: 1px solid #000;
        }
        #scroll-me-too {
          width: 200px;
          height: 100px;
          float: left;
          margin: .5em;
          /* nowrap added only to force the scroll */
          white-space: nowrap;
          overflow-x: scroll;
          overflow-y: visible;
          background: #fff;
          border: 1px solid #ff0000;
        }
      </style>
    </head>
    <body>
    
    <div id="scroll-me">
      <p id="scroll-me-too">
        I am a very small element controlled with overflow-x.</p>
      </p>
      <p>This is a container scrolling right beyond the viewport.</p>
      <p>Do a huge Lorem Ipsum dump below this line, say, 50 paragraphs, to see the effect. The browser's scroll mechanisms will handle the scrolling.</p>
    </div>
    
    </body>
    </html>
    Lorem Ipsum generator: https://www.lipsum.com/
    Last edited by sdsurfer; 4 Weeks Ago at 04:11 PM. Reason: formatting, typos

  4. #4
    Join Date
    Aug 2017
    Beans
    98

    Re: i have an HTML question about divs or frames

    Hmm, in retrospect you may want to add position: absolute or position: fixed to scroll-me, it is forcing the body larger than 90% (you can't see it, but it is.)

  5. #5
    Join Date
    Jan 2010
    Location
    Wheeling WV USA
    Beans
    1,729
    Distro
    Xubuntu 18.04 Bionic Beaver

    Re: i have an HTML question about divs or frames

    i am not yet understanding what you guys are talking about. my knowledge of this is creating a looped panorama page over 10 years ago and having used a couple web based email client where it had a "window" showing the current email which was often wider than the "window" i viewed it in, using the scroll keys to select what part of the current email display i wanted to see.

    i suggest the following test. create the necessary HTML, CSS (embedded in that HTML), Javascript (embedded in that HTML) that opens a youtube.com video at 3840x2160 (4K) and works on whatever screen size that accesses it, allowing whoever accesses it to see a 4K video at full resolution, in part (such as HD) and scroll around in it.

    even better, accept the video URL or code number in your URL.
    Social distancer, System Administrator, Programmer, Linux advocate, Command Line user, Ham radio operator (KA9WGN/8, tech), Photographer (hobby), occasional tweeter

  6. #6
    Join Date
    Jan 2010
    Location
    Wheeling WV USA
    Beans
    1,729
    Distro
    Xubuntu 18.04 Bionic Beaver

    Re: i have an HTML question about divs or frames

    maybe i can run an xvnc X server at 3840x2160 and access it with a VNC client (such as remmina) and that VNC client will create the necessary scrolling. the last time i tried this it failed because the display environment code started by X wanted to start X.
    Social distancer, System Administrator, Programmer, Linux advocate, Command Line user, Ham radio operator (KA9WGN/8, tech), Photographer (hobby), occasional tweeter

Bookmarks

Posting Permissions

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