For a personal project I'm trying to fill the window with randomly generated div's. I got started with a code I found in some thread and tweaked it to my liking (color and width of the div's for example).
However, this code was designed to generate a div, then make it fade out, and cycle that again. What I'd like is to have a set number of div's loaded on page load and without them disappearing.
I do recognize the ".fadeOut" and ".remove()" at the end of the code, but for the life of me I can't figure out how to prevent the div's from disappearing without breaking the code, let alone having a set number of randomly placed div's appear at once.
(function makeDiv() {
var divsize = ((Math.random() * 100) + 30).toFixed();
var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width': 2 + 'px',
'height': divsize + 'px',
'border': '1px solid' + color,
'transform': 'rotate(' + divsize + 'deg)',
'background-color': color,
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position': 'absolute',
'left': posx + 'px',
'top': posy + 'px',
'display': 'none',
'border-radius': '100px',
}).appendTo('body').fadeIn(100).delay(300).fadeOut(200, function() {
$(this).remove();
makeDiv();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
So something like this?
All that I did was remove the fadeIn and fadeOut parts, and then added a simple function to create a fixed number of divs. I also removed the display: 'none' from the divs that were being created.
var makeDiv = () => {
var divsize = ((Math.random() * 100) + 30).toFixed();
var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width': 2 + 'px',
'height': divsize + 'px',
'border': '1px solid' + color,
'transform': 'rotate(' + divsize + 'deg)',
'background-color': color,
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position': 'absolute',
'left': posx + 'px',
'top': posy + 'px',
'border-radius': '100px',
}).appendTo('body');
}
var generateDivs = (x) => {
for (let i = 0; i < x; i++) {
makeDiv();
}
}
generateDivs(100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I found plenty of examples of fixing an element's top relative to the window. How do I fix an element X pixels from the bottom of the window? Simply changing 'top' to 'bottom' does not work (for example,if the element's height is more than the window height)
From the top:
var pixels = 10;
var $elemPosition = $element.position();
var $elementH = $element.height();
var $windowH = $(window).height();
var $bottom = $element.offset().top + $element.height();
if ($(window).scrollTop() + pixels >= $elemPosition.top) {
$element.css({
'position': 'fixed',
'top': pixels + 'px'
});
} else {
$element.css({
'position': 'relative',
'top': '0px'
});
}
Solved it! Solution I came up with:
if (($windowH + $(window).scrollTop() - $bottom - pixels) >= 0) {
$element.css({
'position': 'fixed',
'top': ($windowH - $element.height() - pixels) + 'px',
'width': $eW + 'px',
'height': $eH + 'px'
});
} else {
$element.css({
'position': 'relative',
'top': '0px'
});
}
Use the CSS bottom property instead of the top property.
$element.css({
'position': 'fixed',
'bottom': pixels + 'px'
});
According to your comments and demand :
for example,if the element's height is more than the window height
You wants something like this ?
JS
$element = $("#element");
function setPosition(){
var pixels = 10;
var $elementH = $element.height();
var $windowH = $(window).height();
if ($windowH > $elementH) {
$element.css({
'position': 'fixed',
'bottom': pixels + 'px'
});
} else {
$element.css({
'position': 'relative',
'bottom': '0px'
});
}
}
$(function(){
setPosition();
$(window).scroll(function(){
setPosition();
});
});
If you try to change the height of the element to 700px for instance, you'll see he gets relative position.
I am working on getting a carousel background fade in when I move to next carousel item. Fading in works with CSS and JS in the code below on page load, but using jQuery to get this to work on change is not working.
JS-CSS:
function doCarouselBlur(imgEl) {
var root = imgEl.closest('.anlNoCarouselRoot');
if (root.length > 0) {
console.log('position: ' + JSON.stringify(root.position()));
console.log('width: ' + root.width());
console.log('height: ' + root.height());
console.log('src: ' + imgEl.attr('src'));
var width = root.width() + 160;
var height = root.height() + 40;
root.find('.carouselBackground').css({
'top': root.position().top - 20,
'left': root.position().left - 120,
'opacity': '0.92',
'transition': 'opacity 2s ease', // THIS WORKS ON LOAD BUT WON'T WORK FOR ON CHANGE
'background-image': 'url(' + imgEl.attr('src') + ')',
'width': width,
'height': height,
'z-index': '-10',
'clip': 'rect(20px, ' + width + 'px, ' + height + 'px, 20px)',
});
root.find('.dark-carousel-overlay').css({
'top': root.position().top - 20,
'left': root.position().left - 120,
'width': width,
'height': height,
'z-index': '-8'
});
};
}
ADDED JQUERY FOR TRANSITION ON CHANGE:
$('div.carouselBackground').on('change', function() {
$(this).fadeTo('slow', '0');
$(this).fadeTo('slow', '0.92');
});
So I found this already on here and it's almost exactly what I want. The only difference is that instead of creating boxes, I'd like for them to be words taken from an array - like
var textarray = [
"wow",
"so amaze",
"much hunt",
"such treasure"];
So that instead of colored boxes popping up randomly it would be one of those random words randomly colored. Here is the code from the jsfiddle.
(function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
$(this).remove();
makeDiv();
});
})();
How is this?
http://jsfiddle.net/x2EXz/1/
(comments about changes listed in-line below)
var textArray = [
"wow",
"so amaze",
"much hunt",
"such treasure"];
function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width': ' 30 px', // sets width to constant
'height': '10px', // sets height to constant
// removes background-color property of div, but keeps
// generating random colors that will be applied to the random words
// 'background-color': color
});
// randomWord will accommodate for textArray of any size
var randomWord = textArray[ (Math.floor(Math.random() * textArray.length)) ]
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
// appends randomWord to new div
$newdiv.text(randomWord).css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none',
// adds randomly generated color to random word
'color' : color
}).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
$(this).remove();
makeDiv();
});
}
makeDiv();
I'm attempting to put together a webpage that has text that pops up at random locations on the page, fade out, then appear again at a random location again. I found something that suits my purposes for example. I want something like this, but with text that I can manipulate and make a list out of with text-shadow effects if needed.
(function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
$(this).remove();
makeDiv();
});
})();
Fiddle
This is a second example of something similar, only it doesn't have random position.
$('li').each(function(){
var randomTop = $('div').height()*Math.random(); //random top position
var randomLeft = $('div').width()*Math.random(); //random left position
$(this).css({ //apply the position each li
top : randomTop,
left : randomLeft
});
});
Fiddle
I'm hoping to sort of splice the two together in order to get what I'm ideally looking for. Please forget the formatting as its my first time here and I'm trying to conform to the standards.
I'm not sure if I understand exactly what you're looking for but I "spliced them together."
Fiddle
(function fadeInDiv(){
var divs = $('.fadeIn');
var divsize = ((Math.random()*100) + 50).toFixed();
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
var maxSize = 30;
var minSize = 8;
var size = (Math.random()*maxSize+minSize)
var elem = divs.eq(Math.floor(Math.random()*divs.length));
if (!elem.is(':visible')){
elem.fadeIn(Math.floor(Math.random()*1000),fadeInDiv);
elem.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'font-size': size+'px'
});
} else {
elem.fadeOut(Math.floor(Math.random()*1000),fadeInDiv);
}
})();
EDIT: Updated Fiddle URL
http://jsfiddle.net/suenot/3b3XM/1/
// in FF and IE each() don't work offset()
// $(this).offset().top return empty string
$(document).ready(function(){
var index = 0;
$('.box').each(function(){
var background = $(this).css('background');
$(this).css('background', 'none');
var height = $(this).css('height');
var top = $(this).offset().top;
$('body').prepend('<div id="box' + ++index + '"></div>');
$('#box' + index).css({
'height': height,
'background': background,
'position': 'absolute',
'z-index': '-1',
'top': top,
'width': '100%'
});
});
});
Help me please, i can't find the solution.
I am not sure if $(this).css('background-color'); is what you want, but after updating it shows the box. See output in fiddle
$(document).ready(function(){
var index = 0;
$('.box').each(function(){
var background = $(this).css('background-color');
$(this).css('background', 'none');
var height = $(this).css('height');
var top = $(this).offset().top;
$('body').prepend('<div id="box' + ++index + '"></div>');
$('#box' + index).css({
'height': height,
'background': background,
'position': 'absolute',
'z-index': '-1',
'top': top,
'width': '100%'
});
});
});