How to get background of light box to fill the entire page - javascript

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

CSS: position absolute has conflicting screen width with position fixed in chrome when there's a vertical overflow

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!

Change the background of nav when scroll

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>

How to position <div> absolute to parent and relative to neighbors

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.

click next and previous to show overflow div

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>

How to change styles of several child divs of a 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 .

Categories