I am using VideoJS as my HTML5 video player and I am trying to add a sidebar for additional custom controls. My custom bar is visible and functioning in normal view mode but disappears in fullscreen view mode.
Here is some code ...
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Video | Player</title>
<!-- VIDEOJS -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<!-- VIDEOJS ERRORS -->
<script src='videojs.errors.js'></script>
<link href='videojs.errors.css' rel='stylesheet'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- STYLES -->
<style type="text/css" media="screen">
* { padding:0; margin:0; }
body { background-color: #000; }
#player{
overflow: hidden;
position: relative;
}
#slider{
/*display: none; /* Start hidden */
/*height: 100%;*/
position: absolute;
/* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
top: 0;
/* 100% height of player div */
bottom: 0em;
right: 0;
/* Controls are absolutely position, so no padding necessary */
padding: 0;
margin: 0;
/* Width includes any margin you want above or below control items */
width: 2.0em;
background-color: rgb(0, 0, 0);
/* Slight blue so it can be seen more easily on black. */
/*background-color: rgba(7, 40, 50, 0.7); */
font-style: normal;
font-weight: normal;
font-family: Arial, sans-serif;
overflow:hidden;
z-index:1101;
}
#slider #arrow{
width:2em;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1103;
background-color: rgb(233, 191, 44);
}
#slider #arrow img{
padding:0;
margin:0 0 0 3px;
position:absolute;
top:45%;
}
#slider #arrow img:hover{
opacity:.75;
filter:alpha(opacity=75); /* For IE8 and earlier */
}
#slider #main{
width: -moz-calc(100% - 2em);
width: -webkit-calc(100% - 2em);
width: -o-calc(100% - 2em);
width: calc(100% - 2em);
height: -moz-calc(100%);
height: -webkit-calc(100%);
height: -o-calc(100%);
height: calc(100%);
position:absolute;
top:0;
left:2em;
padding:0;
z-index:1102;
}
#slider #main #mainContent{
width: 100%;
height: -moz-calc(100% - 7%);
height: -webkit-calc(100% - 7%);
height: -o-calc(100% - 7%);
height: calc(100% - 7%);
}
#slider #main #mainFooter{
width: 100%;
height: 7%;
}
.video-js { margin:0 auto; }
.vjs-fullscreen { padding-top: 0px }
.vjs-default-skin .vjs-big-play-button { top: 50%; left: 50%; margin: -4em auto auto -6em; }
.vjs-default-skin .vjs-control-bar { right:3.25em; }
</style>
<script>
$(document).ready(function(){
var w=window.innerWidth;
var h=window.innerHeight;
var myPlayer = videojs("example_video_1");
if(w/16 > h/9) {
var r = (w - (16*(h/9)) ) / 2;
myPlayer.dimensions((16*(h/9)),h);
document.getElementById('slider').style.right = r + 'px';
} else {
var r = (h - (9*(w/16)) ) / 2;
myPlayer.dimensions(w, (w/16) * 9);
document.getElementById('player').style.marginTop = r + 'px';
}
});
</script>
</head>
<body>
<div id="player">
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="http://www.videojs.com/img/poster.jpg" data-setup='{"example_option":true}'>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
<source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
</video>
<div id="slider">
<div id="arrow">
<img id="arrowImg" src="http://placehold.it/18x32" />
</div>
<div id="main" style="">
<div id="mainContent" style="">
<div style="width:47%; height:44.5%; padding: 2% 1% 1% 2%; float:left;">
<div style="width:100%; height:100%;">
</div>
</div>
<div style="width:47%; height:44.5%; padding: 2% 2% 1% 1%; float:left;">
<div style="width:100%; height:100%;">
</div>
</div>
<div style="width:47%; height:44.5%; padding: 1% 1% 2% 2%; float:left;">
<div style="width:100%; height:100%;">
</div>
</div>
<div style="width:47%; height:44.5%; padding: 1% 2% 2% 1%; float:left;">
<div style="width:100%; height:100%;">
</div>
</div>
</div>
<div id="mainFooter" style="background:#e9bf2c;">
</div>
</div>
</div>
</div>
<!-- CUSTOM -->
<script type="text/javascript">
// Once the video is ready
videojs("example_video_1").ready(function(){
var myPlayer = this; // Store the video object
var aspectRatio = 9/16; // Make up an aspect ratio
//myPlayer.play();
this.errors();
});
$(document).ready(function(){
var h=window.innerHeight;
var w=window.innerWidth;
var r = 0;
if(h/9 > w/16) {
r = w;
} else {
r = (16*(h/9));
}
var nr = r + 'px';
var toggle = true;
$("#arrow").click(function(){
var div=$("#slider");
if(toggle) {
div.animate({width:nr},"slow");
} else {
div.animate({width:'2em'},"slow");
}
toggle = !toggle;
});
});
Instead of making the video fullscreen, put the video an the sidebar into a container and make that container fullscreen, using the HTML5 fullscreen API as described in http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API.
myPlayer = videojs('example_video_1');
myPlayer.one("click",function () {
this.requestFullscreen();
});
Related
edit/update
I have updated my code and fixed some errors. Now I am trying to fix my footer to stay at the bottom, my menu will not center, and I am trying to have the gallery between header and footer without being clipped by the header. Everything was working until I added the horizontal scroll gallery.
I am trying to achieve the layout:
header top
menu in a line
content/horizontal scroll gallery middle
footer/social icons bottom
Please help
codepen link
/**********************************
General
**********************************/
body {
font-family: 'Roboto', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration:none;
}
/**********************************
Heading
**********************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
height: 150px;
position:fixed;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Passion One', cursive;
margin: 15px 0;
font-size: 5em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Comfortaa', cursive;
font-size: em;
margin: -5px 0 0;
font-weight: normal;
}
/**********************************
Navigatoin
**********************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
position: fixed;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/**********************************
Body
**********************************/
#content {
height: 100%;
margin: 0 0 0 0;
top: 0;
}
/**********************************
Footer
**********************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
position: fixed;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
.fttext {
text-align: center;
}
/**********************************
Colors
**********************************/
/* site body */
body {
background-color: #C9BD7C;
color: #5B0123;
}
/* green header */
header{
background: #5B0123;
border-color: #5B0123;
}
/* nav background on mobile devices */
nav {
background: #B41C42;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #C86347;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #F8D295;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Passion+One|Roboto:400,500" rel="stylesheet">
</head>
<!-- content goes here-->
<body>
<header>
<a href="index.html" id="logo">
<h1>Natalie Davis</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="content">
<div id="img-container">
<div class="picture_holder" style="width: 573px;">
<div class="picture" style="width: 543px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" width="543" height="600" alt="">
<div class="captioning">
<div class="title">link - Test caption and link</div>
<div class="caption">stuff </div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 1124px;">
<div class="picture" style="width: 1094px;">
<img src="https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg" width="1094" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 382px;">
<div class="picture" style="width: 352px;">
<img src="http://www.tonyandsonsnurseries.com.au/images/Plants/Frangipani/FruitSaladLarge.jpg" width="352" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 439px;">
<div class="picture" style="width: 409px;">
<img src="http://www.beautifulflowerpictures.com/blog/wp-content/uploads/2008/10/beauty_berry_issai_31.jpg" width="409" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 752px;">
<div class="picture" style="width: 722px;">
<img src="https://freedfromtime.files.wordpress.com/2016/08/farmopolis-flowers-dsc_6487.jpg?w=722&h=600" width="722" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 1094px;">
<div class="picture" style="width: 1064px;">
<img src="https://www.openfootage.net/Openfootage/Vorschau/00299_GelbeBluete/00299_GelbeBluete_Preview_v01.jpg" width="1064" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 1525px;">
<div class="picture" style="width: 1495px;">
<img src="https://static.wixstatic.com/media/09a7b6_b09cf68226774f6d8af396d240573130.jpg/v1/fill/w_1495,h_600,al_c,q_85,usm_0.66_1.00_0.01/09a7b6_b09cf68226774f6d8af396d240573130.webp" width="1495" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 560px;">
<div class="picture" style="width: 530px;">
<img src="http://www.besgroup.org/wp-content/uploads/SunbirdBrTh-Costus-JWee-1.jpg" width="530" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<!-- mousewheel java script -->
<script type="text/javascript">
function handle(delta) {
if (delta < 0)
ScrollSmoothly(10, 10, 'right');
else if (delta > 0)
ScrollSmoothly(10, 10, 'left');
else
;
}
function wheel(event) {
var delta = 0;
if (!event)
event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera)
delta = -delta;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
var repeatCount = 0;
function ScrollSmoothly(scrollPos, repeatTimes, direction) {
if (repeatCount < repeatTimes)
if (direction == 'right')
window.scrollBy(20, 0);
else
window.scrollBy(-20, 0);
else {
repeatCount = 0;
clearTimeout(cTimeout);
return;
}
repeatCount++;
cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','" + repeatTimes + "','" + direction + "')", 10);
}
/* Initialization code. */
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
</script>
<style type="text/css">
#img-container {
width: 6450px;
}
#img-container #text {
float: left;
width: 675px;
}
#img-container #text p {
width: 600px;
}
#img-container .picture_holder {
float: left;
}
#img-container .picture {
/* padding-top: 100px; */
}
#img-container .captioning .title {
margin-top: 12px;
font-weight: bold;
}
#img-container .captioning .caption {}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</section>
</div>
<footer class="fttext">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
<p>© 2018 Natalie Davis.</p>
</footer>
</body>
</html>
Looking at the code you've posted, in your CSS, your menu styles were targeting an ID, whereas, in your HTML, your menu code had a class instead. Changing the CSS for menu to a class instead of an ID, the styles are then applied, and if the position is changed from absolute to fixed, it then behaves as desired.
.menu {
width: 960px;
margin: 0 auto;
position: fixed;
text-align: center;
background-color: darkred;
}
So I have this video background made for a website. Now I don't really know how I turn my CSS so it gives a background image for tablets and mobile devices instead of the video.
I hope anyone can help me out with this.
Thanks in advance.
$( document ).ready(function() {
// Resive video
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
/** Reusable Functions **/
/********************************************************************/
function scaleVideoContainer() {
var height = $(window).height();
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width'),
windowAspectRatio = windowHeight/windowWidth;
if (videoAspectRatio > windowAspectRatio) {
videoWidth = windowWidth;
videoHeight = videoWidth * videoAspectRatio;
$(this).css({'top' : -(videoHeight - windowHeight) / 2 + 'px', 'margin-left' : 0});
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
}
$(this).width(videoWidth).height(videoHeight);
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .title-container {
z-index: 1000;
position: absolute;
top: 35%;
width: 100%;
text-align: center;
color: #fff;
}
.video-container .description .inner {
font-size: 1em;
width: 45%;
margin: 0 auto;
}
.video-container .link {
position: absolute;
bottom: 3em;
width: 100%;
text-align: center;
z-index: 1001;
font-size: 2em;
color: #fff;
}
.video-container .link a {
color: #fff;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
object-fit: cover;
}
.video-container video.fillWidth {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="intro" class="parallax-section">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="homepage-hero-module">
<div class="video-container">
<div class="title-container">
<div class="headline">
<h1>Welcome to our Company</h1>
</div>
<div class="description">
<div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</div>
</div>
<div class="filter"></div>
<video autoplay class="fillWidth">
<source src="http://video.blendertestbuilds.de/download.blender.org/peach/trailer_480p.mov" type="video/mp4" autoplay loop muted />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" autoplay loop muted />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class="poster hidden">
<img src="images/background.jpg" alt="">
</div>
</div>
</div>
<div class="container" id="content">
<!-- adding this soon -->
</div>
</section>
I need to show a lightbox by clicking on a link. The issue is once the lightbox is shown I should click on the lightbox buttons or change the screen-size to see the images. It seems like the images wont get loaded once the link is clicked.
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<title>slick - the last carousel you'll ever need</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/style.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/prism.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>
<style>
#pageOverLay {
background: #fff none repeat scroll 0 0;
margin-left: 43%;
margin-top: 10%;
position: absolute;
width: 500px;
z-index: 1001;
display:none;
}
#pageOverLay-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
z-index: 1000;
display: none;
}
#pageOverLayCloseBtn{
position:absolute;
top:0;
right:0;
}
.slick-slider {
margin: 30px auto 50px;
}
.slick-slider {
-moz-user-select: none;
box-sizing: border-box;
display: block;
position: relative;
}
</style>
</head>
<body>
<a onclick="showLightBox();" href="#">Click Here to show lightbox</a>
<div id="pageOverLay-shadow"></div>
<div id="pageOverLay">
<div id="pageOverLayCloseBtn">X</div>
<h2>Images</h2>
<div class="slider fade">
<div><div class="image"><img src="http://wowslider.com/sliders/demo-94/data1/images/photo1427806208781b36531cb09ef.jpg"/></div></div>
<div><div class="image"><img src="http://wowslider.com/sliders/demo-94/data1/images/photo142855067022515f007f6f1ba.jpg"/></div></div>
<div><div class="image"><img src="http://wowslider.com/sliders/demo-94/data1/images/photo1428452788387375d846a8ab4.jpg"/></div></div>
</div>
</div>
<script src="view-source:http://kenwheeler.github.io/slick/code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="view-source:http://kenwheeler.github.io/slick/code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/js/scripts.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/js/prism.js"></script>
<script type="text/javascript">
function showLightBox(){
$("#pageOverLay-shadow").css("display","block");
$("#pageOverLay").css("display","block");
}
function pageOverLayClose(){
$("#pageOverLay-shadow").css("display","none");
$("#pageOverLay").css("display","none");
}
var disqus_shortname = 'slickcarousel';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</body>
</html>
The css-attribute display:none; on div does the browser prevent from render or even load the image inside that element.
There is a good explanation: Does “display:none” prevent an image from loading?
Just exchange "display: none;" with "visibility:hidden;" and update your JavaScript -> see below.
CSS:
#pageOverLay {
background: #fff none repeat scroll 0 0;
margin-left: 43%;
margin-top: 10%;
position: absolute;
width: 500px;
z-index: 1001;
visibility:hidden;
}
#pageOverLay-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
z-index: 1000;
visibility: hidden;
}
JS/jQuery:
...
function showLightBox() {
$("#pageOverLay-shadow").css("visibility", "visible");
$("#pageOverLay").css("visibility", "visible");
}
...
I updated the jsfiddle: http://jsfiddle.net/dm3Lea95/4/
(fixed also the "close" button ;))
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What's The Best Way of Centering a Div Vertically with CSS
This might be a CSS question or it might be a JavaScript question or it might be an HTML question.
How do I center a vertically?
I have managed to horizontally align a Div object. Here is how I did it. I got the width and the height of the object I wanted to center (XAML CODE)
<Grid Background="White" Height="300" Width="738" VerticalAlignment="Center" HorizontalAlignment="Center">
Then, in the html file that hosts the silverlight control I did this:
<div id="silverlightControlHost" style="width:738px; height: 300px; margin-top:auto; margin-bottom:auto; margin-left: auto; text-align:center; margin-right: auto;">
That puts the control centered horizontally at the top of the web page.
Now, how do I center it vertically?
I tried to apply this code
And it did not work
Here is my whole html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>SilverlightApplicationThree</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
margin-left: auto;
margin-right: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// vertical align function
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2); //var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
$('.silverlightControlHost object').vAlign();
});
</script>
</head>
<body><center>
<form id="form1" runat="server">
<div id="silverlightControlHost" style="width:738px; height: 300px; margin-top:auto; margin-bottom:auto; margin-left: auto; text-align:center; margin-right: auto;">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" >
<param name="source" value="Bin/Debug/SilverlightApplicationThree.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
</form>
</center>
</body>
</html>
This fixed the problem. Knowing the height and width of the control, I used this
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
top:50%;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
margin-left: -369px;
left:50%;
margin-right: auto;
margin-top:-150px;
position:fixed;
top:50%;
}
</style>
<div id="silverlightControlHost" style="width:738px; height: 300px; margin-bottom :auto; text-align:center; margin-right: auto;">
How about something like the following?
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<style type="text/css">
html, body {
position: relative;
margin: 0;
height: 100%;
padding: 0;
background: black;
}
.wrap {
/* Place top of wrap at center of page */
position: absolute;
top: 50%; right: 0; left: 0;
background: white;
}
.inner {
/* Negative margin to bring back up page (half of height) */
margin: -150px auto;
width: 738px;
height: 300px;
background: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
</div>
</div>
</body>
</html>
I want to create a sort of light/thick box that only acts on a single DIV within a page.
When mine fires off the first div(phantom_back) acts as I want it but the second, phantom_top sets its self after phantom_back regardless of its z-index and positioning.
What am I doing wrong?
Here is what I have so far:
<html>
<head>
<script type="text/javascript">
<!--//
function phantom_back(image)
{
document.getElementById('phantom_back').style.zIndex = 100;
document.getElementById('phantom_back').style.height = '100%';
document.getElementById('phantom_back').style.width = '100%';
phantom_top();
}
function phantom_top(image)
{
document.getElementById('phantom_top').style.zIndex = 102;
document.getElementById('phantom_top').style.height = 600;
document.getElementById('phantom_top').style.width = 600;
document.getElementById('phantom_top').style.top = 0;
document.getElementById('phantom_top').style.left = 0;
}
//-->
</script>
</head>
<body>
Change
<div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
<div style="height: 10px; width: 10px; position: relative; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>
<div style="height: 10px; width: 10px; position: relative; z-index: -3; margin: 0 auto; background-color: green;" id="phantom_top">asdf</div>
</div>
</body>
</html>
I was wandering why none of the tutorials I've been able to find offer something like this.
So, I got it. I set an absolute positioning on phantom_back and instead of trying to restack them I just set the visibility. When I tried to set the z-index it would fall apart on me.
<html>
<head>
<script type="text/javascript">
<!--//
function phantom_back(image)
{
document.getElementById('phantom_back').style.height = 700;
document.getElementById('phantom_back').style.width = 700;
document.getElementById('phantom_back').style.zIndex = 50;
phantom_top();
}
function phantom_top()
{
document.getElementById('phantom_top').style.height = 600;
document.getElementById('phantom_top').style.width = 600;
document.getElementById('phantom_top').style.visibility = "visible";
}
//-->
</script>
</head>
<body>
Change
<div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
<div style="height: 10px; width: 10px; position: absolute; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>
<div style="margin: 0 auto; text-align: center; height: 10px; width: 10px; position: relative; z-index: 102; top: 10px; background-color: white; visibility: hidden;" id="phantom_top"><br /><br /><img src="load.gif"></div>
</div>
</body>
</html>
phantom_top is set to position:relative not absolute therefore it's currently not overlapping phantom_back.
Don't forget to concatenate a px string for height and width. You don't need the px for z-index
document.getElementById('phantom_back').style.height = 700 + "px";
Like that.