I'm trying to control the size of the text used to show elapsed and total time of a video player. I am currently controlling the play/pause/sound and full screen icons, but can't access the time display. Below is the javascript used to resize the controls on window resize:
window.onload = function() {
resize();
}
window.onresize = function() {
resize();
}
function resize() {
document.getElementsByClassName('play')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
document.getElementsByClassName('fullscreen')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
document.getElementsByClassName('mute')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
document.getElementsByClassName('time-played')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
}
Also trying to figure out the best way to minimize and simplify this using jQuery(to consolidate all of the classes into one array, similar to:
$('.play .fullscreen .mute .time-played')
My current implementation: jsfiddle
If you'd like to use jQuery, then you can run the resize method on .ready() and add window .resize() bindings as well, like so:
$(document).ready(function () {
// resize on dom ready
resizePlayer();
// add window resize binding
$(window).resize(resizePlayer);
});
To combine selectors in jQuery, you can do something like this:
$('.play, .fullscreen, .mute, .time-played')
So, your resize method can now look something like this:
function resizePlayer() {
// Set your width to whatever you want...
// this is just a rough translation of your method above
var newWidth = $('.timeline').outerHeight() * 0.25;
$('.play, .fullscreen, .mute, .time-played').width(newWidth);
}
Related
I have four canvas in my screen, positioned two above and two below.
Each one have a button that makes possible to maximize the canvas, hiding the others.
This button is positioned above each canvas, with absolute position based on offsetTop and offsetLeft of the canvas.
However, when I maximize or minimize a canvas, the button formula updates only the width property.
The strange thing is that if I resize the screen, which also calls resize function, everything goes to the right place.
EDIT: Additional information: I am using VueJS and, in order to hide the other canvas, I apply v-show="false" to them parent divs, which only applies display: none.
Some snippets:
Initial resize and listener:
window.onload = function () {
resizeAll();
window.addEventListener('resize', resizeAll, false);
};
The resize hub:
function resizeAll () {
vue.$refs.panelOne.resizeDefault();
// ...
vue.$refs.panelN.resizeDefault();
}
The panel's resize default and resize method. The "expandStyles" is the css styles applied to the button:
resizeDefault() {
let dimensions;
if (this.expanded) {
dimensions = getScreenDimensions();
} else {
dimensions = getHalfScreenDimensions();
}
this.resize(dimensions.width, dimensions.height);
}
resize (width, height) {
this.canvas.width = width;
this.canvas.height = height;
this.expandStyles.top = (this.canvas.offsetTop + 10) + 'px';
this.expandStyles.left = (this.canvas.offsetLeft + this.canvas.width - 40) + 'px';
drawInterface.redraw();
}
And finally, the dimension getters:
function getScreenDimensions () {
return {
width: window.innerWidth - 310,
height: window.innerHeight * 0.92
};
}
function getHalfScreenDimensions () {
return {
width: (window.innerWidth - 310) / 2,
height: (window.innerHeight * 0.92) / 2
};
}
I agree with S.P.H.I.N.X , it seems like the problem lies with propagation of reactive properties in this.expandStyles to actual DOM. Would be useful if you can share the part of the template which has your canvases and positioning application.
Meanwhile, if setTimeOut doesn't feel right to you, you may do things more "Vue-way" by using Vue: nextTick to set order of operations (styles recalculation, redraw).
I've rather roughly built this website which uses an effect similar to the iOS Safari tab view to look at various pages of a virtual book. Everything is working fine apart from the fact that I can't centre each page in the visible viewport. For example if you scroll down to the final 'page' and click on it, it jumps to the top of the document, instead of staying in the centre of the visible viewport.
I think this is to do with the fact that the scrollable div uses overflow-y:scroll, but I just can't figure out for the life of me how to fix the problem.
Any help would be greatly appreciated!!
Here's my jQuery:
jQuery(document.body).on('click', '.page', function() { //Change to touchstart
// Generate number between 1 + 2
var randomClass = 3;
var randomNumber = Math.round(Math.random() * (randomClass - 1)) + 1;
// Initialise & Random Number
jQuery(this).addClass("activated").addClass('scaled-' + randomNumber);
// Exiting - Reset All
jQuery(document.body).on('click', '.activated', function() { //Change to Touchstart
jQuery(this).removeClass("activated scaled-1 scaled-2 scaled-3");
});
});
And here is a jsfiddle with all my code in it so you can get a better idea of what I'm trying to achieve.
https://jsfiddle.net/ontu1ngq/
Thanks!
You need to get the amount that #wrapper has been scrolled, so that you can use that to set the top of the .page accordingly. Then, when you remove the .activated class, you will just need to remove the inline top style.
jQuery(document.body).on('click', '.page', function() {
var randomClass = 3;
var randomNumber = Math.round(Math.random() * (randomClass - 1)) + 1;
jQuery(this).addClass("activated").addClass('scaled-' + randomNumber);
var wrapper_scrollTop = $("#wrapper").scrollTop(); //gets amount scrolled
var half_wrapper = $("#wrapper").height()*(0.5); //50% of wrapper height
jQuery(this).css("top",half_wrapper+wrapper_scrollTop);
jQuery(document.body).on('click', '.activated', function() {
jQuery(this).removeClass("activated scaled-1 scaled-2 scaled-3");
jQuery(this).css("top","") //returns top to original value specified in css
});
});
Check out this working fiddle: https://jsfiddle.net/tardhepc/1/
I am trying to have a div change its properties on a click function. Some of the properties I am changing with a call to toggleClass() which is fine and works great. However I also want to resize the div based on the size of the viewport. In order to have access to those numbers I am changing the width and height with jQuery. This command looks like this:
$('.box').click( function() {
$(this).toggleClass('box--grow', 0);
$(this).css('width', w * .9);
$(this).css('height', h * .9);
});
EDIT I want the height and width to go back to 100%.
I tried using the toggle class but that caused the entire div to disappear, and this solution doesn't work because when I click the div again the class is removed but the height is the same.
I am looking for a way to toggle this or to get the viewport width within the css. I tried both approaches but couldn't get anything to what I am looking for.
why not using CSS VH and VW values?
CSS:
.my90Class{
width: 90vw;
height: 90vh;
}
JS:
$('.box').click( function() {
$(this).toggleClass("my90Class");
});
You need to get the window size first, and then put everything into combined .ready() and .resize() functions, to make it responsive.
function myfunction() {
var w = $(window).width();
var h = $(window).height();
$('.box').click(function () {
if ($(this).hasClass('box--grow')) {
$(this).removeClass('box--grow');
$(this).css({
'width': '',
'height': ''
});
} else {
$(this).addClass('box--grow');
$(this).css({
'width': w * .9,
'height': h * .9
});
}
});
}
$(document).ready(myfunction);
$(window).on('resize', myfunction);
jsfiddle
You can check for the class with:
$(this).hasClass('box--grow')
Then to remove the class:
$(this).removeClass('box--grow');
And to add it back again:
$(this).addClass('box--grow');
The end would look like this save the original width and height before the event so you can add it back again:
var oldwidth = $('.box').css('width');
var oldheight = $('.box').css('height');
$('.box').click( function() {
if($(this).hasClass('box--grow')) {
$(this).removeClass('box--grow');
$('.box').css('width', oldwidth);
$('.box').css('height', oldheight);
} else {
$(this).addClass('box--grow');
}
});
untested but it would probably work
I have two JavaScript functions. A function called Init(), which checks information rendered on the page, is fired on $(document).ready() and, at the end of this function, it calls a function called Size() after it is done checking everything.
Size() has to be performed each time the browser is resized too, so it can balance out some CSS.
For some reason though, Size() doesn't work properly during Init() and doesn't actually do what it should until it is called when the browser window is resized.
Are these functions being used properly? Is Size() missing something on init?
var h = $(window).height(),
w = $(window).width(),
m = 30; // global margin
var fitTop, fitBot;
function fitInit() {
fitTop = $(".fit-compare-top").length;
fitBot = $(".fit-compare-bottom").length;
fitSize();
}
function fitSize() {
if (w < 1024) {
$(".fit-compare-item").width(w*0.7);
if (w > 767) {
mm = 220;
}
else { mm = m }
$(".fit-compare-tops").width(Math.min(400 + m + 5,(w * 0.7 + m + 5)) * fitTop + mm);
$(".fit-compare-bottoms").width(Math.min(400 + m + 5,(w * 0.7 + m + 5)) * fitBot + mm);
}
else {
// this where I'm having the problem
// the height of the follow object remains
// unchanged until $(window).resize()
$('.fit-hero-text').height(h-h/5).css({
"padding-top": h*0.3
});
$(".pillars-section").height( (Math.min(1280,w)*0.4)*1.5 );
}
}
$(document).ready(function() {
fitInit();
});
$(window).resize(function() {
fitSize();
});
I have tried removing the Size() from Init() and putting it in $(document).ready() but that has the same effect. And I obviously require this function to occur after the page is loaded, because I can't depend on a user to resize their browser.
UPDATE: If I removed the padding-top CSS rule from $('.fit-hero-text') then there is no jump on resize and height is calculated and rendered properly. Why could this be?
I have determined here that the problem resides in using height(), when I should actually be using innerHeight() here because of the padding that I am also applying in the same line.
jQuery's height() is initially applying the height of the element and ignoring the padding because height() does not include padding. jQuery's innerHeight() includes padding and can accept the CSS that's being applied in the same line.
UPDATE: I have recently become aware of imagesloaded.js and this shaves some time off of the window.load time, also removing the opportunity for page elements to be jumping around due to images rendering.
I've written some jQuery code to display a box with data in the corner of the users' web browser. I'm using the .scroll event to make the box stay in the corner as the user scrolls up and down the page. Let me emphasize that I am not using jquery-ui dialog.
The only problem is that the box flickers as the page scrolls. I'm afraid that there will be no cross-browser solution to this problem as the different browsers seem to behave differently with scrolling. Barring a cross-browser solution, an IE solution would be nice (My web application is designed to be used by a specific group of about 100 users in my organization.)
Here are snippets of the relative code:
ExternalScroll: function () {
LittleBlackBook.setPosition();
}
setPosition: function () {
var scrollPosition = $(self).scrollTop();
var cssTop = LittleBlackBookStatic.determineCssTop(this.height, this.isTop, this.vOffset, scrollPosition);
var cssHeight = LittleBlackBookStatic.determineCssHeight(this.height);
var cssLeft = LittleBlackBookStatic.determineCssLeft(this.width, this.isLeft, this.hOffset);
var cssWidth = LittleBlackBookStatic.determineCssWidth(this.width);
this.jQueryObj.css('top', cssTop);
this.jQueryObj.css('height', cssHeight);
this.jQueryObj.css('left', cssLeft);
this.jQueryObj.css('width', cssWidth);
}
var LittleBlackBookStatic = {
determineCssTop: function (height, isTop, vOffset, vScroll) {
var windowHeight = $(self).height();
var scrollPosition = $(self).scrollTop();
var newModalTop = isTop ? vOffset + vScroll : windowHeight - height + vScroll - vOffset;
return newModalTop + 'px';
},
determineCssHeight: function (height) {
return height + 'px';
},
determineCssLeft: function (width, isLeft, hOffset) {
var windowWidth = $(self).width();
var newModalLeft = isLeft ? hOffset : windowWidth - width - hOffset;
return newModalLeft + 'px';
},
determineCssWidth: function (width) {
return width + 'px';
}
} // end LittleBlackBookStatic
I'm using jQuery to look up the scroll position as the page scrolls and change the CSS.
Is there a better way; a way that will make it scroll without flickering? If no, then why not?
You should use fixed positioning for that box instead instead of animating it to keep it in the corner.
You'll use less javascript and avoid flickering that comes with animation.