We Keep Coding

How can adding a JavaScript background effect disable controls in my element?

First of all, here's a link to a page I'm working on, so you can see what I mean for yourself:
http://37.60.224.20/~mdg17761/mirzarasic.com/about-me/
And, here's a link to the effect in the background:
https://github.com/jnicol/particleground
If you go to the page, you'll notice you can't scroll the section in the middle. The website link also isn't clickable and you can't select any of the text.
I'm using Wordpress with the Divi theme to build the website, as well.
I've added the code which creates the background in a Code Module and, it looks like this:
<script>
document.addEventListener("DOMContentLoaded", function() {
particleground(document.getElementById("particleground"), {
dotColor: '#ffffff',
lineColor: '#blue',
particleRadius: 0
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);
</script>
<style>
#particleground {
position: relative;
}
#particleground canvas {
position: absolute;
z-index: 996;
opacity: 0.2;
}
</style>
Removing the Code Module makes the entire section work again. I've been looking through the source of the plugin, but, I simply don't have enough experience with JavaScript and can't figure out what might be doing this.

I assume you want the particle canvas in the background?
You'll need to change the z-index of your "particle ground", as it's rendering on top of your content area. I'd consider adjusting where you put the code for the particle ground (either higher in the DOM for a naturally lower z-index, or at the bottom closer to the </body> tag and setting the z-index to 0 giving it a structurally lower presence while still needing to lower the z-index.
#particleground {
position: relative;
z-index: 0;
}
(Note, with this you can remove the z-index from your #particleground canvas selector.
If you don't want the center section to be white (which the above code will do), you can set the background of it to transparent to let the canvas show through it:
.et_pb_section_1 {
background: transparent;
}
If you really want the particles "on top" for some reason, while I strongly recommend against it, you can add pointer-events: none; to #particleground - read more here

Changing div styles at scroll position without JQuery

I am relatively new to web design and am not yet ready to dive into JQuery but I am beginning to use Javascript as needed. I am unable to figure out how to change the background color of a div menubar at a certain scroll position.
CSS
.mainMenu {
position: fixed;
top: 0px;
left: 0px;
height: 80px;
padding: 20px;
transition: all 0.2s;
}
Javascript
var scrollHeight = window.pageYOffset;
if (scrollHeight >= 100) {
document.getElementById("mainMenu").style.backgroundColor = "green";
}
From what I can tell as a noob, the if statement only runs on load and the var scrollHeight isn't updating as the user scrolls. I appreciate any help making this work! I will get around to learning JQuery but I would like to understand the language better before dabbling in libraries.

Right – you need to setup something that continues to check the scroll position and update accordingly:
function checkPosition() {
// Continue calling this function:
requestAnimationFrame(checkPosition);
// Check your position here
}
// Initial Call:
checkPosition();
Better yet, read up on Scroll Events.
Edit:
Also, instead of manipulating styles directly, I'd recommend adding or removing classes:
element.classList.add("newClass");
(By the way, jQuery is actually easier than 'regular' javascript.)

Prevent any user activity on website for specific period of time: javascript

I have made a website, something like a control panel that controls different devices connected to microcontroller (the website itself is hosted on microcontroller).
I encounter this problem: If user change state of some check box (you can think of them like on/off buttons) and immediately after that sends some other command, my system crashes. To avoid this I need to introduce delay that would disable user for clicking any other button on website for specific amount of time (in my case 5 seconds). I am using JavaScript to communicate http requests to/and from my microcontroller so I am looking for JavaScript based solution.
Hope I made myself clear and thank you for your help.

Since the post states the website itself is hosted on a micro-controller, jQuery may be inappropriate (storage constraints) for the answer. The general theme however is still the same. When a user changes an appropriate control show a modal div with a 'please wait' or some other message.
You don't mention the browser you want to target so I'm assuming a chrome or firefox version.
CSS:
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.3);
z-index: 1001;
display: none;
}
.modal.active {
display: block;
}
HTML (Place this div somewhere in the root of body, and only once):
<div id="modal" class="modal">
<h3>Please wait...</h3>
</div>
JavaScript:
// get your elements
var element = document.getElementById("myField");
var modal = document.getElementById("modal");
// opens the modal
function openModal() {
modal.classList.add("active");
}
// closes the modal
function closeModal() {
modal.classList.remove("active");
}
// opens the modal, then closes it after a timeout period
function openTemporaryModal(var timeout) {
openModal();
setTimeout(function() {
closeModal();
}, timeout);
}
// used as an event callback
function modalForFiveSeconds() {
openTemporaryModal(5000);
}
// Attach the event callback to the element/event you want to open the modal:
element.addEventListener('change', modalForFiveSeconds);
References:
MDN: document.getElementById
MDN: element.classList
MDN: window.setTimeout
MDN: element.addEventListener

You can use below step.
Create one HTML Div
Make that div as Visible false or display:none
Set height and width for Div. make it screen.Width and screen.Height
when user click on Checkbox - set that div visible=true or display:block for 5 Seconds.
After 5 Seconds make it invisible.

First of all you will need to attached an EVENT to all of the checkboxes you have.
Something like this:
$.("input[type='checkbox']").change(disableScreen);
Create a div that would disable the screen
<div id="disablingDiv" ></div>
Then we have to create a new function called disableScreen.
function disableScreen() {
var $disablingDiv= $("#disablingDiv");
$body.addClass("disablingDiv");
window.setTimeout(function () {
$body.removeClass("disablingDiv");
}, 5000);
}
.disablingDiv
{
/* Do not display it on entry */
display: none;
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
/* make it white but fully transparent */
background-color: white;
opacity:.00;
filter: alpha(opacity=00);
}
Hiding div solution was taken from "Disable all page elements with transparent div"

JS launches before CSS

This is currently happening in chrome, in firefox I haven't had this issue (yet).
Here is a VERY simplified version of my problem.
HTML:
<div class="thumbnail">
Click me!
</div>
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
}
a {
position: absolute;
}
#media (max-width: 991px) {
div {
height: 200px;
}
}
Javascript:
$(document).ready(function () {
var $parent = $('#clickMe').parent();
function resize() {
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
$(window).on('resize', resize);
resize();
});
The problem:
So what does this give when I resize (without dragging)? Well javascript launches first and sets the position of the <a></a> , then CSS applies the height change if we are < 992 px.
Logically the button is now visually at the outside of the div and not on the border like I had originally defined it to be.
Temporary solution proposed in this post.
jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?
var doit;
$(window).on('resize', function(){ clearTimeout(doit); doit = setTimeout(resize, 500); });
Temporary solution is not what I'm looking for:
However, in my situation I don't really need to only call 'resize' when the resizing event is actually done. I just want my javascript to run after the css is finished loading/ or finished with it's changes. And it just feels super slow using that function to 'randomely' run the JS when the css might be finished.
The question:
Is there a solution to this? Anyone know of a technique in js to wait till css is completely done applying the modifications during a resize?
Additional Information:
Testing this in jsfiddle will most likely not give you the same outcome as I. My css file has many lines, and I'am using Twitter Bootstrap. These two take up a lot of ressources, slowing down the css application (I think, tell me if I'm wrong).
Miljan Puzović - proposed a solution by loading css files via js, and then apply js changes when the js event on css ends.

I think that these simple three steps will achieve the intended behavior (please read it carefully: I also suggest to read more about the mentioned attributes to deeply understand how it works):
Responsive and fluid layout issues should always be primarily (if not scrictly) resolved with CSS.
So, remove all of your JavaScript code.
You have positioned the inner a#clickMe element absolutely.
This means that it will be positioned within its closest relatively positioned element. By the style provided, it will be positioned within the body element, since there is no position: relative; in any other element (the default position value is static). By the script provided, it seems that it should be positioned within its direct parent container. To do so, add position: relative; to the div.thumbnail element.
By the script you provided, it seems that you need to place the a#clickMe at the bottom of div.thumbnail.
Now that we are sure that the styles added to a#clickMe is relative to div.thumbnail, just add bottom: 0px; to the a#clickMe element and it will be positioned accordingly, independently of the height that its parent has. Note that this will automatically rearrange when the window is resized (with no script needed).
The final code will be like this (see fiddle here):
JS:
/* No script needed. */
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
position: relative; //added
}
a {
position: absolute;
bottom: 0px; //added
}
#media (max-width: 991px) {
div {
height: 200px;
}
}
If you still insist on media query change detection, see these links:
http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/
http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/
http://tylergaw.com/articles/reacting-to-media-queries-in-javascript
http://davidwalsh.name/device-state-detection-css-media-queries-javascript
Twitter Bootstrap - how to detect when media queries starts
Bootstrap: Responsitive design - execute JS when window is resized from 980px to 979px

I like your temporary solution (I did that for a similar problem before, I don't think half a second is too long for a user to wait but perhaps it is for your needs...).
Here's an alternative that you most likely have thought of but I don't see it mentioned so here it is. Why not do it all through javascript and remove your #media (max-width.... from your css?
function resize() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width<992){
$("div").each(function(e,obj){$(obj).height(200);});
}
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}

In the html page, put the link to css file in head section; next, put the link to js file just before the /body tag and see what happens. In this way css will load always before js.
Hope this help you.

Did you try to bind the resize handler not to the window but to the object you want to listen to the resize ?
Instead of
$(window).on('resize', resize);
You can try
$("#clickMe").on('resize', resize);
Or maybe
$("#clickMe").parent().on('resize', resize);

var didResize = false;
$(window).resize(function() {
didResize = true;
});
setInterval(function() {
if (didResize) {
didResize = false;
console.log('resize');
}
}, 250);

I agree with falsarella on that you should try to use only CSS to do what you are trying to do.
Anyway, if you want to do something with JS after the CSS is applied, I think you can use requestAnimationFrame, but I couldn't test it myself because I wasn't able to reproduce the behavior you explain.
From the MDN doc:
The window.requestAnimationFrame() method tells the browser that you
wish to perform an animation and requests that the browser call a
specified function to update an animation before the next repaint. The
method takes as an argument a callback to be invoked before the
repaint.
I would try something like this:
var $parent = $('#clickMe').parent();
function resize(){
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
window.onresize = function(e){
window.requestAnimationFrame(resize);
}
window.requestAnimationFrame(resize);

Anyone know of a technique to wait till css is completely done loading?
what about $(window).load(function() { /* ... */ } ?
(it executes the function only when the page is fully loaded, so after css loaded)

Making a DOS-style window in ASP.net

I'm trying emulate the MS-DOS command prompt on my website. I don't need to accept keystrokes, but I'd like to append data at the bottom and optionally scroll upwards.
At first I looked at the asp:TextBox and asp:Label, but the flicker of using postbacks seemed to be too much. I'm now considering DIV tags and Javascript where I simply update the InnerHTML property, but there too I get flicker, and have issues with scrolling.
What solution would you recommend in this situation? Essentially I'm trying to count to infinity, with a 1 sec delay, only need the most current 300 or so entries, with the most current entry at the bottom of the screen.
Is this even possible with JS/CSS?

Do you wish to make it a little more stylous ? :)
see this page...
http://www.klaus.dk/Some_unknown_page
or this one
http://www.harryovers.com/404.html?aspxerrorpath=/Account/LoginPartial
here is the javascript source code.
http://code.google.com/p/c64-404-page/
With a little change, you can append your text on this code :)

I just built something very similar using jQuery. You can use the append method to add content to the bottom of your DIV. You can then set the scrollTop attribute to keep things scrolled to the bottom as follows:
$("#someDiv").attr({ scrollTop: $("#someDiv").attr("scrollHeight") });

I think "DOS-style window" is a bit misleading considering all you want to do is append text to a div and make sure it stays scrolled to the bottom.
function addLine(text) {
var box = document.getElementById('DOSBox') //teehee
var line = document.createElement('p');
line.innerHTML = text;
box.appendChild(line);
box.scrollTop = box.scrollHeight;
}
And style it as such
#DOSBox {
overflow: auto;
display: block;
height: 400px; width: 500px; /* or whatever */
/* and if you want it to look DOS-like */
background: #000;
color: rgb(192, 192, 192);
font-family: fixedsys;
}
#DOSBox p {
margin: 0;
}