So I've started playing around with bigvideo.js (which is built on top of video.js) and it works fine for the basic usage of having a fixed background video over the whole screen. I have also managed to show it inside of a div.
My problem though, is that I can't seem to stack other DIVs with other content over or under the bigvideo.js container div, and I can't seem to figure out how to solve this.
My HTML:
<div style="float: left; width: 100%; height: 300px;">
<h1>hi there</h1>
</div>
<div style="float: left; width: 100%; height: 500px;" id="intro-video-container">
</div>
JS firing up bigvideo:
$(function() {
var BV = new $.BigVideo({container: $('#intro-video-container'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
So the video container div ALWAYS gets stuck up to the left top of the body, no matter if I try to force it down with margin-top, or place divs before it, etc.
Any ideas?
Update, here is an illustration of what I kind of what to achieve:
Try to use container div (so called wrapping) in your page where you will place the desired content (as on the plugin's example page):
CSS
.box {
background:#444; background:rgba(0,0,0,.6);
padding:20px;
border-radius:5px;
margin-bottom:20px;
}
.main {
position:relative;
margin:50px 50px 440px 220px;
min-width:300px;
-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.dimmed {
color: #ccc;
}
#big-video-wrap {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
HTML
<div id="big-video-wrap"></div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>Simple Ambient Video Example</h2>
</div>
</div>
JavaScript
$(function() {
var BV = new $.BigVideo({container: $('#big-video-wrap'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
EDIT:
Now, it is more clear what you are trying to achieve, the simplest solution is to include an iframe on place of the div, which points to your full-screen video page.
I.e. create page video.html with all initializations and plug-in includes, then use it as source of your iframe on main page. Your iframe can be styled to match the desired dimensions (for example 100% width and 300px height).
Related
I am trying to embed Facebook videos on my website. However like many before me I am struggling with sizing them.
Following the official documentation, I realized that the first way of doing it (with the js SDK) provided an easy method to have adjustable videos, but was about twice as slow as using the iframe. But of course in the latter case, only the width of the video will adjust to its container.
I tried accessing the iframe's data to fetch the video's original height and CSS to adjust its width based on code samples I found on the internet, but can't due to same origin policy.
https://codepen.io/Angc/pen/ExYGNOO
<div class="root">
<div id="35-365098" class="embed-iframe-facebook">
<div>
<iframe id="iframe-35-365098" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fdestanie.wagner%2Fvideos%2F2391334934255393%2F&show_text=0" style="border:none;" scrolling="no" allowtransparency="true" allowfullscreen="true" frameborder="0"> </iframe>
</div>
<span class="origin-url" hidden="">https://www.facebook.com/destanie.wagner/videos/2391334934255393/</span>
</div>
</div>
.embed-iframe-facebook {
max-width: 300px;
}
.embed-iframe-facebook div {
position: relative;
height: 0;
padding-top: 178%;
}
.embed-iframe-facebook iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Furthermore, I can't seem to find a way to tell the iframe to "adjust its size to its content". Ideally I would want to do that, and detect its height so I can adjust its width, to create an artificial "max-height".
My question is therefore: how can I have the iframe adjust its height to the embedded video ?
It's possible to let an iFrame fill its parent div.
For example:
.container {
display: block;
height: 100vw;
}
.iframeContainer {
display: block;
width: 100%;
height: 100%;
padding: 0px;
clear: both;
}
.embed-area {
clear: both;
width: 100vw;
}
And use the following HTML markup.
<div class="root">
<div class="container">
<div class="embed-area">
<div class="iframeContainer">
<!-- Render the iFrame in this div. -->
<!-- It will now fill up the div, unless other style rules are preventing it. -->
</div>
</div>
</div>
</div>
I am trying to follow the sample at https://quilljs.com/playground/#autogrow-height but have problems setting the height of the editor box and preventing the toolbar from scrolling off-screen.
My code is:
<div id="editorcontainer" style="height:10em; min-height:100%; overflow-y:auto;">
<div id="editor" name="editor" style="min-height:100%; height:auto;"></div>
</div>
<script>
var quill = new Quill("#editor",{
modules: {
toolbar: [ ... ]
},
scrollingContainer: "#editorcontainer",
theme: "snow"
});
</script>
The JS Filddle is available at https://jsfiddle.net/OldGeezer/xpvt214o/556844/
The output looks like this:
There are two problems:
The tool bar is not fixed and scrolls.
The vertical scrollbar has a scrollable region all the time, even when the editor is empty.
How do I solve these two problems?
I had to modify two of quill's classes to get what I wanted. Like so
.ql-container.ql-snow {
height: auto;
}
.ql-editor {
height: 150px;
overflow-y: scroll;
}
My solution was to add an additional encapsulating div with position:relative to establish the reference frame for ql-toolbar which is set to position:absolute.
The editorcontainer is then given a margin-top:3em to hold the toolbar (when it is short enough to fill a single row).
<div style="position:relative;margin-top:5em;">
<div id="editorcontainer" style="height:10em; min-height:100%;
overflow-y:auto;margin-top:3em">
<div id="editor" style="min-height:100%; height:auto;"></div>
</div>
</div>
<style>
.ql-toolbar { position: absolute; top: 0;left:0;right:0}
</style>
The working fiddle is at https://jsfiddle.net/OldGeezer/oLq2bnzv/
You will need to modify one of quill's class
.ql-container.ql-snow {
border: none;
height: 150px;
overflow: scroll;
}
For those who suffered from Angular quill in this question,
I suggest you should add this code in the style.css.
.ql-toolbar {
position: sticky;
}
.ql-container {
overflow-x:auto;
height: 300px; /* whatever you what */
}
The tool bar is not fixed and scrolls.
You can change the CSS of the toolbar like the following:
.ql-toolbar {
position: fixed;
top: 0;
}
The vertical scrollbar has a scrollable region all the time, even when the editor is empty.
You can lower the min-height of the editor so it's lower than the container (80% for example).
I am presenting an image embedded in a descriptive text item, followed by several questions about that image. I would like that item to remain in place while the participant scrolls.
I've been able to get the entire image to remain in place using something like this HTML code:
<html>
<style>
.image{position: fixed; background: white;}
</style>
<div class = "image">
<img src="LOCATION OF IMAGE FILE" style="width: 395px; height: 395px;" />
</div>
</html>
But this freezes the image itself in a very awkward place (it actually does this in the editor itself, which blocks me from doing anything else). Is there a way to keep the presentation of the item exactly the same as it is normally, but just keep it in place?
Edit:
This is how it should appear, as a separate item from the questions to follow. I would then like it to remain frozen in place while the user can scroll through the questions.
This shows how it currently appears. The image is frozen in place, but not where it should appear (i.e., above and separated from the questions that follow.
You can use a spacer element to align the starting height of other elements. For example:
<div class = "image">
<img src="LOCATION OF IMAGE FILE" width="395px" height="395px"/>
</div>
<div class = "image_spacer">
This is a spacer element
</div>
<style>
.image{
position: fixed;
background: white;
z-index: 1000;
}
.image_spacer{
height: 395px;
visibility: hidden;
}
</style>
Visually speaking, I may recommend adding a width of 100% to your image div as well, so that other elements are fully covered when you scroll.
To fix at the top on scroll, do the following:
<div class = "image">
<img src="IMAGE LOCATION HERE" width="395px" height="395px"/>
</div>
<div class = "image_spacer">
This is a spacer element
</div>
<style>
.image{
background: white;
width:100%;
z-index: 1000;
text-align:center;
}
.image.fixed{
position: fixed;
top:0;
left:0;
}
.image_spacer{
height: 395px;
visibility: hidden;
display:none;
}
.image_spacer.fixed{
display:block;
}
</style>
In addition, add this to the JavaScript for the question:
Qualtrics.SurveyEngine.addOnload(function()
{
var space = $$('.image')[0].cumulativeOffset().top;
console.log(space);
window.addEventListener("scroll", function(){
if( document.body.scrollTop > space){
$$('.image')[0].addClassName('fixed');
$$('.image_spacer')[0].addClassName('fixed');
}
else{
$$('.image')[0].removeClassName('fixed');
$$('.image_spacer')[0].removeClassName('fixed');
}
});
});
Did you try using the Text/Graphic option?
As I am seeing no problem if I add an image that way, and the survey questions are in their place, check the image below for reference.
Any ideas how to fix this problem: On a page with TOC (table of contents) with links pointing to hashtags within the same page, when the browser scrolls down other fixed position elements hide it. The browser should scroll further down to avoid being hidden by the fixed elements.
Fiddle to demonstrate this problem: https://jsfiddle.net/fcro6mth/ Click Section One or Section Two - the browser scrolls down to it but its hidden by the fixed header
Solution with JS: https://jsfiddle.net/fcro6mth/1/
Can you think of any solution that doesn’t involve JS?
Code from JS fiddle:
HTML:
<header>
This is the fixed position header
<nav>
Section One
Section Two
Section Three
</nav>
</header>
<div class="body">
This is the body.
<section id="section1">This is section one</section>
<section id="section2">This is section two</section>
<section id="section3">This is section three</section>
</div>
CSS:
section {
background: lightgrey;
margin: 20px 0;
padding: 20px 10px;
height: 300px;
}
header {
background-color: grey;
position: fixed;
top: 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
left: 0;
color: white;
}
.body {
margin: 70px 10px 0 10px;
}
JavaScript:
$("nav a").click(function (event) {
var $target = $(event.currentTarget),
$scrollToTarget = $($target.attr("href")),
$header = $("header"),
prop = {
scrollTop: $scrollToTarget.offset().top - $header.outerHeight(true)
},
speed = 1000;
$('html, body').animate(prop, speed);
});
Check this: https://stackoverflow.com/a/13555927/2112228
Nice example to make hidden anchors for offsetting your sections.
Updated version of your fiddle:
https://jsfiddle.net/fcro6mth/4/
Solution
I wrapped your sections in div-wrappers gave them the IDs, padded them down and pulled them back up with a negative margin.
This results in the exact same appearance, but the links do what you want them to do.
Example:
HTML:
<div id="section1" class="wrapper">
<section >This is section one</section>
</div>
CSS:
.wrapper {
padding-top: 50px;
margin-top: -50px;
}
I have struggled with this issue a lot in designing a webpage with a combined banner / navbar of about 300px fixed at the top of a page full of short items linked to by anchor links from the website's home page.
The problem I have found with the "margin-top: -XXpx; padding-top: XXpx" approach is that the invisible padding overlaid the preceding item, meaning that active content (ie. links) were blocked. I overcame this by applying positioning to the anchored elements and setting the z-index so that the first item was on top of the stack with each subsequent item lower in the stack - like this:
CSS
.anchored-element {
padding-top: 300px;
margin-top: -300px;
position: relative;
}
HTML
<div class="anchored-element" style="z-index: 99">FIRST ITEM</div>
<div class="anchored-element" style="z-index: 98">SECOND ITEM</div>
<div class="anchored-element" style="z-index: 97">THIRD ITEM</div>
... etc
This provided a fix that worked for me across Firefox, Safari and Chrome on my desktop, and on my iOS devices. I hope this helps others tackle this very frustrating issue in bootstrap!
I'm trying to position a fixed element WITHIN a div (not the whole page) in my website.
I want the navigation (deadspin, gawer, awl, other) to be fixed within the writing section so that even when user scrolls, the nav is still there. But currently it's fixed for the whole page.
As you can see on my test page, the navigation is fixed the way I want it to be.
I tried messing around with position:relative/position:fixed for the #small-box-links but that doesn't help.
.home_writing {
display: block;
position: relative;
background: rgba(50, 50, 50, 0);
height: 1000px;
text-align: left;
}
#small-box-container {
border: 1px solid black;
background: rgba(10, 200, 10, 0);
width: 980px;
height: 800px;
overflow: auto;
}
#small-box-links {
position: relative;
margin-left: 700px;
height: 25px;
margin-top: 10px;
}
<div id="small-box-container">
<div id="small-box-links">
deadspin |
gawker |
the awl |
other
</div>
<div style='overflow:hidden; width:980px;'>
<div style='overflow:scroll; width:988px'>
<div id="small-box1" class="small-box">
<h2>deadspin</h2>
<h3>How Pat Summitt Ruined The Best Thing About Women's Basketball</h3>
<!-- etc. for other boxes -->
I found this related question and yet when I try top / left, etc., the element is still fixed to the page, not writing div. (I tried making the parent element, .home_writing, relative but this doesn't fix my issue.)
(On another note, I can't figure out why my Playfair in the paragraphs doesn't look like the sidebar navigation. It's styled the same way).
position:fixed always uses the viewport as the frame of reference, so you can’t use that here.
But the solution is rather simple - use position:absolute instead to position the navigation inside a container element that has position:relative (and a fixed height), and then have the content as a sibling inside that container as well, with fixed height and overflow:auto for that element:
<div style="position:relative; height:800px;">
<div style="position:absolute; top:0; …"> [link link link] </div>
<div style="height:800px; overflow:auto;">
Lorem ipsum, dolor sit …
</div>
</div>