I would like to put a small tab at the bottom of the page for Contact Us- that should scroll as the page scrolls and should work in Older versions of IE also like IE 5.0. Please see the page at
http://www.goshti.com/testcode.html
Any suggestions on how to solve this. I CSS or Javascript solution is both fine.
You can use position:fixed on the element.
<body>
<div class="tab">
Contact Us
</div>
CSS:
.tab {
position: fixed;
bottom: 0px;
right: 0px;
}
Have you tried position:fixed?
I'm not sure if it would work on older browsers tho.
You can wrap the bar within a relative div
#page-wrap {
margin: 15px auto;
position: relative;
}
#bar {
position: fixed;
bottom: 0px;
right: 0px;
}
Related
In my popup window, all info and inputs are usually fully displayed when first triggering it, however, I have a textArea box that I can expand to whatever height. Upon expansion, I want the entire popup to scroll on the page, not just that particular div which holds the expanded textArea.
I'm using this bit of CSS to make my popup window full height and scrollable when I expand the textArea.
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}
Everything worked as intended with that bit of CSS, however, I noticed that the popup no longer closes when clicking the overlay, and it's due to the pointer-events: auto, but removing this bit of CSS brings me back to square one where the popup doesn't scroll with the page when I expand the textArea.
Any ideas on the quickest, cleanest way to have both behaviors?
Please use the below style.
.cdk-global-overlay-wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}
I have this website.
I have a div with an embeded YouTube video and I am trying to hide the lower part of the video with a banner so that the YouTube logo that appears at the bottom is covered.
I have added another div for the banner, I used z-index and position: absolute; top:700px; to make it stack over the video but this makes the banner position unpredictable on all browser.
Firefox and IE looks good but it's not working well on Chrome or Safari because the banner is too low and doesn't cover the bottom of the video properly.
How else can I do this so that it works on all browsers? Basically I just need the banner to stack over the bottom of video so that it covers the area I want hidden.
Here's what I have
.embed-container {
width: 100%;
overflow: hidden;
position: relative;
margin-top: -80px;
padding-bottom: 0px;
margin-bottom: 0px;
z-index: -1;
}
.mask {
position: absolute;
top: 700px;
right: 0px;
width: 100%;
height: 150px;
background-color: #ef1446;
z-index: 11;
}
.bottom {
bottom: 0;
}
<div id="lgvid" class='embed-container'>
<div class='over'></div>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class='embed-container'><iframe src="https://www.youtube.com/embed/Yo19ZhO7CAc?autoplay=1&loop=1&playlist=Yo19ZhO7CAc&cc_load_policy=1rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="mask bottom">
<br><br>
<center>
<h1 style="color:white;">¿Que estas buscando?</h1>
</center>
</div>
Use Vimeo, or HTML5. If removing the YouTube logo is all you want, it's a lot less trouble doing it that way. You can download the video from Youtube, here
Another thread discusses placing a div over a youtube video, this might be what you are looking for.
How to show a div over a Youtube video (z-index)?
[SOLVED] My main problem was just that the banner was not in the same position on Chrome and Safari when using z-index to stack my divs. On these two browsers, the banner was horizontally lower than in I.E. and Firefox.
I solved the issue by using a browser specific CSS hack found here: http://rafael.adm.br/css_browser_selector/
The browser specific CSS hack allowed me to position the banner in the exact position I wanted for those two browsers where the banner was out of place. I still used z-index in all style sets for all browsers just slightly different top margins for the Chrome and Safari specific CSS.
I am relatively new to the world of client-side development and might be using the word "collapsible" in the title incorrectly, but here is what I would like to achieve in my web application:
So, I have several bars in the header for different purposes and I want to allow user to fold them to a tiny chevrons and unfold them back only if they really need them.
So, I am looking for a framework or sample code that would help me here.
I am using Bootstrap for the main design and layouting of my web application and I would be best if they would be compatible, but I can work on it on my own. I just don't want to implement everything from scratch here...
You can achieve that effect with some simple CSS. Check out this jsfiddle.
You have two elements inside of your wrapper container like so:
<div class="wrapper">
<nav>
My nav
</nav>
<section>
This is my content
</section>
</div>
Then with css you make the nav element be on top of the section element
section {
width: 100%;
height: 100%;
background-color: gray;
display: block;
position: absolute;
top: 0;
left: 0;
padding-top: 10em;
text-align: center;
box-sizing: border-box;
}
nav {
z-index: 100;
position: absolute;
background-color: green;
display: block;
top: 0;
left: 0;
width: 50%;
transition: all 500ms ease;
}
To create the effect of a hiding navigation menu you can add some jquery:
$('nav').click(function () {
$(this).toggleClass('hide');
});
and finally just add another style to handle the hidden nav element:
nav.hide {
left: -15em;
}
The sample itself is bare bones, but hopefully it can give you a sense of how to approach a problem like that.
I have the BACKGROUND image doing everything I need correctly (because I am running Backstretch JS) on computer and ipad but when it comes to phones, it does not look so well? Any suggestions would be greatly appreciated..
http://www.closetvip.com/splash.html
I am using backstrech js for the background image
I have some changed in your code so please add this ID and Class.
#spanish {
position: absolute;
left: 200;
bottom: 100px;
float: right;
}
#english {
position: absolute;
bottom: 101px;
float: left;
}
You have use this css only for iPhone css not for all screen.
I'm developing a phonegap app for iphone and android.
I have a black overlay with a loading message that appears when the user clicks on a button.
Everything is fine on ios, but on android, the fadeIn() function only displays parts of the overlay. Like, really, parts. Sometimes just the bottom, sometimes the bottom and the top right corner... Really weird.
Although if I use .show() instead, everything goes right.
Have you ever seen something like this ? (terrible quality but you can see the overlay on the bottom half, and a semi-transparent piece of overlay on the top right corner.)
What's wrong with the .fadeIn() function on android ?
(Here is the css if you need it)
.black-overlay {
position: absolute;
width: 100%;
height: 120%;
background-color: #000;
color: #FFF;
display: none;
z-index: 99999;
top:0;
}
And the beginning of the HTML code :
<body class="side">
<div class="black-overlay row-fluid"> //overlay
<div class="span12 loading-splash">
<div class="span12"><span>Chargement...</span></div>
<div class="span12 span-no-margin"><img src="img/ajax-loader_black.gif" alt=""></div>
</div>
</div>
<div class="app container-fluid event-creation"> //Rest of the app...
Here's some CSS that I use for background overlays.
.ajax-loader-background
{
background-color: rgba(0,0,0,0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
zoom: 1; /* Force hasLayout in IE. */
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99999;
}
I'm not sure why you get a different result with .fadeIn, except that jQuery might need to know the width/height of the element, and if it's not visible it has zero width/height.
I've noticed slight differences between width: 100% and left: 0px; right: 0px. Same with height: 100%. You're also setting the height to 120% which I've never seen done with absolute positioning. You should not have to do that for an overlay.