Develop Reference

How to center label between picture and edge

I am currently in the process of developing my website, where it'll be done entirely with CSS and JS, within a single page, entirely responsive. I am currently stuck on an issue I am not sure there is a way around.
I have a div, that contains 1) a picture and 2) a label. They are currently side by side.
When the mouse hovers over the div, the div extends to the right, but the picture stays the same size and location (left side of the div).
This makes the label appear (visibility set to true with JS) on the right side of the div.
My problem is I cannot figure out a way to center the label between the edge of the picture and the edge of the div it is contained within.
Here is some code:
index. html
<div class="menus1 " id = "menus1" style=" background-e: url('../images/background1.jpg');">
<img class = "images" src = "../images/handshake.jpg" id="pen"/>
<label style=" margin-left:5%; color:black; " class="visibleLabel" id="aboutMeLabel"><b>About Me</b> </label>
</div>
Where you see the "margin-left: 5%" is the closest thing I could get it to centering, it just isn't responsive.
Thank you :)

First of all, take the <style> tags* out of your html - its bad practice. Put all your style into your stylesheet. You can always add another class if needsbe.
by this i mean this kind of thing
style=" margin-left:5%; color:black; "
As for the centering, if you are looking to center the text within the label, just set your label css to text-align:center; - that would save a bit of bother.
Should you want to overlay the text on the image, then set the div background to the actual image? I see you have some kind of background there. You can always put a div within a div if thats your main background. And then include the label with the text-align-centered css within it.
Without a fiddle, or more code, it's difficult to know exactly what you're aiming for, but i hope this helps.
Rachel

Create another css file for the style tag or Add the style into head for example
<style>
text-align:center;
margin-left:5%
color:black;
</style>
JSFiddle

FadeIn doesn't work with empty DIV

I have button that shows a password by using fadein and fadeout. However, when the password is an empty string, the div doesn't fade-in.
Html
<div>
<div>********</div>
<div class="password"></div>
<input type="button" class="showPasswordButton" value="Show Password">
</div>
Jquery
$(".showPasswordButton", false).on("click", function () {
var passwordDiv = $(".password");
passwordDiv.text("");
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
passwordDiv.empty();
});
});
Here is a JSfiddle link to play around with.
If I replace the empty string in passwordDiv.text("") with any value except whitespace, the fade-in will work. I've gotten around the issue by using a Japanese full-width whitespace character. However, I'd like to get this working without an obvious hack. Is there something wrong I'm doing here or a way to get it so passwordDiv will fade-in when the div text is an empty string?

It's working
the matter of fact is that you can't see it. Since by <div> contain nothing, hence it does not take space in the HTML.
You can see your web console and you will find that opacity of the div get changed
JUST try adding the below height and width and you can see the change
.password {
height: 500px;
width: 500px;
background-color: #ff0000; // background of the div, so that you can see the change
}
Other way is not to empty the <div> , just have a blank correct inserted in to the div , so that the <div> take some
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
passwordDiv.html(' '); // inserting a blank correct , so that actually the div take some space
});

your div is empty , so you can set border or something to see effect .
.password{
width:50px;
height:50px;
border:solid 2px red;
}
DEMO

Here is the jsfiddle i have create for you http://jsfiddle.net/Tushar490/LkxLzhmt/9/
you need to add dimensions(width,height) for the div having "password" class .As you want to see that fading effect for the empty string too , you need set the dimensions as well. What happen is when you give text to that div , the div takes width:auto and height:auto .But when you don't give any text to that div then width:auto and height:auto will show you nothing and that's purely logical .
just a CSS you want , and nothing else :-
.password{
display:none;
width:100px;
height:15px;
}
Hope my answer help you !!

You can also do this for showing empty string fade in-fade out effect :-
$(".showPasswordButton", false).on("click", function () {
var passwordDiv = $(".password");
passwordDiv.html("<br>");
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
passwordDiv.empty();
});
});

stuck while dealing with child elements on a simple html page

I am pretty new at HTML, CSS and JS.
I had an idea of making a simple page titled, "an act of random kindness" where a user would simply go, type something in the box and press submit that will simply post down whatever he's just written.
To get that, I made a simple HTML page with a simple form having a "text box" and "submit button". next, I assigned two variables to the "text box" and "submit button" then with "onclick.button" property I wrote a "button handler event".
This buttonHandler is further connected to a function which simply takes the text written in box and make it appear down the page as a child element.
Now the problem is, I have no idea how to control the presence of these new child elements. I want to be able to change their color, font, and where on page are they appearing. and if possible, I want them to appear in separate boxes.
[coding][2]

I've changed your jsFiddle a bit to demo the following http://jsfiddle.net/Klors/E6Nns/5/
Once you have your
var li =document.createElement("li");
li.innerHTML = msg;
you can start to manipulate styles by either giving them a class, some styles, or both. eg.
li.style.backgroundColor = "#ffffff";
li.style.color = "#000000";
li.style.border = "1px solid pink";
or
li.className = "heading";
As for positioning them all, you need to style your <div class="list">, you can do that in the CSS by applying some positioning. (also physically move it outside of <div class="wrapper">). eg.
div.list {
position: absolute;
top: 10px;
left: 20px;
width: 100px;
}

display:none not changing behavior of css

Here is a simple example of some markup I have:
HTML:
<input type="checkbox" name="ex1">
<input type="checkbox" name="ex2">
<ul class="reveal">
<li>Hi</li>
<li>Bye</li>
</ul>
The checkboxes are used as filters to remove <li>s with certain tags. This all works fine. My issue is that when the checkbox is checked and the filter logic runs, it uses a display:none to remove the specific <li>s but the css I use to format doesn't get applied correctly after the fact. For example, let's say clicking the first checkbox removes the first <li> and the 'bye' <li> is the only one left. That will work fine, but the border I have defined in the css persists even though the selector shouldn't match it anymore. This is the selector I used:
CSS:
#columns .calendar td ul.reveal li + li {
border-top: 1px dotted #999;
}
This style is applied correctly at first, but after the display:none is applied and the 'bye' li is the only li left it will still have the dotted border.
I've used the browser developer console to check and this is indeed the only style rule that is being applied to create the border.
I've read something along the lines of display:none not repainting the DOM, and to access a variable that forces the browser to repaint (something like $('whatever')[0].offsetHeight) but this does not seem to fix my problem.

jQuery Based Solution
CSS rules by themselves will not work since the DOM is being manipulated by JavaScript.
What you could do is use JavaScript to identify the first li element left in the list.
For example:
$('ul.reveal li').filter(':first').addClass('first-child');
where the CSS rules are:
ul.reveal li {
border-top: 1px dotted #999;
}
ul.reveal .first-child {
border-top: none;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/BXMaB/
The jQuery action picks out the first li element in each ul list and then applies a CSS rule to know out the top border that appears on all li elements by default.
You would need to apply this jQuery action when ever a check box (event) is checked, in addition to binding it to the document load event.

The CSS selector you have chosen is interested in the structure of the DOM rather than what is and isn't painted. Selector S + S will still apply to S2 even when S1 is being removed, which is why it's still getting a top border.
Given that you are able to manipulate the DOM I would suggest either removing and re-adding the element itself or writing a selector that will respect a class added to S1 (which also applies display:none to it).
For instance:
selector:not(.hidden) + selector { [Only works in IE9+] }
or
selector.active + selector.active { [Works in IE7+] }

how to do css div pop up scrollable using only javascript?

I want to display some text in a inline popup window with ok/close button.
I implemented and bit modified Custom Alert but sometimes the text has too many lines so I need the window scrollable.
I want to use only javascript. No framework nor libraries.

you should be able to accomplish that with css
With the default style it would be like this:
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
overflow:auto;
}
Example on jsfiddle.
Also as Casablanca points out, if you want to assign a specific class you can modify the javascript to use
msg.className = 'messageBox';
and then your own css
.messageBox{
overflow:auto;
}