0

On my website, I have div layers that if you hover, it changes the opacity from .3 to 1, and when you hover out, it goes to 1 back to .3.

The odd thing I'm noticing is that it changes to:

<div id="penta1" style="height: 945px; width: 380px; opacity: 0.30000000000000004;">

While some instances it reverts back to:

<div id="penta1" style="height: 945px; width: 380px; opacity: 0.3;">

My code is rather awkward, I was kind of dazed and frustrated while trying to get it to work, so don't yell at me in the comments that it is bad. I know it's bad. However, for those of you who are OCD about code optimization and neatness, feel free to organize, and condense to your hearts desire:

var contentWidth;
var allPenta = '#penta1,#penta2,#penta3,#penta4';
var allButton = '.button1,.button2,.button3,.button4';
var allFullPenta = '#pentafull1,#pentafull2,#pentafull3,#pentafull4'
function simplyWidth(wrapper, menu1, content, pentas){
    var menu = $(menu1).width();
    var wrapperwidth = $(wrapper).width();
    var newWidth = wrapperwidth-menu;
    var widgetWidth = newWidth/4;
    contentWidth = newWidth;

    $(content).css("width", newWidth);
    $(pentas).css("width", widgetWidth);
};
var contentHeight
function simplyHeight(footer, bottom, wrapper, pentas){
    var footheight = $(footer).height();
    var bottomalign = $(bottom).height();
    var wrapperheight = $(wrapper).height();
    var newHeight = footheight + bottomalign;
    var newnewHeight = wrapperheight - newHeight;
    contentHeight = newnewHeight;

    $(pentas).css("height", newnewHeight);

};
function simplyDimension(){
    $(allFullPenta).css("width", contentWidth);
    $(allFullPenta).css("height", contentHeight);
}

var stoppable = true;
function simplyHighlight(penta){
    $(penta).fadeTo(0,.3)

    $(penta).mouseenter(function(){
        if (stoppable == true) {
            $(penta).stop();
            $(penta).fadeTo(200,1);
        };
    });
    $(penta).mouseleave(function(){
        if (stoppable == true) {
            $(penta).stop();    
            $(penta).fadeTo(300,.3);
        };
    });

}
function simplySpan(button, fullpenta){
    $(button).click(function(){
        stoppable = false;
        $(allPenta).hide(400);
        $(allFullPenta).hide(400);
        $(fullpenta).show(400);
    });
};

function simplyMaster(){
    simplyHeight('#contentfoot', '.bottomalign', '#wrapper', '#penta1,#penta2,#penta3,#penta4');
    simplyWidth('#wrapper','#menu1','#content','#penta1,#penta2,#penta3,#penta4');
    $(window).resize(function(){
        simplyWidth('#wrapper','#menu1','#content','#penta1,#penta2,#penta3,#penta4');
        simplyHeight('#contentfoot', '.bottomalign', '#wrapper', '#penta1,#penta2,#penta3,#penta4');
        simplyDimension()
    });
    simplyHighlight('#penta1');
    simplyHighlight('#penta2');
    simplyHighlight('#penta3');
    simplyHighlight('#penta4');
    simplyDimension();
    $(allFullPenta).hide();
    simplySpan('.button1', '#pentafull1');
    simplySpan('.button2', '#pentafull2');
    simplySpan('.button3', '#pentafull3');
    simplySpan('.button4', '#pentafull4');
};

You'll want to take your attention to the "simplyHighlight" function, as that is the primary source of what changes the div's opacity. The rest of the functions deal with transitions, and resizing.

Christopher 'Solidus' DeJong
  • 193
  • 11
  • 2
    Does it make any difference?? I think it won't. – Gibbs Jul 16 '14 at 15:27
  • 3
    [Welcome to the wonderful world of floating point numbers.](http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html) – Zeta Jul 16 '14 at 15:28
  • 1
    Regardless of whether or not it makes a difference isn't why I asked the question. This is out of curiosity and concern for load times. – Christopher 'Solidus' DeJong Jul 16 '14 at 15:29
  • 1
    @Teknikitsune it's just a phenomenon caused by the way math works in JavaScript. – Pointy Jul 16 '14 at 15:29
  • 1
    This is because of the way JavaScript implements floating point numbers. You can refer [this answer](http://stackoverflow.com/a/588014) for further explanation. – Chirag Bhatia - chirag64 Jul 16 '14 at 15:29
  • @Zeta The doc is too long. Mark the particular content for Lazy readers like me – Gibbs Jul 16 '14 at 15:31
  • I'll sum it up: 'cause computers can only store x amount of bits for problem y in a decimal format that is infinitely long, it approximates to x space and rounds y. Hence why I was getting .3000...04 instead of .3. – Christopher 'Solidus' DeJong Jul 16 '14 at 15:36
  • @user3168736: [Sure, here are the relevant parts](http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html). – Zeta Jul 16 '14 at 15:49

0 Answers0