Develop Reference

Why is my jQuery code endlessly repeating? Possible .bind problems?

I've been programming for a few months and making little scripts here and there for a site which has API and jQuery. Lately I have been working on a mini-rpg game for that site; unfortunately I am not exactly the most experienced person.
I encountered some problems with some .bind("click") jQuery events, mainly one in peculiar that won't stop and endlessly repeats. I made some buttons that should trigger more functions on click. I have a feeling I might be endlessly repeating between 2 functions, as some console.log messages are neverendingly repeating, crashing the tab in which I'm testing the code. I couldn't find what was the cause of the loop.
//#initialFunctions
settingsButton();
menuButton();
//#buttons
function btnCloser(){
if($('#btn1').length!==0){
$('#btn1').remove();
console.log("Btn1 removed.");
}
if($('#btn2').length!==0){
$('#btn2').remove();
console.log("Btn2 removed.");
}
if($('#btn3').length!==0){
$('#btn3').remove();
console.log("Btn3 removed.");
}
}
function buttons3(){
$('#mainWindow').append('<button id="btn1" type="button" style="position:absolute; top:105px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
$('#mainWindow').append('<button id="btn2" type="button" style="position:absolute; top:135px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
$('#mainWindow').append('<button id="btn3" type="button" style="position:absolute; top:165px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
$('#btn1').hover(function(){$('#btn1').css("cursor","pointer");$('#btn1').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn1').css("cursor","auto");$('#btn1').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
$('#btn2').hover(function(){$('#btn2').css("cursor","pointer");$('#btn2').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn2').css("cursor","auto");$('#btn2').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
$('#btn3').hover(function(){$('#btn3').css("cursor","pointer");$('#btn3').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn3').css("cursor","auto");$('#btn3').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}
//#buttonsUI
function menuButton(){
$('body').append('<button id="menuBtn" type="button" onclick="menu()" style="position:absolute; top:55px; right:500px; width:100px; height:20px; background-color:black; color:white; opacity: 0.8; border-radius:20px; opacity: 0.8; z-index:100; font-size=200%; color:white; text-align:center;">Menu</button>');
$('#menuBtn').hover(function(){$('#menuBtn').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#menuBtn').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}
//#menu
maintenanceMode=false;
function menu(){
$('statWindow').remove();
if($('#mainWindow').length===0){
$('body').append('<div id="mainWindow" style="position:absolute; top:90px; right: 355px; height: 200px; width: 250px; background-color: black; border: 2.5px solid #2FC7FB; border-radius: 20px; opacity: .8; z-index: 100;"></div>');
$('#mainWindow').append('<div id="mainWindowText" style="position:absolute; top:12px; left:3px; text-align:left;"></div>');
$('body').append('<div id="closeButton" onclick="mainWindowClose()" style="position: absolute; top:96px; right:360px; height:20px; width:20px; background-color:black; color:white; opacity: 0.8; opacity:0.8; z-index:101; font-size=170%; text-align:center; border: 2.5px solid #2FC7FB; border-radius: 10px;">X</div>');
$('#closeButton').hover(function(){$('#closeButton').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#closeButton').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}
btnCloser();
buttons3();
$('#btn1').bind("click",console.log("Stats button clicked.")).text('Stats');
$('#btn2').bind("click",clinic()).text('Clinic');
$('#btn3').bind("click",mainWindowClose()).text('Close');
}
//#mainUI
notShown=true;
function newWindow(){
$('#miniGame').remove();
notShown=false;
$('body').append('<div id="mainWindow" style="position:absolute; top:90px; right: 355px; height: 200px; width: 250px; background-color: black; border: 2.5px solid #2FC7FB; border-radius: 20px; opacity: .8; z-index: 100;"></div>');
$('#mainWindow').append('<div id="mainWindowText" style="position:absolute; top:12px; left:3px; text-align:left;"></div>');
$('body').append('<div id="closeButton" onclick="mainWindowClose()" style="position: absolute; top:96px; right:360px; height:20px; width:20px; background-color:black; color:white; opacity: 0.8; opacity:0.8; z-index:101; font-size=200%; text-align:center; border: 2.5px solid #2FC7FB; border-radius: 10px;">x</div>');
$('#closeButton').hover(function(){$('#closeButton').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#closeButton').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
//$('#mainWindow').append('<button id="battleButton" type="button" onclick="clinicText()" style="position:absolute; top:160px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;">Battle!</button>');
}
function showAlert(){
$('body').append('<div id="miniGame" onclick="newWindow()" style="position:absolute; top:55px; right: 350px; height: 20px; width: 20px; background-color: red; border-radius:20px; opacity: 0.8; z-index: 100; font-size=500%; color: solid red; text-align: center;">!</div>');
$('#miniGame').hover(function(){$('#miniGame').css("cursor","pointer");$('#miniGame').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#miniGame').css("cursor","auto");$('#miniGame').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
notShown=false;
$('#miniGame').bind("click",monsterEncounter());
}
function mainWindowClose(){
btnCloser();
$('#mainWindow').remove();
$('#closeButton').remove();
notShown=true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
It seems my code is somehow repeating over and over again and I wondered what were the causes. Thanks!

When binding to an event, you need to provide a function that will be executed when the event occurs.. you appear to be passing the result of calling a function.
For example:
$('#btn1').bind("click",console.log("Stats button clicked."))
Is actually the same as
var x = console.log("Stats button clicked.");
$('#btn1').on('click', x);
which probably isn't what you intended.
Try this:
$('#btn1').on('click', function () {
console.log('Stats button clicked.');
});
It is likely your .hover( handlers that are endlessly repeating tho.
Also, try breaking your code down and indenting it.. it's nice to see it all on one line, but it makes it hard to follow. For example, in your hover function you have invalid javascript (which will likely be throwing errors in your console)

Line break inside round button is not working

I have created a round shaped bordered button using CSS by this:
.round-button {
display:block;
width:100px;
height:100px;
line-height:100px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
and used it in html5 by this:
<div align="center">
<a href="#" class="round-button">
<font color="#29966c" id="demo"></font>
</a>
</div>
Now I want to create a line break inside the round button,
<div align="center">
<a href="#" class="round-button">
<font color="#29966c" id="demo">hello <br />world</font>
</a>
</div>
So, the "world" comes out of the round button.
I want both words will be at different line but they both will stay inside the round button window.

As your line-height equals to width in your css, the "world" comes out of the round button.
if you set line-height to 50px, you'll get vertically middle aligned text in the button.

As others mentioned, line-height:100px means each line of text should be 100px tall. That will work to vertically center one line of text (if the container is also 100px tall), but will not work if it is larger than 2 lines of text.
To vertically center the content regardless of how many lines it is, you can use:
display: table-cell;
vertical-align: middle;
Fiddle: http://jsfiddle.net/PDPTV/
(Note: The <font> tag is not supported in HTML5. Moving forward, you should use CSS to specify your font colors. The attribute align=center is also not supported, so you should use another technique to center your content, but that's for a whole other topic on stack overflow.)

The problem is that "line-height:100px;" is pushing the second line down 100px, try this:
.round-button{
display:block;
width:100px;
height:80px;
padding-top: 20px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
You may have to fiddle with the height and padding to get the right offset from the top. Remember that the height excludes padding, so subtract the padding from the height.

Your line-height is 100px. do this instead:
http://jsfiddle.net/VS7sJ/
.round-button {
display:block;
width:100px;
height:100px;
line-height:1em;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
span {
padding:20px 0 0;
display:block
}
line-height:1em and wrap the text with span
<div align="center"> <span><font color="#29966c" id="demo">hello <br />world</font></span>
</div>

its the line height problem.
because the height is 100px and line-height is also 100 px thats the reason it shows out the button.
.round-button {
display:block;
width:100px;
height:100px;
line-height:50px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
you can also use the given below code to keep the words in center..
.round-button {
display:block;
width:100px;
height:75px;
padding-top:25px;
line-height:25px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}

Padding keeps pushing relative elements

I have a div with text-align:center and 3 spans with text in them. I also have mouse over event that sets padding,background color and border. But when doing it it pushes the other 2 spans. Here is a jsfiddle for better visualization.
http://jsfiddle.net/93EBu/
<div id="div">
<span class="span">Word</span>
<span class="span">Word</span>
<span class="span">Word</span>
</div>
#div {
text-align:center;
}
.span {
margin: 0px 5%;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
padding:5px;
}

You can remove padding: 5px from .spanhover as well as adding border: 1px solid transparent to your span elements:
#div {
text-align:center;
}
.span {
margin: 0px 5%;
border: 1px solid transparent;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
}
Fiddle Demo
Also, instead of using unnecessary jQuery here, you can make use of :hover selector:
span:hover {
border:1px solid blue;
background-color:lightblue;
}
Fiddle Demo

TRY THIS:
#div {
text-align:center;
}
.span {
margin: 0px 5%;
padding:6px;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
padding:5px;
}
DEMO HERE: http://jsfiddle.net/93EBu/1/
The reason you are having this problem is because the padding you are adding to the spanhover class is pushing the elements. So you need to have the span already have the padding as well.... but since you have added a 1px border. You need to make the span padding be 6px... Padding + Border.

After div disabled, change to disabled color or css of its contents?

I have button and Image in <div>. When I made <div> to disable. Its content is not graying out like disable. I can still same thing like enable.
How to change div content background to disable color (transparent)?
<div style="display:inline-block" id="divImgAddOrUpdate" >
<button id="imgAddOrUpdate" type="submit" class="btn" >
<img src="Images/save.png" alt="" />Add/Update
</button>
</div>
JS
<script type="text/javascript">
$('#divImgAddOrUpdate').prop('disabled', true);
$('#divImgAddOrUpdate *').prop('disabled', true);
</script>
css
.btn {
border:.1em #868686 solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 1em;
font-family:Segoe UI;
padding: 5px 10px 5px 5px;
text-decoration:none;
display:inline-block;
text-shadow: 0px 0px 0 rgba(0,0,0,0.3);
text-align:left;
color: #000000;
background-color: #f4f5f5;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
}
.btn:hover{
border:1px solid #bfc4c4;
background-color: #d9dddd; background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
}
.btn img {
vertical-align:middle;
}
JSFiddle

You can try using the :disabled pseudo-class and :not pseudo-class like this:
/* this is edited from your original style */
.btn:not(:disabled):hover{
border:1px solid #bfc4c4;
background-color: #d9dddd; background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
}
/* this is added */
.btn:disabled {
color:grey;
background-color:gray;
}
/* style for graying out the img */
.btn:disabled > img {
filter:gray;
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
filter:grayscale(100%);
}
Here is the working fiddle

CSS show box permanently

I have a code the function is drop-down. Dropdown can work smoothly.
Now I want when clicked the comment, box will show permanent and will close with outside click.
In this case, when I click the comment, box show and when I drag mouse to input comment, it closed.
So how can I keep the box ?
.dropdown {
position:relative;
}
.dropdown-menu {
position:absolute;
top:100%;
left:0;
z-index:1000;
display:none;
float:left;
min-width:300px;
list-style:none;
background-color:#fff;
border:1px solid rgba(0,0,0,0.2);
border-right-width:2px;
border-bottom-width:2px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
margin:1px 0 0;
padding:4px 0;
.navbar .dropdown-menu:after {
position:absolute;
top:-6px;
left:10px;
display:inline-block;
border-right:6px solid transparent;
border-bottom:6px solid #fff;
border-left:6px solid transparent;
content:'';
.open .dropdown-menu {
display:block;
}
<span class="navbar">
<span class="dropdown">
<a data-toggle="dropdown" class="comment" href="#">Comment</a>
<ul class="dropdown-menu">
<li><input type="text"></li>
</ul>
</span>
</span>

As per i understand may be that's you want http://jsfiddle.net/H3Vnw/1/ . Write like this
$('.comment').click(function(){
$('.dropdown-menu').css({'display': 'block'});
});
UPDATED
Write like this
var com = $('.comment');
var menu = $('.dropdown-menu');
com.click(function() {
menu.show(); return false;
});
$(document).click(function() {
menu.hide();
});
menu.click(function(e) {
e.stopPropagation();
});
Check this http://jsfiddle.net/H3Vnw/4/