Proportional Image Resize in JavaScript

Socialbrowse currently shows summaries of shared links that have an ATOM or RSS feed.  The feeds come with images of all sizes and we have to change the height and width to fit within the alloted space.  CSS has max-width and max-height parameters but they have issues in IE and they don’t keep original proportions of the image!  To resize and keep the proportions we use javascript.  

This javascript resize function will do a proportional resize to keep the given <img> within the given max height and max width (maxh and maxw).  Feel free to copy and use it in any way you like.

var resize = function(img, maxh, maxw) {
  var ratio = maxh/maxw;
  if (img.height/img.width > ratio){
     // height is the problem
    if (img.height > maxh){
      img.width = Math.round(img.width*(maxh/img.height));
      img.height = maxh;
    }
  } else {
    // width is the problem
    if (img.width > maxh){
      img.height = Math.round(img.height*(maxw/img.width));
      img.width = maxw;
    }
  } 
};

Advertisements
19 comments
  1. Zan said:

    Thanks a lot! Your script has just help me in emergency.

    God job guy!

  2. Paul said:

    Hi!
    Lovely little script, i tried scripting a couple of resize functions but they weren’t playing ball!

    I needed to tweak yours a little to get it to work correctly for me, I don’t know if it is intentional or not, but on the 11th line you compare img.width to maxh.

    I changed it to maxw and it works flawlessly.
    Many thanks again!

  3. nisha said:

    Your code seems to be amazing. thanks a lot.

  4. soni said:

    where do you specify maximum width and height and also how will u call this function in html?

  5. Amit Kumar Srivastava said:

    really this is very good example but some modification are needed like as img.width replace with img.width() in jquery plug in use……..
    thanx…….

  6. Stefan said:

    Nice. I agree with Paul about line 11. Also, there’s no need to store the calculated ratio the second line, just do:

    var resize = function(img, maxh, maxw) {
    if (img.height/img.width > maxh/maxw){

  7. kavitha said:

    Demo – jQuery Smooth Div Scroll – Thomas Kahn

    #makeMeScrollable
    {
    width:100%;
    height: auto;
    position: relative;
    }

    #makeMeScrollable div.scrollableArea img
    {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    }

    .left{ border:1px solid; height:610px; width:100px; position:absolute; background-color:#fff; z-index:10;}
    .right{ border:1px solid; height:610px; width:100px; position:absolute; background-color:#fff;z-index:10; margin-left:888px;}

    .open_popup{ border:26px solid red; height:97px; width:100px; position:absolute; background-color:#red;z-index:10; margin:160px 0 0 375px;}
    #ddd{ background-image:url(images3/images/courseContent_bg_1.png); width:959px; height:482px; display:none; position:absolute; z-index:10;}

    // Initialize the plugin with no custom options
    $(document).ready(function () {
    // None of the options are set
    $(“div#makeMeScrollable”).smoothDivScroll({});
    });
    $(‘.open_popup’).live(‘click’,function(){
    $(‘#ddd’).show();
    $(“#ddd”).load(‘image_slide.html’).dialog({modal:true});
    //$(‘#ddd’).show();

    });

  8. kavitha said:

    $(‘#t1_focus’).live(‘click’,function(){
    $(‘#t1_focus’).css({‘border’:’5px solid orange’});
    $(‘#overlay,#overlay1’).hide();
    $(‘#overlay2,#overlay3’).show();
    alert(‘in team 1’);
    });
    #column_1 {
    border: 1px solid white;
    height: 47px;
    margin: 235px 0 0 117px;
    position: absolute;
    width: 784px;
    }
    #column_2 {
    border: 1px solid white;
    height: 47px;
    margin:293px 0 0 117px;
    position: absolute;
    width: 784px;
    }
    #column_3 {
    border: 1px solid white;
    height: 47px;
    margin: 351px 0 0 117px;
    position: absolute;
    width: 784px;
    }
    #column_4 {
    border: 1px solid white;
    height: 47px;
    margin:409px 0 0 117px;
    position: absolute;
    width: 784px;
    }
    #column_5 {
    border: 1px solid white;
    height: 47px;
    margin: 473px 0 0 117px;
    position: absolute;
    width: 784px;
    }

    #point1 {
    background-color: #FFFFFF;
    border: 1px solid red;
    float: left;
    height: 46px;
    margin: 0;
    width: 148px;
    }

    #point2 {
    background-color: #FFFFFF;
    border: 1px solid red;
    float: left;
    height: 46px;
    margin-left: 6px;
    width: 148px;
    }

    #point3 {
    background-color: #FFFFFF;
    border: 1px solid red;
    float: left;
    height: 46px;
    margin-left: 6px;
    width: 148px;
    }

    #point4 {
    background-color: #FFFFFF;
    border: 1px solid red;
    float: left;
    height: 46px;
    margin-left: 6px;
    width: 148px;
    }

    #point5 {
    background-color: #FFFFFF;
    border: 1px solid red;
    float: left;
    height: 46px;
    margin-left: 6px;
    width: 148px;
    }

    #popUp{ border:1px solid red; width:200px; height:100px;}

    #column_1,#column_2,#column_3,#column_4,#column_5 div{ text-align:center;}

  9. kavitha said:

    var oldTxt=0;
    $(‘.getQuest’).one(‘click’,function(){
    $(‘.getQuest’).removeClass(‘getval’);
    var getText=$(this).addClass(‘getval’);
    });
    $(‘#thumpUp’).live(‘click’,function(){
    var getText=$(‘.getval’).text();
    //var getDiv = $(‘.getval’).text();
    //alert(getDiv);
    getText=parseInt(getText);
    getText=oldTxt+getText;
    oldTxt=getText;
    $(‘#t1_score’).html(oldTxt);
    $(‘#t2_score’).html(oldTxt);
    $(‘.showAnswer’).show();
    $(‘#popUp,#footer’).fadeOut();
    $(‘#overlay1,#overlay2,#overlay3’).hide();
    $(‘.getval’).css({‘background’:’url(“images/right.png”) no-repeat scroll 0 0 green’});
    //var test = $(‘#t1_name’).text();

    });
    $(‘#thumpDown’).live(‘click’,function(){
    var getText=$(‘.getval’).text();

    getText=parseInt(getText);
    getText=oldTxt-getText;
    oldTxt=getText;
    $(‘#t1_score’).html(oldTxt);
    $(‘#t2_score’).html(oldTxt);
    $(‘.showAnswer’).show();
    $(‘#popUp,#footer’).fadeOut();
    $(‘#overlay1,#overlay2,#overlay3’).hide();
    $(‘.getval’).css({‘background’:’url(“images/wrong.png”) no-repeat scroll 0 0 red’});

    });

  10. kavitha said:

    var ss= 0 ;
    increment in .one click at the end like ss++;

    function vvalue()
    {
    if(ss== 3)
    {
    $(“#gameResult”).show();
    /*var s1=$(‘#t1_fScore’).text();
    var s2=$(‘#t2_fScore’).text();
    var s3=$(‘#t3_fScore’).text();

    var a=Math.max(s1,s2,s3);*/

    }
    }

    call vvalue() in all click

  11. kavitha said:

    function sort_Array_Number(a, b)
    {
    return b – a;
    }

    function getVal()
    {
    if(getFinal == 3)
    {
    $(“#gameResult”).show();
    var s1=$(‘#t1_fScore’).text();
    var s1_name = $(‘#t1_fName’).text();
    var s2=$(‘#t2_fScore’).text();
    var s2_name = $(‘#t2_fName’).text();
    var s3=$(‘#t3_fScore’).text();
    var s3_name = $(‘#t3_fName’).text();

    var n = [s1,s2,s3];
    n.sort(function(a,b){return b-a});
    $(‘#t1_fScore’).html(n[0]);
    $(‘#t2_fScore’).html(n[1]);
    $(‘#t3_fScore’).html(n[2]);

    var in1 = jQuery.inArray(s1, n);
    var in2 = jQuery.inArray(s2, n);
    var in3 = jQuery.inArray(s3, n);

    s1_name = $(‘#t’+(in1+1)+’_fName’).html(s1_name);
    s2_name = $(‘#t’+(in2+1)+’_fName’).html(s2_name);
    s3_name = $(‘#t’+(in3+1)+’_fName’).html(s3_name);

    var win = $(‘#t1_fScore’).prev(‘div’).text();

    $(“#resultTxt”).html(“Congratulation! The winner is  ” + win);

    }
    }

    • kavitha said:

      $(this).removeClass(‘getQuestclick’); remove extra class click,use only one

  12. kavitha said:

    function displayState(){
    enablePrev();
    enableNext();
    if(nav == 0){
    disablePrev();
    }
    if(nav == page.length-1){
    disableNext();
    }
    }

    function prevPage(){ // previous
    if(nav <= 0 && pageTab <= 0){ // section first
    nav = 0;
    }else{
    if(nav = page.length-1 && pageTab >= tab.length-1){ // section end
    nav = page.length-1;
    }else{
    if(nav >= page.length-1){
    //nav = 0; // start from begining
    //disableNext();
    //pageTab++;
    loadContent();
    }
    else{
    nav++;
    pageContent(nav);
    $(“.count”).html(nav+1);

    }
    }
    }

    function disableButtons(){
    disablePrev();
    disableNext();
    }

    function enableButtons(){
    enablePrev();
    enableNext();
    }

    function disablePrev(){
    $(‘#prev’).removeClass(‘prev_ena’).addClass(‘prev_dis’);
    prev_ena = false;
    }

    function enablePrev(){
    $(‘#prev’).removeClass(‘prev_dis’).addClass(‘prev_ena’);
    prev_ena = true;
    }

    function disableNext(){
    $(‘#next’).removeClass(‘next_ena’).addClass(‘next_dis’);
    next_ena = false;
    }

    function enableNext(){
    $(‘#next’).removeClass(‘next_dis’).addClass(‘next_ena’);
    next_ena = true;
    }

  13. codex said:

    Great script! I Modified it slightly for jquery, I’m posting it here since it might be useful to others:

    function resizeMe (img, maxh, maxw) {
    var ratio = maxh/maxw;
    if (img[0].height/img[0].width > ratio){
    // height is the problem
    if (img[0].height > maxh){
    img[0].width = Math.round(img[0].width*(maxh/img[0].height));
    img[0].height = maxh;
    }
    } else {
    // width is the problem
    if (img[0].width > maxh){
    img[0].height = Math.round(img[0].height*(maxw/img[0].width));
    img[0].width = maxw;
    }
    } /**/

    };

    resizeMe($(‘#image-one’), 100, 50);

  14. kavitha said:

    $(“.un”).fadeIn(1000, function(){
    $(“.dis”).fadeIn(1000, function(){
    $(“.re”).fadeIn(1000, function(){
    $(“.sub”).fadeIn(1000, function(){
    $(“.sub,.dis,.re”).fadeOut(‘slow’);
    $(“.un”).animate({‘marginLeft’:’163px’,’marginTop’:’200px’},1000, function(){
    t1= setTimeout(function(){$(“.un”).animate({‘fontSize’:’100px’});$(“.un”).css({‘color’:’red’});},1000);
    t2= setTimeout(function(){$(“.un”).animate({‘fontSize’:’80px’});$(“.un”).css({‘color’:’#990000′});},2000);
    });

    });
    });
    });
    });

  15. kavitha said:

    $(“.un”).fadeIn(1000, function(){
    $(“.dis”).fadeIn(1000, function(){
    $(“.re”).fadeIn(1000, function(){
    $(“.sub”).fadeIn(1000, function(){
    $(“.sub,.dis,.re”).fadeOut(1000, function(){
    $(“.un”).animate({‘marginLeft’:’163px’,’marginTop’:’200px’}, 1000, function(){
    $(‘.un’).animate({‘fontSize’:’100px’});
    $(‘.un’).css({‘color’:’red’});
    t1= setTimeout(function(){ $(‘.un’).animate({‘fontSize’:’80px’});
    $(‘.un’).css({‘color’:’#990000′});},1000);

    $(“.happy”).fadeIn(1000, function(){
    $(“.un”).css({‘color’:’red’},100);
    t1= setTimeout(function(){$(‘.un’).css({‘color’:’#990000′});},400);
    $(“.un”).animate({‘marginLeft’:’263px’},1000,function(){
    $(“.happy”).animate({‘marginLeft’:’363px’},1000,function(){
    $(“.un”).css({‘color’:’red’});
    t2= setTimeout(function(){$(‘.un’).css({‘color’:’#990000′});},1000);
    });
    });
    });

    });
    });
    });
    });
    });
    });

  16. kavitha said:

    $(document).ready(function() {
    /*$(‘.load_fill’).animate({‘width’:’+=401px’}, 2000, function(){
    $(‘.start img’).attr(‘src’,’images/start.png’).css({‘cursor’:’pointer’});
    });*/

    $(‘.mouth’).show();
    loadData();
    }); // document ready End

    function loadData(){

    t1= setTimeout(function(){$(‘.un’).fadeIn();},1000);
    t2= setTimeout(function(){$(‘.sub’).fadeIn();},2000);
    t3= setTimeout(function(){$(‘.dis’).fadeIn();},3000);
    t4= setTimeout(function(){$(‘.re’).fadeIn();},4000);
    t5= setTimeout(function(){$(“.sub,.dis,.re”).fadeOut(‘slow’);},5000);
    t6= setTimeout(function(){loadData1();},6000);

    }

    function loadData1()
    {
    $(“.un”).animate({‘marginLeft’:’163px’,’marginTop’:’200px’},1000, function(){
    t1= setTimeout(function(){$(“.un”).animate({‘fontSize’:’100px’});$(“.un”).css({‘color’:’red’});},1000);
    t2= setTimeout(function(){$(“.un”).animate({‘fontSize’:’80px’});$(“.un”).css({‘color’:’#990000′});},2000);
    t3= setTimeout(function(){$(“.happy”).fadeIn();},3000);
    t4= setTimeout(function(){loadData2();},4000);
    });
    }

    function loadData2(){
    $(“.un”).animate({‘marginLeft’:’263px’},1000,function(){
    $(“.happy”).animate({‘marginLeft’:’360px’},1000,function(){
    });
    });
    }

  17. kavitha said:

    var total = 5;
    var nxt = 0;
    var selectedAns = ”;
    var clickCount = 0;
    var selectCount = 0;
    var sAudio;
    var anitimer = 0;
    var t1,t2,t3,t4,t5,t6,t7,t8,t9,t10,t11=0;
    var uagent = navigator.userAgent.toLowerCase();
    var platformAgent = navigator.platform.toLowerCase();
    var gameAud;
    var audPath;
    var audNav = 0;
    //var audioArray = [‘sound131′,’audio1′,’audio2′,’audio31′,’sound49’];
    var audioArray = [‘sound131′,’audio1′,’audio2′,’audio31’];

    $(document).ready(function () {
    gameAud = $(‘#gameAud’).get(0);
    Init();
    $(window).bind(“load”, function () {
    $(‘#albumLoader,#preloader’).fadeOut(‘slow’, function () {});
    });
    $(“.quest_foot”).toggle(
    function () {
    $(this).css({
    “background”: “url(images/quesmark_img_02.png)”
    });
    },
    function () {
    $(this).css({
    “background”: “url(images/quesmark_img_01.png)”
    });
    });
    }); // document ready End

    function audEnded(){
    $(‘.mouth’).hide();
    //alert(‘in aud End’)
    nxt++;
    pageContent(nxt)
    }

    function pageContent(nxt){
    audNav = 0;
    audioPlay(uagent);
    loadInter(nxt)
    }

    function loadInter(nxt){
    if(nxt == 0){

    }else if(nxt == 1){
    loadData0();
    $(‘.mouth’).show();
    }else if(nxt == 2){
    loadData1();
    }else if(nxt == 3){
    loadData2();
    }
    }

    function loadData0(){
    t2 = setTimeout(function () {
    $(‘.un’).fadeIn();
    t3 = setTimeout(function () {
    $(‘.sub’).fadeIn();
    t4 = setTimeout(function () {
    $(‘.dis’).fadeIn();
    t5 = setTimeout(function () {
    $(‘.re’).fadeIn();
    t6 = setTimeout(function () {
    $(‘.sub,.dis,.re’).fadeOut(‘slow’);
    }, 5000);
    }, 4000);
    }, 3000);
    }, 2000);
    }, 1000);
    }

    function loadData1(){
    $(‘.un’).animate({‘marginLeft’:’163px’,’marginTop’:’200px’},1000, function(){
    t1= setTimeout(function(){
    $(‘.un’).animate({‘fontSize’:’100px’});$(‘.un’).css({‘color’:’red’});
    t2= setTimeout(function(){$(‘.un’).animate({‘fontSize’:’80px’});$(‘.un’).css({‘color’:’#990000′});
    t3= setTimeout(function(){$(‘.happy’).fadeIn();
    t4= setTimeout(function(){
    $(‘.un’).animate({‘marginLeft’:’263px’},1000,function(){
    //$(‘.un’).css({‘color’:’red’});
    //t1 = setTimeout(function(){$(‘.un’).css({‘color’:’#990000′});},1500);
    $(‘.happy’).animate({‘marginLeft’:’363px’},1000,function(){
    $(‘.happy’).css({‘color’:’#990000′});
    });
    });
    },6000);
    },4000);
    },2000);
    },1000);
    });
    }

    function loadData2()
    {
    $(‘.un,.happy’).fadeOut();
    t1= setTimeout(function(){$(‘.dis’).fadeIn().css({‘margin’:’167px 0 0 157px’});},3000);
    t2= setTimeout(function(){$(‘.dis’).animate({‘fontSize’:’100px’});$(‘.dis’).css({‘color’:’red’});},3000);
    t3= setTimeout(function(){$(‘.dis’).animate({‘fontSize’:’80px’});$(‘.dis’).css({‘color’:’#990000′});},4000);
    t4= setTimeout(function(){$(‘.re’).fadeIn().css({‘margin’:’167px 0 0 370px’});},4500);
    t5= setTimeout(function(){$(‘.re’).animate({‘fontSize’:’100px’});$(‘.re’).css({‘color’:’red’});},4500);
    t6= setTimeout(function(){$(‘.re’).animate({‘fontSize’:’80px’});$(‘.re’).css({‘color’:’#990000′});},5000);
    t7= setTimeout(function(){$(‘.sub’).fadeIn().css({‘margin’:’167px 0 0 521px’});},5500);
    t8= setTimeout(function(){$(‘.sub’).animate({‘fontSize’:’100px’});$(‘.sub’).css({‘color’:’red’});},5500);
    t9= setTimeout(function(){$(‘.sub’).animate({‘fontSize’:’80px’});$(‘.sub’).css({‘color’:’#990000′});},6000);
    t10= setTimeout(function(){$(‘.re,.sub’).fadeOut(‘slow’);},8000);
    t11 = setTimeout(function(){ $(‘.dis’).css({‘color’:’red’});},10000);
    t12 = setTimeout(function(){$(‘.dis’).css({‘color’:’#990000′});},11000);
    t14 = setTimeout(function(){$(‘.like’).fadeIn();},13000);
    //t15 = setTimeout(function(){loadData5();},16000);
    $(‘.dis’).animate({‘marginLeft’:’263px’},14000);
    $(‘.like’).animate({‘marginLeft’:’386px’},14500);
    t6 = setTimeout(function(){$(‘.dis’).css({‘color’:’red’});},15000);
    t5 = setTimeout(function(){$(‘.dis’).css({‘color’:’#990000′});},16000);
    //t7 = setTimeout(function(){$(‘.like’).animate({‘marginLeft’:’386px’});},4000);
    t1 = setTimeout(function(){$(‘.dis,.like’).hide();
    $(‘.dislike’).show();},17000);
    t2= setTimeout(function(){$(‘.dislike’).css({‘color’:’red’});$(‘.dislike’).animate({‘fontSize’:’100px’});},17500);
    t3= setTimeout(function(){$(‘.dislike’).css({‘color’:’#990000′});$(‘.dislike’).animate({‘fontSize’:’80px’});},20000);
    t4= setTimeout(function(){$(‘.dislike’).animate({‘marginTop’:’28px’},’fast’);},20000);
    //t5= setTimeout(function(){//loadData6();loadIntData();$(‘.single_quest1,.quest_foot’).show();},6000);

    }

    function loadData5()
    {
    $(‘.dis’).animate({‘marginLeft’:’263px’});
    $(‘.like’).animate({‘marginLeft’:’386px’});
    t6 = setTimeout(function(){$(‘.dis’).css({‘color’:’red’});},1000);
    t5 = setTimeout(function(){$(‘.dis’).css({‘color’:’#990000′});},2000);
    //t7 = setTimeout(function(){$(‘.like’).animate({‘marginLeft’:’386px’});},4000);
    t1 = setTimeout(function(){$(‘.dis,.like’).hide();
    $(‘.dislike’).show();},2000);
    t2= setTimeout(function(){$(‘.dislike’).css({‘color’:’red’});$(‘.dislike’).animate({‘fontSize’:’100px’});},2500);
    t3= setTimeout(function(){$(‘.dislike’).css({‘color’:’#990000′});$(‘.dislike’).animate({‘fontSize’:’80px’});},3000);
    t4= setTimeout(function(){$(‘.dislike’).animate({‘marginTop’:’28px’},’fast’);},3000);
    t5= setTimeout(function(){
    //loadData6();
    loadIntData();
    $(‘.single_quest1,.quest_foot’).show();},6000);
    }

    $(‘.start’).live(‘click’, function () {
    $(‘.main_bg’).hide();
    $(‘.page1’).show();
    //loadData();

    // loadData3();
    //$(‘#q1’).show();
    //dislike_swipe();
    //submr_load();
    initIntroAnim();
    //dragDrop();
    //loadData2();

    });

    $(‘.q1’).live(‘click’, function () {
    $(‘.q1’).css({
    ‘backgroundColor’: ‘#ffff00’
    });
    $(‘.q2,.q3,.q4’).css({
    ‘backgroundColor’: ‘#ffffcc’
    });
    });
    $(‘.q2’).live(‘click’, function () {
    $(‘.q2’).css({
    ‘backgroundColor’: ‘#ffff00’
    });
    $(‘.q1,.q3,.q4’).css({
    ‘backgroundColor’: ‘#ffffcc’
    });
    });
    $(‘.q3’).live(‘click’, function () {
    $(‘.q3’).css({
    ‘backgroundColor’: ‘#ffff00’
    });
    $(‘.q2,.q1,.q4’).css({
    ‘backgroundColor’: ‘#ffffcc’
    });
    });
    $(‘.q4’).live(‘click’, function () {
    $(‘.q4’).css({
    ‘backgroundColor’: ‘#ffff00’
    });
    $(‘.q2,.q3,.q1’).css({
    ‘backgroundColor’: ‘#ffffcc’
    });
    });

    function audioPlay(uagent){

    audPath = audioArray[nxt];

    if(audPath.indexOf(“||”) > 0){
    var audPathStr = audPath.split(‘||’); // store audio path in voiceText wise
    audFile = audPathStr[audNav];
    }else{
    audFile = audPath;
    }

    if(navigator.platform == ‘iPad’){
    $(‘#gameAud’).attr({src:’audio/’+audFile+’.mp3′,type:’audio/mpeg’});
    loadAud();
    }else if(uagent.search(‘android’) > -1 || uagent.search(‘android’) > -1 || platformAgent.search(‘android’)>-1 || platformAgent.search(‘linux’)>-1){
    if($.browser.version>534){
    $(‘#gameAud’).attr({src:’audio/’+audFile+’.mp3′,type:’audio/mp3′});
    loadAudAndroid();
    }else{
    var audioNamePath=’audio/’+audFile+’.mp3′;
    var audioElement = document.getElementById(‘gameAud’);
    audioElement.setAttribute(‘src’,audioNamePath);
    audioElement.load()
    audioElement.addEventListener(“load”, function() {
    audioElement.play();
    audStarted();
    }, true);
    }
    }else if(uagent.search(‘firefox’) > -1){
    $(‘#gameAud’).attr({src:’audio/’+audFile+’.ogg’,type:’audio/ogg’});
    loadAud();
    }else{
    $(‘#gameAud’).attr({src:’audio/’+audFile+’.mp3′,type:’audio/mpeg’});
    loadAud();
    }
    $(“#audStop”).attr({src:’images/pause_d.png’});
    }

    function playAud() {
    gameAud.play();
    }

    function loadAud() {
    gameAud.load();
    gameAud.play();
    }

    function loadAudAndroid() {
    gameAud.load();
    }

    function gameAudioStop() {
    gameAud.pause();
    }

    window.onload = function(){
    gameAud.addEventListener(‘ended’,audEnded,false); // bind audio ended
    }

    function cleatTimer() {
    clearTimeout(t1);
    clearTimeout(t2);
    clearTimeout(t3);
    clearTimeout(t4);
    clearTimeout(t5);
    clearTimeout(t6);
    clearTimeout(t7);
    clearTimeout(t8);
    clearTimeout(t9);
    clearTimeout(t10);
    clearTimeout(t11);
    }

    function initIntroAnim() {
    sAudio = “sound131”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function introText() {
    sAudio = “audio1”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function unhappy_aud() {
    sAudio = “audio2”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function disresub_aud() {
    sAudio = “audio31”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function first_try_aud() {
    sAudio = “sound49”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function second_try_aud() {
    t1 = setTimeout(function () {
    nxtQus();
    }, 2000);
    sAudio = “sec_try”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function vgood_aud() {
    t1 = setTimeout(function () {
    nxtQus();
    }, 2000);
    sAudio = “vgood”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function first_try_aud1() {
    sAudio = “sound49”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function replay_aud() {
    sAudio = “audio4”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function man_swp_aud() {
    sAudio = “sound83”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function man_hd() {
    $(‘.pg_boy’).css({
    ‘background’: ‘url(images/man_hand.png) no-repeat’,
    ‘width’: ‘182px’,
    ‘height’: ‘292px’,
    ‘margin’: ‘239px 0 0 5px’
    });
    /*$(‘.mouth’).show();*/
    $(‘.mouth’).css({
    ‘margin’: ’53px 0 0 -30px’,
    ‘position’: ‘absolute’
    });
    }

    function man_hd_hide() {
    /*$(‘.mouth’).hide();*/
    $(‘.pg_boy’).css({
    ‘background’: ‘url(images/man_standing.png) no-repeat’,
    ‘width’: ‘124px’,
    ‘height’: ‘293px’,
    ‘margin’: ‘239px 0 0 5px’
    });
    $(‘.eyes’).css({
    ‘margin’: ’32px 0 0 47px’
    });
    $(‘.mouth’).css({
    ‘margin’: ’11px 0 0 55px’,
    ‘position’: ‘absolute’
    });
    }

    function loadIntData() {
    $(‘.un, .happy’).hide();
    t1 = setTimeout(function () {
    $(‘.dislike’).fadeIn(100, function () {
    t2 = setTimeout(function () {
    $(‘.dislike’).animate({
    ‘top’: ’70px’
    }, 100, function () {
    $(“.options1”).fadeIn(100, function () {
    t3 = setTimeout(function () {
    $(“.opt1”).addClass(“hover”);
    $(“.opt2, .opt3, .opt4”).removeClass(“hover”);
    }, 1000);
    t4 = setTimeout(function () {
    $(“.opt2”).addClass(“hover”);
    $(“.opt1, .opt3, .opt4”).removeClass(“hover”);
    }, 3000);
    t5 = setTimeout(function () {
    $(“.opt3”).addClass(“hover”);
    $(“.opt1, .opt2, .opt4”).removeClass(“hover”);
    }, 5000);
    t6 = setTimeout(function () {
    $(“.opt4”).addClass(“hover”);
    $(“.opt1, .opt2, .opt3”).removeClass(“hover”);
    }, 7000);
    t7 = setTimeout(function () {
    $(“.opt1, .opt2, .opt3, .opt4”).removeClass(“hover”);
    $(“.hideClick”).hide();
    }, 10000);
    });
    });
    }, 1000);
    });
    }, 1000);

    }

    function loadIntData2() {

    setTimeout(function () {
    replay_aud();
    }, 100);
    t1 = setTimeout(function () {
    $(‘.reTxt’).fadeIn();
    }, 2000);
    t2 = setTimeout(function () {
    $(‘.reTxt’).animate({
    ‘fontSize’: ‘100px’
    });
    }, 3000);
    t3 = setTimeout(function () {
    $(‘.reTxt’).animate({
    ‘fontSize’: ’80px’
    });
    }, 4000);
    t4 = setTimeout(function () {
    $(“.opt1_1,.opt2_1,.opt3_1,.opt4_1”).show();
    }, 5000)
    t5 = setTimeout(function () {
    $(“.opt1_1”).addClass(“hover”);
    $(“.opt2_1, .opt3_1, .opt4_1”).removeClass(“hover”);
    }, 6000);
    t6 = setTimeout(function () {
    $(“.opt2_1”).addClass(“hover”);
    $(“.opt1_1, .opt3_1, .opt4_1”).removeClass(“hover”);
    }, 7000);
    t7 = setTimeout(function () {
    $(“.opt3_1”).addClass(“hover”);
    $(“.opt1_1, .opt2_1, .opt4_1”).removeClass(“hover”);
    }, 8000);
    t8 = setTimeout(function () {
    $(“.opt4_1”).addClass(“hover”);
    $(“.opt1_1, .opt2_1, .opt3_1”).removeClass(“hover”);
    }, 9000);
    t9 = setTimeout(function () {
    $(“.opt1_1”).show();
    $(“.opt1_1, .opt2_1, .opt3_1, .opt4_1”).removeClass(“hover”);
    $(“.hideClick”).hide();
    }, 10000);

    }

    var clickCount = 0;
    var clickCount1 = 0;
    var selectCount = 0;
    var selectCount1 = 0;

    $(“.clickAns”).live(‘click’, function () {
    $(“.hideClick”).show();
    $(“.clickAns”).removeClass(“hover”);
    if (!$(this).hasClass(“hover”)) {
    $(this).addClass(“hover”);
    $(this).css({
    ‘backgroundColor’: ‘red’
    });
    }
    clickCount = 0;
    checkSelAns(this);
    });

    $(“.clickAnsWth”).live(‘click’, function () {
    $(“.hideClick”).show();
    $(“.clickAnsWth”).removeClass(“hover”);
    if (!$(this).hasClass(“hover”)) {
    $(this).addClass(“hover”);
    }
    clickCount = 0;
    checkSelAns1(this);
    });

    function checkSelAns(val) {
    selectCount += 1;

    var q = $(val).parents(“div.options”);
    selectedAns = ($(“div.clickAns.hover”).hasClass(“ans”)) ? “1” : “0”;
    if (selectedAns == “1”) {
    $(“.opt1, .opt2, .opt3”).hide();
    $(“.hideClick”).show();
    //$(“.clickAns,.clickAnsWth”).removeClass(“hover_ans”);
    $(“div.clickAns.hover”).removeClass(“hover”);
    $(“div.clickAns.ans”).show().addClass(“correctAns”);
    //$(‘.clickAns’).css({‘backgroundColor’:’#71c956′});
    //alert(“Correct”);
    vgood_aud();
    } else {
    if (selectCount == 1) {
    t1 = setTimeout(function () {
    tryAgain();
    $(“.hideClick”).hide();
    //alert(“tryAgain”);
    first_try_aud();
    }, 2000);
    } else {

    $(“.opt1, .opt2, .opt3”).hide();
    $(“.hideClick”).show();
    //$(“.clickAns,.clickAnsWth”).removeClass(“hover_ans”);
    $(“div.clickAns.hover”).removeClass(“hover”);
    $(“div.clickAns.ans”).show().addClass(“correctAns”);
    //$(‘.clickAns’).css({‘backgroundColor’:’#71c956′});
    //alert(“Show Ans”);
    second_try_aud();

    }
    }
    }

    function checkSelAns1(val) {
    selectCount1 += 1;

    var q = $(val).parents(“div.options2”);
    selectedAns1 = ($(“div.clickAnsWth.hover”).hasClass(“ans”)) ? “1” : “0”;
    if (selectedAns1 == “1”) {
    $(“.opt1_1, .opt3_1, .opt4_1”).hide();
    $(“.hideClick”).show();
    $(“div.clickAnsWth.hover”).removeClass(“hover”);
    $(“div.clickAnsWth.ans”).show().css({
    “background-color”: “#00ff00”
    });
    //$(‘.clickAns’).css({‘backgroundColor’:’#71c956′});
    //alert(“Correct”);
    vgood_aud1();
    } else {
    if (selectCount1 == 1) {
    t1 = setTimeout(function () {
    tryAgain();
    $(“.hideClick”).hide();
    //alert(“tryAgain”);
    first_try_aud1();
    }, 2000);
    } else {
    $(“.opt1_1, .opt3_1, .opt4_1”).hide();
    $(“.hideClick”).show();
    $(“div.clickAnsWth.hover”).removeClass(“hover”);
    $(“div.clickAnsWth.ans”).show().css({
    “background-color”: “#00ff00”
    });
    //$(‘.clickAns’).css({‘backgroundColor’:’#71c956′});
    //alert(“Show Ans”);
    second_try_aud1();

    }
    }
    }

    function tryAgain() {
    selectedAns1 = ”;
    $(‘.selectActive’).removeClass(‘selectActive’);
    $(“div.clickAnsWth.hover”).removeClass(“hover”);
    }

    function nxtQus() {
    $(“.hideClick”).hide();
    //$(“div.clickAnsWth.hover”).removeClass(“hover”);
    //$(“div.clickAnsWth.ans”).removeClass(“correctAns”);
    clickCount1 = 0;
    $(“#q1”).hide();
    $(“#q2”).show();
    $(“.opt1_1,.opt2_1,.opt3_1,.opt4_1”).hide();
    t1 = setTimeout(function () {
    dislike_swipe();
    }, 1000);
    t2 = setTimeout(function () {
    loadIntData2();
    }, 2000);
    //loadIntData2();

    }

    /*————— Drag Drop ———————-*/

    function dragAud1() {
    sAudio = “dragAud1”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function wronDrop() {
    sAudio = “wrongDrop”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function righDrop() {

    //t1 = setTimeout(function(){anim_end();},4000);
    sAudio = “rightDrop”;
    audioPlay(uagent, sAudio, “gameAud”, gameAud);
    }

    function dragDrop() {

    t2 = setTimeout(function () {

    $(‘.arrow’).animate({
    ‘top’: ‘400px’,
    ‘right’: ‘530px’
    }, 800, function () {
    /*$(‘.mouth’).hide();*/
    t2 = setTimeout(function () {
    $(‘.disTxt’).animate({
    ‘fontSize’: ‘100px’
    });
    }, 1000);
    t3 = setTimeout(function () {

    $(‘.disTxt’).animate({
    ‘fontSize’: ’80px’
    }, function () {
    t1 = setTimeout(function () {
    $(‘.arrow’).animate({
    ‘top’: ‘430px’,
    ‘right’: ’55px’
    }, 1500, function () {
    $(‘.arrow’).animate({
    ‘top’: ‘310px’,
    ‘right’: ’55px’
    }, 1500, function () {
    $(‘.arrow’).animate({
    ‘top’: ‘210px’,
    ‘right’: ’55px’
    }, 1500, function () {
    $(‘.arrow’).animate({
    ‘top’: ‘110px’,
    ‘right’: ’55px’
    }, 1500, function () {
    t4 = setTimeout(function () {
    $(‘.arrow’).animate({
    ‘top’: ‘400px’,
    ‘right’: ‘298px’
    }, 1500);
    $(‘.drag1’).animate({
    ‘top’: ‘363px’,
    ‘right’: ‘298px’
    }, 1500, function () {
    $(“.removeDrag, .arrow”).hide();

    });
    }, 2000);
    })
    })
    })
    })
    }, 1000);
    });

    }, 2000);

    })

    }, 2000);

    }
    var dragRevert = true;
    var submitDragFlag = false;
    var rightDrop = 0,
    dragid, dropid;
    var chanceCount = 0;
    var rightdrag = [];
    var wrongdrop = [];
    var wrongdrag = [];

    function is_touch_device() {
    if (navigator.platform == ‘iPad’ || navigator.platform == ‘iPhone’ || navigator.platform == ‘iPod’ || (uagent.search(‘android’) > -1) || (uagent.search(‘android’) > -1) || (platformAgent.search(‘android’) > -1) || (platformAgent.search(‘linux’) > -1)) {
    return true;
    } else {
    return false;
    }
    }

    function Init() {
    //$(‘.swfObject’).css({‘padding’:’3px’});
    InitDrag();

    function InitDrag() {
    if ($(‘.drag_ul1’).length == 0) {
    var oCurrActivity = $(‘.drag_ul’).clone();
    $(oCurrActivity).removeAttr(‘class’).addClass(‘drag_ul1’);
    $(“.blue_right”).append(oCurrActivity);
    }
    if ($(‘.drag_ul2’).length == 0) {
    var oCurrActivity = $(‘.drag_ul’).clone();
    $(oCurrActivity).removeAttr(‘class’).addClass(‘drag_ul2’);
    $(“.blue_right”).append(oCurrActivity);
    }
    $(“.ui-draggable”).draggable({
    containment: ‘.page’,
    stack: “.drag_ul .dragBg”,
    revert: function () {
    if (dragRevert == true) {
    return true;
    } else {
    dragRevert = true;
    }
    }
    });

    if (is_touch_device) {
    init();
    }

    }

    var dropCnt = 0;

    $(“.drop_ul .drop”).each(function () {
    $(this).droppable({
    drop: function (event, ui) {

    var DragEleid = ui.draggable.attr(“id”);
    dragid = ui.draggable.attr(“dragid”);
    dropid = $(this).attr(‘dropid’);
    if (dropid == dragid) {
    dropCnt++;
    $(‘#’ + DragEleid).css({
    ‘left’: ‘0px’,
    ‘top’: ‘0px’,
    ‘zIndex’: ‘0’,
    ‘cursor’: ‘auto’
    }).draggable(‘disable’);
    $(this).html(ui.draggable);

    righDrop();
    if (dropCnt == 3) {
    anim_end();
    }

    } else {
    wronDrop();
    }
    $(‘.overlay’).show();
    }
    });
    });

    $(‘.feed_close, .try_again’).live(‘click’, function () {
    $(‘.overlay, .feedback’).empty().hide();
    InitDrag();
    });

    function showResult() {
    for (i = 0; i < rightdrag.length; i++) {
    $('#' + rightdrag[i]).css('background', 'url(../module01/01_03_02b_i1/web/imgs/dragright.png) no-repeat 201px');
    }
    for (i = 0; i < wrongdrag.length; i++) {
    $('#' + wrongdrag[i]).css('background', 'url(../module01/01_03_02b_i1/web/imgs/dragwrong.png) no-repeat 201px');
    }
    }

    function init() {
    var a = 0;
    $(".drag_ul .dragBg").each(function () {
    var b = $(this).attr("id");
    var c = document.getElementById(b);
    a++;
    c.addEventListener("touchstart", touchHandler, true);
    c.addEventListener("touchmove", function (e) {
    e.preventDefault();
    }, true);
    c.addEventListener("touchmove", touchHandler, true);
    c.addEventListener("touchend", touchHandler, true);
    c.addEventListener("touchcancel", touchHandler, true);
    });
    }

    function touchHandler(a) {
    var b = a.changedTouches,
    c = b[0],
    d = "";
    switch (a.type) {
    case "touchstart":
    d = "mousedown";
    break;
    case "touchmove":
    d = "mousemove";
    break;
    case "touchend":
    d = "mouseup";
    break;
    default:
    return
    }
    var e = document.createEvent("MouseEvent");
    e.initMouseEvent(d, true, true, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, false, false, false, false, 0, null);
    c.target.dispatchEvent(e);
    }

    };

    function animateImg() {
    var cnt = 0;
    anitimer = setInterval(function () {
    cnt++;
    if (cnt <= 25) {
    $('.animimg').css('background', 'url(images/gradiant_img/' + cnt + '.png) no-repeat').show();
    } else {
    //$('.animimg').hide();
    //clearInterval(anitimer);
    }
    }, 100);

    sAudio = "end";
    audioPlay(uagent, sAudio, "gameAud", gameAud);
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s