I've got some code similar to the following:
HTML
<div id="darkOverlay"></div>
<div id="content">
<div id="whiteText">I need to be clear bright white!</div>
</div>
When I click a button, I give the divs the following properties:
$('#darkOverlay').css('background-color','rgba(50,50,50,0.5)');
$('#darkOverlay').css('z-index','100');
$('#whiteText').css('display','block');
$('#whiteText').css('z-index','500');
So essentially I make darkOverlay dark-translucent and bring it to the front. And then I also show the white text and bring it to the (even more) front.
However, it seems that the darkOverlay still casts its translucency on top of my white text. This causes the white text not to appear as white as I need it to be. What should I do to make sure my white text stands out?
CSS [on page load]
#darkOverlay {
position: absolute;
top: 0px;
height:100%;
width:100%;
z-index:-100;
}
#whiteText {
display: none;
position: absolute;
}
If it's the white text that's at issue, it's because nothing ever sets the color to white.
$('#whiteText').css('color','white');
Or complete example:
<!DOCTYPE HTML>
<html>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4'></script>
<style>
#darkOverlay {
position: absolute;
top: 0px;
height:100%;
width:100%;
z-index:-100;
}
#whiteText {
display: none;
position: absolute;
}
</style>
<body>
<div id="darkOverlay"></div>
<div id="content">
<div id="whiteText">I need to be clear bright white!</div>
</div>
<div style="position: relative">
<button id="clickme">clickme</button>
</div>
</body>
<script>
$("#clickme").click(function(e) {
$('#darkOverlay').css('background-color','rgba(50,50,50,0.5)');
$('#darkOverlay').css('z-index','100');
$('#whiteText').css('color','white');
$('#whiteText').css('display','block');
$('#whiteText').css('z-index','500');
});
</script>
</html>
Related
My code is:
HTML:
<section>
<div id="banner">
<div class="container">
<p class="para">hello world</p>
</div>
<div class="container banner-bottom">
<div class="card card-primary text-center z-depth-2 contact-main-text">
<div class="card-block">
<p class="white-text">Please fill out the form below and ESC
staff will be in contact with you shortly.</p>
</div>
</div>
</div>
</div>
</section>
CSS:
.para{
color:white;
background: red;
padding:70px;
text-align:center;}
.white-text{
background:green;
padding:20px;}
Output is: Bootply
And i want:
Could anyone help me with that?
You can set negative top margin to overlay the second div, see the live example:
<div class="container banner-bottom" style="margin-top:-5%;padding:2%">
http://www.bootply.com/MorC45NB4V
PS: I have used inline css just to show, avoid inline css.
My solution uses jQuery and some calculations. My calculation works even if you move the elements around the document. I also used CSS for the margins you wanted.
jQuery
//location of bottom of the red container
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height();
//gets the bottom 4th of the red container
var placement = bottomOfContainer - ($('#onTopOfMe').height() / 4);
//setter of top for green container
$('#placeMe').offset({"top": placement});
CSS
p.white-text{
margin-left:5%;
margin-right:5%;
}
Output
bootply
1) In case you want your lower banner to have a full width:
You could add position: relative; to the lower banner and position it adding a bottom value and use margin to create the same visual effect asked in the question.
.banner-bottom {
position: relative;
bottom: 45px;
margin: 0 40px;
}
2) In case you don't need to have a banner with full width and just center it, then no need to use margins. Remember to set one parent as position: relative;:
#banner { position:relative;}
.banner-bottom {
position: absolute;
top:75%;
right:0;
bottom:auto;
left:0;
}
CODEPEN
http://codepen.io/alexincarnati/pen/PWOPjY
Here's my solution for this.
Basically just make the position of the card block "relative", position the "top" position accordingly, then set the margin to "auto" to center it.
.card-block {
position: relative;
top: -50px;
margin: auto;
width: 80%;
}
A bit of position could help you, here's a rough version that will hopefully get you thinking what you need to do:
#banner { position:relative;}
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; }
Heres a forked bootply: http://www.bootply.com/Imuh4wUj50
I am aware I can use background-image: url("www.linktoimage.com/image.png"), in css, to place an image in the background. I also know I can add a javascript file into html with tag. My challenge is how do I apply css characteristics of a background image to my javascript file?
To add some context, the javascript file is a simple animation (randomly bouncing balls, that responds to the screen width and height. I want to place text on top of this as if it was background, but no matter what I do, text will place itself above the script, in a white box, instead of directly on top of my script. Below is the general result of my various attempts:
I would like to place "Welcome" on top of my javascript, as oppose to how it currently appears on top of window with a white background. My css is as follows:
#font-face {
font-family:'HighTide';
src: url('assets/HighTide.otf')
font-family:'HighTideSans';
src: url('assets/HighTideSans.otf')
}
body {
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
z-index: -1
}
.title {
font-family:'HighTide';
font-size: 10vw;
margin: auto;
text-align: center;
z-index: 1;
}
.enter {
font-family:'HighTideSans';
font-size: 2vw;
text-align: center;
margin: auto;
z-index: 1;
}
And here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LockeDesign</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="libraries/svg.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=title> WELCOME </div>
<a href="main.html" class=enter> </a>
</body>
</html>
Any suggestions are appreciated, thank you!
EDIT
Using position: absolute; works partially, all I had to do was add left: 0;
right: 0; and bottom: 50%; to re-center the text. Resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended, thanks all!
I would suggest WRAPPING all of the content you wish to display over the dynamic background in a single div
Example
<html>
<body>
<div id="BodyWrapper">
<h1> This is an HTML Page </h1>
</div><!-- End BodyWrapper -->
</body>
</html>
Then apply some Z positioning to the BodyWrapper with css
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
If the above is still not enough then you may have to delay the
showing of the body content (make sure the dynamic background
completely loads first).
You can set the initial display styling of the wrapper to
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:none;}
and onLoad... call this function
function show_PageBody()
{
setTimeout(function(){ update_Wrapper(); },1000);
function update_Wrapper()
{
document.getElementById('BodyWrapper').style.display='block';
document.getElementById('BodyWrapper').style.zIndex = 5;
}
}
You can add a css transition for the opacity of the BodyWrapper so that it fades onto the screen instead of just appearing.
This should work (has worked for me in the pass).
If not please let me know.
Using position: absolute; works partially, and renders this result:
All I had to do was add left: 0; right: 0; and bottom: 50%; to re-center the text. Also, resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended:
I'm working on a HTML framework that most of it's pages constructed from two section. first section (TopPanel) is a sliding panel that could slide down or up (with jQuery as well). second section is the Main part of page that could contain any sort of HTML document.
<!doctype html>
<html>
<head>
<!--Meta scripts & more-->
</head>
<body>
<div class="TopPanel">
<!--Panel's Contents-->
</div>
<div class="Main">
<!--Some standard HTML docs here-->
</div>
</body>
</html>
When the TopPanel is sliding down, all elements of the Main section must move down. But it's possible to exist some position:fixed element in the Main section. so it's clear that they won't move unless we gave them some margin-top: [$('.TopPanel').height()] px;. But it's not what I'm looking after!
I'm looking for a way to shift down and shift up all content of the Main section with a smooth effect and without changing of all elements attributes.
Have you thought about using a CSS transform:translateY(20px) on the body tag? If you are using fixed position on the other element, it shouldn't actually affect it although I haven't tested that.
You can then use transitions to get the smooth movement you are after.
body{
padding:10px;
overflow:hidden;
background:#fff;
height:100%;
transition:all .2s;
}
body.active{
transform: translateY(60px);
}
Example:
http://codepen.io/EightArmsHQ/pen/gpwPPo
Lookout for this kind of stuff though : Positions fixed doesn't work when using -webkit-transform
JSFIDDEL version
(UPDATED) Try this:
$('.main').click(function(){
$('.main').toggleClass('toggle');
})
.main{
width:20%;
height: 10%;
background-color: rgba(100,100,100,0.7);
text-align: center;
position: fixed;
top: 12%;
transition:all 1.0s
}
.top{
width: 20%;
height: 10%;
text-align: center;
background-color: rgba(300,50,50,0.7);
position: absolute;
}
.toggle{
transform: translateY(100px);
transition:all 1.0s
}
<div class="content">
<div class="top">
Top
</div>
<div class="main">
Main
</div>
</div>
It would need some tweaking but it still does what you are looking for.
I think you are looking for is maybe this:
I have used JQuery UI 1.9.2 for making the toggle ease effect. For more i have created the Fiddle
JQuery
$("button").click(function(){
$(".topPanel").toggleClass("height", 300);
$(".main").toggleClass("top", 300);
});
CSS
body { margin:0; }
.topPanel
{
width:100%;
height:50px;
background:#333;
}
.main
{
top:50px;
bottom:0px;
width:100%;
position:absolute;
background:#ddd;
}
.height { height:100px; }
.top { top:100px; }
p { font-weight:bold; }
HTML
<div class="topPanel">
</div>
<div class="main">
<center><button>Click Me!</button></center>
<p>Hey look at me, i am moving along when you click button!</p>
</div>
i'm really new to all this coding things etc. (1 month :P) and actually i try some things with jQuery.
I used the search function but actually it's quite hard for me to understand everything :P
My goal is:
When i hover over an image another image which sits on top of it slides up and another slides down.
They're all images - i don't want to publish the Website and only want to use it on my Computer for testing ^^
Also the picture on the top should be hidden at first. (I know how to do it but i actually don't know if it will be shown when using slideDown)
HTML:
<div class="newschange">
<div class="News wow fadeInDown animated"><img src="images/News.png" /></div>
<div class="newstext wow fadeInUp animated"><img src="images/newstext.png" /></div>
<div class="newshover"><img src="images/alt/newstext.png" /></div>
</div>
My jQuery Script: (it's actually in the header of the HTML)
<script>
$(function() {
$('.News').mouseover(function (){
$(.'newstext').slideUp(300);
$(.'newshover').delay(400),slideDown(300);
});
})
</script>
CSS (i don't know if this is necesarry for this :P)
.newshover {
position: absolute;
left: 802px;
top: 455px;
width: 359px;
height: 35px;
}
.newstext {
position: absolute;
left: 781px;
top: 456px;
width: 446px;
height: 32px;
}
.News {
position: absolute;
left: 377px;
top: 276px;
width: 854px;
height: 318px;
}
The problem is just that nothing happens when i hover over it :)
Here is a Screenshot:
http://i.stack.imgur.com/dzyFH.png
The 1. image is the whole thing with at the top "News" the image and the rounded rectangle.
NEWS SECTION! is the one i want to show AFTER i hover over the first image.
The red Text behind it is the one i want to hide when i hover over the first image. :)
//solved Code
<script>
$( document ).ready(function() {
$(".News").on('mouseenter',function () {
$(".newshover").delay(600).slideToggle(500);
$(".newstext").slideToggle(500);
});
$(".News").on('mouseleave', function(){
$(".newshover").slideToggle(500);
$(".newstext").delay(600).slideToggle(500);
})
});
</script>
<script>
$(function(){
$(".newshover").hide(0);
})
</script>
If I understood well your question this piece of code should work: https://jsfiddle.net/5naaq121/
HTML:
<div class="newschange">
<div class="News"><img src="http://maalaeasurfresort.com/wp-content/uploads/2014/09/beach_cy.jpg" /></div>
<div class="newstext"><img src="http://www.honduras.com/wp-content/uploads/2012/05/white-sandy-beach2-300x200.jpg" /></div>
<div class="newshover"><img src="http://www.lakecountyparks.com/_images/whihala_beach/wb_beach.jpg" /></div>
</div>
JS:
$(function(){
$('.newschange').mouseenter(function (){
$('.newshover').slideUp(300);
$('.newstext').delay(400).slideUp(300);
})
});
CSS:
.newschange {
display:block;
width:300px;
height:200px;
position:relative;
overflow:hidden;
}
.newshover {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
.newstext {
position: absolute;
left:0;
bottom:0;
width:300px;
height:200px;
}
.News {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
Ex: the 1st Div:
<div style='position: fixed; width=100%'> ....</div>
Now i want to put another Div 5px right below the previous Div. So i did
<div style='padding-top:5px; width=100%'> ....</div>
But it didn't work, seem padding-top compare itself to the top of window but not to its previous Div. If i remove the position: fixed; in the 1st div then it will be fine, but i don't want that.
I want the 1st Div got position fixed & the 2nd Div's position is 5px right below the 1st one. So how to do that?
position: fixed removes the element from the regular flow. You can't use flow positioning anymore.
There are likely proper ways to do what you want, but I don't know what you want because you told us about Y, not X: https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem
I think I understand what you want. If you always know how high the header is you can just add an offset, padding and margin should both work.
<div id="header" style="position: fixed; top: 0; width: 100%; height: 20px;">
<div id="content" style="margin-top: 20px;">Content goes here</div>
If the header can change height adjust your CSS so that the header and content change their height and content respectively.
<div id="container" class="adjustheaderheight">
<div id="header">
<div id="content">Content goes here</div>
</div>
#header { position: fixed; top: 0; width: 100%; height: 20px; }
#content { margin-top: 20px; }
#container.adjustheaderheight #header {
height: 40px;
}
#container.adjustheaderheight #content {
margin-top: 40px;
}
If your header changes height dynamically you'll need to change the content offset dynamically although I would strongly advise you not to have a dynamic header.
Have you tried margin-top instead?
margin-top: 5px
You might wanna include both these divisions within another division and make this new outer division position fixed. Like this --->
<div style='position: fixed; width=100%'>
<div style='width=100%'> ....</div>
<div style='padding-top:5px; width=100%'> ....</div>
</div>
put the two divs in a wrapper posioned fixed. Also you have invalid css syntax width=100% must be width:100%.
<div style="position: fixed;">
<div style=' width:100%'> ....</div>
<div style='margin-top:5px; width:100%'> ....</div>
</div>
however, this makes the 2 divs fixed... and this might not be what you want. You could do the following:
<div style='position: fixed; width:100%'> ....</div>
<div style='position:absolute; width:300px;height:200px;top:300px;left:300px'> ....</div>
css values are just for example...
UPDATE:
is this what you want?
http://jsfiddle.net/kasperfish/K8N4f/1/
<div id="fixed">fixed</div>
<div id="widget" >content <br>hjgjhgjhgjhgh</div>
#fixed{
width:100%;
position:fixed;
background:yellow;
height:50px;
z-index:2;
}
#widget{
background:blue;
position: absolute;
top:55px;
margin-top:15px;
width:100%
}
If you have tried Margin and it doesn't work feel free to use padding as long as you don't have a background color or image within the div then you won't be able to tell the difference between the two ways of doing this.