I am using bootstrap 3, with panel i need to create inside body of the panel opacity that user can not click on link, here is my working fiddle
http://jsfiddle.net/52VtD/9230/
The problem is that opacity always get full screen i need to be only in panel body?
I need to make that only with css, is that possible?
Here is my code so far
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
I dont want allow user to clikc on this link
</div>
</div>
CSS
.panel-body:before{
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,0.8);
}
UPDATE
I have find out better solution
.panel-body{
opacity: .7;
pointer-events: none;
}
The way I've done this in the past is by making the container (i.e. the thing you want to lay your transparent cover over) have position:relative then create a div within that container with height:100% and position:absolute. This then covers the whole of the parent div. Here's a full working example.
HTML
<div class="container">
<p>Ahoy, I'm some text</p>
<p>And I'm a link!</p>
<img src="http://placehold.it/100" alt="I'm an image"/>
<div class="cover"></div>
</div>
CSS
.container{
position:relative;
border:2px solid #663399;
padding:5px;
}
.cover {
background-color: #fff;
height: 100%;
left: 0;
opacity: 0.9;
position: absolute;
top: 0;
width: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*Yay for old IE support...*/
}
jsFiddle working example
By just using a semi transparent div covering the elements within them instantly makes them non-clickable, so no need to mess around with pointer-events, but it does require you have a relatively positioned container div.
Related
Here I am working within the edit the CSS of a wordpress plugin. The purpose of the plugin is to add a fixed position box at the top of the website where the user can read and click on a link as you scroll the site.
The issues that I am having is that I want the box to match the main sites "dark blue" band's height. Changing the CSS and using like height: 80%; isn't quite working here.
I also wanted to center the light blue box to the center ( I am also going to change the width of it to just fit the content that it holds).
This is my first time applying CSS, so I'm not sure what I'm doing here. I am not able to edit the code directly, just put in CSS "options".
My code is:
<div id="topbar" style="position:fixed; top: 20; padding:0; margin:0; width: 50%; z-index: 99999;opacity:.7; height:80%;" >
<div id="wptbheadline1" style="background-repeat: no-repeat; vertical-align:middle; family:georgia; padding-right:10px; padding-left:10px;" >Check out our Twitter
<a style="" HTML Option B</a>
</div>
</div>
I think this is what you're looking to achieve; See below.
#topbar {background: orange;color:#fff;} /* ignore this css */
<div id="topbar" style="position:fixed; top: 20; padding:7px 0; margin:0; width: 50%; z-index: 99999;opacity:.7; transform: translateX(50%); text-align: center" >
<div id="wptbheadline1" style="background-repeat: no-repeat; vertical-align:middle; family:georgia; padding-right:10px; padding-left:10px;" >Check out our Twitter
<a style="" HTML Option B</a>
</div>
</div>
Adjust the padding :7px 0; to fit the height.
Fiddle of the issue: http://jsfiddle.net/Vy365/3/
I'm trying to create sections on a page that have a parallax scrolling effect.
The main CSS I'm using to achieve this is background-attachment: fixed for the background image, and position: fixed for the text on top of the image.
I have multiple div's with this effect on the page, and I want each section to cover up those that come before it.
HTML:
<section>
<div id="parallax-1" class="parallax">
<div class="title">
<h1>Fixed Text 1</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
<section>
<div id="parallax-2" class="parallax">
<div class="title">
<h1>Second Fixed Text</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
CSS:
.parallax {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
max-width: 1920px;
height: 200px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0;
z-index: 1;
}
.parallax .title {
position: fixed;
top: 80px;
}
#parallax-1 {
background-image: url(http://placekitten.com/500/200);
}
#parallax-2 {
background-image: url(http://placekitten.com/500/202);
}
.scrolling-content {
position: relative;
width: 100%;
height: 200px;
background: #ffffff;
z-index: 2;
}
The background images cover up one another appropriately, however the fixed text remains fixed on the page (once again, see the fiddle).
Is there any way to fix this with CSS? Or do I have to do some yucky jquery window scroll monitoring?
Think you want to use position:absolute instead of position:fixed on your '.parallax .title' class
Since you are using jQuery anyway, why don't you try a plug in like http://stephband.info/jparallax/ ?
EDIT: For mobile apps, you may want to check out Skrollr. It is pure Javascript, and there are some really good examples in the "In the wild" section.
It can help you from re-inventing the wheel.
Here are two tutorials (both using Skrollr.js) which might help others trying to create a similar parallax scrolling effect.
How to create a parallax scrolling website
Simple parallax scrolling tutorial
I have a container and dynamically generated div in the container.
HTML
<div id="overlay">
</div>
<div id="cont">
<div id="e1">
Some
</div>
<div id="e2">
Content
</div>
</div>
CSS
#cont{
position: fixed;
top:40%;
left:20%;
z-index:999;
color:#a8a8a8;
}
#overlay{
position:fixed;
background: rgb(0,0,0);
opacity: 0.5;
width:100%;
height:100%;
top:0;
left:0;
z-index:1000;
}
#e2{
z-index:1001;
}
Check this jsfiddle: http://jsfiddle.net/UkbXU/
I have an overlay with z-index 1000 and background rgba(0,0,0,0.5) and the photo container is behind overlay i want only one element to be above overlay, that is with z-index 1001. There are other elements in the container, i do this to show element highlighted effect. But creating a class with z-index: 1001 does'nt bring the element above overlay.
How can i set the z-index of one element to be greater than container?
you have to move the overlay-div into the content-div:
<div id="cont">
<div id="overlay"></div>
<div id="e1">
Some
</div>
<div id="e2">
Content
</div>
</div>
and position #e2 have to set to relative. See http://jsfiddle.net/UkbXU/10/
Otherwise it is impossible, because #cont and #overlay are both creating new stacking contexts. These couldn't be merged again.
Try
#e2{
z-index:1001;
position: absolute;
}
It should make the trick.
If not try:
#e2{
z-index: 9999 !important;
position: absolute !important;
top: 0px; //you can change that
left: 0px; //you can change that
}
If it is still not working, well probably some javascript is setting bigger z-indes tahn 9999 to #overlay.
Consider a web page consisting in a background part that holds an image on top of which I would like to create an animation (for example image=sky and animation=moving-clouds). This thing is 100% width.
On this "canvas", a 100% content part should be placed.
The reason why I am asking this question is because I can simply achieve something like this working with divs and absolute positioning. But I do not know how to make something like this when divs have a 100% width!
I would be able to write something like this:
<div id='canvas' style='width:100%;background-image:...'>
<div id='cloud1' style='...'></div>
<div id='cloud2' style='...'></div>
<div id='cloud3' style='...'></div>
</div>
<div id='cont' style='width:100%'>
my content here
</div>
Styling canvas and cont so that cont appears on canvas and elements like clousx are moved by javascript but they live behind cont.
How to achieve this?
I don't know if I got you right, but you can do it exactly the way you want it. So this is a combination of width: 100%; and position: absolute;.
Demo
Try before buy
The demo uses for demonstration purposes the background-property with a CSS3 rgba-value.
CSS
div.outer {
position: absolute;
width: 100%;
height: 100%;
border:1px solid red;
}
div.text {
background: rgba(255,255,255,0.5);
}
div.cloud {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
border: 1px solid red;
}
HTML
<div class="outer">
<div class="cloud"></div>
</div>
<div class="outer text">
Content goes here
</div>
I am trying to put some HTML text over an image that has been popped out using lightbox effect. For this i am using 3
box - the popped out div with lightbox effect
address_box - the div inside the box which is nothing but an outline image
address - i want this div to be imposed upon the address_box image
HTML:
<div class="box">
<div id="move_in_img"><img src="img/ready-to-move-in.gif" /></div>
<div id="address_box"><img src="img/address-box.png" />
<div id="address">The address text
</div>
</div>
CSS:
.box
{
position:absolute;
top:20%;
left:12%;
text-align:center;
width:940px;
height:321px;
background:#F9E5B9;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display:none;
}
.box #move_in_img{
float:left;
margin-left:20px;
margin-top:50px;
}
#address_box{
position:relative;
}
#address{
position:absolute;
}
the "box" properties are set to give it a lightbox effect and i cant change it from absolute to relative. I have searched a lot and experimented with positioning and z-index but all failed. The text simply appears below the address_box.
What i am trying to do is implement lightbox effect but dont want the text to be displayed as image. M i taking the right approach or there is a better way ??
Here is the paste bin link http://jsbin.com/anehey/1/edit
Just picked a sample image from net for the frame. I want the text to go inside the frame..
Am not getting the thing you are trying to do here as no working demo is provided, generally when you want to do such thing, use position: relative; for the container div and use position: absolute; width: 100%; & bottom: 0; for the imposed text div
HTML
<div class="container">
<img src="#" />
<div class="text"></div>
</div>
CSS
.container {
position: relative;
/*Set Height Width Accordingly*/
}
.text {
position: absolute;
bottom: 0;
height: /*Whatever*/;
width: 100%;
}
Demo (Not related to my answer but I fixed what he was asking for)