I currently have a lightbox effect affecting one of my buttons. Now it works fine, the only problem is the background is suppose to be dark black. However it only effects a certain bit of the pannel rather than the whole body.
So the codepen Example
Everything goes black. Which is what i am trying to make, however on mine it actually just goes black on a certain part.
HTML:
<div class="panel panel-default">
<div class="panel-heading"><b>Product</b></div>
<div class="panel-body">
<div class="pull-left col-xs-12 col-sm-4">
<a href="#">
<img class="img-thumbnail img-responsive" src="Image/coconut.jpg">
</a>
<a id="show-panel" class="btn btn-success btn-block btnrec" href="#">View product</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center"><a id="close-panel" href="#">Close this window</a></p>
</div>
<div id="lightbox"></div>
</div>
CSS:
/* Lightbox background */
#lightbox {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:700px;
height: 700px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
JS:
$(document).ready(function() {
$("a#show-panel").click(function() {
$("#lightbox, #lightbox-panel").fadeIn(300);
});
$("a#close-panel").click(function() {
$("#lightbox, #lightbox-panel").fadeOut(300);
})
});
Fiddle
So again just want everything to be black and the light box panel to attention
Thanks
Related
I am currently programming a site with a video banner set to fixed positioning in the background, and a div that has absolute positioning slightly covering part of the video on the bottom half. The problem is however, once I add this second div with absolute positioning, the width of the screen becomes bigger under the condition there is a vertical overflow on the screen contained within this div, which in turn messes up the video sizing.
Here is my code:
<div class="row" style="height: 5%;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: black; box-shadow: 0px 10px 5px #000000; z-index:5; padding:0;">
Search
</div>
</div>
</div>
<div class="container-fluid video" style="height:70%; z-index:5; padding:0; margin:0;">
<div class="row" style="padding:0; margin:0; height: 100%;">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" id="video-container" style="background-color:white; height:100%; padding:0; margin:0;">
<video autoplay="" loop="" style="position: fixed; right:0px; bottom: 0; min-width: 100%; min-height: 100%; transform: translateX(calc((100% - 100vw) / 2));">
<source src="beats/titlescreen.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="container-fluid header" style="background-color: red; position:absolute; height:100%;">
This is a test
</div>
Since I set a height of 100% in the last div seen in the above code, there is a vertical overflow on the page which makes the width slightly bigger than if there was no overflow (if you take away the 'height: 100%;' tag this will become apparent).
I am unsure why this happens, and why it is solely contained to Chrome. Any ideas?
is it posible to give the body an overflow: hidden;
<body style="overflow: hidden;">
<div class="row" style="height: 5%;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: black; box-shadow: 0px 10px 5px #000000; z-index:5; padding:0;">
Search
</div>
</div>
<div class="container-fluid video" style="height:70%; z-index:5; padding:0; margin:0;">
<div class="row" style="padding:0; margin:0; height: 100%;">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" id="video-container" style="background-color:white; height:100%; padding:0; margin:0;">
<video autoplay="" loop="" style="position: fixed; right:0px; bottom: 0; min-width: 100%; min-height: 100%; transform: translateX(calc((100% - 100vw) / 2));">
<source src="beats/titlescreen.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="container-fluid header" style="background-color: red; position:absolute; height:100%;">
This is a test
</div>
</body>
So after much playing around with, I have come to the conclusion that somehow the issue was due to having padding:0; along with left:0; and right:0; on the first div. I am not sure how this caused the issue, perhaps something to do with bootstrap? Anyway, thanks for the help guys!
I'm trying to change the background of NAV when i scroll. What i've done already is below. I don't know what else to do!
CSS
html, body{
margin:0;
padding:0;}html{
font-family: Poppins,sans-serif;}.jumbotron{
text-align:center;
color:red;
background-image: url(IMG/dyta.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
height:100vh;
padding-top:100px;}header{
z-index:1;
position:fixed;
display:flex;
width:100vw;
height:100px;
margin-left:80px;
font-size:20px;
line-height:100px;
color:white;}div.logo{
width:40%;}ul.header-menu-ul{
display:flex;}li.header-menu-li{
list-style:none;
margin-left:auto;
margin-right:auto;}.header-menu-li a{
text-decoration:none;
color:white;
text-transform:uppercase;
letter-spacing:2px;
font-weight: 600;
font-size:14px;
font-family: Poppins,sans-serif;}.header-nav.scrolled {
background-color: #fff;
transition: background-color 200ms linear;}
HTML
<header class="container-fluid header-nav">
<div class="logo text-center">
<i class="fab fa-google"></i>
</div>
<nav class="container-fluid nav-items text-center">
<ul class="header-menu-ul nav-links">
<li class="header-menu-li"><a title="AboutUs" href="#">About Us</a></li>
<li class="header-menu-li"><a title="Services" href="#">Services</a></li>
<li class="header-menu-li"><a title="OurProjects" href="#">Our Projects</a></li>
<li class="header-menu-li"><a title="News" href="#">News</a></li>
<li class="header-menu-li"><a title="Contact" href="#">Contact</a></li>
</ul>
</nav></header>
<div class="jumbotron section text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
JavaScript
$(function () {$(document).scroll(function () {
var $nav = $(".header-nav");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});});
I've been stuck in this for 3 days and i don't know what else to do! I don't kno where my problem is.Can anyone please help me??
try this
$(function () {
$(document).scroll(function () {
if($(this).scrollTop() > $(".header-nav").height()) {
$(".header-nav").addClass('scrolled');
}
});
});
make sum height for your content to see your code works, see this: https://codepen.io/anon/pen/bzbOzv
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
I'm working on a simple little project right now and I can't seem to figure out the styling.
Basically, what I need to do is position a 'div' a certain number of pixels down from the top of its parent. To do this I made its position absolute and set top to whatever pixel offset I need. The problem with this is sometimes two 'div's will be at the same vertical position (or close to it) in the parent and will overlap. I need to have them line up side by side horizontally when they are overlapping. I know how to do this with a position of relative and the float property but this then breaks the vertical positioning.
The boxes are inserted dynamically with jQuery and their positions can change frequently.
Here is a jsfiddle to demonstrate.
HTML
<div class="main">
This is okay
<div style="top: 25px;" class="sub">
<h3>
test
</h3>
</div>
<div style="top: 100px;" class="sub">
<h3>
test
</h3>
</div>
<div style="position: absolute; top: 200px;">
This is the problem
</div>
<div style="top: 250px;" class="sub">
<h3>
test
</h3>
</div>
<div style="top: 260px;" class="sub">
<h3>
test
</h3>
</div>
</div>
CSS
.main {
background-color: grey;
height: 700px;
}
.sub {
border: thin solid black;
position: absolute;
}
you may make the sub div's inside other div and give this one absolute position
.main {
position:relative;
background-color: grey;
width:100%;
height:auto;
}
.sub {
position: absolute;
top:100px;
width:100%;
}
.child {
border:2px solid black;
width:500px;
height:500px;
margin:10px auto;
}
<div class="main">
<div class="sub">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
if you want them horizontally add to .child
float:left;
width:47%;
margin:1%;
As far as I can tell this isn't solvable with CSS. I ended up doing some decently complex javascript to detect collisions and reposition the div's appropriately.
I have a lot of overflow:hidden; items, how can I show overflow:hidden; items when I click next and previous like in my example below? I would also like to have moving forward and backward effect. I have tried some plugin but it doesn't work when I click next and prev. Any idea of how to do that easily ?
.container{
width:580px;
height:70px;
background:#ccc;
overflow-y:hidden;
}
.item{
display:inline-block;
z-index:5;
background:#fff;
margin:5px;
padding-top:10px;
width:100px;
height:50px;
text-align:center;
}
.prev , .next{
cursor:pointer;
width:50px;
}
.prev:hover , .next:hover{
background:#000;
color:#fff;
}
<div class="prev">Prev</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div class="next">Next</div>
I'm making a navigation and I don't want to use CSS3 to make gradient background instead of that i use images. But buttons has corners so my button is made from 3 images to make its size proportional to text. I am trying to change background on hover and I need to change all 3 backgrounds: left, right and mid. I tried jquery but it doesn't seem to work..
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$('.topnavbtn').mouseenter(function(){
$(this).$('.left').css('background','url(images/nav/images/navLeft_on.png) no-repeat');
$(this).$('.mid').css('background','url(images/nav/images/navBg_on.png) no-repeat');
$(this).$('.right').css('background','url(images/nav/images/navRight_on.png) no-repeat');
}).mouseout(function(){
$(this).$('.left').css('background','url(images/nav/images/navLeft.png) no-repeat');
$(this).$('.mid').css('background','url(images/nav/images/navBg.png) no-repeat');
$(this).$('.right').css('background','url(images/nav/images/navRight.png) no-repeat');
});
});
</script>
HTML:
<ul style="list-style-type: none; margin:0; padding:0;padding:10px;">
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
</ul>
And CSS:
.topnavbtn {
height:34px;
float:left;
display:inline-block;
margin:7px;
font-weight:bold;
text-transform:uppercase;
color:#FFF;
line-height: 34px;
}
.topnavbtn .left {
height:34px;
width:9px;
background:url(images/nav/images/navLeft.png) no-repeat;
float:left;
display:inline-block;
}
.topnavbtn .right {
height:34px;
width:9px;
background:url(images/nav/images/navRight.png) no-repeat;
float:left;
display:inline-block;
}
.topnavbtn .mid {
background:url(images/nav/images/navBg.png) repeat-x;
height:34px;
width:auto;
float:left;
display:inline-block;
}
This is a syntax error :
$(this).$('.left').css(...
try
$('.left', this).css(...
Just replace
$(this).$('.left')
with
$(this).children('.left')
and so on for rest of classes .