[REL] Better Build Bar [Not Currently Working]

The main page has a few examples of .html() at the bottom. E.g. $("#element").html('<div></div>"). You could also do $(html) and the insert it: http://api.jquery.com/category/manipulation/

I figured out how to append the button to the body element

Code:

$( 'body' ).append( "<input type='button''</input>" )

but now it is stuck at the top of the page regardless of what I do.

Typo?

Code:

$( 'body' ).append( "<input type='button'></input>" );

that wasn't it but thank you, I had to set the position to absolute in order to move it, here is my code so far, I haven't thrown in the function to enable opacity yet.

Code:

$( 'body' ).append( "<div class='cor_transparency_controls ignoremouse' style='height: 100%; width: 100%; z-index: -100; pointer-events: none;'><input type='button' style='position: absolute; bottom: 50px; right: 50px;' value='Opacity On'></button></div>" )

Just had another idea

Instead of creating two buttons, I am going to try to make a checkbox that if checked opacity is on and if not checked, opacity is off.

This much style is usually done with a separate CSS file. You should be able to look at most mods for examples.

I have tried to get it to work with an external css file but it isn't doing anything, should the css match

Code:

id=opacity_checkbox

or

Code:

class=opacity_checkbox

?

The sample bit of code had class=cor_transparency_checkbox, so that would be

Code:

.cor_transparency_checkbox

The input box posted had no class or id. You could still select it with

Code:

.cor_transparency_checkbox input

If you give it an id=opacity_checkbox, then

Code:

#opacity_checkbox

id and class pretty similar. In theory there should only be one of an id, but there can be any number of a class.

well I have everything(i think) coded, but I have run into a weird problem, my checkbox is unclickable

corBetterBuildBar.js

HTML:

(function() {
$( 'div.div_bottom_bar' ).append( "<div id='div_opacityCheck'>Opacity <input type='Checkbox' id='opacityCheck'></input></div>" );
})()


function opacityOff() {
    $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px');
}


function opacityOn() {
    $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('opacity', '.8');
}

document.getElementbyId('opacityCheck').onchange = function() {
    if ( document.getElementById('opacityCheck').checked === false ) {
        opacityOff();
    }
    else
    {
        opacityOn();
    };
}

corBetterBuildBar.css

HTML:

.img_build_unit
{
    height:32px;
    width:32px;
    margin:2px auto 0px;
}
.div_build_item {
    height: 37px;
    width: 41px;
    border-right: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
    margin-top: -1px;
    margin: 0px 0px 0px;
    float:left;
    display:block;
    position:relative;
}

div#div_opacityCheck {
    position: absolute;
    right: 48.4%;
    bottom: 4%;
    font-size: 10px;
    text-shadow: 0px 2px 2px black;
    font-family: 'Sansation Bold';
    text-align: center;
    text-transform: uppercase;
}

.div_build_bar_tab_cont .tab_grp {
    border-width: 2px 17px 39px 17px;
}

Any ideas?

I've sometimes seen an ignoremouse property, or something like that. You're not inside a container with that property are you?

Try looking at it in the debugger and see if there are any inherited rules which would do something like that.

It is in the Build Bar div which has the ignoremouse property

okay I removed the ignoremouse property in the debugger but now i realized my checkbox doesn't work

Yep, the two clickable regions have a receiveMouse class. ignoreMouse and receiveMouse are little hacky classes to control the css-properties pointer-events:none and pointer-events:all

I gave my div the receiveMouse property and it is clickable now, but the checkbox doesn't work, here is my updated code
corBetterBuildBar.js

Code:

(function() {
$( 'div.div_bottom_bar' ).append( "<div class='div_opacityCheck receiveMouse' id='div_opacityCheck'>Opacity <input type='Checkbox' id='opacityCheck' name='opacityCheck'></input></div>" );
})();


function opacityOff() {
    $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('opacity', '1');
};


function opacityOn() {
    $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('opacity', '.8');
};


if($('opacityCheck').is(':checked')){
    opacityOn()
    }
    else
    {
    opacityOff()
    }

One bug I can see is that opacityOff() doesn't actually set the opacity to 0.

fixed

Sorry, I actually meant 0; you beat me to my correction

no, 1 is right, 0 would make everything disappear

Uh. The function name is opacity Off though. Wouldn't 1 make it opaque (ie., opacity would be on)?

nope just tested it

opacity=1 makes everything completeley visible
opacity=0 makes everything invisible
anything in between varies