We Keep Coding

How to put label inside input and make alwas visible

I need to do input like this, and word "seconds" should always stay visible and
unchangeable. How can I do that?

No JavaScripting needed here,
.round {
border:1px solid grey;
border-radius: 4px;
padding: 8px;
}
.round input {
border:0px solid black;
width: 40px;
margin-right: 8px;
}
.round label {
color: grey;
}
.container {
width: 200px;
}
<div class="container">
<div class="round">
<label><input type="text">seconds</input></label>
</div>
</div>
HTMLDog's CSS tutorial is a great one to follow.

#test{
width:100px;
border:1px solid #E0E0E0;
display:inline-block;
border-radius: 5px;
border-top:1px solid #BBDEFB;
}
input{
width:25px;
float:left;
border:none;
}
label{
color:#BDBDBD
}
input:focus{
outline: none;
}
<div id="test">
<div>
<input type="text">
</div>
<div>
<label>Seconds</label>
</div>
</div>

jQuery mouseup and Undesired Behavior

I have a "login" div styled as a button, which, when clicked, will unhide a login form area.
If you click the button again, it will hide the login form area.
However, it is behaving undesirably in one scenario. When the form is showing (unhidden, after clicking on the login button), and the mouse pointer is within the login form area, and you push a mouse button down (and hold it), then drag mouse out of the login form area and depress the mouse button the form closes.
My question is - how can I prevent that undesired behavior, while retaining the other behavior?
The HTML:
<div id="loginContainer">
<span id="loginButton"><span>log in</span></span>
<div id="register">sign up or: </div>
<div id="loginBox">
<form id="loginForm" method="post">
<fieldset id="body">
<input type="hidden" name="sAction" value="login" />
<fieldset>
<label for="sUserId">username or email</label>
<input type="text" name="sUserId" id="sUserId" maxlength="255" />
</fieldset>
<fieldset>
<label for="sUserPassword">password</label>
<input type="password" name="sUserPassword" id="sUserPassword" maxlength="25" />
</fieldset>
<input type="submit" id="login" value="log in" />
</fieldset>
</form>
</div>
</div>
The jQuery:
$(function () {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function (login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function () {
return false;
});
$(this).mouseup(function (login) {
if (!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
The CSS:
#register {padding:5px 10px 5px 0;float: right;}
/* Login Container */
#loginContainer {float:right;margin-top: 10px;}
/* Login, Logout Button */
#loginButton, #logout {display:inline-block;float:right;background:#99cc66;border-radius:3px;-moz-border-radius:3px;position:relative;z-index:30;cursor:pointer;}
#logout{color:#fff;height:32px;padding:5px 35px 5px 10px;background:#99cc66 url(../images/login-icon.png) no-repeat 62px 8px;display:block;border: 0;}
/* Login Button Text */
#loginButton span {color:#fff;padding:5px 35px 5px 10px;background:url(../images/login-icon.png) no-repeat 58px 8px;display:block}
/* Login Box */
#loginBox {position:absolute;top:38px;right:0;display:none;z-index:29;}
/* If the Login Button has been clicked */
#loginButton.active {border-radius:3px 3px 0 0;}
/* Login Form */
#loginForm {width:248px; border-radius:3px 0 3px 3px;-moz-border-radius:3px 0 3px 3px;margin-top:3px;background:#99cc66;padding:6px;}
#loginForm fieldset {margin:0 0 12px 0;display:block;border:0;padding:0;}
fieldset#body {background:#fff;border-radius:3px;-moz-border-radius:3px;padding:10px 13px;margin:0;}
#loginForm #rememberMe {width:auto;margin:1px 9px 0 0;float:left;padding:0;border:0;*margin:-3px 9px 0 0; /* IE7 Fix */}
#body label {color:#3a454d;margin:9px 0 0 0;display:block;float:left;}
#loginForm #body fieldset label {display:block;float:none;margin:0 0 6px 0;}
/* Default Input */
#loginForm input {width:92%;border:1px solid #899caa;border-radius:3px;-moz-border-radius:3px;color:#3a454d;padding:8px 8px;box-shadow:inset 0px 1px 3px #bbb;-webkit-box-shadow:inset 0px 1px 3px #bbb;-moz-box-shadow:inset 0px 1px 3px #bbb;font-size:12px;}
/* Sign In Button */
#loginForm #login {width:auto;float:right;background-color:#339cdf;color:#fff;padding:7px 10px 8px 10px;text-shadow:0px -1px #278db8;border:1px solid #339cdf;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;margin:0 16px 0 0;cursor:pointer;*padding:7px 2px 8px 2px; /* IE7 Fix */}
/* Forgot your password */
#loginForm span {text-align:center;display:block;padding:7px 0 4px 0;}
#loginForm span a {color:#fff;}
input:focus {outline:none;}

If you use click instead of mouseup (which takes into account where the mousedown occurred) it works as expected.
$(function () {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.click(function (login) {
box.toggle();
button.toggleClass('active');
});
form.click(function (e) {
if (e.target.id !== 'login'){
e.stopPropagation();
}
});
$(this).click(function (login) {
if (!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
#register {
padding:5px 10px 5px 0;
float: right;
}
/* Login Container */
#loginContainer {
float:right;
margin-top: 10px;
}
/* Login, Logout Button */
#loginButton, #logout {
display:inline-block;
float:right;
background:#99cc66;
border-radius:3px;
-moz-border-radius:3px;
position:relative;
z-index:30;
cursor:pointer;
}
#logout {
color:#fff;
height:32px;
padding:5px 35px 5px 10px;
background:#99cc66 url(../images/login-icon.png) no-repeat 62px 8px;
display:block;
border: 0;
}
/* Login Button Text */
#loginButton span {
color:#fff;
padding:5px 35px 5px 10px;
background:url(../images/login-icon.png) no-repeat 58px 8px;
display:block
}
/* Login Box */
#loginBox {
position:absolute;
top:38px;
right:0;
display:none;
z-index:29;
}
/* If the Login Button has been clicked */
#loginButton.active {
border-radius:3px 3px 0 0;
}
/* Login Form */
#loginForm {
width:248px;
border-radius:3px 0 3px 3px;
-moz-border-radius:3px 0 3px 3px;
margin-top:3px;
background:#99cc66;
padding:6px;
}
#loginForm fieldset {
margin:0 0 12px 0;
display:block;
border:0;
padding:0;
}
fieldset#body {
background:#fff;
border-radius:3px;
-moz-border-radius:3px;
padding:10px 13px;
margin:0;
}
#loginForm #rememberMe {
width:auto;
margin:1px 9px 0 0;
float:left;
padding:0;
border:0;
*margin:-3px 9px 0 0;
/* IE7 Fix */
}
#body label {
color:#3a454d;
margin:9px 0 0 0;
display:block;
float:left;
}
#loginForm #body fieldset label {
display:block;
float:none;
margin:0 0 6px 0;
}
/* Default Input */
#loginForm input {
width:92%;
border:1px solid #899caa;
border-radius:3px;
-moz-border-radius:3px;
color:#3a454d;
padding:8px 8px;
box-shadow:inset 0px 1px 3px #bbb;
-webkit-box-shadow:inset 0px 1px 3px #bbb;
-moz-box-shadow:inset 0px 1px 3px #bbb;
font-size:12px;
}
/* Sign In Button */
#loginForm #login {
width:auto;
float:right;
background-color:#339cdf;
color:#fff;
padding:7px 10px 8px 10px;
text-shadow:0px -1px #278db8;
border:1px solid #339cdf;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
margin:0 16px 0 0;
cursor:pointer;
*padding:7px 2px 8px 2px;
/* IE7 Fix */
}
/* Forgot your password */
#loginForm span {
text-align:center;
display:block;
padding:7px 0 4px 0;
}
#loginForm span a {
color:#fff;
}
input:focus {
outline:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loginContainer">
<span id="loginButton"><span>log in</span></span>
<div id="register">sign up or:</div>
<div id="loginBox">
<form action="test" id="loginForm" method="post">
<fieldset id="body">
<input type="hidden" name="sAction" value="login" />
<fieldset>
<label for="sUserId">username or email</label>
<input type="text" name="sUserId" id="sUserId" maxlength="255" />
</fieldset>
<fieldset>
<label for="sUserPassword">password</label>
<input type="password" name="sUserPassword" id="sUserPassword" maxlength="25" />
</fieldset>
<input type="submit" id="login" value="log in" />
</fieldset>
</form>
</div>
</div>
Update after comment
returning false on the click event of the form caused it to not get submitted.
So we need to change it to
form.click(function (e) {
if (e.target.id !== 'login'){
e.stopPropagation();
}
});

.slideToggle() Runs With a Lagging/Jerky Animation

So I have read a lot of the other posts and none of them seem to be of any help.
Whenever I toggle up the animation jumps and shows some lag.
Here is my CSS:
<style>
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}
.pull-me {
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
.panel {
background: #white;
background-size:90% 90%;
height:300px;
display:none;
font-family:garamond, times-new-roman, serif;
}
.panel p {
text-align:center;
}
.slide {
margin:0;
padding:0;
border-top:solid 2px #a10808;
}
.pull-me {
display:block;
position:relative;
border: 1px;
right:-25px;
width:150px;
height:20px;
font-family:arial, sans-serif;
font-size:14px;
color:#ffffff;
background:#a10808;
text-decoration:none;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.pull-me p {
text-align:center;
}
</style>
Below is my HTML:
<div class="panel" style="width: 100%; overflow: hidden;">
<div style="width: 100px; float: left;"></div>
</div>
<p class="slide">
<div class="pull-me">Directory</div>
</p>
Below is my jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.pull-me').click(function () {
$('.panel').slideToggle('slow');
});
});
</script>
I am using IE9 and I have not been able to use any other browser.
Any help would be greatly appreciated.

I supouse you have missed a line in your css it should start like this:
<style>
div {
margin:0 auto;
...
or just delete these lines
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}

CSS/Jquery selectbox - selected option cannot align left?

I have been going crazy trying to get the selected option to align left like all the dropdown options.
I have inserted 'text-align:left;' in every css option but to no avail.
I have decided the javascript code must be doing something to the alignment of the selected option but am not proficient enough in javascript to locate what might be causing this.
Code is located at http://jsfiddle.net/X97cN/
CSS:
.ww-selectbox-div { margin-bottom:20px;margin-top:20px;}
.ww-selectbox a{ text-decoration:none; font-family:Arial; font-size:13px; font-weight:bold;}
.ww-selectbox .ww-select-area a span.center{ background-color:#fff; padding:5px 40px 5px 30px; border:1px solid #aaa; border-radius:5px; box-shadow:0 2px 3px #333; color:#444}
.ww-selectbox .ww-select-area a:hover span.center, .ww-selectbox .ww-select-areaactive a span.center{background-color:#eee; background-image:-moz-linear-gradient(center top,#FFF,#eee 5px,#eee 5px,#eee); background-image:-webkit-gradient(linear,left top,left bottom,from(#FFF),color-stop(0.2,#eee),color-stop(0.5,#eee),to(#eee)); color:#777; box-shadow:0 2px 3px #555}
.ww-selectbox .ww-select-areaactive a span.center{ border-radius:5px 5px 0 0}
.ww-selectbox .ww-select-area a span.arrow{ border-left:1px solid #AAA; height:8px; margin:5px 0 0 -23px; padding:2px 0 2px 5px; position:absolute; width:8px; background:url("../images/navigation/arrow_bottom.png") no-repeat scroll 5px 2px transparent; z-index:99}
.ww-selectbox .ww-select-areaactive a span.arrow{background:url("../images/navigation/arrow_top.png") no-repeat scroll 5px 2px transparent}
.ww-selectbox .ww-select-options{ background-color:#FFFBD9; position:absolute; border:1px solid #aaa; border-top:none; margin-top:4px; border-radius:0 0 5px 5px; box-shadow:0 2px 3px #555; z-index:100}
.ww-selectbox .ww-select-options ul{margin:0; padding:0}
.ww-selectbox .ww-select-options ul li { list-style:none; }
.ww-selectbox .ww-select-options ul li.option a{ color:#777; text-align:left; display:block; padding:5px 15px; border-bottom:dashed 1px #aaa}
.ww-selectbox .ww-select-options ul li.option a:hover{ background-color:#FFF8BA}
.ww-selectbox .ww-select-options ul li.option a.last{border:none; border-radius:0 0 5px 5px}
Javascript: (sorry for formatting better seen at http://jsfiddle.net/X97cN/)
(function(a){var m=function(b,h){var d=a(document.createElement("div")).addClass("ww-selectbox").insertBefore(b);d.append('<div class="ww-select-area"><span class="center">'+b.find(":selected").text()+'</span><span class="arrow arrowdown"></span></div>');var f=a('<div class="ww-select-options" style="display:none;"></div>').appendTo(d),c=a("<ul />").appendTo(f),e="",i="",g=b.find("option");g.each(function(b,j){j=a(j);e=j.val()?j.val():j.text();i=b+1==g.length?'class="last"':
"";c.append('<li class="option">"+j.text()+"</li>")});h.height>0&&c.height(h.height).css({"overflow-x":"hidden","overflow-y":"auto"});b.hide();return d},n=function(b,h,d){var f=a(b).find(".ww-select-area"),c=f.find("a"),e=c.find(".center"),i=a(b).find(".ww-select-options"),g=i.find("a"),l=function(a){c.width("").width(c.width());if(a.width>0&&c.width()>a.width){c.width("");var b=e.html().split("");e.html("");for(var d=0;c.width()+8<a.width&&d<
b.length;)e.html(e.html()+b[d]),c.width("").width(c.width()),d++;e.html(e.html()+"...");c.width(a.width)}a=g.first().outerWidth()-g.first().width()+(i.outerWidth()-i.width());g.width(c.outerWidth()-a)};c.click(function(){f.hasClass("ww-select-areaactive")?k(f,i):i.slideDown("fast",function(){g.removeClass("last");g.filter(":visible").last().addClass("last");f.addClass("ww-select-areaactive")})});g.click(function(){e.html(a(this).html());g.show().removeClass("last");a(this).hide();k(f,i);h.find("option[value='"+
a(this).attr("value")+"']").attr("selected","selected");h.change();l(d)});a(b).mouseenter(function(){a(this).addClass("ww-select-active")}).mouseleave(function(){a(this).removeClass("ww-select-active")});g.filter(function(){return a(this).html()==h.find(":selected").text()}).hide();l(d)},k=function(a,h){h.slideUp("fast",function(){a.removeClass("ww-select-areaactive")})};a.fn.wwselect=function(b){a(this).each(function(h,d){var f={width:0,height:0},c=a(d);b&&a.extend(f,b);var e=m(c,f);n(e,c,f)});a("body").click(function(){a(".ww-selectbox").each(function(b,
d){a(d).hasClass("ww-select-active")||k(a(d).find(".ww-select-area"),a(d).find(".ww-select-options"))})})}})(jQuery);

What about this ?
.ww-selectbox .ww-select-area a span.center {
padding:5px 40px 5px 12px;
/* ... */
}
Fiddle here: http://jsfiddle.net/X97cN/1/

wrapping text in css div

Hi guys for some reason my text is not wrapping in Div, I have three divs placed inline-block and floating left. If i don't use floating left the the divs gets pushed down.
CSS code
#OuterSection
{
border-top: 10px solid #0272b0;
border-left: 5px solid #0272b0;
border-bottom: 5px solid #0272b0;
border-right: 5px solid #0272b0;
border-radius: 10px;
background-color: #0272b0;
width:250px;
height: auto;
display:inline-block;
}
#InnerSection
{
width:auto;
height:auto;
text-align:center;
background-color: #FFF;
border-radius: 5px;
text-align:left;
word-wrap: break-word;
float:left;
}
#SectionTitle
{
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;
}
HTML code here
<div id="OuterSection">
<span id="SectionTitle">section1</span>
<div id="InnerSection">
testtesttesttesttesttesttesttesttesttesttesttest
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section2</span>
<div id="InnerSection">
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section3</span>
<div id="InnerSection"></div></div>

#Section{display:inline-block;}

Fix can be found here: DEMO
Used word-wrap:break-word; on your innerSection with width:100%;