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>
Related
Here is my problem:
I have image in one div that is centered into that div.
I want that that image go in header after user scroll once (scroll>50).
Here is my codepen example.
HTML:
<header> <div id="nav"> LINK LINK LINK </div> </header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
CSS:
*{
padding:0;
margin:0;
overflow-x:hidden;
}
#nav{float:right; line-height:70px;}
header{
width:100%;
position:fixed;
padding-left:10%;
padding-right:10%;
background:#fff;
height:70px;
}
#main{
padding-top:100px;
text-align:center;
height:800px;
background:#3cb5f9;}
#main img{width:200px; margin:0 auto;}
There are a ton of ways to do this, but a quick way to achieve this is to duplicated the image so there is a copy of it in the main and the header. On load, have it hidden within the nav. Then, have a scroll event listener that watches for an offset of >50.
If true, => hide main image, and show nav image
If false => show main image. and hide nav image.
Also worth noting I updated the height of main to be 200vh — just to simulate content. This is not related to the answer.
$(function(){
$(window).bind('scroll', function(){
if($(window).scrollTop() >= 50){
$("#main img").hide();
$("header img").show();
}else{
$("#main img").show();
$("header img").hide();
}
});
});
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
#nav {
float: right;
line-height: 70px;
}
header {
width: 100%;
position: fixed;
padding-left: 10%;
padding-right: 10%;
background: #fff;
height: 70px;
}
header img {
display: none;
width: 50px;
margin: 0 auto;
}
#main {
padding-top: 100px;
text-align: center;
height: 200vh;
background: #3cb5f9;
}
#main img {
width: 200px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<div id="nav"> LINK LINK LINK </div>
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
</body>
</html>
External Plunker: http://plnkr.co/edit/yS5MdtCeTNJvvn7w5gvl?p=preview
I'm presenting some PDFs in a horizontal design with the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly{
width: 100%;
height: 800px;
/*overflow: auto;*/
/*overflow-y: hidden;*/
margin: 5 auto;
white-space: nowrap
}
.pdfobject-container {
/*width: 100%;*/
max-width: 800px;
height: 800px;
margin: 5em 0;
display: inline;
}
.pdfobject { border: solid 1px #666; max-width: 40%;}
</style>
</head>
<body>
<div id='scrolly'>
<div id="pdf1" ></div>
<div id="pdf2" ></div>
<div id="pdf3" ></div>
</div>
<script src="PDFObject-master/pdfobject.js"></script>
<script>
PDFObject.embed("../../overleaf/a/report.pdf", "#pdf1", {pdfOpenParams:{toolbar: '0'}, page: '1'});
PDFObject.embed("../../overleaf/b/report.pdf", "#pdf2", {pdfOpenParams:{toolbar: '0'}, page: '2'});
PDFObject.embed("../../overleaf/c/report.pdf", "#pdf3", {pdfOpenParams:{toolbar: '0'}, page: '3'});
// PDFObject.embed("../../overleaf/d/report.pdf", "#pdf4", options);
// PDFObject.embed("../../overleaf/e/report.pdf", "#pdf5", options);
</script>
</body>
</html>
I would like to put some text on top of each PDF div, like a brief description about the PDF document. How might I do that?
Snippet
// each pdf must have a heading stored in the array headings
var headings = ["This is the heading for pdf1", "This is the heading for pdf2", "This is the heading for pdf3"]
//get all pdfs container
all_pdf = document.getElementById("scrolly").children;
//loop through and change innerHTML of pdf
for (var x = 0; x < all_pdf.length; ++x) {
all_pdf[x].innerHTML = "<h1>" + headings[x] + "</h1>" + all_pdf[x].innerHTML;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly {
width: 100%;
height: 800px;
/*overflow: auto;*/
/*overflow-y: hidden;*/
margin: 5 auto;
white-space: nowrap
}
.pdfobject-container {
/*width: 100%;*/
max-width: 800px;
height: 800px;
margin: 5em 0;
display: inline;
}
.pdfobject {
border: solid 1px #666;
max-width: 40%;
}
</style>
</head>
<body>
<div id='scrolly'>
<div id="pdf1">PDF details1</div>
<div id="pdf2">PDF details2</div>
<div id="pdf3">PDF details3</div>
</div>
<script src="PDFObject-master/pdfobject.js"></script>
<script
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();
});
Visit : to see my example: http://www.nycthirst.com/test-space/test-orig-best.html
Here is the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
div#GHOLD { position: relative; width: 400px; height: 464px;
}
div.gname { position: absolute; top: 7px; left: 0px; height: 23px; text-align: center;
/*border: solid black 1px; padding-top: 4px;*/
z-index: 20;
}
div.bname { position: absolute; top: 3px; left: 0px; height: 27px; text-align: center;
padding-top: 4px;
/*border:solid black 1px;*/
z-index: 25;
}
div.ihold { position: absolute; top: 36px; left: 0px;
width: 400px; height: 360px; z-index: 10;
}
img.bgraph { border: none; width: 400px; height: 360px; z-index: 10; }
-->
</style>
<script type="text/javascript">
function graphShow(which)
{
var ghold = document.getElementById("GHOLD");
var gdivs = ghold.getElementsByTagName("DIV");
gdivs[0].className = gdivs[1].className = gdivs[2].className = "gname";
gdivs[which].className = "bname";
gdivs[3].style.zIndex = gdivs[4].style.zIndex = gdivs[5].style.zIndex = 10;
gdivs[which+3].style.zIndex = 15;
}
</script>
</head>
<body>
<div id="GHOLD">
<div class="bname" style="left: 39px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(1);"></div>
<div class="gname" style="left: 162px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(0);"></div>
<div class="gname" style="left: 280px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(2);"></div>
<div class="ihold" style="z-index: 15;">
<img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop1.png" alt="95 percent">
</div>
<div class="ihold">
<img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop2.png" alt="69 percent" style="z-index: 10;">
</div>
<div class="ihold">
<img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop3.png" alt="52 percent" style="z-index: 10;">
</div>
</div>
</body>
</html
>
So here is the deal the page code above works perfectly in firefox and chrome. It does not do a thing in IE. The idea is on a mouse over or over state the background image will change. IF there is an easier solution I would love to see it. I am a bit of a novice with Javascript.
IE doesn't seem to like passing mouse events to elements that look invisible to it. If you don't have a background or visible text on your trigger divs, the mouseover event just passes right through them.
You basically have to give the trigger divs a background, or content, that covers the area you want mouseovers to happen on. IE doesn't care about the content of the background, as long as it's there and isn't the color "transparent". You should even be able to get away with using a 1x1 transparent GIF as the background, as long as you tile it.
I have some javascript to set the offsetLeft attribute of an img element. But my javascript doesn't move the HTML element, what do you think I can do to make it move left? This is a scenario when it is easiest for me to position the element in javascript & not css.
The img that wont move left when it should(it displays centred) has the id "headerImg":
<!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"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
body { text-align: center; min-width: 1200px; }
#backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; }
#heading { height: 300px; }
#main { margin: 0 auto; }
#navBar { display: inline; height: 700px; width: 200px; z-index: 1; position: relative; }
#content { display: inline; height: 700px; width: 800px; padding: 20px; padding-left: 30px; }
#headingImg { left: 0px; }
#navBarImg { position: relative; z-index: 0; padding-right: -5px; margin-right: -5px; }
-->
</style>
</head>
<body>
<div id="heading">
<!-- This image will not move to the left when I call the below javascript -->
<img id="headingImg" src="images/logoWritting.png" alt="Kamalei Childrens Centre" width="600px" height="240px"/>
</div>
<div id="main">
<div id="navBar">
<img id="navBarImg" src="images/navBackground.png" alt="" width="200px" height="700px"/>
</div>
<div id="content">
</div>
</div>
<img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>
<script type="text/ajavscript">
<!--
var CONTENT_WIDTH = 1000;
function getScreenSize()
{
var res = {"width": 630, "height": 460};
if ( parseInt(navigator.appVersion)>3 )
{
res["width"] = screen.width;
res["height"] = screen.height;
}
else if ( navigator.appName == "Netscape" && parseInt(navigator.appVersion)==3 && navigator.javaEnabled() )
{
var jToolkit = java.awt.Toolkit.getDefaultToolkit();
var jScreenSize = jToolkit.getScreenSize();
res["width"] = jScreenSize.width;
res["height"] = jScreenSize.height;
}
return res;
}
document.getElementById("headingImg").style.left = ((getScreenSize()['width']/2)-(CONTENT_WIDTH/2))+"px";
-->
</script>
</body>
</html>
Set the .style.left along with position:absolute, not the offsetLeft. Alternatively, change the .style.marginLeft. offsetLeft is a read-only property.