We Keep Coding

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%' });

Prevent Javascript from continuing a function if the screen is lower than 480 pixels

First of all, I'm not a javascript expert. I'm going crazy on trying to figure out how to make a conditional execution of a certain javascript. I'm using JQuery to absolutely center my block in a browser page, but only if the screen size is bigger than 480px (In other meaning, I don't want this script to run on smartphones). I'm using CSS media query to indicate my request. The thing is, this script works fine on all smartphones, Safari 5+, IE10, Firefox 13. BUT IT DOESN'T WORK ON IE6-9 and Opera 12 (As far as I understand, they don't support transitions). CAN ANYONE PLEASE HELP ME FIGURE OUT WHAT I AM DOING WRONG? And if there's a better way of doing this? (I tried #media query in CSS but The script keeps on running no matter what)... I would really appreciate the help.
<script>
if (matchMedia('only screen and (max-device-width:800px) and ' + '(orientation: portrait)').matches) {
// smartphone/iphone... maybe run some small-screen related dom scripting?
event.preventDefault();
} else{
//Absolute Content Center
function CenterItem(theItem){
var winWidth=$(window).width();
var winHeight=$(window).height();
var windowCenter=winWidth/2;
var itemCenter=$(theItem).width()/2;
var theCenter=windowCenter-itemCenter;
var windowMiddle=winHeight/2;
var itemMiddle=$(theItem).height()/2;
var theMiddle=windowMiddle-itemMiddle;
if(winWidth>$(theItem).width()){ //horizontal
$(theItem).css('left',theCenter);
} else {
$(theItem).css('left','0');
}
if(winHeight>$(theItem).height()){ //vertical
$(theItem).css('top',theMiddle);
} else {
$(theItem).css('top','0');
}
}
$(document).ready(function() {
CenterItem('.content');
});
$(window).resize(function() {
CenterItem('.content');
});
} //end of "else" (normal execution)
</script>

You can try this :-
<script>
var screenWidth = screen.width;
if (screenWidth > 480 ) {
//Absolute Content Center
function CenterItem(theItem){
var winWidth=$(window).width();
var winHeight=$(window).height();
var windowCenter=winWidth/2;
var itemCenter=$(theItem).width()/2;
var theCenter=windowCenter-itemCenter;
var windowMiddle=winHeight/2;
var itemMiddle=$(theItem).height()/2;
var theMiddle=windowMiddle-itemMiddle;
if(winWidth>$(theItem).width()){ //horizontal
$(theItem).css('left',theCenter);
} else {
$(theItem).css('left','0');
}
if(winHeight>$(theItem).height()){ //vertical
$(theItem).css('top',theMiddle);
} else {
$(theItem).css('top','0');
}
}
$(document).ready(function() {
CenterItem('.content');
});
$(window).resize(function() {
CenterItem('.content');
});
}
</script>

To get exact Height and Width in all browser is quite big deal because of IE, But no worries is the solution for all Browser including IE 6 to latest.
Here are those 2 function:
if (matchMedia('only screen and (max-device-width:800px) and ' + '(orientation: portrait)').matches) {
// smartphone/iphone... maybe run some small-screen related dom scripting?
event.preventDefault();
} else{
//Absolute Content Center
$(document).ready(function() {
CenterItem('.content');
});
$(window).resize(function() {
CenterItem('.content');
});
} //end of "else" (normal execution)
function CenterItem(theItem){
var winWidth=getWindowWidth();
var winHeight=getWindowHeight();
var windowCenter=winWidth/2;
var itemCenter=$(theItem).width()/2;
var theCenter=windowCenter-itemCenter;
var windowMiddle=winHeight/2;
var itemMiddle=$(theItem).height()/2;
var theMiddle=windowMiddle-itemMiddle;
if(winWidth>$(theItem).width()){ //horizontal
$(theItem).css('left',theCenter);
} else {
$(theItem).css('left','0');
}
if(winHeight>$(theItem).height()){ //vertical
$(theItem).css('top',theMiddle);
} else {
$(theItem).css('top','0');
}
}
function getWindowHeight() {
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myHeight = document.body.clientHeight;
}
return myHeight;
}
function getWindowWidth() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth;
}
return myWidth;
}
This will help you to get exact height in any Browser, in that way you can apply your logic. Hope this help!!!

Simplest thing is not to attach the event handler if the media query does not match.
$.fn.extend({
centerItem: function () {
return this.each(function () {
var $this = $(this),
hCenter = ( $(window).width() - $this.width() ) / 2,
vCenter = ( $(window).height() - $this.height() ) / 2;
$this.css({
left: hCenter > 0 ? hCenter : 0,
top: vCenter > 0 ? vCenter : 0
});
});
}
});
$(function() {
var bigScreen = 'only screen and (max-device-width:800px) and (orientation: portrait)';
if ( matchMedia(bigScreen).matches ) {
$(window).resize(function() {
$('.content').centerItem();
});
}
});
Notes
$() replaces $(document).ready(). See http://api.jquery.com/ready/
By convention, only object constructors start with a capital letter, so your CenterItem() function should actually be called centerItem().
I've turned your function into a jQuery plugin. You can of course continue using your own implementation if you find that confusing.
The .css() function can take an object argument so you can set multiple CSS properties in one step.
I've used the ternary operator (expression ? ifTrue : ifFalse) to replace the if.

You can do
window.innerHeight
window.innerWidth
to get the dimensions of the viewport. Now you could do:
var width = window.innerWidth
if (width > 480){
/* do desktop stuff*/
}
As alternative, you could go for the UserAgentString and/or Operating with:
window.navigator
(more reliable Detect-script)
However, either attempt might fail in some cirumstances.
edit: would be nice if you posted your match-media function.
edit2: use the script for correct viewport detection: https://stackoverflow.com/a/2035211/1047823
and then alter your code:
if ( getViewport()[0] < 480 ) {
// smartphone/iphone... maybe run some small-screen related dom scripting?
event.preventDefault();
} else{
// your desktop code
}

Use variable from inside another function jQuery

I'm trying to use a variable from a function, but the variable does seem to work because I'm trying to use it outside the function.
The variable I'm trying to use is called 'viewportwidth', which I'm also trying to use after the first 'orientationchange resize' function.
Is there anyway to use this variable outside my function. I have attempted it below the first function in a new variable called 'sidebarwidth'
Please see code below. Can any one help?
$(window).bind("orientationchange resize", function(e) {
<?php if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) echo "$('#wrapper, #sidebar').addClass('iphone-min-height');" ; ?>
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
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
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
$( '#wrapper' ).css( {
'width' : viewportwidth + 'px',
'height' : viewportheight + 'px'
});
var iWebkit;
if(!iWebkit){
iWebkit=window.onload=function(){
function fullscreen(){
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
if(a[i].className.match("noeffect")){}
else{a[i].onclick=function(){
window.location=this.getAttribute("href");return false}}}}
function hideURLbar(){window.scrollTo(0,0.9)}iWebkit.init=function(){
fullscreen();
hideURLbar()
};
iWebkit.init()}}
}).trigger("resize");
var $openClose = $("span.open-menu"),
buttonwidth = $openClose.outerWidth(),
sidebarwidth = viewportwidth - buttonwidth,
$wrapper = $("#wrapper"),
$sidebar = $("#sidebar"),
menuOpen = false;
$sidebar.css({
'left' : '-210px',
'width' : sidebarwidth + 'px'
});
$openClose.on('click', function () {
if (menuOpen) { // run if button says "Close Menu"
$sidebar.stop().animate({ left: "-" + sidebarwidth + "px" }, 400);
$openClose.html("Menu");
$(this).addClass('active');
menuOpen = false;
} else { // run if button says "Open Menu"
$sidebar.stop().animate({ left: "0" }, 400);
$openClose.html("Close");
$(this).removeClass('active');
menuOpen = true;
}
});

Why are you doing this ?!
<?php
if( strstr($_SERVER['HTTP_USER_AGENT'],'iPhone')
|| strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{
echo "$('#wrapper, #sidebar').addClass('iphone-min-height');" ;
}
?>
This is just stupid! Instead of doing this with using jQuery for it, you should be setting <body class="has-iphone">. There is no need for using bloatware.
This is pointless.
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as
//the first line in the document)
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
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
Nobody is supporting IE6 anymore , and which would be the "older IE" ? Do you really expect people with IE5.5 ?! This is just a bad case of copy-paste ...
As for the original problem, if you want to share variables between two or more function , and not put the in global scope, then use closures:
var handlers = (function () {
var shared_variable,
current;
return {
click: function (e) {
// code for click handler
},
mouseover: function (e) {
},
mouseout: function (e) {
}
};
}()),
menu = document.getElementById('menu');
$(document).on('click', handler.click);
$(menu).on('mouseover', handler.mouseover);
$(menu).on('mouseout', handler.mouseout);
All function will share the current variable, which, for example, is really useful when building a responsive menu.
P.S also, you should try to avoid setting css values in javascript. First of all it violates SoC and it also triggers Reflow in browser on each value you set.

Declare the variable outside the handler for orientationchange and resize. I also recommend wrapping everything in a closure to avoid polluting the global namespace:
(function(){
var viewportwidth;
var viewportheight;
$(window).bind("orientationchange resize", function(e) {
// Rest of your current code
})();

Move the variable out to a higher scope; it should then be available to both functions.
If they are global variables, both functions should be able to see them.

Take viewportwidth out of the resize function make it a global or attribute of some global object, then on resize set that variable, onclick calculate various values from viewportwidth and use them.

dynamically setting the iframe height; not working on ie and chrome

I am trying to set the height of an iframe dynamically using javascript and Jquery.
But for reason this is not working in Ie8 & chrome. (But its working fine on firefox)
can some body please help?
Thanks
function resizePanel() {
window.console.log("ran the resize panel function");
var frame = document.getElementsByTagName('iframe')[0];
if(frame != null) {
var height;
if(self.innerHeight) {
window.console.log("ran the self.innerHeight");
height= self.innerHeight;
}
else if (document.documentElement && (document.documentElement.clientHeight)) {
window.console.log("ran the clientHeight");
height = document.documentElement.clientHeight;
}
else if(document.body) {
window.console.log("ran the document.body");
height = document.body.clientHeight;
}
frame.style.height = height - 165 + 'px'
}};
$(document).ready(function() {
resizePanel();
$(window).resize(function() {
resizePanel();
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
function EndRequest(sender, args) {
resizePanel();
}

Your code seems slightly complicated, you could just do the following:
function resizePanel() {
window.console.log("ran the resize panel function");
var frame = document.getElementsByTagName('iframe')[0];
if(frame != null) {
frame.style.height = frame.contentWindow.document.body.scrollHeight + "px";
}
}
Should work in all major browsers.

The Code works fine on all browsers by changing one line.
Instead of using
var frame = document.getElementsByTagName('iframe')[0];
use
var frame = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_Options_iframe");
The problem was Chrome and IE have hidden Iframes and when we use getElementsByTagName it returns us the array of all iframes. so we try to access [0] index, it was referring to some other iframe.
I hope this will help.
The complete code is:
function resizePanel() {
var frame = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_Options_iframe");
if(frame != null) {
var height;
if(self.innerHeight) {
height= self.innerHeight;
}
else if (document.documentElement && (document.documentElement.clientHeight)) {
height = document.documentElement.clientHeight;
}
else if(document.body) {
height = document.body.clientHeight;
}
frame.style.height = height - 165 + 'px'
}};
$(document).ready(function() {
resizePanel();
$(window).resize(function() {
resizePanel();
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
function EndRequest(sender, args) {
resizePanel();
}

Position a dialog box in center of viewable region of a browser window using javascript/DOM

I need to position a dialog box(read div) in the center of viewable region of a browser window. I need to use javascript DOM for doing this - making use of scrollHeight, scrollTop, clientHeight, etc. is permissible.
The dialog box needs to appear upon clicking a link, it remains invisible otherwise.
CAN'T USE JQUERY TO CREATE A MODAL DIALOG.
Can somebody help me with the centering part of this problem
Regards

(function () {
var getVieportWidth,
getViewportHeight;
if (window.innerWidth) {
// All browsers except IE
getViewportWidth = function() { return window.innerWidth; };
getViewportHeight = function() { return window.innerHeight; };
}
else if (document.documentElement && document.documentElement.clientWidth) {
// IE6 with DOCTYPE
getViewportWidth = function() { return document.documentElement.clientWidth; };
getViewportHeight = function() { return document.documentElement.clientHeight; };
}
else if (document.body.clientWidth) {
// IE4, IE5, IE6 without DOCTYPE
getViewportWidth = function() { return document.body.clientWidth; };
getViewportHeight = function() { return document.body.clientHeight; };
}
var dialogDIVNode = document.getElementById('someID'),
dialogDIVNodeWidth = dialogDIVNode.offsetWidth,
dialogDIVNodeHeight = dialogDIVNode.offsetHeight;
document.getElementById('someLinkID').addEventListener('click', function (e) {
e.preventDefault();
dialogDIVNode.style.left = ( getViewportWidth() / 2 - dialogDIVNodeWidth / 2 ) + 'px';
dialogDIVNode.style.top = ( getViewportHeight() / 2 - dialogDIVNodeHeight / 2) + 'px';
dialogDIVNode.style.display = 'block';
}, false);
}());

Here is how to successfully center a dialog box, regardless of the position in the document:
dialogue.style.left = window.innerWidth - (window.innerWidth - dialogue.offsetWidth) / 2
- dialogue.offsetWidth + pageXOffset;
dialogue.style.top = window.innerHeight - (window.innerHeight - dialogue.offsetHeight) / 2
- dialogue.offsetHeight / 2 + pageYOffset;