We Keep Coding

Resize video frame after flipping phone to the landscape mode

This is an url of video
<iframe src="http://xxxx.com/embed-xxx-720x405.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="720" height="405"></iframe>
I got this JS to change width and height in url from 640px:
$(window).on("load", function(event){
var w = $(this).width() -50;
if(w <= 640)
$('.videoimg iframe').each(function () {
$(this).attr('src', $(this).attr('src').replace('720', '' + w + ''));
$(this).attr('src', $(this).attr('src').replace('405', '305'));
$(this).attr('width', $(this).attr('width').replace('720', '' + w + ''));
$(this).attr('height', $(this).attr('height').replace('405', '305'));
})
});
It works with loading a website, but I need that it should work when I flip my phone on landscape so people don't need to refresh the page.
Resize function doesnt work, it should be something like that
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.addEventListener("orientationchange", function() {
rvlWidth(w);
}, false);
But I dont know how to do it, do you have any solutions for that?

It seems like the rotation event is set before the 'load' event is fired + 'w' is not defined in the context (at least on the firest time)
try gather the codes as the following
var onRotateCallback = function() {
var screenWidth = $(window).width() - 50;
var videoFrames = $('.videoimg iframe');
if (screenWidth <= 640) {
videoFrames.each(function() {
var frame = $(this);
var originalSRC = $(this).attr('src');
var newSRC = originalSRC.replace('720', screenWidth).replace('405', '305');
frame.attr('src', newSRC);
frame.attr('width', screenWidth);
frame.attr('height', '350');
});
}
};
$(window).on("load", function(e) {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
onRotateCallback();
$(window).on("resize", function() {
onRotateCallback();
});
}
});

Executing $(window).load() and $(window).resize() in Drupal 7

I'm trying to resize a couple divs on page load and window resize in drupal 7.
theme.info
name = Theme
description = The Theme
core = 7.x
stylesheets[all][] = css/style.css
scripts[] = js/scripts.js
(the rest)
scripts.js
$(window).load(function() {
getViewport();
});
$(window).resize(function() {
getViewport();
});
function getViewport() {
alert('function hit');
var viewportwidth;
var viewportheight;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
viewportheight = window.innerHeight || document.documentElement.clientHeight || document.body.clientWidth;
}
document.getElementById("content").style.height = (window.innerHeight - 150) + 'px';
document.getElementById('sidebar-first').style.height = (window.innerHeight - 50) + 'px';
}
But neither load, resize, or the function or getting hit. I'm sure it's my ignorance of utilizing this in drupal, but I can't seem to find the answer.
I've even tried including my own jquery library in the info file, but to no avail.
Thanks

No jQuery needed for this code to work, just create some event listeners and kill the $(window) method chains.
window.addEventListener('load', function() { getViewport() });
window.addEventListener('resize', function() { getViewport() });
Note:
You'll want to normalize addEventListener() if you need to target less than IE9. Something like:
if ( window.addEventListener ) {
// Modern browsers
window.addEventListener('load', function() { getViewport() });
window.addEventListener('resize', function() { getViewport() });
} else
// Browsers that need to die
window.attachEvent('onLoad', function() { getViewport() });
window.attachEvent('onResize', function() { getViewport() });
}

manipulate when inview.js is firing

i would like to know how i can manipulate the inview.js script that the moment when its fired is not at first pixels in viewport, and the last when the element is going out but rather for example 50pixels later or earlier.
the script of inview.js is
(function ($) {
function getViewportHeight() {
var height = window.innerHeight; // Safari, Opera
var mode = document.compatMode;
if ( (mode || !$.support.boxModel) ) { // IE, Gecko
height = (mode == 'CSS1Compat') ?
document.documentElement.clientHeight : // Standards
document.body.clientHeight; // Quirks
}
return height;
}
$(window).scroll(function () {
var vpH = getViewportHeight(),
scrolltop = (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop),
elems = [];
// naughty, but this is how it knows which elements to check for
$.each($.cache, function () {
if (this.events && this.events.inview) {
elems.push(this.handle.elem);
}
});
if (elems.length) {
$(elems).each(function () {
var $el = $(this),
top = $el.offset().top,
height = $el.height(),
inview = $el.data('inview') || false;
if (scrolltop > (top + height) || scrolltop + vpH < top) {
if (inview) {
$el.data('inview', false);
$el.trigger('inview', [ false ]);
}
} else if (scrolltop < (top + height)) {
if (!inview) {
$el.data('inview', true);
$el.trigger('inview', [ true ]);
}
}
});
}
});
// kick the event to pick up any elements already in view.
// note however, this only works if the plugin is included after the elements are bound to 'inview'
$(function () {
$(window).scroll();
});
})(jQuery);
all credits go to here
my attemp was to add a value to offset top top = $el.offset().top + 50, which works! but how can i change the value for the bottom up?
thanks ted

I'd recommend using http://imakewebthings.com/jquery-waypoints/
Which you can call like so to achieve your desired effect at 10% from the bottom:
$('.flyIn').waypoint(function() {
$(this).removeClass('hidden');
$(this).addClass('animated fadeInUp');
}, { offset: '90%' });

Dimensions of containerNode inside dojox dialog widget

I'm trying to get the dimensions of my containerNode which is a member of my dojox dialog widget, when the widget's showing animation ends.
this.dialog = new dojox.widget.Dialog( { sizeToViewport: true });
var dialogContainer = this.dialog.containerNode;
Which function or property should I use?

Since dojo V1.7 you could use dojo.position.
With the given example:
var position = dojo.position(dialogContainer);
var dimensions = {
width: position.w,
height: position.h
}
This call requires dojo/dom-geometry.
Let me know if it worked pls..

Ok, 2nd attempt now. As experimenting a little bit, didn't lead to a solution. How about a nasty little workaround?
Researching on the sizeToViewPort-option of the dojox.widget.dialog i found out, that by default there is a padding of 35px to the ViewPort. So if you know the size of the viewport, you could get the dimensions of the dialog by substracting the padding from it..
So maybe this helps:
function getNewDialog(the_padding) {
if (!the_padding || isNaN(the_padding)) {
the_padding = 35;
}
var dialog = new dojox.widget.Dialog({
sizeToViewport: true,
padding: the_padding + 'px' //nasty string conversion
});
return dialog;
}
function getViewPortSize() {
var viewPortWidth;
var viewPortHeight;
// mozilla/netscape/opera/IE7
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth;
viewPortHeight = window.innerHeight;
}
// IE6 in standards compliant mode
else if (typeof document.documentElement !== 'undefined' && typeof document.documentElement.clientWidth !== 'undefined' && document.documentElement.clientWidth !== 0) {
viewPortWidth = document.documentElement.clientWidth;
viewPortHeight = document.documentElement.clientHeight;
}
// older versions of IE fallback
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth;
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight;
}
return {
width: viewPortWidth,
heigth: viewPortHeight
};
}
function getDialogSize(the_padding) {
if (!the_padding) {
the_padding = 35;
}
var vp_size = getViewPortSize();
return {
width: vp_size.width - the_padding,
heigth: vp_size.heigth - the_padding
};
}
var costumPadding = 35; // this is also the default value of dojox.widget.dialog ...
var dialog = getNewDialog(costumPadding);
var dialogSize = getDialogSize(costumPadding);
Hope I didn't miss anything.

This is one of possible sollutions
dojo.connect(mydialog, "show", function(){
setTimeout(function(){
var position = dojo.position(dialogContainer);
var dimensions = {
width: position.w,
height: position.h
}
alert(position.h);
},mydialog.duration + 1500);
});

How to: Dynamically set <BODY> background-position?

I posted a question previously that got off topic, I'm reposting with better code that I have VERIFIED is compatible with iPhone (it works with mine anyway!)
I just want to apply background-position coordinates to the body element and call the script conditionally for iPhone, iPod, & iPad. Here's my conditional call for those devices:
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
// do something
} else {
//do this
}
Now, I've found this excellent script that sets the "top: x" dynamically on the basis of scroll position. Everyone has told me (and ALL of the tutorials and Google search results as well) that it's impossible to set scroll position dynamically for iPhone because of the viewport issue. HOWEVER, they are wrong because if you scroll to the bottom of the page and view this javascript demo on iPhone, you can scroll and the
<div style="background-position: fixed; top: x (variable)"></div>
div DOES stay centered on iPhone. I really hope this question helps alot of people, I thought it was impossible, but it's NOT... I just need help stitching it together!
The original code (you can test it on iPhone yourself) is here:
http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/
**EDIT: For reference, here is the div that DOES absolute position itself by dynamically applying the "top: x" element as (even on iPhone):
http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/**
So I just need help getting the following code to apply the dynamic "background-position: 0 x" to the BODY tag where x is centered and relative to the viewport position. Also, needs to be nested inside the above code that is conditional for iPhone and similar devices.
// Page Size and View Port Dimension Tools
// http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/
if (!sb_windowTools) { var sb_windowTools = new Object(); };
sb_windowTools = {
scrollBarPadding: 17, // padding to assume for scroll bars
// EXAMPLE METHODS
// center an element in the viewport
centerElementOnScreen: function(element) {
var pageDimensions = this.updateDimensions();
element.style.top = ((this.pageDimensions.verticalOffset() + this.pageDimensions.windowHeight() / 2) - (this.scrollBarPadding + element.offsetHeight / 2)) + 'px';
element.style.left = ((this.pageDimensions.windowWidth() / 2) - (this.scrollBarPadding + element.offsetWidth / 2)) + 'px';
element.style.position = 'absolute';
},
// INFORMATION GETTERS
// load the page size, view port position and vertical scroll offset
updateDimensions: function() {
this.updatePageSize();
this.updateWindowSize();
this.updateScrollOffset();
},
// load page size information
updatePageSize: function() {
// document dimensions
var viewportWidth, viewportHeight;
if (window.innerHeight && window.scrollMaxY) {
viewportWidth = document.body.scrollWidth;
viewportHeight = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) {
// all but explorer mac
viewportWidth = document.body.scrollWidth;
viewportHeight = document.body.scrollHeight;
} else {
// explorer mac...would also work in explorer 6 strict, mozilla and safari
viewportWidth = document.body.offsetWidth;
viewportHeight = document.body.offsetHeight;
};
this.pageSize = {
viewportWidth: viewportWidth,
viewportHeight: viewportHeight
};
},
// load window size information
updateWindowSize: function() {
// view port dimensions
var windowWidth, windowHeight;
if (self.innerHeight) {
// all except explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
// explorer 6 strict mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
// other explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
};
this.windowSize = {
windowWidth: windowWidth,
windowHeight: windowHeight
};
},
// load scroll offset information
updateScrollOffset: function() {
// viewport vertical scroll offset
var horizontalOffset, verticalOffset;
if (self.pageYOffset) {
horizontalOffset = self.pageXOffset;
verticalOffset = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
// Explorer 6 Strict
horizontalOffset = document.documentElement.scrollLeft;
verticalOffset = document.documentElement.scrollTop;
} else if (document.body) {
// all other Explorers
horizontalOffset = document.body.scrollLeft;
verticalOffset = document.body.scrollTop;
};
this.scrollOffset = {
horizontalOffset: horizontalOffset,
verticalOffset: verticalOffset
};
},
// INFORMATION CONTAINERS
// raw data containers
pageSize: {},
windowSize: {},
scrollOffset: {},
// combined dimensions object with bounding logic
pageDimensions: {
pageWidth: function() {
return sb_windowTools.pageSize.viewportWidth > sb_windowTools.windowSize.windowWidth ?
sb_windowTools.pageSize.viewportWidth :
sb_windowTools.windowSize.windowWidth;
},
pageHeight: function() {
return sb_windowTools.pageSize.viewportHeight > sb_windowTools.windowSize.windowHeight ?
sb_windowTools.pageSize.viewportHeight :
sb_windowTools.windowSize.windowHeight;
},
windowWidth: function() {
return sb_windowTools.windowSize.windowWidth;
},
windowHeight: function() {
return sb_windowTools.windowSize.windowHeight;
},
horizontalOffset: function() {
return sb_windowTools.scrollOffset.horizontalOffset;
},
verticalOffset: function() {
return sb_windowTools.scrollOffset.verticalOffset;
}
}
};

<?php
/* detect Mobile Safari */
$browserAsString = $_SERVER['HTTP_USER_AGENT'];
if (strstr($browserAsString, " AppleWebKit/") && strstr($browserAsString, " Mobile/"))
{
$browserIsMobileSafari = true;
echo
"
<script>
$(document).ready(function() {
$(window).scroll(function() {
windowPosition = $(this).scrollTop();
$('body').stop().animate({'backgroundPositionY' : windowPosition+'px'}, 500);
});
});
</script>
"
;} ?>