i'm creating comparison table in html5. has 2 tabs 1 app1 vs app2 , app1 vs app3. have used tabulous.js this.
i'm having problems select element. whenever switch next tab, first select element (select id = "leave") doesn't work anymore. cannot select it. i'm having problems when input text value on li id = "hello". when type app3, cannot select select id = "leave" again.
hope can me.
below html5 code.
<div id="wrapper"> <div id="tabs"> <ul> <li><a href="#tabs-1" title="">tab1</a></li> <li><a href="#tabs-2" title="" onclick = "changetos2()">tab2</a></li> </ul> <div id="tabs_container"> <div id="tabs-1" onchange = "changetos()"> <span id = "container_panel"> <span class="whole"> <span class="type1"> <p></p> </span> <span class="plan1"> <span class="content0"> <ul> <li class = "lilabel">c1</li> <li class = "lilabel">c2</li> <li class = "lilabel">c3</li> <li class = "lilabel">c4</li> <li class = "lilabel">c5</li> <li class = "lilabel">c6</li> <li class = "lilabel">c7</li> <li class = "lilabel">c8</li> <li class = "lilabel" id ="e">c9 </li> </ul> </span> </span> </span> <span class="whole1"> <span class="plan"> <span class="content1"> <ul> <li><img class = "j" src = "img/jd_edit.png"/></li> <li class = "lilabel0">app</li> <li id = "tos" class = "ullabel"></li> <li id = "jd_2" class = "ullabel"> <select id="leave"> <option value="2500" selected>2500</option> <option value="2600">2600</option> </select> </li> <li id = "jd_13" class = "ullabel"></li> <li id = "pricedif" class = "ullabel"> <select id="leave2"> <option value="5000" >5000</option> <option value="14000" selected>14000</option> </select> </li> <li id = "jd_15" class = "ullabel"></li> <li id = "jd_16" class = "ullabel"> <select id="leave3"> <option value="2" >2</option> <option value="3" selected>3</option> </select> </li> <li id = "jd_17" class = "ullabel"></li> <li id = "jd_18" class = "ullabel"></li> <li id="costeff1" class = "ullabel">1</li> </ul> </span> </span> </span> <span class="whole2"> <span class="plan"> <span class="content1"> <ul> <li><img class = "j" src = "img/k_edit.png"/></li> <li class = "lilabel0">app2</li> <li id = "tos1" class = "ullabel"></li> <li id = "k_22" class = "ullabel"> </li> <li id = "k_23" class = "ullabel"></li> <li id = "pricedif" class = "ullabel"> . </li> <li id = "k_25" class = "ullabel"></li> <li id = "k_26" class = "ullabel"> </li> <li id = "k_27" class = "ullabel"></li> <li id = "k_28" class = "ullabel"></li> <li id="costeff2" class = "ullabel"> </li> </ul> </span> </span> </span> </span> </div> <div id="tabs-2"> <span id = "container_panel"> <span class="whole"> <span class="plan1"> <span class="content0"> <ul> <li> </li> <li> </li> <li class = "lilabel">c1</li> <li class = "lilabel">c2</li> <li class = "lilabel">c3</li> <li class = "lilabel">c4</li> <li class = "lilabel">c5</li> <li class = "lilabel">c6</li> <li class = "lilabel">c7</li> <li class = "lilabel">c8</li> <li class = "lilabel">c9 </li> </ul> </span> </span> </span> <span class = "whole"> <span class = "plan1"> <span class = "content0"> <ul> <li> </li> <li class = "lilabel0">app1</li> <li id = "john1" class = "ullabel">1</li> <li id = "john2" class = "ullabel"> <select id = "numbales2" onchange = "changetos2()"> <option value = "2500" selected>2500</option> <option value = "2600">2600</option> </select> </li> <li id = "john3" class = "ullabel">3</li> <li id = "john4" class = "ullabel"> <select id = "balerprice2"> <option value = "5000">5000</option> <option value = "10000" selected>10000</option> </select> </li> <li id = "john5" class = "ullabel">5</li> <li id = "john6" class = "ullabel"> <select id = "balemin2"> <option value = "2">2</option> <option value = "3" selected>3</option> </select> </li> <li id = "john7" class = "ullabel">7</li> <li id = "john8" class = "ullabel">8</li> <li id = "john9" class = "ullabel">9</li> </ul> </span> </span> </span> <span class = "whole"> <span class = "plan"> <span class = "content1"> <ul class = "ulclass"> <li id = "imgkrone"></li> <li id = "hello">app3</li> <li id = "krone1" class = "kronec">2</li> <li id = "krone2" class = "kronec">2</li> <li id = "krone3" class = "kronec">2</li> <li id = "krone4" class = "kronec">2</li> <li id = "krone5" class = "kronec">2</li> <li id = "krone6" class = "kronec">2</li> <li id = "krone7" class = "kronec">2</li> <li id = "krone8" class = "kronec">2</li> <li id = "krone9" class = "kronec">2</li> </ul> </span> </span> </span> </span> </div> </div><!--end tabs container--> </div><!--end tabs--> </div> and here js code
/*! * strength.js * original author: @aaronlumsden * further changes, comments: @aaronlumsden * licensed under mit license */ ;(function ( $, window, document, undefined ) { var pluginname = "tabulous", defaults = { effect: 'scale' }; // $('<style>body { background-color: red; color: white; }</style>').appendto('head'); function plugin( element, options ) { this.element = element; this.$elem = $(this.element); this.options = $.extend( {}, defaults, options ); this._defaults = defaults; this._name = pluginname; this.init(); } plugin.prototype = { init: function() { var links = this.$elem.find('a'); var firstchild = this.$elem.find('li:first-child').find('a'); var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>'); if (this.options.effect == 'scale') { tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addclass('hidescale'); } else if (this.options.effect == 'slideleft') { tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addclass('hideleft'); } else if (this.options.effect == 'scaleup') { tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addclass('hidescaleup'); } else if (this.options.effect == 'flip') { tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addclass('hideflip'); } var firstdiv = this.$elem.find('#tabs_container'); var firstdivheight = firstdiv.find('div:first').height(); var alldivs = this.$elem.find('div:first').find('div'); alldivs.css({'position': 'absolute','top':'40px'}); firstdiv.css('height',firstdivheight+'px'); firstchild.addclass('tabulous_active'); links.bind('click', {myoptions: this.options}, function(e) { e.preventdefault(); var $options = e.data.myoptions; var effect = $options.effect; var mythis = $(this); var thisform = mythis.parent().parent().parent(); var thislink = mythis.attr('href'); firstdiv.addclass('transition'); links.removeclass('tabulous_active'); mythis.addclass('tabulous_active'); thisdivwidth = thisform.find('div'+thislink).height(); if (effect == 'scale') { alldivs.removeclass('showscale').addclass('make_transist').addclass('hidescale'); thisform.find('div'+thislink).addclass('make_transist').addclass('showscale'); } else if (effect == 'slideleft') { alldivs.removeclass('showleft').addclass('make_transist').addclass('hideleft'); thisform.find('div'+thislink).addclass('make_transist').addclass('showleft'); } else if (effect == 'scaleup') { alldivs.removeclass('showscaleup').addclass('make_transist').addclass('hidescaleup'); thisform.find('div'+thislink).addclass('make_transist').addclass('showscaleup'); } else if (effect == 'flip') { alldivs.removeclass('showflip').addclass('make_transist').addclass('hideflip'); thisform.find('div'+thislink).addclass('make_transist').addclass('showflip'); } firstdiv.css('height',thisdivwidth+'px'); }); changetos(); }, yourotherfunction: function(el, options) { // logic } }; // lightweight plugin wrapper around constructor, // preventing against multiple instantiations $.fn[pluginname] = function ( options ) { return this.each(function () { new plugin( this, options ); }); }; })( jquery, window, document ); function changetos() { var tos = document.getelementbyid("tos"); var title = document.getelementbyid("hello"); //var krone = "krone"; //title.innerhtml = krone; valselected = parsefloat(document.getelementbyid("leave").value); valselected2 = parsefloat(document.getelementbyid("leave2").value); valselected3 = parsefloat(document.getelementbyid("leave3").value); //alert(valselected2); tos.innerhtml = parsefloat(valselected * 258.9596612 / 1000).tofixed(0); changecontentk(tos.innerhtml, valselected2, valselected3); changecontentjd(tos.innerhtml, valselected, valselected2, valselected3); computecosteff(); } function changecontentk(tos, valselected2, valselected3) { document.getelementbyid("k_22").innerhtml = ((tos / 227.1707391) * 1000).tofixed(0); valselected2 = 0; document.getelementbyid("k_23").innerhtml = (parsefloat((0.73*document.getelementbyid("k_22").innerhtml)+(0.5*document.getelementbyid("k_22").innerhtml)+((tos/18.43349503)*(15.3+7.8+16)))).tofixed(0); document.getelementbyid("k_25").innerhtml = (parsefloat(document.getelementbyid("k_23").innerhtml) + valselected2 + 30900 / 10).tofixed(0) ; document.getelementbyid("k_27").innerhtml = ((parsefloat(document.getelementbyid("k_22").innerhtml) * (valselected3 / 60)) * (12.2 + 4.5 + 6.1 + 16)).tofixed(0); document.getelementbyid("k_28").innerhtml = (parsefloat(document.getelementbyid("k_27").innerhtml) + parsefloat(document.getelementbyid("k_25").innerhtml)).tofixed(0); } function changecontentjd(tos, valselected, valselected2, valselected3) { document.getelementbyid("jd_13").innerhtml = (parsefloat((0.73*valselected)+(0.5*valselected)+((tos/20.1922655)*(15.3+7.8+16)))).tofixed(0); document.getelementbyid("jd_15").innerhtml = (parseint(document.getelementbyid("jd_13").innerhtml) + valselected2 / 10 + 30900 / 10).tofixed(0) ; document.getelementbyid("jd_17").innerhtml = (parsefloat((valselected * (valselected3 / 60)) * (12.2 + 4.5 + 6.1 + 16))).tofixed(0); document.getelementbyid("jd_18").innerhtml = (parsefloat(document.getelementbyid("jd_17").innerhtml) + parsefloat(document.getelementbyid("jd_15").innerhtml)).tofixed(0); } function computecosteff(){ document.getelementbyid("costeff1").innerhtml = (((parsefloat(document.getelementbyid("k_28").innerhtml) - parsefloat(document.getelementbyid("jd_18").innerhtml))/parsefloat(document.getelementbyid("k_28").innerhtml))*100).tofixed(1); if (document.getelementbyid("costeff1").innerhtml < 0){ document.getelementbyid("costeff1").style.color = "black"; document.getelementbyid("costeff1").style.backgroundcolor = "#ebebeb"; document.getelementbyid("costeff2").style.backgroundcolor = "#ebebeb"; }else{ document.getelementbyid("costeff1").style.color = "white"; document.getelementbyid("costeff1").style.backgroundcolor = "#367c2b"; document.getelementbyid("costeff2").style.backgroundcolor = "#367c2b"; } } function changetos2() { var atos = document.getelementbyid("john1"); var avalselected = parsefloat(document.getelementbyid("numbales2").value); var avalselected2 = parsefloat(document.getelementbyid("balerprice2").value); var avalselected3 = parsefloat(document.getelementbyid("balemin2").value); //alert(valselected2); atos.innerhtml = parsefloat(avalselected * 258.9596612 / 1000); changecontentk2(atos.innerhtml, avalselected2, avalselected3); changecontentjd2(atos.innerhtml, avalselected, avalselected2, avalselected3); computecosteff2(); } function changecontentk2(tos, valselected2, valselected3) { document.getelementbyid("krone2").innerhtml = ((tos / 245.7729751) * 1000).tofixed(0); valselected2 = 0; document.getelementbyid("krone3").innerhtml = (parsefloat((0.73*document.getelementbyid("krone2").innerhtml)+(0.5*document.getelementbyid("krone2").innerhtml)+((tos/17.45667132)*(15.3+7.8+16)))).tofixed(0); document.getelementbyid("krone5").innerhtml = (parsefloat(document.getelementbyid("krone3").innerhtml) + valselected2 + 30900 / 10).tofixed(0) ; document.getelementbyid("krone7").innerhtml = ((parsefloat(document.getelementbyid("krone2").innerhtml) * (valselected3 / 60)) * (12.2 + 4.5 + 6.1 + 16)).tofixed(0); document.getelementbyid("krone8").innerhtml = (parsefloat(document.getelementbyid("krone7").innerhtml) + parsefloat(document.getelementbyid("krone5").innerhtml)).tofixed(0); } function changecontentjd2(tos, valselected, valselected2, valselected3) { document.getelementbyid("john3").innerhtml = (parsefloat((0.73*valselected)+(0.5*valselected)+((tos/20.1922655)*(15.3+7.8+16)))).tofixed(0); document.getelementbyid("john5").innerhtml = (parseint(document.getelementbyid("john3").innerhtml) + valselected2 / 10 + 30900 / 10).tofixed(0) ; document.getelementbyid("john7").innerhtml = (parsefloat((valselected * (valselected3 / 60)) * (12.2 + 4.5 + 6.1 + 16))).tofixed(0); document.getelementbyid("john8").innerhtml = (parsefloat(document.getelementbyid("john7").innerhtml) + parsefloat(document.getelementbyid("john5").innerhtml)).tofixed(0); } function computecosteff2(){ document.getelementbyid("john9").innerhtml = (((parsefloat(document.getelementbyid("krone8").innerhtml) - parsefloat(document.getelementbyid("john8").innerhtml))/parsefloat(document.getelementbyid("krone8").innerhtml))*100).tofixed(1); if (document.getelementbyid("john9").innerhtml < 0){ document.getelementbyid("john9").style.color = "black"; document.getelementbyid("john9").style.backgroundcolor = "#ebebeb"; document.getelementbyid("krone9").style.backgroundcolor = "#ebebeb"; }else{ document.getelementbyid("john9").style.color = "white"; document.getelementbyid("john9").style.backgroundcolor = "#367c2b"; document.getelementbyid("krone9").style.backgroundcolor = "#367c2b"; } }
Comments
Post a Comment