At this page, at bottom right, there is a YouTube play button that when clicked opens a modal window, but the modal window appears at the top of the browser window, so the user has to scroll upwards.
<img src="http://gm.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/video-play.png" width="" height="" alt="play video" class="aligncenter" id="toggle">
jQuery(document).ready(function() {
jQuery('#toggle').click(function(){
jQuery('#video').appendTo('body');
jQuery('#video').addClass('active');
jQuery(window).scrollTo(jQuery('#top').scrollTo());
});
jQuery('#close').click(function(){
jQuery('#video').removeClass('active');
});
});
<div class="mfp-container active" id="video">
<div class="mfp-content">
<p align="right"><img src="http://gm.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close"></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ut6UYwbt6Xk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>
<style>
.mfp-container {
text-align: center;
vertical-align: middle;
position: absolute;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 999999999;
}
.mfp-container.active {
display: flex;
align-items: center;
}
</style>
Obviously the .mfp-container CSS rule sets a top and left of 0.
How can I set the .mfp-container to display at the current user's location within the page without hard-coding values, as this video widget may be anywhere on the page?
You probably want to be using CSS position: fixed; instead of position: absolute;. That will always keep the modal in a fixed position on the screen instead of an absolute position relative to some other element.
Related
I've created a navbar element in react that sits behind whichever page component is being rendered at the time. I've done this so that when the nav menu button is clicked the users current page is scaled down and moved partially off screen, revealing the nav menu and displaying a miniature version of the page off to the side. The problem is that if the user has scrolled down the page then as soon as the transition happens the scroll position is reset to the top. Is there anyway to maintain the scroll position?
Here is my html:
Home Page
<div id="home" className={`${props.homeState === true ? "" : "collapsed"}`}>
<div style={{height: "1000px"}}>
<Header toggleExpansion={props.toggleExpansion} />
<h1 style={{margin: "0"}}>Test nav when there is scrollable content</h1>
</div>
</div>
Navbar
<div className="navbar-background">
<div className={`navbar ${props.navState === false ? "hidden" : ""}`}>
... content ...
</div>
</div>
and css:
Home page
#home {
background-image: url("../../images/tall-tall-wall.png");
background-attachment: scroll;
background-position: 80% 20%;
background-repeat: no-repeat;
background-size: 120%;
width: 100%;
height: 100vh;
position: absolute;
transition: box-shadow .6s, border-radius, transform 0.3s ease-in-out;
z-index: 1;
}
.collapsed {
border-radius: 10px;
box-shadow: 0 0 2rem 1rem rgb(15, 15, 15), inset 0 0 8rem;
transform: translateX(40%) scale(50%);
}
Navbar
.navbar {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: space-between;
position: fixed;
top: 0;
transition: transform 0.4s ease-in-out;
width: 100%;
}
.navbar-background {
background-image: radial-gradient(at 90%, rgb(15, 15, 15), rgb(45, 45, 45));
height: 100vh;
position: fixed;
width: 100%;
z-index: -1;
}
.hidden {
transform: translateX(-85%);
}
I've tried changing the navbar position to fixed so that it scrolls along with the home page (as well as the navbar background) but that hasnt seemed to work. Messed around with positioning and overflow, but to no avail
Hopefully that's clear, I've been teaching myself over the past few months so point out any glaring mistakes in my code structuring or method.
Cheers
Consider the following example: (live demo)
HTML:
<div>div</div>
<iframe></iframe>
CSS:
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
Result:
Why the iframe is not centrally aligned like the div? How could I centrally align it?
Add display:block; to your iframe css.
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
iframe {
display: block;
border-style:none;
}
<div>div</div>
<iframe src="data:,iframe"></iframe>
best way and more simple to center an iframe on your webpage is :
<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>
where width and height will be the size of your iframe in your html page.
HTML:
<div id="all">
<div class="sub">div</div>
<iframe>ss</iframe>
</div>
CSS:
#all{
width:100%;
float:left;
text-align:center;
}
div.sub, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
The simplest code to align the iframe element:
<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
My simplest solution to this.
iframe {
margin:auto;
display:block;
}
If you are putting a video in the iframe and you want your layout to be fluid, you should look at this webpage: Fluid Width Video
Depending on the video source and if you want to have old videos become responsive your tactics will need to change.
If this is your first video, here is a simple solution:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
And add this css:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Disclaimer: none of this is my code, but I've tested it and was happy with the results.
You can put iframe inside a <div>
<div>
<iframe></iframe>
</div>
It works because it is now inside a block element.
You can try
<h3 style="text-align:center;"><iframe src=""></iframe></h3>
I hope its useful for you
link
If you can't access the iFrame class then add below css to wrapper div.
<div style="display: flex; justify-content: center;">
<iframe></iframe>
</div>
In my case solution was on iframe class adding:
display: block;
margin-right: auto;
margin-left: auto;
According to http://www.w3schools.com/css/css_align.asp, setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
margin-left: auto;margin-right: auto;
Here I have put snippet for all of you who are suffering to make iframe or image in center of the screen horizontally.
Give me THUMBS UP VOTE if you like.👍⯅.
style > img & iframe > this is your tag name so change that if you're want any other tag in center
<html >
<head>
<style type=text/css>
div{}
img{
margin: 0 auto;
display:block;
}
iframe{
margin: 0 auto;
display:block;
}
</style>
</head>
<body >
<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180" />
</body>
</html>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&tabs=timeline&width=500&height=1200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="1200" style="border:none;overflow:hidden;display:block;margin:0 auto;" scrolling="yes" frameborder=".6" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
use it and embed facebook in iframe in center of html page
I have a page in my ionic application that on button click opens a Modal Page. Currently, I have override the variable.scss to the code below to make the model cover the 100% of the page.
//for Modals
$modal-inset-height-large: 100%;
$modal-inset-height-small: $modal-inset-height-large;
$modal-inset-width: 100%;
However, this applies for all my models in my application. I want to use some models in other pages that use the 50% of the width and around 80% of the height. How can I customize my controls?
You can not change a particular modal height or width.
Now, I will describe an solution which I use to resize my modal.
Ensured that all modal height and width should be 100%. As ionic
resize modal for large screen devices. That's why I added below code
in app.scss.
modal-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
#media not all and (min-height: 600px) and (min-width: 768px) {
ion-modal ion-backdrop {
visibility: hidden;
}
}
#media only screen and (min-height: 0px) and (min-width: 0px) {
.modal-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
Now In ion-content we make two div and the background of ion-content should be transparent (see main-view css class). Now, One div is used for background of the modal, this will use as backdrop (see overlay css class). Another div should be used for the content, we will resize this div (see modal-content css class).In example I resize the height to 50%. Sample html ans css code is given below,
page-about {
.main-view{
background: transparent;
}
.overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
background-color: #333;
}
.modal_content {
position: absolute;
top: calc(50% - (50%/2));
left: 0;
right: 0;
width: 100%;
height: 50%;
padding: 10px;
z-index: 100;
margin: 0 auto;
padding: 10px;
color: #333;
background: #e8e8e8;
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%);
border-radius: 5px;
box-shadow: 0 2px 3px rgba(51, 51, 51, .35);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: hidden;
}
}
<ion-content class="main-view">
<div class="overlay" (click)="dismiss()"></div>
<div class="modal_content">
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new
pages.
</p>
</div>
</ion-content>
Here is a screen shot of the modal,
If you want modal content should scroll then replace <div class="modal_content"> with <ion-scroll class="modal_content" scrollY="true"> as told by Missak Boyajian in comment
For Ionic3 you need to this comment from Alston Sahyun Kim.
this is an excellent answer, just one thing from ionic3, .main-view{ background: transparent; } should be .content{ background: transparent; }
All the code is taken from here. I think this project repo will help you.
I tried before but had not found a generic way to make modals behave the way as I desired.
So I strugled a bit and achieved responsive modals and other kinds of modals with the following global scss:
ion-modal {
&.my-modal-inner {
display: flex;
align-items: center;
justify-content: center;
ion-backdrop {
visibility: visible;
}
.modal-wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
overflow: auto;
width: auto;
height: auto;
left: auto;
top: auto;
contain: content;
max-width: 70%;
max-height: 70%;
border-radius: 2px;
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
> .ion-page {
position: relative;
display: block;
width: auto;
height: auto;
contain: content;
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
}
}
&.my-stretch {
.modal-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
> .ion-page {
width: 100%;
height: 100%;
}
}
}
}
&.my-fullscreen {
.modal-wrapper {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
You can have responsive modals that will have the size of the inner content using cssClass: 'my-modal-inner':
The modal will occupy at maximum 70% of the width and height (like defined in the above css) when the content surpasses the limit:
If the content of the modal is supposed to occupy all the container element (like a page or a component with ion-content), it will not work well with the above case because the modal supposes that the container should have the size of its children, causing a possibly undesired behaviour (the modal will be very small, more than it should):
Instead, you can define the modal to occupy its maximum size with cssClass: 'my-modal-inner my-stretch':
If you want the modal to be full screen, even in a large desktop browser, you can use cssClass: 'my-fullscreen':
Notes:
You can change the prefix my- with any other prefix of your choice (or no prefix).
You can change the maximum width and height of the modal in the above css, as you seem fit (I defined both as 70%, in your case it would be 50% and 80% for the width and height, respectively).
The above screenshots were taken in a desktop browser, but the modal changes also work in a mobile/native app with Ionic (I tested in Android, and it should work in iOS too).
Update (2018-07-30)
About the HTML codes for the modal:
1) Responsive modal that will be as large or as small as the inner content (a single div or a hierarchy of divs, spans and other block and inline elements should do):
<div class="main">
<div class="img-container">
<img src="assets/img/main/icon.png" [alt]="APP_NAME">
</div>
<div class="info-container">
<div class="app-name">{{ APP_NAME }}</div>
<div class="app-version">Version {{ APP_VERSION }}</div>
<div class="app-year">#{{ INITIAL_YEAR }}-{{ CURRENT_YEAR }} {{ APP_NAME }}</div>
<div class="app-rights">All rights reserved</div>
</div>
</div>
2) Modal will occupies its maximum size (use class my-stretch). In this case, any ionic page will do:
<ion-header>
<ion-navbar>
<ion-title>My Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<p> My content </p>
</ion-content>
I want the browser to show a vertical scrollbar when the content grows larger than the page. The content and footer disappear below the screen instead of showing a vertical scroll bar (like we see on the SO home page).
I asked a similar question earlier, but it was directed at why the page footer wouldn't expand as the content grew. I got that sorted out but now the footer moves south but a page scrollbar never shows up.
My UiBinder xml is as follows (here's a link to the file):
<g:DockLayoutPanel unit='PX' styleName="{style.shellStyles.wrap}">
<g:north size='180'>
<g:HTMLPanel styleName='{style.shellStyles.header}'>
<div id="login" class="{style.shellStyles.login}">
<g:InlineLabel ui:field="loggedInUser"/>
<g:InlineHyperlink ui:field="loginLogoutLink"/>
</div>
<h1>Flash Cards Application</h1>
</g:HTMLPanel>
</g:north>
<g:center>
<g:FlowPanel>
<g:HTMLPanel styleName='{style.shellStyles.content}'>
<g:SimplePanel styleName='{style.shellStyles.left}' ui:field="navigationPanel" />
<g:SimplePanel styleName='{style.shellStyles.right}' ui:field='contentPanel' />
<div style="clear: both;" ></div>
</g:HTMLPanel>
<g:HTMLPanel styleName="{style.shellStyles.footer}" height="70">
<g:Label>© Copyright by Justin Robbins</g:Label>
</g:HTMLPanel>
</g:FlowPanel>
</g:center>
Excerpt of CSS is as follows (here's a link to the full CSS):
.wrap {
width: 820px;
margin: 20px auto 10px auto;
}
#sprite .header {
gwt-image: "headerImage";
background-color: #efefef;
height: 180px;
}
#sprite .content {
gwt-image: "contentImage";
background-color: #efefef;
padding: 10px 40px 20px 20px;
min-height: 500px;
}
.left {
width: 210px;
float: left;
}
#sprite .left h4 {
gwt-image: "sidebarImage";
padding: 0 0 0 10px;
height: 50px;
line-height: 50px;
color: #fff;
}
.right {
width: 530px;
float: right;
padding-top: 10px;
padding-right: 60px;
}
#sprite .footer {
gwt-image: "footerImage";
background-color: #efefef;
height: 70px;
line-height: 70px;
color: #fff;
text-align: center;
}
*{margin:0; padding:0;}
body {
font-family: Arial;
font-size: 12px;
background: #efefef;
color: #232323;
margin:0;
padding:0;
line-height: 150%;
}
Wrap your Flowpanel in the content area with ScrollPanel and set its height. You will get the scroll
You are using a Layout-based panel as your root element, hence it will always fit the whole page and if you resize the browser window, everything will resize accordingly (if you've used ProvidesResize/RequiresResize widget down the road).
If the content you know it will grow, simply wrap it into a ScrollLayoutPanel, or set the first FlowPanel of the <center> element to have overflow (it's ugly as you will see).
You also probably want the footer to be always visible, so why not moving that into the region of the main DockLayoutPanel?
I suggest you to give a read here.
I need to hide 300px from the top in an iframe. I have tried to hide it with overflow: hidden in css, but it's not working in an iphone or an ipad. How can I solve that?
My HTML-code
<div class="iframe-wrapper">
<div class="iframe-content">
<iframe src="http://my_url" width="940" height="900" frameborder="0" scrolling="no" </iframe>
</div>
</div>
My CSS
.iframe-wrapper {
position: relative;
overflow: hidden;
width: 940px;
height: 600px;
}
.iframe-content {
position: absolute;
top: -300px;
}
I've made a demo from your code and along with my suggestion it seems to be working:
html:
<div class="iframe-wrapper">
<div class="iframe-content">
<iframe src="http://www.google.com" width="400" height="500" frameborder="0" scrolling="no"/>
</div>
</div>
css:
.iframe-wrapper {
position: relative;
overflow: hidden;
width: 400px;
height: 300px;
border: 5px solid orange;
margin: 20px;
background: red;
}
.iframe-content {
position: absolute;
top: -300px;
}
iframe { background: blue; }
Demo - http://jsfiddle.net/MteRS/
I changed the widths/heights so it would fit into the jsfiddle output panel a bit better.