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

container should automatically adjust to the height of the background image for responsive design css only

I working on a responsive design.
If i load the image with the image tag i have no problem with the size, but then it will load on screen too even if i set display:none. This cause loading problems on smartphone devices...
This way i trying to scale it with background-size:contain, but the problem is i have to add an height for the container.
That means if i have a device with different width the image doesn´t fit more.The same problem with background-size:cover. The image flow over if i change width.
Would do it just with css, because there are many pictures and this cause loading problems with javascript.
#header {
width: 100%;
background-image:url(../images/backgrounds/Header_phone2.jpg);
background-size:contain;
background-repeat:no-repeat;
min-height: 200px;
}
Edit
My solution with JS in the answer, improvement tipps are welcome

I made now something, what is working nice for me.
I´m not really good with jquery, this way i´m looking forward for improvement tipps.
Html:
container in container ...
Css stay almost same:
#header {
height:auto;
}
#header-image{
width: 100%;
min-height: 155px;
background-image:url(../bilder/backgrounds/Header_phone2.jpg);
background-size:cover;
background-repeat:no-repeat;
}
Jquery:
if ($( window ).width() <= 966) {
var screenwidth = $(window).width();
var heightimage = (screenwidth /940) * 198;
$("#header-image").css("height", heightimage);
}
$(window).resize(function() {
if ($( window ).width() <= 966) {
var screenwidth = $(window).width();
var heightimage = (screenwidth /940) * 198;
$("#header-image").css("height", heightimage);
}
});
This is working fantastic !! Same like you add the image with img tag and the image doesn´t load with screen design. (look there)
If javascript disabled set min-heigth, like this the image is displayed too.
With jquery i calculate the height of the image. For this i take the width from the display, divide it trough image width and multiply it with height from image. => the correct height for the container.
With the windows-resize function you can change the size of the window and it still works.
This is very simple and works nice for me.
Click for Jsfiddle.
If you use the js script where you delete the src path from img tag, then it will send a request too. With this variant you don´t have problems, look out first link.
Some skilled guys could improve this: select the image width and height with jquery and make a function.

Standardize image into div

I'm working with Bootstrap and I want to put some photos into my div and I want them to be all at the same size ("standardize").
If they're too big (and they will always be) I want to resize them to fit in my div and crop them if necessary.
For the moment her is what I do :
I've tried to change the style of the image in jQuery in a function:
• If the height is bigger than the width, I switch the style to max-width:100% and height auto.
• Inversement if the width is bigger than the height.
But I'm still new to jQuery and I am probably doing something wrong; can someone light my lantern please?
Here is my jQuery
$(document).ready(function(){
photoResize();
$(window).resize(function(){
photoResize();
});
});
function photoResize(){
image_w = $('img').width();
image_h = $('img').height();
if(image_h > image_w)
{
$('img').css("max-width","100%");
$('img').height("auto");
}
else if(image_w > image_h)
{
$('img').css("max-height","100%");
$('img').width("auto");
}
}
And here is a Fiddle for a better view : https://jsfiddle.net/Baldrani/DTcHh/9801/

Simplicity
I do this quite often in the CMS we use at work for galleries etc. The method I use involves a jQuery library called imgLiquid.js.
This will turn an inline image into a background image on the parent div. It's good because you can achieve your desired effect. It will crop the image (as it technically becomes a background image) and will apply background-size: cover; and background-position: center center; as inline styles.
You can find the plugin here
To initialize the plugin you just need:
$(".myele").imgLiquid();
Overheads
The plugin is very small (roughly around 5.106 KB) so you don't need to worry about adding weight to the page. It really it the most simple method I've come across (bar using thumbnails generated from the sever-side - see note at the bottom).
Cue CSS
I've tested this thoroughly and found it gives excellent results. You may then ask... what happens to my parent divs (as technically the plugin hides the img element - which therefore means the parent element doesn't know what height to make itself).
An easy method to make things work responsively, or not:
.myelement:before{
content: "";
padding-top: 50%;
display: block;
}
This CSS will give your heights back to the wrapping element. So if you wanted certain proportions you could use this math:
h / w * 100 = your percentage for the padding-top.
Working Example
Small note
Technically if I had the control I'd advise just using thumbnails.. I assume you're using some sort of system that could technically just render cut down versions of the images? The reason I use this method — and suggested it — is that I don't have control over the CMS and I'm assuming you just want to manage the code that's being produced as it's not stated.

if you want to make your images the same size then you dont need any javascript or calculations, why not just set it in css?
.someUniqueContainer img{
width:300px;
height:300px; // or what ever height you want
}
I'm guessing that in reality you actually want to crop all your images to a set width/height. if that's the case you'll need a serverside script for that.
where are the images coming from? it would be easyer to just edit them. if they are coming from a user then you would resize/crop on the server on file upload

There were several mistakes in your code.
Please look at this jsfiddle, please see https://jsfiddle.net/DTcHh/9796/
$(document).ready(function () {
photoResize();
$(window).resize(function () {
photoResize();
});
});
function photoResize() {
image_w = $('img').width();
image_h = $('img').height();
if (image_h > image_w) {
$('img').css("max-width", "100%");
$('img').height("auto");
} else if (image_w > image_h) {
$('img').css("max-height", "100%");
$('img').width("auto");
}
}

sth like this?, although this is pure css, not jquery included, might not be suit in your case..
body {
margin-top:20px
}
.col-xs-3 {
margin: 5px 0;
width: 500px;
height:120px
}
.col-xs-3 > div {
width: 100%;
height: 120px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
JsFiddle

A way to fade in the background on load?

I am working on a website design, and I need a way to fade in the background image of the body tag when it is completely done loading (perhaps then a pause of 500 ms).
If you see August's website design you will see the background fades in; however, this is done with a Flash background. Is there any way to do this with jQuery or JavaScript?
Update 9/19/2010:
So for those that are coming from Google (this is currently the number one result for "fade in background on load", I just thought I'd make a more clear implementation example for everyone.
Add a <div id="backgroundfade"></div> to your code somewhere in the footer (you can also append this via JavaScript if you don't want your DOM getting cluttered.
Style as such -
#backgroundfade {
position: fixed;
background: #FFF /* whatever color your background is */
width: 100%;
height: 100%;
z-index: -2;
}
Then add this to your JavaScript scripting file (jQuery required):
$(document).ready(function() {
    $('#backgroundfade').fadeOut(1000);
});
This has the effect of fading the #backgroundfade element (the box "covering" your actual background) out in 1 second upon DOM completion.

Yep:
Don't give the body a background image. Then prepare an animated GIF with the fading effect. In Javascript:
document.onload = function () {
window.setTimeout (function () {
document.getElementsByTagName ("body")[0].style.backgroundImage = "url(/path/to/image.gif)";
}, 500);
};
In jQuery it would be
$(function () {
$('body').css ('backgroundImage', 'url(/path/...)');
});
If you don't want to do the animated GIF trick, but need support for JPEG or PNG, it get's nasty. You'll have to create a placeholder <div/>, position it to the right place and play with opacity. You also have to detect when the background image has loaded, so that you don't get silly jumps on slow connections. A non-working example:
var x = new Image();
x.onload = function () {
/*
create div here and set it's background image to
the same value as 'src' in the next line.
Then, set div.style.opacity = 0; (best, when the
div is created) and let it fade in (with jQuery
or window.setInterval).
*/ };
x.src = "/path/to/img.jpg";
Cheers,

I haven't done this myself, but it might work.
You could, I guess, setup the background image and then mask it with a big old div that has a black background. Then play with opacity of this div to create the fade effect. This black div would have to cover the entire body.

i see this link ,
http://fragged.org/dev/changing-and-fading-body-background-image.php
the idea is :
apply your background to a div that's assigned a low z-index, absolute positioning and a background (think of it as a reverse / back modal). then produce your content into another layer on top of it with a transparent background....
you can now reference the bottom layer by id and change the opacity.
all it needs is a stack / array of background mages to apply as a property to the layer...

I'm not sure if there is a way to have the background image fade in, but one way you could do it is using an absolutely positioned image with a negative z-index. You could then use jquery to fade in the image. This approach might be trickier if you need the background image to tile or repeat.
The HTML:
<body style="z-index: -2">
<img src="backgroundImage.jpg" id="backgroundImage" style="position: absolute; top: 0px; left: 0px; z-index: -1; display: none;">
<!-- The rest of your HTML here -->
</body>
The jQuery:
$(window).load(function() {
$("#backgroundImage").fadeIn("slow");
});

Why not use a ready-made script: this one makes a background image fade-in on page load.
It also fits the image to the dimensions of the window, but this can be disabled if not needed.

My solution:
HTML:
<img id='myImg' />
CSS:
#myImg{
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
}
JS:
var img = document.getElementById('myImg'),
steps = 30,
appearTime = 1000;
img.src = "/path/to/img.gif";
img.onload = function(){
for(i=0; i<=1; i+=(1/steps)){
setTimeout((function(x){
return function(){
img.style.opacity = x;
img.style.MozOpacity = x;
img.style.KhtmlOpacity = x;
img.style.filter = "alpha(opacity=" + (x*100) + ")";
};
})(i), i*appearTime);
};
};

Fluid Elements and Overflow Question

So here's a stump I've hit.
I'm designing a... Thing. It sizes itself to the browser window, with some controls at the top and a rather large list near the bottom. Anyways, it's basically a table cell that sizes with the browser window, whos size is the document size - 130px in height, and document size - 50px in width. What I want it to do, is when the list of stuff inside that cell is bigger then the cell, it to become scrolly using css's overflow: auto.
The problem, is that I can't get it to do that, only make the entire document scrolly. Currently, the cell has no properties aside from valign:top, and it has a single div in it (to which the list elements are written), and it's set to overflow:auto. However, it's just scales up the entire document when the list becomes to long.
I don't want to give it a static size since it sizes with the page.
Any ideas?
Thanks!
-Dave

I'm not sure I understand correctly, but here's a try that may give you ideas.
<head>
<title>Test</title>
<style>
div.outer {
background-color: red;
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
}
div.inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background-color: aqua;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</div>
</div>
</body>

The solution of buti-oxa is very nice, but doesn't work in Internet Explorer.
For a cross-browser solution, you need to assign a fixed height to the div that contains the list. You can't do it using only css, because the height to assign depends from the height of the browser window.
But you can use a simple javascript function to dinamically assign the height to the div.
Here is an example, using jQuery:
function resizeDiv(){
var h = $(window).height(); //maybe the window height minus the header and footer height...
$("#yourDivId").css("height", h + "px");
}
You should call this function when the page is loaded and when the user resizes the window:
$(document).ready(function(){
resizeDiv();
$(window).resize(function(){
resizeDiv();
});
});
You can see this in action in this demo page I posted (resize window to test):
http://www.meiaweb.com/test/BMS_DM_NI/

if I m not wrong and your content is only text you can add wrap property although this dosen't work in firefox u can add wbr to your text

I think you should consider fluid layout design patterns.
Couple of tips:
MediaQueries
Use % instead of fixed values like px

I think an iFrame would help. Put your 'thing' into a base URL, and then use another page with an iFrame to load it. As the 'thing' goes crazy in size, the scroll bars appear, but your outer page is not effected.
An old fashion frame should work too, but iFrames are just more fun ....