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.
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.
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() }
nope just tested it opacity=1 makes everything completeley visible opacity=0 makes everything invisible anything in between varies