I'm trying to add an horizontal loop to my page but when I try to add the javascript cargo tells me that the script has been disabled. Why does that happen? Is there a way to implement that java without having problems? Is it right to add the javascript in the tag script at the end? This is where I've took the code from: https://codepen.io/lemmin/pen/bqNBpK
HTML:
<div id="page">
<div class="pane"><div>Looping Horizontal Scroll</div></div>
<div class="pane"><div>2</div></div>
<div class="pane"><div>3</div></div>
<div class="pane"><div>4</div></div>
<div class="pane"><div>5</div></div>
<div class="pane"><div>Last</div></div>
<div class="pane"><div>Looping Horizontal Scroll</div></div>
</div>
CSS:
body{
overflow-x:hidden;
color:#FFF;
font-family:Helvetica;
font-size:200%;
}
#page {
overflow:hidden;
white-space:nowrap;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#CCC;
display:flex;
flex-wrap:no-wrap;
}
.pane {
flex:0 0 100vw;
height:100vh;
display:flex;
position:relative;
align-items:center;
justify-content:center;
background-color: #45CCFF;
}
.pane:nth-child(4n+2) {
background-color: #49E83E;
}
.pane:nth-child(4n+3) {
background-color: #EDDE05;
}
.pane:nth-child(4n+4) {
background-color: #E84B30;
}
.pane:last-child {
background-color: #45CCFF;
}
JS:
<script>
var page = document.getElementById('page');
var last_pane = page.getElementsByClassName('pane');
last_pane = last_pane[last_pane.length-1];
var dummy_x = null;
window.onscroll = function () {
var y = document.body.getBoundingClientRect().top;
page.scrollLeft = -y;
var diff = window.scrollY - dummy_x;
if (diff > 0) {
window.scrollTo(0, diff);
}
else if (window.scrollY == 0) {
window.scrollTo(0, dummy_x);
}
}
// Adjust the body height if the window resizes.
window.onresize = resize;
// Initial resize.
resize();
// Reset window-based vars
function resize() {
var w = page.scrollWidth-window.innerWidth+window.innerHeight;
document.body.style.height = w + 'px';
dummy_x = last_pane.getBoundingClientRect().left+window.scrollY;
}
</script>
Related
I want the square to be yellow with each scroll down, and the square to be green with each scroll up.
This snippet works almost the way I want it to, because what I want happens only when the square is no longer fully visible on the viewport.
I would like the scroll down to be yellow and the scroll up to be green.
const square = document.querySelector('.square');
const squarePos = square.getBoundingClientRect().top;
console.log(squarePos);
window.addEventListener('scroll',mouse=>{
const scrollTop = window.scrollY;
if (scrollTop >squarePos) {
square.style.background = "yellow";
}
else{
square.style.background = "green";
}
});
.square{
width:100px;
height:100px;
position:relative;
margin:0 auto;
background:red;
top:200px;
}
.content{
width:100vw;
height:150vh;
}
<div class = 'square'></div>
<div class = 'content'></div>
You need to compare your squarePos with the previous square pos, not the client y. Set the position with let, and update the value after each event listener callback.
const square = document.querySelector('.square');
let squarePos = square.getBoundingClientRect().top;
window.addEventListener('scroll', mouse => {
if (square.getBoundingClientRect().top > squarePos) {
square.style.background = "yellow";
}
else{
square.style.background = "green";
}
squarePos = square.getBoundingClientRect().top;
});
.square{
width:100px;
height:100px;
position:relative;
margin:0 auto;
background:red;
top:200px;
transition: background 200ms ease;
}
.content{
width:100vw;
height:150vh;
}
<div class = 'square'></div>
<div class = 'content'></div>
Maybe something like this?
The idea is get the previous scroll location (y) and compare to the current scroll location.
If the previous is bigger, then, it scroll up, otherwise scroll down
const square = document.querySelector('.square');
const squarePos = square.getBoundingClientRect().top;
let oldpos = 0;
window.addEventListener('scroll', mouse => {
const scrollTop = window.pageYOffset;
if (scrollTop > oldpos) {
square.style.background = "yellow";
} else {
square.style.background = "green";
}
oldpos = scrollTop
});
.square {
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
background: red;
top: 200px;
}
.content {
width: 100vw;
height: 150vh;
}
<div class='square'></div>
<div class='content'></div>
So I have finished building the .JS for my video player and somehow my positioning is making my div stretch (See here: http://prntscr.com/8tsl4m)
I want to remove that part but I am using six-columns class width from skeleton framework, so the div width dynamically changes. Therefore I cannot just define a height because it has to be auto.
Can I remove this with a line of JS or some CSS attribute that I am missing?
Keep in mind that I am just starting to figure out what JS is even used for, and and intermediate in CSS and HTML.
If you need my code then here it is:
$(document).ready(function(){
//INITIALIZE
var video = $('#myVideo');
//remove default control when JS loaded
video[0].removeAttribute("controls");
$('.control').show().css({'bottom':45});
$('.loading').fadeIn(500);
$('.caption').fadeIn(500);
//before everything get started
video.on('loadedmetadata', function() {
$('.caption').animate({'top':-380},300);
//set video properties
$('.current').text(timeFormat(0));
$('.duration').text(timeFormat(video[0].duration));
updateVolume(0, 0.7);
//start to get video buffering data
setTimeout(startBuffer, 150);
//bind video events
$('.videoContainer')
.append('<div id="init"></div>')
.hover(function() {
$('.control').stop().animate({'bottom':45}, 500);
$('.caption').stop().animate({'top':-360}, 500);
}, function() {
if(!volumeDrag && !timeDrag){
$('.control').stop().animate({'bottom':45}, 500);
$('.caption').stop().animate({'top':-380}, 500);
}
})
.on('click', function() {
$('#init').remove();
$('.btnPlay').addClass('paused');
$(this).unbind('click');
video[0].play();
});
$('#init').fadeIn(200);
});
//display video buffering bar
var startBuffer = function() {
var currentBuffer = video[0].buffered.end(0);
var maxduration = video[0].duration;
var perc = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width',perc+'%');
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
//display current video play time
video.on('timeupdate', function() {
var currentPos = video[0].currentTime;
var maxduration = video[0].duration;
var perc = 100 * currentPos / maxduration;
$('.timeBar').css('width',perc+'%');
$('.current').text(timeFormat(currentPos));
});
//CONTROLS EVENTS
//video screen and play button clicked
video.on('click', function() { playpause(); } );
$('.btnPlay').on('click', function() { playpause(); } );
var playpause = function() {
if(video[0].paused || video[0].ended) {
$('.btnPlay').addClass('paused');
video[0].play();
}
else {
$('.btnPlay').removeClass('paused');
video[0].pause();
}
};
//speed text clicked
$('.btnx1').on('click', function() { fastfowrd(this, 1); });
$('.btnx3').on('click', function() { fastfowrd(this, 3); });
var fastfowrd = function(obj, spd) {
$('.text').removeClass('selected');
$(obj).addClass('selected');
video[0].playbackRate = spd;
video[0].play();
};
//stop button clicked
$('.btnStop').on('click', function() {
$('.btnPlay').removeClass('paused');
updatebar($('.progress').offset().left);
video[0].pause();
});
//fullscreen button clicked
$('.btnFS').on('click', function() {
if($.isFunction(video[0].webkitEnterFullscreen)) {
video[0].webkitEnterFullscreen();
}
else if ($.isFunction(video[0].mozRequestFullScreen)) {
video[0].mozRequestFullScreen();
}
else {
alert('Your browsers doesn\'t support fullscreen');
}
});
//light bulb button clicked
$('.btnLight').click(function() {
$(this).toggleClass('lighton');
//if lightoff, create an overlay
if(!$(this).hasClass('lighton')) {
$('body').append('<div class="overlay"></div>');
$('.overlay').css({
'position':'absolute',
'width':100+'%',
'height':$(document).height(),
'background':'#000',
'opacity':0.9,
'top':0,
'left':0,
'z-index':999
});
$('.videoContainer').css({
'z-index':1000
});
}
//if lighton, remove overlay
else {
$('.overlay').remove();
}
});
//sound button clicked
$('.sound').click(function() {
video[0].muted = !video[0].muted;
$(this).toggleClass('muted');
if(video[0].muted) {
$('.volumeBar').css('width',0);
}
else{
$('.volumeBar').css('width', video[0].volume*100+'%');
}
});
//VIDEO EVENTS
//video canplay event
video.on('canplay', function() {
$('.loading').fadeOut(100);
});
//video canplaythrough event
//solve Chrome cache issue
var completeloaded = false;
video.on('canplaythrough', function() {
completeloaded = true;
});
//video ended event
video.on('ended', function() {
$('.btnPlay').removeClass('paused');
video[0].pause();
});
//video seeking event
video.on('seeking', function() {
//if video fully loaded, ignore loading screen
if(!completeloaded) {
$('.loading').fadeIn(200);
}
});
//video seeked event
video.on('seeked', function() { });
//video waiting for more data event
video.on('waiting', function() {
$('.loading').fadeIn(200);
});
//VIDEO PROGRESS BAR
//when video timebar clicked
var timeDrag = false; /* check for drag event */
$('.progress').on('mousedown', function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).on('mouseup', function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
});
var updatebar = function(x) {
var progress = $('.progress');
//calculate drag position
//and update video currenttime
//as well as progress bar
var maxduration = video[0].duration;
var position = x - progress.offset().left;
var percentage = 100 * position / progress.width();
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
$('.timeBar').css('width',percentage+'%');
video[0].currentTime = maxduration * percentage / 100;
};
//VOLUME BAR
//volume bar event
var volumeDrag = false;
$('.volume').on('mousedown', function(e) {
volumeDrag = true;
video[0].muted = false;
$('.sound').removeClass('muted');
updateVolume(e.pageX);
});
$(document).on('mouseup', function(e) {
if(volumeDrag) {
volumeDrag = false;
updateVolume(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(volumeDrag) {
updateVolume(e.pageX);
}
});
var updateVolume = function(x, vol) {
var volume = $('.volume');
var percentage;
//if only volume have specificed
//then direct update volume
if(vol) {
percentage = vol * 100;
}
else {
var position = x - volume.offset().left;
percentage = 100 * position / volume.width();
}
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
//update volume bar and video volume
$('.volumeBar').css('width',percentage+'%');
video[0].volume = percentage / 100;
//change sound icon based on volume
if(video[0].volume == 0){
$('.sound').removeClass('sound2').addClass('muted');
}
else if(video[0].volume > 0.5){
$('.sound').removeClass('muted').addClass('sound2');
}
else{
$('.sound').removeClass('muted').removeClass('sound2');
}
};
//Time format converter - 00:00
var timeFormat = function(seconds){
var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
return m+":"+s;
};
});
/* video container */
.videoContainer{
width: 100%;
height:auto;
position:relative;
overflow:hidden;
background-color: #f2f5f8;
color: #383737;
border: 0px solid #f2f5f8;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;}
/* video caption css */
.caption{
display:none;
position: relative;
top: -100%;
background-color: #f2f5f8;
font-size:20px;
font-weight:bold;
background-color: #f2f5f8;
}
/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control{
background-color: #f2f5f8;
font-family: Cabin;
color: #383737;
position:relative;
bottom: 75px;
left:0;
width:100%;
z-index:5;
display:none;
height: 40px;
}
/* control top part */
.topControl{
height:11px;
border-bottom:1px solid #404040;
padding:1px 5px;
}
/* control bottom part */
.btmControl{
clear:both;
height: 6px;
opacity: 0.5;
background-color: #eef2f6;
}
.control div.btn {
float:left;
width:34px;
height:30px;
padding:0 5px;
border-right:1px solid #404040;
cursor:pointer;
}
.control div.text{
font-size:12px;
font-weight:bold;
line-height:30px;
text-align:center;
font-family:verdana;
width:20px;
border:none;
color: #383737;
}
.control div.btnPlay{
background:url(images/play.png) no-repeat 0 0;
border-left:1px solid #404040;
}
.control div.paused{
background:url(images/pause.png) no-repeat 0 0px;
}
.control div.btnStop{
background:url(control.png) no-repeat 0 -60px;
}
.control div.spdText{
border:none;
font-size:14px;
line-height:30px;
font-style:italic;
}
.control div.selected{
font-size:15px;
color: #383737;
}
.control div.sound{
background:url(control.png) no-repeat -88px -30px;
border:none;
float:right;
}
.control div.sound2{
background:url(control.png) no-repeat -88px -60px !important;
}
.control div.muted{
background:url(control.png) no-repeat -88px 0 !important;
}
.control div.btnFS{
background:url(control.png) no-repeat -44px 0;
float:right;
}
.control div.btnLight{
background:url(control.png) no-repeat -44px -60px;
border-left:1px solid #404040;
float:right;
}
.control div.lighton{
background:url(control.png) no-repeat -44px -30px !important;
}
/* PROGRESS BAR CSS */
/* Progress bar */
.progress {
width:85%;
position:relative;
float:left;
cursor:pointer;
height: 6px;
background-color: #eef2f6;
}
.progress span {
height:100%;
position:absolute;
top:0;
left:0;
display:block;
}
.timeBar{
z-index:10;
width:0;
height: 6px;
background-color: #db7560;
}
.bufferBar{
z-index:5;
width:0;
height: 6px;
opacity: 0.5;
background-color: #eef2f6;
}
/* time and duration */
.time{
width:15%;
float:right;
text-align:center;
font-size:11px;
line-height:12px;
}
/* VOLUME BAR CSS */
/* volume bar */
.volume{
position:relative;
cursor:pointer;
width:70px;
height:10px;
float:right;
margin-top:10px;
margin-right:10px;
}
.volumeBar{
display:block;
height:100%;
position:absolute;
top:0;
left:0;
background-color:#eee;
z-index:10;
}
/* OTHERS CSS */
/* video screen cover */
.loading, #init{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(images/loading.gif) no-repeat 50% 50%;
z-index:2;
display:none;
z-index: 100;
}
#init{
background:url(images/bigplay.png) no-repeat 50% 50% !important;
cursor:pointer;
z-index: 50;
}
<div class="six columns">
<div class="videoContainer">
<video id="myVideo" controls preload="auto" poster="images/1-thm.png" width="600" height="350" >
<source src="video.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
<div class="caption">Screamer 2015 Intro</div>
<div class="control">
<div class="topControl">
<div class="progress">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<div class="time">
<span class="current"></span> /
<span class="duration"></span>
</div>
</div>
<div class="btmControl">
<div class="btnPlay btn" title="Play/Pause video"></div>
<div class="btnStop btn" title="Stop video"></div>
<div class="spdText btn">Speed: </div>
<div class="btnx1 btn text selected" title="Normal speed">x1</div>
<div class="btnx3 btn text" title="Fast forward x3">x3</div>
<div class="btnFS btn" title="Switch to full screen"></div>
<div class="btnLight lighton btn" title="Turn on/off light"></div>
<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>
<div class="sound sound2 btn" title="Mute/Unmute sound"></div>
</div>
</div>
<div class="loading"></div>
</div>
</div>
In your div btmControl, there is the code
<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>
for which I cannot see the use right now.
Try changing the corresponding height value in the css part (.volume and .volumeBar) or consider removing it (if it really is not useful)
Because it is set to
display:block;
it should create a new line and not fill in a row along with the other divs.
So display:inline; will also provide a possible solution
Furthermore, the following divs will also be aligned in a new line. I propose this is the line break you do not want to have...
(For an example of display:block effect click here)
But anyway, a fiddle version for this problem would be of great help!
I am trying to build an animation effect where a div will float towards another div and when it reaches to the second div area, the floating div will fade out.Moving direction will be like this https://www.dropbox.com/s/2bpdbtycajuuk6a/1.JPG?dl=0 .For better understanding , i am providing my html and css code here.
html code....
<div id="outer_div">
<div class='a'>A</div>
<div class='b'>B</div>
<div class='c'>C</div>
<div class='d'>D</div>
</div>
and css ....
div.a {
width: 50px;
height:50px;
background-color:red;
position:absolute;
bottom:0;
top:450px;
left: 225px;
}
div.b {
width: 50px;
height:50px;
background-color:green;
position:absolute;
bottom:0;
top:225px;
left: 0px;
}
div.c {
width: 50px;
height:50px;
background-color:yellow;
position:absolute;
bottom:450px;
top:0px;
left: 225px;
}
div.d {
width: 50px;
height:50px;
background-color:pink;
position:absolute;
bottom:225px;
top:225px;
left: 450px;
}
#outer_div {
width: 500px;
height:500px;
background-color:blue;
position:fixed;
}
Here are 4 divs(A, B, C, D). A div will float where others are still. At first A div will float towards D and when touches D , A will fade out. Second, A div will float from the beginning towards C and when touches C , A will fade out. Third, A div will float from the beginning towards B and when touches B , A will fade out. Again the annimation will begin from the beginning and continue as before and this procedure will continue for 52 times.I have tried with this script but failed to do it .
Scripts ....
$(document).ready(function () {
animateDiv();
});
function makeNewPosition() {
// Get viewport dimensions (remove the dimension of the div)
var h = -$("#outer_div").height() - 50;
var w = -$("#outer_div").width()/2 - 50;
var nh = h;
var nw = w;
// var nh = Math.floor(Math.random() * h);
// var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv() {
var newq = makeNewPosition();
var oldq = $('.a').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.a').animate({top: newq[0], right: newq[1]}, speed, function () {
animateDiv();
});
}
;
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest / speedModifier);
return speed;
}
I couldn't understand the direction concept of the floating div A and how i am gonna detect that my floating div is at in the region of other div. Please help me with its solution and how can i understand animation direction concept in jquery(some reference can help a lot) ?
Try
$(document).ready(function () {
var a = $(".a")
, elems = $("#outer_div div").not(a)
, pos = function () {
return $.map(elems, function (el, i) {
return $(el).css(["left", "top"])
}).reverse()
}
, curr = 0
, max = 52
, speed = 1000;
(function animateDiv(el, p, curr, max) {
if (!!p.length) {
$(el)
.animate({
left:p[0].left
, top: (parseInt(p[0].top) + $(el).height())
}, speed, function () {
$(this).fadeOut(100, function () {
$(this)
.css({"top": "450px", "left":"225px"})
.fadeIn(0);
p.splice(0, 1);
animateDiv(this, p, curr, max)
})
})
} else if (curr < max) {
++curr;
console.log(curr, max);
animateDiv(el, pos(), curr, max)
}
}(a, pos(), curr, max))
});
div.a {
width: 50px;
height:50px;
background-color:red;
position:absolute;
bottom:0;
top:450px;
left: 225px;
}
div.b {
width: 50px;
height:50px;
background-color:green;
position:absolute;
bottom:0;
top:225px;
left: 0px;
}
div.c {
width: 50px;
height:50px;
background-color:yellow;
position:absolute;
bottom:450px;
top:0px;
left: 225px;
}
div.d {
width: 50px;
height:50px;
background-color:pink;
position:absolute;
bottom:225px;
top:225px;
left: 450px;
}
#outer_div {
width: 500px;
height:500px;
background-color:blue;
position:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="outer_div">
<div class='a'>A</div>
<div class='b'>B</div>
<div class='c'>C</div>
<div class='d'>D</div>
</div>
jsfiddle http://jsfiddle.net/83h17z25/2/
I want to fix model box height width according to i frame height and width. i frame URL is my local domain means modal box and i frame URL is on same domain. I have tried but not get any relevant result. Here is fiddle URL.
http://jsfiddle.net/shagun_jsfiddle/KY49P/1/
HTML
<a id="howdy" href="#">Howdy</a>
<div id="overlay" style="display: none;"></div>
<div id="modal" style="display: none;">
<a id="close" href="#">close</a>
<div>
<div id="content">
<iframe src="http://fiddle.jshell.net/shagun_jsfiddle/XxuLb/show/" frameborder="0" height="100%" width="100%"></iframe>
</div>
</div>
</div>
Css
* {
margin:0;
padding:0;
}
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
}
#modal {
position:absolute;
background:url(tint20.png) 0 0 repeat;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
}
#content {
border-radius:8px;
background:#fff;
padding:20px;
width:550px;
}
#close {
position:absolute;
background:url(close.png) 0 0 no-repeat;
width:24px;
height:27px;
display:block;
text-indent:-9999px;
top:-7px;
right:-7px;
}
jQuery
var modal = (function(){
var method = {},
$overlay,
$modal,
$content,
$close;
$modal = $('#modal');
// Center the modal in the viewport
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (settings) {
//$content.empty().append(settings.content);
$modal = $('#modal');
$modal.css({
width: settings.width || 'auto',
height: settings.height || 'auto'
});
$contentWd = $('#content').width(); //main content div width
//$('#iframe-box').css({
//height : $("iframe[id='iframe-box']").contents().find("html").height()
//});
$content_inWidth = $('#content').width();
$content_inHeight = $('#content').height();
$iframeWidth = $('.iframe').width();
$iframeHeight = $('.iframe').height();
//alert($content_inHeight);
if($content_inWidth > $iframeWidth){
//alert($content_inWidth);
}else{
//alert($iframeWidth);
}
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$('#overlay').show();
};
return method;
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#howdy').click(function(e){
modal.open({});
e.preventDefault();
});
$('#close').click(function(e){
e.preventDefault();
$('#modal').hide();
$('#overlay').hide();
});
});
Maybe this will help. In the css for the modal window, set the top, left, bottom and right to 0. This will stretch the model to fill the box it is in (as long as it remains absolute, and its container set to something where it will remain relative to it - absolute, or relative.)
#modal {
position:absolute;
background:url(tint20.png) 0 0 repeat;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I have centered the popup on this website here, however, it's only on the x-axis. I also need to center it on the y-axis, but I can't seem to make it happen.
Here's the JavaScript...
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
I thought it would work with this...
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
but it's not. Any ideas on how to fix this?
Edit: Here's a link to the site here.
Here's all the CSS attributed to this popup...
#blanket {
background-color:#111;
opacity: 0.65;
filter: alpha(opacity=65)
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background-image:url(../images/popup_bg.png);
background-repeat:no-repeat;
top:50%;
left: 50%;
width:400px;
height:400px;
margin-top: -120px auto 0 auto; /* auto, centers horizontally and -120px is half your height to finish the centering vertically */
border:5px solid #000;
z-index: 9002;
}
#popUpDiv .close {
background-image: url(../images/x.png);
background-repeat: no-repeat;
position:absolute;
top:10px;
right:10px
}
You could accomplish this with CSS like so:
HTML
<div id="popUpDiv">
Your content here
</div>
CSS
#popUpDiv {
position:absolute;
background-image:url(../images/popup_bg.png);
background-repeat:no-repeat;
top:50%;
width:400px;
height:400px;
margin: -200px auto 0 auto; /* auto, centers horizontally and -120px is half your height to finish the centering vertically */
border:5px solid #000;
z-index: 9002;
}
In conclusion, if you use this method it looks like you may just need to use javascript to dynamically set the height and margin-top value depending on your div and its content at the time.
More information here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/