Why does an overlay not work in IE? - javascript

I have an overlay. If the user clicks on a box the overlay slides up. My problem now is, that the overlay works without any issues in Mozilla Firefox and Chrome. But in Explorer the overlay goes all over the display. How can I solve this problem for IE? Is there something I didnt see? Or do I need a plugin for that?
This picture shows the normal version which I want to work in IE.
At the Moment it looks like this in IE.
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.overlay').slideUp();
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
$('.overlay').on('click', function() {
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
.services-section {
background-color: #E6E6E6;
height: auto;
}
.services-section hr {
border-bottom: hidden;
width: 42px;
margin-left: 0px;
}
.services-section .services-detail {
border-radius: 4px;
transition: all 0.3s ease-in-out;
position: relative;
top: 0px;
padding: 60px 40px 60px 40px;
margin-top: 32px;
background-color:rgba(237, 238, 239, 0.8);
height: 500px;
}
.services-section .services-detail:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
top: -2px;
background-color:#FAFAFA;
color:#000;
}
.services-section .services-detail {
font-size: 60px;
color: #000;
margin-bottom: 10px;
}
.services-section .services-detail:hover .fa {
color: #fd2034;
}
.services-detail h5 {
color: #000;
font-size: 25px;
font-family: 'Poppins', sans-serif;
}
.services-detail:hover h5 {
color: #000;
}
.services-detail p {
color: #000;
font-size: 18px;
}
.services-detail:hover p {
color: #000;
}
.overlay{
display: none; /* Hidden by default*/
position: fixed; /* Stay in place*/
z-index: 1; /* Sit on top */
left: 0;
bottom: 2%;
width: 100%; /* Full width */
height: 92%; /* Full height */
border-radius: 10px;
overflow: auto; /* Enable scroll if needed
background-color: rgb(217,217,217); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
background-color: rgb(255,255,255);
-webkit-animation-name: slideIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
.overlay h3{
color: black;
text-align: left;
margin-left: 15%;
}
.overlay p {
font-size: 0.2em;
color: black;
float: left;
width: 100%;
}
.overlay a {
font-size: 0.8em;
color: black;
float:left;
}
.overlay-header {
padding: 1px 16px;
background-color: #fff;
color: black;
text-align: center;
border-bottom: 2px solid #ffcc00;
}
.overlay img{
width: 18%;
float: right;
margin: 1%;
margin-right: -20%;
}
.des{
margin: 15px;
font-size: 1em;
}
.overlay:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
background-color:#FAFAFA;
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provider Section Start -->
<section id="provider" class="services-section section-space-padding
mica-bg">
<div class="container">
<div class="section-title">
<i class="fa fa-paper-plane-o"></i>
<h3 class="white-color"><span>Blume</span></h3>
</div>
<div class="col-md-4 col-sm-6 3d-hover box">
<div class="services-detail hover-effect-2d top">
<i><img src="container/rfid/micarfid.png" alt="micarfid"
style="background-color:#ffcc00; border:5px solid #ffcc00; border-
radius: 10px; width:200px; margin-left:-15px;"></i>
<h5>Blume</h5>
<hr>
<p>This is a test for blume.</p>
</div>
<div class="overlay">
<div class="overlay-header">
<img src="test/blume.jpg" alt="blume" style="width:15%;float:right; margin-right:10%;margin-top:0.5%;background:#ffcc00;border:2px solid #ffcc00; border-radius: 10px;">
<h3>Blume</h3>
</div>
<div class="des">
<p>This is a test for blume.<</p>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Tutorial</p><i class="fa fa-youtubeOverlay fa-youtube-play"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">PDF-Doku</p><i class="fa fa-pdfOverlay fa-file-pdf-o" style="margin-top:-10px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Image Download</p><i class="fa fa-zipOverlay fa-file-archive-o" style="margin-top:-15px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:8px;">Application Download</p><i class="fa fa-imgOverlay fa-picture-o" style="margin-top:-80px;"></i>
<img src="images/application.png" alt="application" style="width:80%;float:left; margin-top:-20px;margin-left:50px;">
</div>
</div>
</div>
</div>
</section>
<!-- Provider Section End -->
<!-- Back to Top Start -->
<i class="fa fa-long-arrow-up"></i>
<!-- Back to Top End -->
<!-- All Javascript Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>
<!-- Main Javascript File -->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/js.js"></script>


It's likely that this issue is caused by the use of position: fixed in your overlay element.
Position fixed elements geometry historically relates to the initial containing block (most often the viewport).
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning
For a full cross browser implementation try using position:absolute instead, making sure the containing element (div.box) makes use of position:relative.

Related

how to make button stay pressed down until pressed again

i have a button that expands a section with background image to show hidden text, but how do i make it so that i can just press the button once instead of haviing to hover it or hold down? and then press it again to return to its default state
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>TITLE</title>
</head>
<body>
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>
</body>
</html>
#charset "utf-8";
body{
background-color: white;
}
.mainPic{
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding:0;
margin:0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow{
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section{position:relative;}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#hidden-content:active #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#hidden-content:active .bottom-arrow{
position:absolute;
bottom:-25px;
transition: 0.25s ease-out;
}
........................................................................

I have never found a CSS-only solution regarding something like this, so using a splash of Javascript will help to toggle a different state using a class on your hidden-content container. Then, using the presence of the new class, you can edit the appearance of your HTML elements.
In other words, adding and removing a class can allow you to update it's appearance.
var trigger = document.querySelector('.bottom-arrow');
trigger.addEventListener('click', function(){
document.getElementById('hidden-content').classList.toggle('active');
});
body{
background-color: white;
}
.mainPic{
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding:0;
margin:0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow{
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section{position:relative;}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#hidden-content.active #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#hidden-content.active .bottom-arrow{
position:absolute;
bottom:-25px;
transition: 0.25s ease-out;
}
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>

Technically speaking you don't have a button. HTML standard includes a button element which is what people think of when speaking of buttons in web pages / web apps.
You want to toggle the hidden attribute based on the click event of an element.
var label = document.querySelector("label");
label.addEventListener("click", function () {
document.getElementById("list").toggleAttribute("hidden");
});
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger">CLICK ME</label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>

Using a checkbox with the label allows you to use its state.
body {
background-color: white;
}
.mainPic {
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding: 0;
margin: 0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow {
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section {
position: relative;
}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#trigger {
display: none;
}
#trigger:checked + label + #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#trigger:checked + label.bottom-arrow {
position: absolute;
bottom: -25px;
transition: 0.25s ease-out;
}
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<input type="checkbox" id="trigger">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>

Animated (shrinking) Resizing Header On Scroll in bootstrap

function openNav() {
document.getElementById("mySidenav").style.width = "50%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
(function ($) {
// Instantiate MixItUp:
// $('Container').mixItUp();
// Add smooth scrolling to all links in navbar + footer link
$(".sidenav a").on('click', function(event) {
event.preventDefault();
var datanew= this.href;
var str2 = '.html';
if(datanew.indexOf(str2) != -1){
window.location.href = datanew;
}else{
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top},
900, function(){
alert(window.location);
window.location.hash = hash;
});
}
});
})(jQuery);
$(window).click(function(event) {
if ($(event.target).closest('div#mySidenav').length === 0 && $(event.target).closest('.menu-icon').length === 0) {
closeNav()
}
})
#section0{
background-attachment: fixed;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: url(
https://images7.alphacoders.com/669/thumb-1920-669739.jpg);
background-origin: padding-box;
background-repeat: no-repeat;
background-size: cover;
background-position:center top;
}
.sidenav {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-color: #ef4f50;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
/*max-height: 551px;*/
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
.menu-icon
{
color: #114576;
font-size: 30px;
margin-top: 40px;
margin-left: 40px;
cursor: pointer;
}
.control {
margin-top: 15px;
margin-right: 40px;
}
.menu{
min-height: 100px;
}
/*#banner{
background: url(.././img/banner/bg.jpg) no-repeat center top;
background-size: cover;
min-height: 100%;
}*/
.logo-name{
font-size: 65px;
margin-top: 140px;
color: #FFB03B;
}
.bannertext{
margin-top: 80px;
}
.bannerelements{
margin-left: 20px;
}
.mahaGov{
width: 70%;
margin-top: 70px;
margin-bottom: 80px;
}
/* button custom style */
.btn-round{
border-radius: 17px;
}
.btn {
padding: 8px 25px;
border: 0 none;
text-transform: uppercase;
margin-left:10px;
margin-right: 10px;
margin-top:25px;
letter-spacing: 2px;
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
.btn-danger {
background: #ef4f50;
color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
background: #c03233;
}
.btn-danger:active, .btn-danger.active {
background: #c03233;
box-shadow: none;
}
.logo{
margin-left: 50px;
margin-top: 20px;
}
#buildingblocks{
padding-left: 3%;
padding-right: 3%;
}
.text-color{
color :#114576;
}
.ptext-size{
font-size: 1.4em;
font-weight: bold;
}
.text-white{
color :#ffffff;
}
/* Custom font effects */
h1{
margin-top: 1px;
margin-bottom: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section align-center" id="section0">
<div class="heading">
<header id="header">
<div id="mySidenav" class="sidenav">
×
Home
About Us
What We Do
Get Involved
Contact Us
</div>
<div class="control">
<div class="col-md-4">
<img src="http://findicons.com/files/icons/2796/metro_uinvert_dock/128/microsoft_new_logo.png" class="pull-left img-responsive logo" alt="SAF Logo">
</div>
<div class="col-md-8">
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" class="pull-right menu-icon">☰</span>
<button type="button" class="pull-right btn btn-danger btn-round donate" id="donate">DONATE NOW</button>
</div>
</div>
</header>
<div class="col-md-12 home-col12">
<div class="col-md-5">
<div class="bannertext bannerelements">
<h1>45% of youth</h1>
<h1>make the wrong</h1>
<h1>career and</h1>
<h1>life choices.</h1>
</div>
<div class="bannerelements">
<br>
<p class="text-color ptext-size">The Right Education can change that</p>
</div>
<div class="row">
<button type="button" class="btn btn-danger btn-round" style="margin-left: 40px;">BE A PART OF CHANGE</button>
</div>
<div class="row bannerelements mahaGov">
<img src="assets/img/home/banner/mahaGov1.png" class="pull-left img-responsive" alt="Govt. of Maharashtra Logo">
</div>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</div>
hello this code is for the menu-bar as well as section.my website is divided in sections.each section is full page height 100% for all screen.i want to set my header fixed on top but i want to shrink my menu or Resize my menu on Scroll of Page.as in this link "http://trungk18.github.io/Resizing-Header-On-Scroll/"

navbar top fixed shrink with a carousel without overlap

I want to get this effect: www.kemtecnia.com
This website has a navbar fixed top which shrinks on scroll down, has below a carousel fixed which seems to disappear by the content below.
How can I do in my code to get it?
I have the navbar top:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Desplegar menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="index.php">
<img src="img/logo.gif" class="img-responsive" alt="DIESIA Networking Academic Program - UHU" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
$i = 0;
foreach($menuItems as $menuItem => $url){
if($i == 0 && (basename($_SERVER['PHP_SELF']) == 'index.php') || (basename($_SERVER['PHP_SELF']) == ''))
echo "<li class='active'>\n";
else
echo "<li>\n";
echo $url . $menuItem . "</a>\n";
echo "</li>\n";
$i++;
}
?>
</ul>
</div>
</div>
but seems to overlap my carousel. The navbar shrinks too by js. I want to get that doesn't overlap my carousel and carousel dissapear with the rest of the content when scroll.
CSS of the navbar:
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
Thanks so much in advance!
Edit:
Codepen here: http://codepen.io/jesfer/pen/oLvQYY

don't know if this helps... but might be what you are looking for or atleast push you in the right direction.
http://codepen.io/MatthewBryce/pen/qZBPpp
HTML
<div class="headerWrap">
<div class="headerWrapContent">
Title
</div>
</div>
<div class="menuWrap">
<div class="menuNavigationFloat">
Home
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="headerMast">
This is a Header
</div>
<div class="contentWrap">
<h1>Page Content Bit</h1>
<p>A really simple sticky menu bar</p>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div><div class="wrap">
<div class="headerWrap">
<div class="headerWrapContent">
Stupidly simple stick-on-scroll Menu
</div>
</div>
<div class="menuWrap">
<div class="menuNavigationFloat">
Home
Link 1
Link 2
</div>
</div>
<div class="headerMast">
This is a Header
</div>
<div class="contentWrap">
<h1>Page Content Bit</h1>
<p>A really simple sticky menu bar</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
CSS
body {
color: #444;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
margin: 0px;
background: #222;
}
.headerMast {
background: #AAA;
min-height: 200px;
max-height: 200px;
margin-top: 0px;
text-align: center;
padding-top: 110px;
color: #FFF;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.headerMastAnim {
margin-top: -300px;
margin-bottom: 300px;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.wrap {
background: #444;
overflow: auto;
}
.headerWrap {
background: #222;
font-size: 30px;
height: 100px;
line-height: 100px;
font-weight: lighter;
color: #CCC;
}
.headerWrapContent {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.menuWrap {
background: RGBA(0,0,0,0.7);
color: #fff;
height: 55px;
line-height: 60px;
letter-spacing: 1px;
width: 100%;
margin-bottom: -55px;
-webkit-transition: 0.4s; /* Safari */
transition: 0.4s;
z-index: 100;
position: absolute;
}
.menuWrap.sticky {
position: fixed;
top: 0px;
height: 30px;
line-height: 30px;
-webkit-transition: 0.4s; /* Safari */
transition: 0.4s;
}
.menuNavigationFloat {
background: RGBA(0,0,0,0.5);
padding: 0px 20px;
width: 80%;
height: inherit;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: hidden;
}
.menuNavigationFloat a{
list-style: none;
color: #FFF;
font-size: 16px;
width: 170px;
height: auto;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 2px;
display: inline-block;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: background 0.4s, width 0.3s;
}
.menuNavigationFloat a:hover{
text-decoration: none;
width: 200px;
transition: background 0.4, width 0.3s;
}
.menuNavigationFloat a:nth-child(1) { background: #CC2222; }
.menuNavigationFloat a:nth-child(1):hover { background: #FF3333; }
.contentWrap {
background: #EEE;
width: 80%;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 80px;
min-height: 1000px;
}
JS
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.menuWrap').addClass("sticky");
$('.headerMast').addClass("headerMastAnim");
}
else{
$('.menuWrap').removeClass("sticky");
$('.headerMast').removeClass("headerMastAnim");
}
});
http://codepen.io/MatthewBryce/pen/qZBPpp

to make a div inside a div always in middle of the page

I am making a responsive gallery page but got stuck. All i want is to make my .gallery-container in middle in any width. There's a gap in right side which is not equal to left side. Is there any way to maintain the gap between left and right side equal so that the gallery div will be always in middle of the page in any width?
If there is, it will help me alot
heres my code
It's complicated because i have given width to image and without giving width i cant display bigger image while going to a link a. So, all i need is to make the half of the space of right side to left side also. I now figure out that's the work of js. If you can then do help me.
.sj-main-content-inner {
max-width: 100%;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
margin: 0;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
float: left;
position: relative;
margin-right: 25px;
width: 360px;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="sj-main-container">
<div class="sj-main-content">
<div class="sj-main-content-inner">
<h1>Foto Gallery</h1>
<ul class="gallery-container">
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="http://upper.dev/swiss-japon/suissejapon110216/?gallery=fotos">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>

Use this code:
.sj-main-content-inner {
width: 100%;
margin: auto;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
max-width: 800px;
height:100%;
background: #000;
margin:auto;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
position: relative;
width: 360px;
margin:auto;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
Now for making it responsive play with the values in his code and add it just where your CSS ends. For reference use this link
#media only screen and (max-width: 700px) {
.gallery-container{
width:500px;
margin:auto;
}
}
Whenever you have to position a body to the centre use this as a trick:
<selector>{
width:<x>px;
margin:auto;
}
You can specify the top and bottom margin using margin-top and margin-bottom below margin:auto; but once you use this you can not set margin-left or margin-right.(But then you won't be requiring margin let/right because you are positioning the div in centre).

Problem solved by using jquery
$(function() {
function updateDivPosition() {
var myWidth = $( '.gallery-title' ).width(), myHeight = $( '.gallery-title' ).height();
$( '.gallery-title' ).css( {
marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
});
}
updateDivPosition(); // first time set correct position on onload
$( window ).resize( updateDivPosition ); // update on window resize
});

How to make bottom top layer of website transparent to background slideshow?

Ok so I have a function that slideshow a background in the background of the site . I want the Navigation Links to be transparent and the body to be transparent. Not transparent as in no color , transparent as in you can see the slideshows in the background.
<script>
$(document).ready(function() {
function test() {
var count = $("img").size();
$("#background_images img").each(function(index) {
$(this).hide();
if (!--count)
$(this).delay(10000 * index).fadeIn(3000).delay(10000).fadeOut(1000, function() { test(); });
else
$(this).delay(10000 * index).fadeIn(3000).delay(10000).fadeOut(1000);
});
}
test();
});
-->
</script>
<style>
body, html{
margin:0;
padding: 0;
background: #000;
filter: alpha (opacity=50);
background-attachment: fixed;
width: 100%;
height: 100%;
}
html { overflow: hidden; filter: alpha (opacity=50); }
body { overflow: auto; filter: alpha (opacity=50);}
#background_images img{
position: absolute;
top:0;
display:none;
width: 99%;
z-index: 1;
}
#container { width: 1000px; background: #fff; margin: 0 auto; border-left: 1px solid #000; border-right: 1px solid #000; position: relative; z-index: 2; }
#header { width: inherit; height: 0px; background: url(../images/header.png) no-repeat; }
#navbar { width: inherit; height: 35px; background: url(../images/navbar.png) repeat-x; border-top: 1px solid; border-bottom: 1px solid; }
/* navbar ul content */
#navbar ul { list-style-type: none; padding: 0; margin: 0; }
#navbar li { display: inline; float: left; padding-left: 15px; margin: 0; }
#navbar li a { display: block; width: 50px; height: 26px; padding: 5px; color: #000; text-decoration: none; text-align: center; }
#navbar li a:hover { background: #fff; color: #666; }
#content { width: inherit; background: url(../images/shadow.png) repeat-x top #fff; }
/* content div's "cont" class */
#content .cont { padding: 50px; }
#footer { width: inherit; height: 150px; filter: alpha(opacity=100); -moz-opacity:.40;
opacity:.40;
text-align: center; padding-top: 100% }
/* footer div's "cont" class */
#footer .cont { padding: 5px; }
#footer .footlinks a { color: #fff; text-decoration: none; }
</style>
</head>
<body>
<div id='background_images'><img src='ocean.jpg' /><img src='sky.jpg' /></div>
<div id="container">
<div id="header">
</div><!-- #header -->
<div id="navbar">
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="../ArtemaDeuzz/navigationImages/pic2.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Collections</span>
<span class="sdt_descr">Our work</span>
</span>
</a>
<div class="sdt_box">
Formal
Indigenous
Vintage
Retro
Modern
</div>
</li>
<li>
<a href="#">
<img src="../ArtemaDeuzz/navigationImages/pic3.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Entice Ur Match</span>
<span class="sdt_descr">Customize Your Own.</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="../ArtemaDeuzz/navigationImages/pic4.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Be A Designer</span>
<span class="sdt_descr">Up For A Challenge</span>
</span>
</a>
</li>
<li>
<div id="center">
<a href="#" id="popUpAbout">
<script>
</script>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Who Are We</span>
<span class="sdt_descr">Matt & Na'il</span>
</span>
</a>
</div>
</li>
</ul>
</div><!-- #navbar -->
<div id="content">
<div class="cont">
</div><!-- #content .cont -->
</div><!-- #content -->
<div id="footer">
<div class="cont">
<p>© 2012. All Rights Reserved. Designed by Matthew Harding. ©</p>
<p class="footlinks">Home | Test | Test | Test | Test</p>
</div><!-- #footer .cont -->
</div><!-- #footer -->
</div><!-- #container -->

If i understood your question, have you tried rgba, Look Here example:
div {
background: rgba(200, 54, 54, 0.5);
}
the last parameter is the opacity value.
I can't try all your code but look at this test, you can start with this base and do all the other changes you need, its working for the base of your html and with opacity working, you only have to see why in the rest of your code is making it change.
body, html{
background-color:#ffaadd;
width:100%;
height:100%;
}
#background_images
{
width:100%;
height:100%;
border:1px solid green;
background-color:#aaffdd;
position:absolute;
}
#content
{ top:0px;
position:absolute;
border:1px solid red;
}
#navbar{
border:1px solid blue;
position:relative;
background: rgba(200, 54, 54, 0.3);
}
#footer { width: inherit; height: 150px; filter: alpha(opacity=100); -moz-opacity:.40;
opacity:.40;
text-align: center; padding-top: 100% }
/* footer div's "cont" class */
#footer .cont { padding: 5px; }
#footer .footlinks a { color: #fff; text-decoration: none; }
Look how its working HERE

Categories

Resources