We Keep Coding

Dynamically Adjusting an element with javascript or JQuery

I want to dynamically adjust the position of a YouTube video element using javascript based on the browser dimensions. I am not looking for a purely CSS Solution, I know that I can do that with padding, I am looking for a javascript solution which alters CSS of the div.
In this instance my DIV is "wrappervideo"
<script>
var viewWidth = window.innerWidth;
var viewHeight = window.innerHeight;
var narrowPadding = (((viewWidth/1.7777)-(viewHeight/1.5))/2);
var tallHeight = (viewHeight/1.5);
var tallWidth = (viewHeight/1.5)*1.7777;
var tallPadding = ((viewWidth)-(viewHeight/1.5)1.7777)/2;
function findAspectRatio() {
if ( viewWidth/(viewHeight/1.5) >= 1.777) {
setTimeout(narrow,0)}
if ( viewWidth/(viewHeight/1.5) <= 1.777) {
setTimeout(tall,0)}
if ( viewWidth/(viewHeight/1.5) == 1.777) {
setTimeout(equal,0)}
}
function equal() {
wrappervideo.style.top = '0px';
wrappervideo.style.width = '100%'; }
function narrow() {
wrappervideo.style.top = narrowPadding;
wrappervideo.style.width = '100%'; }
function tall() {
wrappervideo.style.right = tallPadding;
wrappervideo.style.width = tallWidth; }
</script>
Edited - This is what I have currently. Any thoughts on why this isn't working?

JS OnLoad Images Not Being Resized

So I am sure I am missing something small here. I wrote this awhile ago but I came back to it the other day to try and remember why I stopped working on it. Then I realized it's because when you load the page for the first time it doesn't resize the images in the image gallery container.
Then on page refresh the images resize themselves the way they are supposed to. Here is the code.
var ImageGallery = (function(){
/*
Load Images expects an array of URLS for your images, then
it returns an array of new images.
*/
function loadImages(urls){
var images = [];
for(i = 0; i < urls.length; i++){
var tempImage = new Image();
tempImage.src = urls[i];
tempImage.className = "slider-images";
var image = scaleImage(tempImage, 100,100);
//adds even listener to each image
image.addEventListener('click', function(){
addMainPicture(this);
}, false);
images.push(image);
}
var imageContainer = document.getElementById("image-container");
for(i = 0; i < images.length; i++){
imageContainer.appendChild(images[i]);
}
//add main picture
var temp = new Image();
temp.src = urls[0];
temp.className = "slider-images";
var tempMainImage = scaleImage(temp,350,350);
console.log(tempMainImage);
addMainPicture(tempMainImage);
}
/*
Adds the Main Picture. In here you can set the size you want the image
to be, and other styling for the image. Takes in the url for the image.
*/
function addMainPicture(image){
var mainPicture = document.getElementById("main-picture");
mainPicture.src = image.src;
//add styles
mainPicture.style.display = "block";
mainPicture.style.margin = "0px auto";
}
/*
Scales the image taken in to the maxWidth, and maxHeight
stated.Only scales down. Not up.
*/
function scaleImage(img, maxW, maxH){
var maxWidth = maxW,
maxHeight = maxH,
ratio = 0,
imgWidth = img.width,
imgHeight = img.height;
//check width
if(imgWidth > maxWidth){
ratio = maxWidth / imgWidth;
img.width = maxWidth;
img.height = imgHeight * ratio;
imgHeight = imgHeight * ratio;
imgWidth = imgWidth * ratio;
}
//check height
if(imgHeight > maxHeight){
ratio = maxHeight / imgHeight;
img.height = maxHeight;
img.width = maxWidth;
imgWidth = imgWidth * ratio;
}
return img;
}
/*
This runs it all.
*/
function init(){
var urls = ["http://placehold.it/400x400","http://placehold.it/400x400/FFF000","http://placehold.it/400x400/FF0000","http://placehold.it/400x400/0000FF"];
//load in urls for images
loadImages(urls);
var leftButton = document.getElementById("scroll-left"),
rightButton = document.getElementById("scroll-right");
leftButton.addEventListener('click', function(){
var imageContainer = document.getElementById("image-container");
var currentLeft = "";
//checks for NaN
if(imageContainer.style.left == ""){
currentLeft = 0;
}else{
currentLeft = parseInt(imageContainer.style.left);
}
var end = currentLeft + 300;
function frame(){
currentLeft+=5;
imageContainer.style.left = currentLeft+"px";
if(currentLeft == end)
clearInterval(id);
}
var id = setInterval(frame, 10);
}, false);
rightButton.addEventListener('click', function(){
var imageContainer = document.getElementById("image-container");
var currentLeft = "";
if(imageContainer.style.left == ""){
currentLeft = 0;
}else{
currentLeft = parseInt(imageContainer.style.left);
}
var end = currentLeft - 300;
function frame(){
currentLeft-=5;
imageContainer.style.left = currentLeft+"px";
if(currentLeft == end)
clearInterval(id);
}
var id = setInterval(frame, 10);
}, false);
}
return {
init: function(){
init();
}
}
}());
ImageGallery.init();
Sure I am missing something small here but would really like another set of eyes on it.
Here is the fiddle.

Use onLoad event for images. Because your images are not loaded and you need to load images first to scale them:-
tempImage.onload = function(){
scaleImage(this, 100,100);//here your scale code goes
}

You need to run ImageGallery.init(); once the document has loaded, with jQuery you would use:
$(function() {
ImageGallery.init();
});
Without jQuery, you can use
<body onload="ImageGallery.init();">

Javascript - random images error

I have the following problem I have 21 little pictures, and I want them positioned randomly in a the window in defined time intervals.
I have the following code, and I know what causes the problem, but I can't solve it.
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(Prep6);
addLoadEvent(Prep7);
function Prep6() {
window_Height = window.innerHeight;
window_Width = window.innerWidth;
image_Element = document.getElementById("loader06");
image_Height = image_Element.clientHeight;
image_Width = image_Element.clientWidth;
availSpace_V = window_Height - image_Height;
availSpace_H = window_Width - image_Width;
moveImage7();
var changeInterval = 300;
setInterval(moveImage7, changeInterval);
}
function moveImage6() {
var randNum_V = Math.round(Math.random() * availSpace_V);
var randNum_H = Math.round(Math.random() * availSpace_H);
image_Element.style.top = randNum_V + "px";
image_Element.style.left = randNum_H + "px";
}
function Prep7() {
window_Height = window.innerHeight;
window_Width = window.innerWidth;
image_Element = document.getElementById("loader07");
image_Height = image_Element.clientHeight;
image_Width = image_Element.clientWidth;
availSpace_V = window_Height7 - image_Height;
availSpace_H = window_Width - image_Width;
moveImage7();
var changeInterval = 300;
setInterval(moveImage7, changeInterval);
}
function moveImage7() {
var randNum_V = Math.round(Math.random() * availSpace_V);
var randNum_H = Math.round(Math.random() * availSpace_H);
image_Element.style.top = randNum_V + "px";
image_Element.style.left = randNum_H + "px";
}
And the problem is:
moveImage7();
function moveImage6()
How can I solve it?

I believe you are having some scope issues. In other words, the variables used in your moveImage6() and moveImage7() function are not seen because they are local to your other functions. To fix this you must pass those variables to your moveImage functions. Your moveImage functions are called periodically via the setInterval function, so pass parameters as follows:
setInterval(function(){
moveImage6(availSpace_V, availSpace_H, image_Element);
}, changeInterval);
This would also require you to update your moveImage6() and moveImage7() functions to accept those parameters as well.
Passing parameters with setInterval
jsfiddle: simplified in action
Hope this helps!
PS: you may want to change window_Height7 in prep7() to window_Height

Image() onLoad not waiting for image to load

I've figured out the centering and resizing issues, but I still can't get onLoad to work properly. Anyone have any ideas? I thought onLoad was supposed to wait for the image to be loaded completely before firing the code. As this is right now, it resizes the img for the next img, and fades it in before it's loaded, so the previous image fades in again. Once the show has run through once, it works perfectly, so obviously it's not waiting for the image to load completely before firing imageLoad().
<div id="slideShow">
<div id="slideShowImg" style="display:none; margin-right:auto; margin-left:auto;">
</div>
<div id="slideShowThumbs">
</div>
<script type="text/javascript">
loadXMLDoc('http://www.thehoppr.com/hopspots/82/82.xml', function() {
var slideShow = document.getElementById('slideShow');
var items = [];
var nl = xmlhttp.responseXML.getElementsByTagName('image');
var i = 0;
var t;
var slideShowImg = document.getElementById('slideShowImg');
var slideShow = document.getElementById('slideShow');
var maxHeight = 300;
var maxWidth = 800;
var imgNode = new Image();
function image() {
var nli = nl.item(i);
var src = nli.getAttribute('src').toString();
var width = parseInt(nli.getAttribute('width').toString());
var height = parseInt(nli.getAttribute('height').toString());
imgNode.onLoad = imageLoad();
imgNode.src = src;
imgNode.height = height;
imgNode.width = width;
imgNode.setAttribute("style", "margin-right:auto; margin-left:auto; display:block;");
var ratio = maxHeight / maxWidth;
if (imgNode.height / imgNode.width > ratio) {
// height is the problem
if (imgNode.height > maxHeight) {
imgNode.width = Math.round(imgNode.width * (maxHeight / imgNode.height));
imgNode.height = maxHeight;
}
} else {
// width is the problem
if (imgNode.width > maxHeight) {
imgNode.height = Math.round(imgNode.height * (maxWidth / imgNode.width));
imgNode.width = maxWidth;
}
}
}
function imageLoad() {
slideShowImg.appendChild(imgNode);
Effect.Appear('slideShowImg', {
duration: 1
});
t = setTimeout(nextImage, 7000);
}
function nextImage() {
slideShowImg.setAttribute("style", "display:none");
if (i < nl.length - 1) {
i++;
image();
} else {
i = 0;
image();
}
}
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//XML Loaded, create the slideshow
alert(xmlhttp.responseText);
image();
}
});
</script>

Here are some of my thoughts (it's all open discussion)...
Preloading - Since you're limited to downloading 2 resources in parallel per hostname, it may not make sense to preload everything up front. Since it's a slideshow, how about modifying image() to download the i + 1 image through an Image object that doesn't get appended to the DOM? It doesn't seem beneficial to prefetch i + 2 and beyond in a slideshow setting.
Centering the images - Regarding using the auto margin width for horizontal centering, I believe you'll have to explicitly set the image to display:block. Obviously that doesn't solve centering vertically. Are all the images the same size? Also, will the slideShowImg div have a defined height/width? If so, then some math can be applied to achieve the centering.
Hope this helps! :)

Ok so I fixed the issue with the onLoad, and I even added a little preloading to help the slideshow along as well. All I had to do was define the onload first, and then do everything else except define the src inside the onload's function. I then added a little nextImg preloading so there's little if no hiccup between images even if it's the first time the browser is loading them. Here's the final code for anyone who has similar onload issues and finds there way here:
<div id="slideShow">
<div id="slideShowImg" style="display:none; margin-right:auto; margin-left:auto;">
</div>
<div id="slideShowThumbs">
</div>
<script type="text/javascript">
loadXMLDoc('/82.xml', function() {
var slideShow = document.getElementById('slideShow');
var items = [];
var nl = xmlhttp.responseXML.getElementsByTagName('image');
var i = 0;
var t;
var slideShowImg = document.getElementById('slideShowImg');
var slideShow = document.getElementById('slideShow');
var maxHeight = 300;
var maxWidth = 800;
var curImg = new Image();
var nextImg = new Image();
function image() {
var cli = nl.item(i);
var src = cli.getAttribute('src').toString();
var width = parseInt(cli.getAttribute('width').toString());
var height = parseInt(cli.getAttribute('height').toString());
curImg.onload = function() {
curImg.height = height;
curImg.width = width;
curImg.setAttribute("style", "margin-right:auto; margin-left:auto; display:block;");
slideShowImg.appendChild(curImg);
var ratio = maxHeight / maxWidth;
if (curImg.height / curImg.width > ratio) {
// height is the problem
if (curImg.height > maxHeight) {
curImg.width = Math.round(curImg.width * (maxHeight / curImg.height));
curImg.height = maxHeight;
}
} else {
// width is the problem
if (curImg.width > maxHeight) {
curImg.height = Math.round(curImg.height * (maxWidth / curImg.width));
curImg.width = maxWidth;
}
}
}
curImg.src = src;
if (i < nl.length - 1) {
var nli = nl.item(i + 1);
var nsrc = nli.getAttribute('src').toString();
nextImg.src = nsrc;
}
Effect.Appear('slideShowImg', {
duration: 1
});
t = setTimeout(nextImage, 7000);
}
function imageLoad() {}
function nextImage() {
slideShowImg.removeChild(curImg);
slideShowImg.setAttribute("style", "display:none");
if (i < nl.length - 1) {
i++;
image();
} else {
i = 0;
image();
}
}
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//XML Loaded, create the slideshow
alert(xmlhttp.responseText);
image();
}
});
</script>

Javascript News Scroller

see the news scroller on the top of this site
http://track.dc.gov/Agency/DH0
Any idea what library/functions this site uses to implment such a smooth scroller?

They have a very nicely formatted block of code you can study. Open your favorite JS debugger when you visit the site, wait for everything to get moving, and then press "Break All" or the equivalent in your debugger. You'll see something like the following:
Dashboard.UI.EndlessLine = function() {
var me = this;
me.jq = $(me);
me.classNames = { CONTAINER: "uiEndless", VIEW: "uiEndlessView", CANVAS: "uiEndlessCanvas", TILE: "uiEndlessTile" };
var canvas = null;
var view = null;
var tiles = null;
var x = 0;
var xx = 0;
var canvasWidth = 0;
var step = 1;
var delay = 40;
me.initialize = function(container, data, handler) {
required(container, "container");
required(data, "data");
required(handler, "handler");
container.addClass(me.classNames.CONTAINER);
view = newDiv(me.classNames.VIEW);
canvas = newDiv(me.classNames.CANVAS);
view.append(canvas);
container.append(view);
x = 0;
xx = 0;
canvasWidth = 0;
tiles = me.populateTiles(data, handler);
container.click(function() {
if (me.started()) me.stop(); else me.start();
});
};
me._resize = function(size) {
};
var moveId = 0;
me.start = function() {
me.stop();
me.tick();
}
me.stop = function() {
if (moveId > 0) clearTimeout(moveId);
moveId = 0;
}
me.started = function() {
return moveId > 0;
};
me.tick = function() {
var tile = tiles.current();
var width = tile.calculatedWidth;
if (x < width - step) {
x += step;
} else {
x = 0;
tile.css("left", canvasWidth + "px");
if (tiles.advance()) {
xx = 0;
canvasWidth = 0;
do {
current = tiles.current();
width = current.calculatedWidth;
current[0].style.left = canvasWidth + "px";
canvasWidth += width;
} while (!tiles.advance());
} else {
canvasWidth += width;
}
}
canvas[0].style.left = -(xx) + "px";
xx += step;
moveId = setTimeout(me.tick, delay);
}
me.populateTiles = function(data, handler) {
var tiles = new Dashboard.Core.List();
var viewWidth = view.contentWidth();
var maxHeight = 0;
each(data, function() {
var tile = newDiv(me.classNames.TILE);
handler.call(this, tile);
tile.css({ left: canvasWidth + "px", top: 0 });
canvas.append(tile);
var width = tile.outerWidth();
var height = tile.outerHeight();
if (maxHeight < height) maxHeight = height;
tile.calculatedWidth = width;
canvasWidth += width; // getting width may only be done after the element is attached to DOM
tiles.append(tile);
view.height(height);
});
return tiles.createCycle();
}
}
I'm impressed -- everything looks professional and nicely namespaced.
Update: If you want an explanation of how it works, focus on the tick method defined above. Glossing over all the details (cause I haven't really studied it myself), it calculates a step size, moves the message element to the left by the some amount, and schedules the next tick call for 40 milliseconds in the future.

jQuery enthusiast, Remy Sharp, has his own Marquee Plugin that you can implement pretty easily. You can gather deeper details of it on his blog or by visiting the demo page.
For Mootools users, there's Mooquee.
You can also view the actual code for this example online at http://track.dc.gov/Resource/Script/ - do a search for "uiEndless" to find the target-scripting.