Help with mobile page, fixed div at top and iframe below - javascript

Hi I'm looking help with a mobile site I'm developing. I'm trying to get a page with a toolbar at the top of the screen that has previous and next buttons, with most of the viewport displaying an iframe containing 3rd party websites.
I have a few issues getting this working. The first is to have the toolbar fixed at the top. Mobile browsers don't natively support fixed positioning so I've achieved a workable solution where I move the toolbar back to the top of the screen with the window.onresize event. I can't move the div while scrolling as mobile browsers disable DOM rendering between the touchstart and touchend events.
The main issue I am now having is that the div toolbar displays correctly at the top however the iframe is zoomed to the top left corner of the site it has loaded. You cannot zoom out at all. You can only zoom in further and pan the site. You can only really view the iframe site in 100% of the viewport when it's loaded by itself.
Here's a wireframe of what I want to achieve..
Any help would be much appreciated!
Here's an idea of the code I'm using to achieve this..
There's also javascript that modifies the top and left css values of #wrapper when you scroll the screen using the window.onresize event.
<html>
<head>
<meta
name="viewport"
content="width=device-width;
initial-scale=1;
maximum-scale=1;
minimum-scale=1;
user-scalable=yes;"
/>
</head>
<body>
<div id="wrapper" style="width:320px;top:0;height:86px; position:absolute; z-index:1000; background-color:#FFFFFF; border-bottom:5px solid #4B90B7;">
<!-- Header markup -->
</div>
<div id="iframe" style="height: 750px;position:absolute; top:100px; width:100%" >
<iframe style="width:100%; height:100%">
<!-- iframe -->
</iframe>
</body>
</html>

I'm sure you've moved on by now, but for anyone Googling, I ended up dealing with a similar situation by applying CSS Scale. Re-positioning was a total nightmare, but you can get it to work. This works on an inline scrollview, and I assume it would work on an iframe:
Question/answer here: Scale HTML content using JQuery Mobile & Phonegap
Additionally, it may be worth looking into ChildBrowser vs. iframe. I'm experimenting with it now, but so far it looks useful:
https://github.com/alunny/ChildBrowser
Hope this can help someone!

Just thought I'd chip in another way to do a "fixed" position element in mobile browsers. You can simply give the content element a height and overflow: auto. Make sure the sum of the heights of the fixed header and the content element equals the page height.
<div id="page">
<div id="header">fixed header</div>
<div id="content">...</div>
</div>
#page {
position:relative;
}
#header {
position: absolute;
height: 1.5em;
}
#content {
top: 1.5em;
position:relative;
overflow: auto;
height: 400px;
}
Example: http://jsfiddle.net/william/BWA7j/

Related

How do I make an HTML Page scroll smoothly one visible page at a time?

I'm trying to make a webpage which will scroll one page at a time, the idea being that a of class page will have a minimum size of 100% (i.e. the visible size of the browser window) and conceptually be a web page. When the user attempts to scroll past the bottom (or top) of the conceptual page the browser will smoothly scroll and snap to the top of the next (page) (or the bottom of the previous one, if applicable).
Left and right scroll should be available still for a to implement a similar gallery function in one or more of those divs.
So far, I've tried the following (which doesn't work, of course, which is why I'm asking for advice here!)
<!DOCTYPE html>
<html lang="Test3">
<head>
<title>Test3</title>
<meta name="generator" content="BBEdit 13.5" />
<style>
html, body {
height: 100%;
}
#pages {
scroll-snap-type: y mandatory;
overflow-y: scroll;
/* display: flex; */
}
.page {
scroll-snap-align: center;
height: 100%;
}
</style>
</head>
<body>
<div id="pages">
<div class="page">Hello</div>
<div class="page">Goodbye</div>
<div class="page">What</div>
<div class="page">When</div>
</div>
</body>
</html>
In this case, not all of the required functionality has been implemented. It's a first pass at solving the problem. In this case, I'd expect the div to be fixed to the window size (which will need to be fixed), and I'd expect that scrolling would smoothly snap to the next div so that only one word would be shown on screen at any one time.
The idea is that that should work correctly on all modern web browsers, regardless of whether they're on phones, tablets, laptops or desktops.
Does anyone have any thoughts on what I've done wrong?

How Do I Scroll All Elements To Target Element

Alright, I have no idea what I'm doing. I thought that there would be a library for this, but apparently there isn't.
Problem Explanation
I have a complicated React Application.
There exists
Main Page Element
A content container
A display container
The element I want to scroll to
I am trying to find a solution that will scroll to an element on a page and force all parent scrollbars to scroll to the appropriate location in order to view the element on screen.
Example
<html>
<head />
<body>
<div style="background:red; display: block; height: 1000px; overflow-y: auto">
Root Parent
<div>
<div style="background:green; display: block; height: 1000px;overflow-y: auto">
Another Parent
<div>
<div style="background:blue; display: block; height: 1000px; overflow-y: auto"></div>
<div style="background:purple; display: block; height: 1000px; overflow-y: auto">
<div id="targetElement">Scroll here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS Fiddle Here
https://jsfiddle.net/10f83ush/
Solutions I've tried
I found zen scroll
But in their How to Use Section - 1.4 they explicitly state it isn't supported
https://zengabor.github.io/zenscroll/#howtouse
I found this this thread here
Scroll all nested scrollbars to bring an HTML element into view
And I thought that would work but it doesn't.
If I do element.scrollIntoView that doesn't work either because it's got two sets of scrollable parent/grandparent that both need to scroll to.
Request
How the heck do I get all the parents of the target I want to scroll towards to all scroll towards the correct location to show the element on the page?
I feel like I'm going crazy. It's 2020 and I can't simply scroll to an element that's nested inside other scrollable elements?!
EDIT
To clarify, I'm not trying to do a million scroll bars at a time (Yes this is bad UI/UX), but the solution I'm searching for should support as many as possible. There are multiple solutions I've found where the answer has been solved, but only for one or two scroll bars and then ignored more than two. I would love for guidance or help on how to handle any amount of parent scroll bars when trying to scroll a nested element into view.
Without creating a more complicated solution I opted to use a library called scroll-into-view.
https://github.com/KoryNunn/scroll-into-view
https://www.npmjs.com/package/scroll-into-view
This library is AMAZING - and it does EXACTLY what I wanted which is scrolling elements into view.
Additionally it supports arbitrarily offsetting the scroll location, the ability to filter scrollable areas so that it doesn't change focus from the entire page, and a ton of other amazing features.
This was so good I decided to contribute to the patreon for it!
If you're looking for a solution I would suggest trying this library out!

Pause section and scroll inside a div

I'm working on a client site and i'm currently having an issue firguring out how to make something work. the goal is to pause at the section and continue to scroll inside the iphone then continue to scroll once the iphone has finished scrolling. I have attempted to use position fixed on the section but obviously the body continues to scroll so I'm not sure if this is the right solution. I was wondering if this is something Skrollr could assist with as well. Does anyone have any ideas?
I've added a fiddle of the layout: https://jsfiddle.net/9Lm6he4j/1/
Psuedo HTML:
<section>
<div class="iphone_wrap">
<div class="iphone_inner">
<!--Message content-->
</div>
</div>
</section>
CSS:
section {
position:relative;
min-height:500px;
width:100%;
}
.iphone_wrap {
width:400px;
height:650px;
position:absolute;
left:20%;
top:-200px;
background:url('iphone.jpg');
}
.iphone_inner {
position:relative;
margin:0 auto;
overflow:scroll;
}
one way you can do this is
use javascript/jquery and set position fixed of the "blue color
section" and "iphone wrapper"
content which run inside the phone implement as a part of the
underlying body of the page
so the blue section + iphone wrapper will work as a overlay while the
content of the iphone scroll below this section
and using js/jquery you can reset the position fixed to relative
after the end of that content.
You can try out ScrollMagic that might help you. It has really detailed doc's and well support by author on https://github.com/janpaepke/ScrollMagic

How to scroll a large image inside a smaller div using mouse click and drag?

I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?
CSS:
#image{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
top: 300px;
background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}
HTML:
<div id="image"></div>
EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.
<html>
<body>
<div style="width:200;height:200;overflow:scroll;">
<img src="/home/james/Pictures/scone_ontology.png" />
</div>
</body>
</html>
Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do:
https://jqueryui.com/draggable/
So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.
Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.
And that's it.
A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.

Capability to control content of the iframe size through the content's url - javascript to take advantage of this

EDIT: What's right below this has been answered - see the question below it for the current question that has arisen from that answer.
The below code makes the page fit the screen, and I can size the iframe to be any height or width that I want, and the page will not scroll. THis is what I want. However, I don't just want the page to cut the iframe off. I want the iframe to stretch/shrink to fit the browser window. How can I achieve this efficiently? Can it be done without javascript? If javascript is needed for this, please provide a beginner level explanation, or a good tutorial link; I'm new with JS.
Here is what I have so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="wrapper">
<iframe id="myIframe" src="https://#.com" border="0" scrolling="no" frameborder="0">
</iframe>
</div>
</body>
</html>
CSS:
body, html {
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
margin: 0;
padding: 0;
}
EDIT! It just so happens that this particular page that I want to use in the iframe here offers a very interesting control feature in the url itself! The url allows size control. So this leads me to ask a new question, which involves using a javascript. My new question is this:
Can I use some sort of JS script to take advantage of the size control here in the url
<iframe id="myIframe" src="https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&width=1280&height=1280&secure=true&key=0202f0ddb5a3458aabf520e5ab790ab9&"
to dynamically force the size of the iframe content to match the user's browser window?
This will combine the solution to my original question with a secondary solution to provide the perfect fix for my problem here.
(My goal here is actually to place this Twitch feed as a background to my webpage - resizing the actual content of the iframe is actually a very unlikely but seemingly possibly additional treat here!)
I think what you are attempting to accomplish can be done with the following in tour CSS
#myIframe {
height: 100%;
width: 100%
}
If you are trying to stretch the content of iframe then.....
You will have to write css that will give proportional height and width to all elements in the iframe document
if the iframe href is not from your domain then there is no way to achieve this.
Overall, there is no way to stretch the content of page so that all things are visible on the screen without scrollbar.

Categories

Resources