I'd like to make my navigation menu align itself so it doesn't overlap on page load but overlap when scrolling down (Dynamic nav bar)
What I currently have is here: https://m.omegarealm.tk/
As you can see on the page's initial load the bar overlaps the text, I'd like the nav bar not to overlap the text when the page is loaded but overlap on scroll.
My current CSS is here: https://files.omegarealm.tk/mobile.css
Quick note: The CSS is one line when you access it because cloudflare compresses it. It's indented on the server.
Thanks!
No need for any JavaScript here. Your "navbar" element seems to be a fixed height so you can achieve what you want simply by setting the top margin of your body to be equal to that height, plus a little extra so your content is sitting right on the edge of the fixed element.
body{
height:5000px;
margin:52px 10px 10px;
}
#navbar{
background:red;
left:0;
position:fixed;
top:0;
width: 100%;
}
#navbar img{
float:left;
margin:5px;
}
#navbar p{
font-weight:bold;
line-height:42px;
margin:0;
text-align:center;
}
<div id="navbar">
<img alt="Menu" height="32" src="//files.omegarealm.tk/images/menu_mobile.png" width="32">
<p>OmegaRealm</p>
</div>
<h1>Under construction</h1>
<p>Sorry, please come back later</p>
Because the element is fixed is has no relevance to the content below it. Wrap the body content and apply a margin to the top:
var navHeight = $('#navbar').height() + 30;
$('section').css('marginTop', navHeight);
#navbar {
background-color: red;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navbar">
<img width="32px" height="32px" align="left" style="padding: 5px;" src="//files.omegarealm.tk/images/menu_mobile.png">
<font size="5">
<b>
OmegaRealm
</b>
</font>
</div>
<section style="height: 2000px">
<h1>Under construction</h1>
<p>Sorry, please come back later</p>
</section>
Related
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.
I want a slide effect on a div from left to right or from right to left as in
$('#div').show('slide', {direction:'left'}, 1000);
being my html is
<div id="div-pre">
</div>
<div id="div">
</div>
<div id="div-nex">
</div
But the problem with this approach is that we are hiding the #div initially by setting
#div{
display:none;
}
so that we cannot preserve the width of #div
I have came across another method by making the visibility: hidden as in
$("div").css("visibility", "hidden");
to preserve the width of the div
but this method does not give the sliding effect from left to right or right to left
So I want to achieve both "the effect as in .show('slide', [option], [speed]) altogether with
preserving the div width"
Having no example code to go off, I decided to write a basic example of how you could approach this. Basically, you put an overflow: hidden container around the thing that you want to slide to the left while preserving width, and you then animate a movement leftwards using animate('left':'-pixels');. Your div has to be positioned relatively for this to work. See example below.
$(document).ready(function(){
$('.slideLeft').click(function(){
$('.slider').animate(
{'left':'-600px'},
1000,
function(){
$('.slider').hide();
}
);
});
});
.slider{
height: 300px;
width: 600px;
font-size: 20px;
background-color: yellow;
position: relative;
}
.container{
border: 1px solid red;
height: 300px;
width: 600px;
background-color: silver;
overflow: hidden;
}
.slideLeft{
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider">
Hi, I have some content!
</div>
</div>
<button class="slideLeft">Slide me left!</button>
Good luck!
You can wrap your div in another div with overflow:hidden and than you move to right or left the div inside.
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).
Trying to get a DIV to "float" to the bottom of the div its in. I've got the position set to relative on the parent div and kid, and bottom to 0 on the kid; but it still just sits at the top in the middle.
Parent DIV:
.detailsContainer
{
width: 100%;
height: 30%;
overflow: hidden;
position: relative;
background-color: blue;
}
Kid DIV
.obutton
{
text-align: center;
font-weight: bold;
width: 80%;
height: 29px;
background:rgba(204,204,204,0);
position:relative;
bottom: 0;
display: inline-block;
color: #666;
}
Current actual setup:
<div class="detailsContainer">
<a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
<div class="detailview"><b>Book Details<br></a></div>
<div id="BookDetails'.$row->BookID.'" class="hidden">
<table>
<tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
<td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
<tr><td>Awards </td><td>'.$row->Awards.'</td>
<td>Film</td><td>'.$row->Film.'</td></tr>
</table>
</div>
';?>
<br><center><a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div></a></center>
<div id="light2" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</div>
Its kind of a lot to post for this, but want to make sure nothing is interfering that you guys might spot. It jumps out of php near the bottom, I'll post the entire article if you think the issue might be else where.
I tried to make a jsfiddle of it, but there is so much php and variables that by time I gutted it, it'd just be 2 normal divs, having lost its uniqueness and the issue will probably have been deleted.
Thanks -Tom
.obutton position needs to be absolute... for bottom to work the way you're intending.
I have a div that expands as the user add images on it. And under the div I have a button. I need this button to go down as the div expands down.
The button position depends on the div position.
I want that the divUpload goes down as the user add photos to the panel: files.
HTML:
<form id="form1" runat="server" enctype="multipart/form-data">
<div id="divListFiles">
<asp:FileUpload ID="files" name="files[]" accept='image/*' runat="server" multiple />
<asp:Panel ID="list" name="list" runat="server" Height="107px">
</asp:Panel>
</div>
<div id="divListDel">
<output id="listdel" name="listdel"></output>
</div>
<div id="divCarregando">
<img id="carregando" src="http://bps.saude.gov.br/visao/img/carregando.gif" alt="Carregando..">
</div>
<div id="divNumImages">
<asp:TextBox ID="txbNumImages" runat="server"></asp:TextBox>
</div>
<div id="divUpload">
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClientClick="ShowCarregando()" OnClick="btnUpload_Click" />
</div>
CSS:
divListFiles {
position:absolute;
left:9px;
top:99px;
width:653px;
height:105px;
z-index:1;
}
#divListDel {
position:absolute;
left:81px;
top:73px;
width:627px;
height:33px;
z-index:1;
text-align: left;
}
#divCarregando {
position:absolute;
left:7px;
top:113px;
width:423px;
height:231px;
z-index:-1;
text-align: left;
}
#divNumImages {
position:absolute;
left:9px;
top:100px;
width:123px;
height:27px;
z-index:5;
text-align: left;
}
#divUpload {
position:relative;
left:19px;
top:241px;
width:65px;
height:27px;
z-index:1;
text-align: left;
}
#form1{
height: 303px;
}
#carregando{
visibility:hidden;
}
.thumb {
height:65px;
width:90px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
.thumbdel {
height: 17px;
width: 17px;
margin: 60px 81px 0 0;
}
What you've described would be the normal behavior for:
<div><!-- ...the images here ... --></div>
<button>The Button</button>
...as by default a div is as wide as it can be and as tall as it needs to be, with content following it being rendered underneath.
Live Example | Source
The problem is these lines in your CSS:
#divCarregando {
position:absolute;
"Absolutely positioned boxes are taken out of the normal flow", which creates (in my opinion) absolute MAYHEM on your page.
My #1 recommendation would be to use a nicely flowed HTML document without resorting to absolute positioning.
If you can't or won't do that, your only option will be to recalculate the bottom position of the image container and apply it to the top of the button container.
Using jQuery (for ease of example, only, as this is certainly possible without it):
When you add an image:
var images = $( "#divCarregando" ),
position = images.offset();
$( "#divUpload" ).css({
"top": position.top + images.outerHeight( true )
});
For what it's worth, I highly recommend not using absolute.
HTML
<div class="wrap">
<div class="innner">nfdj</div>
<button>Click</button>
</div>
CSS
.wrap{
width:250px;
background:green;
height:auto;
}
div{
width:100%;
height:150px;
background:grey
}
DEMO
Whenever I wonder about CSS I go and visit Peter-Paul Koch -
http://www.quirksmode.org/css/display.html
but if you don't want to discover that site, then in most cases I would use display: block; for the button, which will ensure that it below the one above it.
If I had a set of buttons arranged horizontally I would enclose them all inside a div which was display: block; and make each button display: inline;. That way the entire group gets pushed below the div above, but each button is inline inside the div.
I'll leave you to work out what to do with a vertical set of buttons to one side or the other of the main div.