We Keep Coding

how can I combine these two jquery calculations?

I have some inputs which has the foot/inch of two widths and two heights. I have to convert them into all foot and get the square footage.
example, width is 1'2" and height is 1'2". Another width is 2'1" and height is 2'1".
I have to convert the width into foot then times the height for both of them and then multiply the first width and height then addition to the 2nd width and height. Also, each side will need an addition 1.6 multiplication on top.
I have done it with the first width and height but I figured doing it for the second one is duplicating but don't have much idea what is the best way to combine them together since.
I have something like this for my js
$('.total-footage').on('click', function(){
/*Side A Calculation*/
var $sideAFootValueW = parseInt($('.dimensions-side-a .dimension-width .dimension-input-foot').val());
var $sideAInchValueW = parseInt($('.dimensions-side-a .dimension-width .dimension-input-inch').val());
if(($sideAFootValueW == "") || (!$.isNumeric($sideAFootValueW))){
$sideAFootValueW = 0;
}
if(($sideAInchValueW == "") || (!$.isNumeric($sideAInchValueW))){
$sideAInchValueW = 0;
}else{
$sideAInchValueW = $sideAInchValueW/12;
}
var totalFootAW = $sideAFootValueW + $sideAInchValueW;
var $sideAFootValueH = parseInt($('.dimensions-side-a .dimension-height .dimension-input-foot').val());
var $sideAInchValueH = parseInt($('.dimensions-side-a .dimension-height .dimension-input-inch').val());
if(($sideAFootValueH == "") || (!$.isNumeric($sideAFootValueH))){
$sideAFootValueH = 0;
}
if(($sideAInchValueH == "") || (!$.isNumeric($sideAInchValueH))){
$sideAInchValueH = 0;
}else{
$sideAInchValueH = $sideAInchValueH/12;
}
var totalFootAH = $sideAFootValueH + $sideAInchValueH;
var sideATotal = totalFootAH * totalFootAW * 1.6;
/*Side B Calculation*/
var $sideBFootValueW = parseInt($('.dimensions-side-b .dimension-width .dimension-input-foot').val());
var $sideBInchValueW = parseInt($('.dimensions-side-b .dimension-width .dimension-input-inch').val());
if(($sideBFootValueW == "") || (!$.isNumeric($sideBFootValueW))){
$sideBFootValueW = 0;
}
if(($sideBInchValueW == "") || (!$.isNumeric($sideBInchValueW))){
$sideBInchValueW = 0;
}else{
$sideBInchValueW = $sideBInchValueW/12;
}
var totalFootBW = $sideBFootValueW + $sideBInchValueW;
var $sideBFootValueH = parseInt($('.dimensions-side-b .dimension-height .dimension-input-foot').val());
var $sideBInchValueH = parseInt($('.dimensions-side-b .dimension-height .dimension-input-inch').val());
if(($sideBFootValueH == "") || (!$.isNumeric($sideBFootValueH))){
$sideBFootValueH = 0;
}
if(($sideBInchValueH == "") || (!$.isNumeric($sideBInchValueH))){
$sideBInchValueH = 0;
}else{
$sideBInchValueH = $sideBInchValueH/12;
}
var totalFootBH = $sideBFootValueH + $sideBInchValueH;
var sideBTotal = totalFootBH * totalFootBW * 1.6;
$('.total').empty();
$('.total').append(sideATotal+sideBTotal);
});
I figured I should be have a function so this calculation can be done easily even if there are more sides I need to calculate

Add the two helped functions to your code
function getSideDimensions($side){
var width = getDimension($side.find('.dimension-width'));
var height = getDimension($side.find('.dimension-height'));
return width * height * 1.6;
}
function getDimension($dimension){
var feet = $dimension.find('.dimension-input-foot');
var inches = $dimension.find('.dimension-input-inch');
if((feet == "") || (!$.isNumeric(feet))){
feet = 0;
}
if((inches == "") || (!$.isNumeric(inches))){
inches = 0;
}else{
inches = inches/12;
}
return feet + inches;
}
And alter your code to
$('.total-footage').on('click', function(){
var sideATotal = getSideDimensions($('.dimensions-side-a'));
var sideBTotal = getSideDimensions($('.dimensions-side-b'));
$('.total').empty();
$('.total').append(sideATotal+sideBTotal);
}

How to work mraid script into airpush

I have a query can you help me?I want to publish campaigns with mraid script into airpush and I have tested into mraid simulator (http://webtester.mraid.org/) its run perfectly on that.My script is:
<div id="adContainer" style="margin:0px;padding:0px;background-color:white;">
<div id="normal" style="display:none;margin:auto;position:relative;top:0px;left:0px;background-color:white;border-style:solid;border-width:1px;border-color:rgb(238,50,36);" onclick="javascript:resize();"><img id="smallbanner" style="position:relative!important;top:0px;left:0px;" src="http://winnowwin.com/ap/directory2422/21_banner.jpg" />
<a href="">
<div style="position:absolute;top:5px;right:5px;background-color:rgb(238,50,36);">
<div style="width:20px;height:20px;display:table-cell;text-align:center;vertical-align:middle;font-family: Arial, Helvetica, sans-serif;">X</div>
</div>
</a>
</div>
<div id="resized" style="display:none;margin:auto;position:relative;top:0px;left:0px;background-color:white;border-style:solid;border-width:1px;border-color:rgb(238,50,36);">
<img id="bigbanner" src="http://winnowwin.com/ap/directory2422/19_bg.png" />
<div style="position:absolute;top:5px;right:5px;background-color:rgb(238,50,36);">
<div style="width:20px;height:20px;display:table-cell;text-align:center;vertical-align:middle;font-family: Arial, Helvetica, sans-serif;">X</div>
</div>
</div>
</div>
<script>
function collapse() {
mraid.close();
}
function showMyAd() {
var el = document.getElementById("normal");
el.style.display = "";
mraid.addEventListener("stateChange", updateAd);
}
function resize() {
mraid.setResizeProperties({
"width": bw,
"height": bh,
"offsetX": 0,
"offsetY": 0,
"allowOffscreen": false
});
mraid.resize();
}
function updateAd(state) {
if (state == "resized") {
toggleLayer("normal", "resized");
} else if (state == "default") {
toggleLayer("resized", "normal");
}
}
function toggleLayer(fromLayer, toLayer) {
var fromElem = document.getElementById(fromLayer);
fromElem.style.display = "none";
var toElem = document.getElementById(toLayer);
toElem.style.display = "";
}
function doReadyCheck() {
var currentPosition = mraid.getCurrentPosition();
sw = currentPosition.width;
sh = currentPosition.height;
var adcon = document.getElementById("adContainer");
adcon.style.width = sw + "px";
var sb = document.getElementById("smallbanner");
sb.height = sh;
sb.width = sw;
var nor = document.getElementById("normal");
nor.style.width = parseInt(sw) - 2 + "px";
nor.style.height = parseInt(sh) - 2 + "px";
var maxSize = mraid.getMaxSize();
bw = maxSize.width;
bh = maxSize.height;
var bb = document.getElementById("bigbanner");
bb.height = bh;
bb.width = bw;
var e2 = document.getElementById("resized");
e2.style.width = bw + "px";
e2.style.height = bh + "px";
showMyAd();
}
var bw = "";
var bh = "";
var sw = "";
var sh = "";
doReadyCheck();
</script>
I'm facing issue, script is not rendering on airpush during published.can you tell me why it is happening?

You problem is you are directly using Mraid related functionality without waiting for mraid container to be in ready state. You need to wait until SDK/Container finishes initializing MRAID library into the webview, without doing will result your ad in bad/corrupt state because most of the mraid related methods will return wrong data or throw exceptions.
So you need to first wait until Mraid is in ready state and then add mraid related listeners or functionality
E.g.
function doReadyCheck()
{
if (mraid.getState() == 'loading')
{
mraid.addEventListener("ready", mraidIsReady);
}
else
{
mraidIsReady();
}
}
function mraidIsReady()
{
mraid.removeEventListener("ready", mraidIsReady);
//NOTE: Here you shall do rest of the stuff which you are currently doing in doReadyCheck method
var currentPosition = mraid.getCurrentPosition();
sw = currentPosition.width;
sh = currentPosition.height;
var adcon = document.getElementById("adContainer");
adcon.style.width = sw + "px";
var sb = document.getElementById("smallbanner");
sb.height = sh;
sb.width = sw;
var nor = document.getElementById("normal");
nor.style.width = parseInt(sw) - 2 + "px";
nor.style.height = parseInt(sh) - 2 + "px";
var maxSize = mraid.getMaxSize();
bw = maxSize.width;
bh = maxSize.height;
var bb = document.getElementById("bigbanner");
bb.height = bh;
bb.width = bw;
var e2 = document.getElementById("resized");
e2.style.width = bw + "px";
e2.style.height = bh + "px";
showMyAd();
}
doReadyCheck();

Why doesn't this mouseover/rollover work?

I have 3 images (pic1, pic2, pic3) that on click of the div ID change to (pic4, pic5, pic6). All this works fine but I need to put in a mouseover command that when hovering over pic2, it changes to pic 7 and on mouseout it goes back to pic 2. I am unsure as to why this part of my code isn't working, is it a syntax error? The two functions I am trying to use to do this are "rolloverImage" and "init".
HTML
<div id="content1">
<img src="pic1.jpg" alt="pic1"/>
<img src="pic2.jpg" alt="pic2" id="pic2"/>
<img src="pic3.jpg" alt="pic3"/>
</div>
Javascript
var g = {};
//Change background colors every 20 seconds
function changebackground() {
var backColors = ["#6AAFF7", "#3AFC98", "#FC9B3A", "#FF3030", "#DEDEDE"];
var indexChange = 0;
setInterval(function() {
var selectedcolor = backColors[indexChange];
document.body.style.background = selectedcolor;
indexChange = (indexChange + 1) % backColors.length;
}, 20000);
}
function rolloverImage(){
if (g.imgCtr == 0){
g.pic2.src = g.img[++g.imgCtr];
}
else {
g.pic2.src = g.img[--g.imgCtr];
}
}
function init(){
g.img = ["pic2.jpg", "pic7.jpg"];
g.imgCtr = 0;
g.pic2 = document.getElementById('pic2');
g.pic2.onmouseover = rolloverImage;
g.pic2.onmouseout = rolloverImage;
}
window.onload = function() {
var picSets = [
["pic1.jpg", "pic2.jpg", "pic3.jpg"],
["pic4.jpg", "pic5.jpg", "pic6.jpg"],
];
var currentSetIdx = 0;
var contentDiv = document.getElementById("content1");
var images = contentDiv.querySelectorAll("img");
refreshPics();
contentDiv.addEventListener("click", function() {
currentSetIdx = (currentSetIdx + 1) % picSets.length;
refreshPics();
});
function refreshPics() {
var currentSet = picSets[currentSetIdx];
var i;
for(i = 0; i < currentSet.length; i++) {
images[i].src = currentSet[i];
}
}
changebackground();
init();
}

how to stop moving text box at specific point?

i'm developing a web site i want a div to move when a user click on the text box and i need to stop that div below the clicked text box. i have tried
var index = event.target.id
but it didn't work i 'm using flowing javascript function
<script type="text/javascript">
var cmdStr = window.location.search;
cmdStr = (cmdStr.indexOf("menu_id")>-1)?cmdStr.substring(cmdStr.indexOf("=")+1,cmdStr.length):"";
var isNS6 = (navigator.userAgent.indexOf("Mozilla")>-1 && navigator.userAgent.indexOf("Gecko")>-1)?true:false;
var isIE = (navigator.userAgent.indexOf("MSIE")>-1 && navigator.userAgent.indexOf("Opera")==-1)?true:false;
var isOp = (navigator.userAgent.indexOf("Opera")>-1)?true:false;
function init(){
// if(isIE){
// document.getElementById("msg_scroller").style.position="relative";
// }
}
var incrementVal = 2;
var timer;
var flag;
function scroll(flag){
var obj = document.getElementById("movingDiv");
var isIE6 = (document.documentElement.clientHeight)? true : false;`
var Y = parseInt(obj.style.top);
var cY = (isIE6)?document.documentElement.clientHeight-173 :((document.all)? document.body.clientHeight-173:window.innerHeight - 173);
if(flag==1 && Y<cY){
obj.style.top = (Y+incrementVal)+"pt";
timer = setTimeout("scroll(1)",incrementVal*20);
}else if(flag==-1 && Y>0){
obj.style.top = (Y-incrementVal)+"pt";
timer = setTimeout("scroll(-1)",incrementVal*20);
}else{
clearTimeout(timer);
}
}
</script>
and my html is
<div id="movingDiv" style="position:absolute;left:100pt;top:150pt;border:1px;width:160px;background-color:lightyellow;font-weight:bold;" >
<textarea style="font-size: 10pt; font-family: Potha, Malithi Web , Arial Unicode MS;
width: 600px;" rows="7"></textarea>
<text></div>
i know to stop this i have to get x,y cordinates but how i get this ?? can some one help me?

How to dynamically add elements via jQuery

The script below creates a slider widget the takes a definition list and turns it into a slide deck. Each dt element is rotated via css to become the "spine", which is used to reveal that dt's sibling dd element.
What I'm trying to do is to enhance it so that I can have the option to remove the spines from the layout and just use forward and back buttons on either side of the slide deck. To do that, I set the dt's to display:none via CSS and use the code under the "Remove spine layout" comment to test for visible.
This works fine to remove the spines, now I need to dynamically create 2 absolutely positioned divs to hold the left and right arrow images, as well as attach a click handler to them.
My first problem is that my attempt to create the divs is not working.
Any help much appreciated.
jQuery.noConflict();
(function(jQuery) {
if (typeof jQuery == 'undefined') return;
jQuery.fn.easyAccordion = function(options) {
var defaults = {
slideNum: true,
autoStart: false,
pauseOnHover: true,
slideInterval: 5000
};
this.each(function() {
var settings = jQuery.extend(defaults, options);
jQuery(this).find('dl').addClass('easy-accordion');
// -------- Set the variables ------------------------------------------------------------------------------
jQuery.fn.setVariables = function() {
dlWidth = jQuery(this).width()-1;
dlHeight = jQuery(this).height();
if (!jQuery(this).find('dt').is(':visible')){
dtWidth = 0;
dtHeight = 0;
slideTotal = 0;
// Add an element to rewind to previous slide
var slidePrev = document.createElement('div');
slidePrev.className = 'slideAdv prev';
jQuery(this).append(slidePrev);
jQuery('.slideAdv.prev').css('background':'red','width':'50px','height':'50px');
// Add an element to advance to the next slide
var slideNext = document.createElement('div');
slideNext.className = 'slideAdv next';
jQuery(this).append(slideNext);
jQuery('.slideAdv.next').css('background':'green','width':'50px','height':'50px');
}
else
{
dtWidth = jQuery(this).find('dt').outerHeight();
if (jQuery.browser.msie){ dtWidth = jQuery(this).find('dt').outerWidth();}
dtHeight = dlHeight - (jQuery(this).find('dt').outerWidth()-jQuery(this).find('dt').width());
slideTotal = jQuery(this).find('dt').size();
}
ddWidth = dlWidth - (dtWidth*slideTotal) - (jQuery(this).find('dd').outerWidth(true)-jQuery(this).find('dd').width());
ddHeight = dlHeight - (jQuery(this).find('dd').outerHeight(true)-jQuery(this).find('dd').height());
};
jQuery(this).setVariables();
// -------- Fix some weird cross-browser issues due to the CSS rotation -------------------------------------
if (jQuery.browser.safari){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Safari and Chrome */ }
if (jQuery.browser.mozilla){ var dtTop = dlHeight - 20; var dtOffset = - 20; /* FF */ }
if (jQuery.browser.msie){ var dtTop = 0; var dtOffset = 0; /* IE */ }
if (jQuery.browser.opera){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; } /* Opera */
// -------- Getting things ready ------------------------------------------------------------------------------
var f = 1;
var paused = false;
jQuery(this).find('dt').each(function(){
jQuery(this).css({'width':dtHeight,'top':dtTop,'margin-left':dtOffset});
// add unique id to each tab
jQuery(this).addClass('spine_' + f);
// add active corner
var corner = document.createElement('div');
corner.className = 'activeCorner spine_' + f;
jQuery(this).append(corner);
if(settings.slideNum == true){
jQuery('<span class="slide-number">'+f+'</span>').appendTo(this);
if(jQuery.browser.msie){
var slideNumLeft = parseInt(jQuery(this).find('.slide-number').css('left'));
if(jQuery.browser.version == 6.0 || jQuery.browser.version == 7.0){
jQuery(this).find('.slide-number').css({'bottom':'auto'});
slideNumLeft = slideNumLeft - 14;
jQuery(this).find('.slide-number').css({'left': slideNumLeft})
}
if(jQuery.browser.version == 8.0 || jQuery.browser.version == 9.0){
var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top')) - 20;
jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal});
slideNumLeft = slideNumLeft - 10;
jQuery(this).find('.slide-number').css({'left': slideNumLeft})
jQuery(this).find('.slide-number').css({'marginTop': 10});
}
} else {
var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top'));
jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal});
}
}
f = f + 1;
});
if(jQuery(this).find('.active').size()) {
jQuery(this).find('.active').next('dd').addClass('active');
} else {
jQuery(this).find('dt:first').addClass('active').next('dd').addClass('active');
}
jQuery(this).find('dt:first').css({'left':'0'}).next().css({'left':dtWidth});
jQuery(this).find('dd').css({'width':ddWidth,'height':ddHeight});
// -------- Functions ------------------------------------------------------------------------------
jQuery.fn.findActiveSlide = function() {
var i = 1;
this.find('dt').each(function(){
if(jQuery(this).hasClass('active')){
activeID = i; // Active slide
} else if (jQuery(this).hasClass('no-more-active')){
noMoreActiveID = i; // No more active slide
}
i = i + 1;
});
};
jQuery.fn.calculateSlidePos = function() {
var u = 2;
jQuery(this).find('dt').not(':first').each(function(){
var activeDtPos = dtWidth*activeID;
if(u <= activeID){
var leftDtPos = dtWidth*(u-1);
jQuery(this).animate({'left': leftDtPos});
if(u < activeID){ // If the item sits to the left of the active element
jQuery(this).next().css({'left':leftDtPos+dtWidth});
} else{ // If the item is the active one
jQuery(this).next().animate({'left':activeDtPos});
}
} else {
var rightDtPos = dlWidth-(dtWidth*(slideTotal-u+1));
jQuery(this).animate({'left': rightDtPos});
var rightDdPos = rightDtPos+dtWidth;
jQuery(this).next().animate({'left':rightDdPos});
}
u = u+ 1;
});
setTimeout( function() {
jQuery('.easy-accordion').find('dd').not('.active').each(function(){
jQuery(this).css({'display':'none'});
});
}, 400);
};
jQuery.fn.activateSlide = function() {
this.parent('dl').setVariables();
this.parent('dl').find('dd').css({'display':'block'});
this.parent('dl').find('dd.plus').removeClass('plus');
this.parent('dl').find('.no-more-active').removeClass('no-more-active');
this.parent('dl').find('.active').removeClass('active').addClass('no-more-active');
this.addClass('active').next().addClass('active');
this.parent('dl').findActiveSlide();
if(activeID < noMoreActiveID){
this.parent('dl').find('dd.no-more-active').addClass('plus');
}
this.parent('dl').calculateSlidePos();
};
jQuery.fn.rotateSlides = function(slideInterval, timerInstance) {
var accordianInstance = jQuery(this);
timerInstance.value = setTimeout(function(){accordianInstance.rotateSlides(slideInterval, timerInstance);}, slideInterval);
if (paused == false){
jQuery(this).findActiveSlide();
var totalSlides = jQuery(this).find('dt').size();
var activeSlide = activeID;
var newSlide = activeSlide + 1;
if (newSlide > totalSlides) {newSlide = 1; paused = true;}
jQuery(this).find('dt:eq(' + (newSlide-1) + ')').activateSlide(); // activate the new slide
}
}
// -------- Let's do it! ------------------------------------------------------------------------------
function trackerObject() {this.value = null}
var timerInstance = new trackerObject();
jQuery(this).findActiveSlide();
jQuery(this).calculateSlidePos();
if (settings.autoStart == true){
var accordianInstance = jQuery(this);
var interval = parseInt(settings.slideInterval);
timerInstance.value = setTimeout(function(){
accordianInstance.rotateSlides(interval, timerInstance);
}, interval);
}
jQuery(this).find('dt').not('active').click(function(){
var accordianInstance = jQuery(this); //JSB to fix bug with IE < 9
jQuery(this).activateSlide();
clearTimeout(timerInstance.value);
timerInstance.value = setTimeout(function(){
accordianInstance.rotateSlides(interval, timerInstance);
}, interval);
});
if (!(jQuery.browser.msie && jQuery.browser.version == 6.0)){
jQuery('dt').hover(function(){
jQuery(this).addClass('hover');
}, function(){
jQuery(this).removeClass('hover');
});
}
if (settings.pauseOnHover == true){
jQuery('dd').hover(function(){
paused = true;
}, function(){
paused = false;
});
}
});
};
})(jQuery);

Creating elements in jQuery is easy:
$newDiv = $('<div />');
$newDiv.css({
'position': 'absolute',
'top': '10px',
'left': '10px'
});
$newDiv.on('click', function() {
alert('You have clicked me');
});
$('#your_container').append($newDiv);