Know issue tumblr restricts width of videos to max500, i want them 700.
I've tried all the hacks and scripts listed, they won't work on my theme. Any suggestions?
This code was a useful starting point, but it didn't resize the embed tag, too, which means it won't work for all browsers.
<script type="text/javascript">
$(document).ready(function() {
var embedTag;
$('.video').each(function(index) {
$( this ).contents().each( function ( index ) {
if ($(this).is('object') || $(this).is('embed') || $(this).is('iframe')) {
var orgWidth = $(this).attr('width');
var orgHeight = $(this).attr('height');
var scale = orgHeight/orgWidth;
var targetWidth = 474;
var targetHeight = targetWidth * scale;
$(this).attr('width', targetWidth);
$(this).attr('height', targetHeight);
$(this).find('embed').attr('width', targetWidth);
$(this).find('embed').attr('height', targetHeight);
}
});
});
});
</script>
EDIT: A further revision, just in case your videos/media, whatever are embedded within other elements:
<script type="text/javascript">
$(document).ready(function() {
var embedTag;
$('.video, .media').each(function(index) {
$( this ).find('object, embed, iframe').each( function ( index ) {
var orgWidth = $(this).attr('width');
var orgHeight = $(this).attr('height');
var scale = orgHeight/orgWidth;
var targetWidth = 474;
var targetHeight = targetWidth * scale;
$(this).attr('width', targetWidth);
$(this).attr('height', targetHeight);
$(this).find('embed').attr('width', targetWidth);
$(this).find('embed').attr('height', targetHeight);
});
});
});
</script>
I had to do the same thing with the theme that I designed/developed for my Tumblr (ridiculouslyawesome.com). In order to get around the 500px max width that Tumblr seems to impose, I came up with a little javascript hack that finds all object/embed/iframe tags in the page and resizes them properly for the theme. This example uses jQuery, but you can alter it to whatever JS framework you prefer to use.
$(document).ready(function() {
var embedTag;
$('div.video_container').each(function(index) {
$( this ).contents().each( function ( index ) {
if ($(this).is('object') || $(this).is('embed') || $(this).is('iframe')) {
var orgWidth = $(this).attr('width');
var orgHeight = $(this).attr('height');
var scale = orgHeight/orgWidth;
var targetWidth = 960;
var targetHeight = targetWidth * scale;
$(this).attr('width', targetWidth);
$(this).attr('height', targetHeight);
}
});
});
});
So far this has worked pretty good for my theme in all the browsers that I have tested it on. Hopefully it will work for you too. Let me know if you run into any issues with it.
Ryan
Related
I have been experiencing bizarre behavior with the HTML5 Canvas in Chrome. As demonstrated in the example below, the images are not rendering correctly until the window is resized. All of the variables and properties have the exact same values both initially and on resize. Why does this happen?
Of course if the image hasn't loaded yet, the background won't display at all. You may need to refresh a few times.
<html>
<head>
</head>
<body>
<canvas id="test-canvas"></canvas>
</body>
<script>
var canvas = document.querySelector('#test-canvas');
var backgroundImage = new Image(100, 100);
backgroundImage.src = 'https://via.placeholder.com/100';
var dimensions = [];
var center = [];
var viewBox = [];
function paint() {
var ctx = canvas.getContext('2d');
dimensions = [canvas.width, canvas.height];
center = [dimensions[0] / 2, dimensions[1] / 2];
viewBox = [
-center[0], -center[1],
center[0], center[1],
];
ctx.translate(center[0], center[1]);
paintBackground(ctx);
}
function paintBackground(ctx) {
ctx.save();
var size = [100, 100]
var box = [
Math.floor(viewBox[0] / size[0]) * size[0],
Math.floor(viewBox[1] / size[1]) * size[1],
Math.ceil(viewBox[2] / size[0]) * size[0],
Math.ceil(viewBox[3] / size[1]) * size[1],
];
for (let x = box[0]; x < box[2]; x += size[0]) {
for (let y = box[1]; y < box[3]; y += size[1]) {
ctx.drawImage(backgroundImage, x, y, size[0], size[1]);
}
}
ctx.restore();
}
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
paint();
}
window.addEventListener('resize', resize);
resize();
setTimeout(paint, 200);
</script>
</html>
The images should be covering the entire canvas...
But initially they only cover the lower right quadrant...
I figured it out. I was translating every time I painted. I realized I needed to put a call to save and restore within my paint method. This solved my problem.
function paint() {
var ctx = canvas.getContext('2d');
ctx.save() // <--- here!
dimensions = [canvas.width, canvas.height];
center = [dimensions[0] / 2, dimensions[1] / 2];
viewBox = [
-center[0], -center[1],
center[0], center[1],
];
ctx.translate(center[0], center[1]);
paintBackground(ctx);
ctx.restore() // <--- and here!
}
How to implement smooth scrolling like on this website?
https://boredomdoctors.com/banjo-dog/
I've found on website similar solution:
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
function wheel(event) {
var delta = 0;
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 2;
handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle(delta) {
var time = 900; // delay time
var distance = 140; // delta point
// Dom where it will apply
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time, 'easeOutExpo' );
}
Hello I am new to jQuery and I have a problem!
I want to scroll to the top, in a page that is loaded via AJAX call.
This works (test):
$(document).on('click', '#top_icon', function() {
alert('ok');
});
But this is not working (this is what I want to achieve):
$(document).on('click', '#top_icon', function() {
$('html, body').animate({scrollTop: '0px'}, 800);
});
Try this,
$(document).on('click', '#top_icon', function() {
$('html, body').animate({'scrollTop': '0px'}, 800);
return false;
});
scrollTop is undefined in your case.
I am not sure about jQuery, but scrollTop is not a CSS property and therefor might not be part of the properties that can be animated.
But you can create a simple animation for this yourself:
var startValue = 0;
var endValue = 0;
var duration = 800;
var distance = 0;
var velocity = 0;
var step = 0;
var endTime = 0;
var animate = function() {
var elapsedTime = new Date().getTime() - step;
document.body.scrollTop += velocity * elapsedTime;
step = new Date().getTime();
if (step > endTime)
document.body.scrollTop = endValue;
else
setTimeout(animate, 15);
}
yourButton.onclick = function() {
startValue = document.body.scrollTop;
distance = endValue - startValue;
velocity = distance / duration;
step = new Date().getTime();
endTime = step + duration;
animate();
};
Here is a fiddle: http://jsfiddle.net/pXvQG/12/, animate by scrolling down and click the body.
I'm trying to make a canvas which can be operated via the mouse (dragging, drawing, clicking...), which would seem to be a simple task. Currently I have it drawing a line from where the mouse was pressed to where ever it is now, until it is released. But all the old versions of the line continue to be drawn regardless of whether I clear the canvas. I've tried using beginPath/closePath and fill instead of stroke; both approaches caused the line to never appear. Is there some... "delimiter" of draw operations that I haven't been able to find?
The source may be viewed and tested here, and I've also included it below.
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="test" width="640" height="480"></canvas>
<script type="text/javascript">
(function (){
// http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
function getMousePos(obj, evt){
// get canvas position
var top = 0;
var left = 0;
while (obj && obj.tagName != 'BODY') {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
// return relative mouse position
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;
return {
x: mouseX,
y: mouseY
};
}
var canvasElement = document.getElementById('test');
if(canvasElement.getContext){
var canvas = canvasElement.getContext('2d');
var start = null;
var end = null;
var drawing = false;
canvasElement.addEventListener('mousedown', function (event){
var mousePos = getMousePos(canvasElement, event);
start = mousePos;
end = mousePos;
drawing = true;
}, false);
canvasElement.addEventListener('mousemove', function (event){
if(drawing){
end = getMousePos(canvasElement, event);
}
}, false);
function release(event){
drawing = false;
}
canvasElement.addEventListener('mouseup', release, true);
var FPS = 30;
setInterval(function() {
canvas.clearRect(0, 0, canvasElement.width, canvasElement.height);
if(drawing && start != null){
canvas.moveTo(start.x, start.y);
canvas.lineTo(end.x, end.y);
canvas.stroke();
}
}, 1000/FPS);
}
})();
</script>
</body>
</html>
You need to create a path with beginPath and closePath, like so:
canvas.clearRect(0, 0, canvasElement.width, canvasElement.height);
if(drawing && start != null){
canvas.beginPath();
canvas.moveTo(start.x, start.y);
canvas.lineTo(end.x, end.y);
canvas.closePath();
canvas.stroke();
}
Otherwise you'll just keep adding lines to the existing path.
I'm trying to get the mouse coordinates during a jQuery animation, I'm doing this because I'm working on an interactive plug-in which moves the background image inside a div from covercss property to 100% of it's scale when the user go over the element.
I'm near to completing the plug-in but the animation is buggy because it work on the last position of the mouse fired by mousemove event of jQuery.
Does exists some way to avoid the problem?
This is my situation:
$(settings.selector).hover(function (e) {
$(this).bind('mousemove', setFollowMouse);
}, function () {
$(this).unbind('mousemove', setFollowMouse);
zoomOut();
});
var setFollowMouse = function (e) {
var o = {offsetLeft:this.offsetLeft, offsetTop:this.offsetTop};
if (!settings.bg.zooming_in && settings.bg.current_scale != 100) {
settings.bg.zooming_in = true;
zoomIn(e, o);
} else {
followMouse(e, o);
}
}
var zoomIn = function (e, o) {
$({scale:settings.bg.min_perc}).animate ({
scale:100
},{
easing:settings.zoom_in.easing,
duration:settings.zoom_in.duration,
step:function () {
settings.bg.current_scale = this.scale;
followMouse(e, o);
},
complete:function () {
settings.bg.current_scale = 100;
settings.bg.zooming_in = false;
followMouse(e, o);
}
});
}
var followMouse = function (e, o) {
var m_x = e.pageX - o.offsetLeft;
var m_y = e.pageY - o.offsetTop;
settings.bg.perc_pos_x = ((m_x * 100) / (a_w - bg_w)) + '%';
settings.bg.perc_pos_y = ((m_y * 100) / (a_h - bg_h)) + '%';
var bg_w = getScalePercent(settings.bg.width, settings.bg.current_scale);
var a_w = settings.container.width;
var bg_h = getScalePercent(settings.bg.height, settings.bg.current_scale);
var a_h = settings.container.height;
var bpx = - (bg_w - a_w) * m_x / a_w;
var bpy = - (bg_h - a_h) * m_y / a_h;
$(settings.selector).css({
backgroundPosition:bpx + 'px ' + bpy + 'px'
,backgroundSize:bg_w + 'px ' + bg_h + 'px'
});
}
As you see, I use animation to calculate the progressive scaling of the background-image, and trying to calculating it with the follow mouse method, but if I sto moving the mouse, the animation works with the last mousemove event.pageX and Y mouse position.
I've done this because I have problems with make animation method fluid if I trying to rewrite it continuously by with the mouse.
Should I follow some different way to avoid the bug?
forgive my dodgy math; but this should help!
<html>
<head>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var img = new Image();
img.src = 'http://wallpapers.free-review.net/wallpapers/23/Autumn_Theme_-_Windows_7_Backgrounds.jpg';
var canvas = document.getElementById("canvas1");
canvas.width = img.width;
canvas.height = img.height;
canvas.addEventListener('mousemove', onMouseMove, false);
var ctx = canvas.getContext("2d");
var scale = 0.9;
var scaledwidth = canvas.width * scale;
var scaledheight = canvas.height * scale;
var scaledcenterX = scaledwidth /2;
var scaledcenterY = scaledheight /2;
var animloop = setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, scaledwidth, scaledheight, canvas.width - scaledcenterX, canvas.height - scaledcenterY, 0, 0, canvas.width, canvas.height);
}, .01);
function onMouseMove(e) {
mouseX = e.clientX - canvas.offsetLeft;
mouseY = e.clientY - canvas.offsetTop;
scale = mouseX/1000;
scaledwidth = canvas.width * scale;
scaledheight = canvas.height * scale;
}
};
</script>
<style>
body {
background: #001;
background-size: cover;
overflow: hidden;
}
#canvas1 {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
height: 100% auto;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
</body>
</html>
I've just solved the problem with this simple edit to my code:
var setFollowMouse = function (e) {
settings.mouse.x = e.pageX - this.offsetLeft;
settings.mouse.y = e.pageY - this.offsetTop;
if (!settings.bg.zooming_in && settings.bg.current_scale != 100) {
settings.bg.zooming_in = true;
zoomIn();
} else {
followMouse();
}
}
the old one:
var setFollowMouse = function (e) {
var o = {offsetLeft:this.offsetLeft, offsetTop:this.offsetTop};
if (!settings.bg.zooming_in && settings.bg.current_scale != 100) {
settings.bg.zooming_in = true;
zoomIn(e, o);
} else {
followMouse(e, o);
}
}
this has removed the buggy behavior.