Develop Reference

Black transparent overlay has some disturbance in UI - CSS

I've created a custom modal popup box. To show or hide the modal box, I've used JQuery code. Below is my CSS style code and JQuery code
CSS
.overlay {
position: fixed;
background: #000;
opacity: .8;
height: 100%;
width: 100%;
display:none;
z-index: 999
}
.modal {
position: absolute;
margin: 30px auto;
background: #fff;
display:none;
height: 200px;
width:600px;
top: 60px;
}
JQuery Code:
function showModal(){
$('.overlay').show();
$('.modal').fadeIn(100);
}
HTML Code:
<div class="overlay"></div>
<div class="modal">
<div class="modal_title">My Title</div>
<div class="modal_inner">
My Modal Content
</div>
</div>
Now, it's showing below output.
I want to remove this disturbance from UI. But need to know why it's appearing?
Is my code wrong? or Is there any other possibilities of this issue? How can I solve it?

This is definitely not something caused by your code, but by the browser. Confirm by trying to use other browsers too.
There unfortunately isn't much you can do. You can wait for them to fix it, or you can try a different approach which happens to not screw up with the rendering, but those are the only options as I see it.

I suppose that you want to achieve something like this:
$('.overlay').show(400, function() {
$(this).append($('.modal'));
$('.modal').fadeIn(1000)
});
.overlay {
position: fixed;
background: #000;
opacity: .8;
height: 100%;
width: 100%;
display: none;
z-index: 999;
}
.modal {
position: absolute;
margin: 30px auto;
background: #fff;
display: none;
height: 200px;
width:600px;
top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="modal">
<div class="modal_title">My Title</div>
<div class="modal_inner">
My Modal Content
</div>
</div>
You should use callbaks in order to make it work consecutively like overlay -> modal. That disturbance is related to fading in your modal - it is hapenning at the same time as the overlay appeares. They overlap and get animated so we see some weird visual effect related to page rendering while animating.

Unable to get particleground javascript as background for div/section

Hi I am trying to get the background of a specific div on my website to be the particleground jquery background - http://jonathannicol.com/blog/2014/08/18/particleground-jquery-plugin-background-particle-systems/ . I followed the steps from here and copied the script correctly, but instead of the background showing up behind the text in a div, it forms another div or section right above it. Troubleshooting steps included; adding a div before the section declaration and giving it the ID="particle", adding a div after the section declaration and giving it the ID="particle". Also making the z-index of each of these divs 1. Here is the HTML for the section :
<div id="particle">
<section class="container-fluid about">
<div class="container parallax-window " data-parallax="scroll" data-image-src="/images/parallax.jpg" >
<div class="row">
<div class="col-md-12">
<p>From concept to roll out, GM Motors...</p>
</div>
</div>
</div>
</section>
</div>
Here is the CSS:
section.about {
background-size: cover;
background-color: #00a1de;
padding-top: 80px;
padding-bottom: 80px; }
Help would be appreciated.
section.about p {
font-size: 26px;
line-height: 1.5em;
color: white;
margin: 0;
text-align: center;
font-weight: 300; }

Here I've created a JSFiddle for the particleground effect you're seeking.
By making a slight change in your CSS you can easily achieve that:
section.about {
position: absolute;
left: 0;
top: 50%;
padding: 0 20px;
width: 100%;
text-align: center;
}
Since reading your que I came to realize that you're using bootstrap so I've also added bootstrap library to check it is supported by particleground or not.
Please have a look. It will do the trick for you.

How do I keep images in place as the browser is resized?

Hello on my page i have 2 character images, that i have placed on both sides of a text and banner, heres a picture of it http://i.imgur.com/KwzphQP.jpg but heres the problem, when i rezise my browser the images follows with the browser, they do not stay in the same position, and i dont want this to happen because i have a fixed layout, heres the css code, i dont know how to post it good, but anyway
.support-text {
width: 600px;
margin-left: auto;
margin-right: auto;
line-height: -2px;
margin-bottom: 130px;
}
.support-text h1 {
font-size: 30px;
}
.support-text {
clear: left;
}
.support-text {
font-size: 23px;
}
.support-img {
margin-top: -80px;
margin-bottom: 80px;
z-index: 1;
}
.ct-pic {
position: absolute;
right: 10px;
bottom: 30px;
float: right;
}
.ct-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic {
position: absolute;
left: 40px;
bottom: 30px;
float: left;
}
heres the html
<section class="support-text">
<div class="ct-pic"> </div>
<div class="t-pic" width="867" height="569"></div>
<img src="img/support-us.png" class="support-img">
<p>Hello, if this site has helped you improve your gameplay, and learn useful stuff, feel free to support us, so we can keep this website up, so more people can learn. You can support through Steam or throught paypal. Keep in mind that you do not have to support, but if you do, we appreciate it alot. and we can continue to upload new content (Smokes, flashes, tactics) to the website. </p>
</section>

heres an example of how to position things next to each other without them moving away or changing positions when you resize the window (the divs can be img tags or whatever you want them to be). Just put them in a "container" with a fixed width, and then float them inside that container
<div id='container'>
<div id='image-1' class='image'></div>
<div id='image-2' class='image'></div>
<div id='image-3' class='image'></div>
</div>
#container {
width: 200px;
height: 100px;
background: black;
}
.image {
background: white;
width: 20px;
height: 20px;
float: left;
margin: 20px;
}
http://jsfiddle.net/7qytj718/1/
update
you have an issue with your css. You're setting child elements' positions to absolute, this makes them ignore their parent element and become positioned relative to the entire window. When this happens, the child elements start moving when the window is resized.

Dynamically inserted evenly spaced list items breaks justified approach

I've been spacing list items using the technique found in this answer, but a recent change is requiring me to insert the elements dynamically. I have found that for some reason the approach completely stops working if the elements are inserted dynamically. Why?
This fiddle demonstrates the static and dynamic versions.
As seen in the linked question, the basic idea is below. It's just when the HTML is inserted to the page via Javascript, the menu items don't justify.
HTML
<div id="menuwrapper">
<div class="menuitem">menu</div>
<div class="menuitem">menu</div>
...
<span class="stretcher"></span>
</div>
CSS
#menuwrapper, #dynamic {
height: auto;
background: #000;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
min-width: 300px; /* just for demo */
}
#dynamic {
background: blue;
}
.menuitem {
width: auto;
height: 40px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
background: #000;
color: yellow;
}
.stretcher {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}

There was no spaces between elements.
take a look jsfiddle
document.getElementById("dynamic").innerHTML = '<div class="menuitem">CAREERS</div> <div class="menuitem">TRADE</div> <div class="menuitem">CONTACT US</div> <div class="menuitem">PRIVACY POLICY</div> <div class="menuitem">T&CS</div> <div class="menuitem">SITEMAP</div> <span class="stretcher"></span>';
Some related articles:
- Fighting the Space Between Inline Block Elements

You can do what apple website does and make your menu items display: table-cell;
This is probably not completely cross browser compatible (e.g. IE6 will probably fail), but it does not require any javascript at all

Google Chrome breaks HTML layout when hiding elements

I have created a HTML layout for footer-docked sticking-out windows:
<style>
#footer-dock {
position: fixed;
bottom: 0px;
right: 0px;
height: 1x;
}
#wnd-cont {
float:right;
/* width is controlled from JS */
height: 1px;
}
#wnds-area {
float:right;
height: 1px;
}
.wnd-placer {
width: 270px;
height: 1px;
margin: 0 5px;
float: right;
}
/* floats out of placer */
.wnd {
overflow: hidden;
width: 270px;
position: absolute;
bottom: 0px;
}
.hdr {
border:1px solid green;
height: 32px;
background-color: green;
position: relative;
}
.title {
color: gray;
}
.bdy {
background: white;
border: 1px solid green;
height: 400px;
}
</style>
<div id="footer-dock">
<div id="wnd-cont">
<div id="wnds-area">
<div class="wnd-placer">
<div class="wnd">
<div class="hdr">
</div>
<div class="bdy">
Something else here Something else here Something else here Something here Something else here
</div>
</div>
</div>
<!-- other dynamically added windows go here -->
</div>
</div>
</div>
I need those placeholders and footer dock to be no more than 1px high, so I can click through the footer when there are no windows. The windows ( with all ofits contents) are added and removed dynamically using Javascript.
Everything works fine in Firefox and even in IE7, but Chrome has some weird problems.
At first, there were problems because I did not put 1px height to the footer and window placers - Chrome stacked windows onto each other. After putting 1px height, it started behave normally when adding windows, but when I remove any window using Javascript, the other windows do not reflow (they have .wnd-placer class with float: right) until I do one of the following:
zoom-in the page and then zoom back to 100% - suddenly everything jumps where it should be;
open developer panel and tweak some CSS of the .wnd-placer - just enable/disable of any property is enough, and again all my windows jump where they should be.
This is just Chrome specific, it seems, Chrome has some problems recalculating the layout of those .wnd-placer DIVs after I remove some of them.
Is there any way to force Chrome to redraw my windows (just like it does when I zoom-in/zoom-out or enable/disable any CSS property) so they reflow to the right, as they do in other browsers?

While there was no better answer, I did a following quick&dirty workaround for Chrome:
// force redraw for Chrome
$('#footer-dock').hide();
setTimeout(function(){
$('#footer-dock').show();
}, 10);
It works. Of course I would like to get rid of it, but I cannot find the "magical CSS" which would solve this issue.