Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to create a pixelation effect but with divs. The divs are small, 25px by 25px. I do not want to hard-code hundreds of these into the markup.
I want the entire body of the page to made up of these div "pixels" so that I can do something interesting with color randomization.
I imagine this has something to do with cloning divs, but assuming I do that, how will I clone them in such a way that they generate the full size of the body? So that it appears as though the full screen is full of pixels?
Note: I am a novice developer.
Your question is sort of vague, but here's what I was able to throw together, hopefully this answers your question. Basically I just generate a long string containing all the div elements and inject them into the page
http://codepen.io/anon/pen/pbnth
//helper function see
//http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var num_of_pixels = 5000;
var output = "";
for(var i = 0; i < 5000; i++) {
output+= '<div style="'
output+= "background-color:"+getRandomColor()+";"
output+='"" class="pixel"></div>'
}
var container = document.getElementById('container');
container.innerHTML = output
In order to get the full screen effect you're talking about, just calculate the innerwidth*innerheight and divide by the area of each pixel, these are 25px with a 2px margin so 27^2
EDIT:
Here's an example using a fixed color set
http://codepen.io/mattbucci/pen/ueBfx
And here's a bonus animated version, although think there's probably a more efficient way to do this with canvas
http://codepen.io/mattbucci/pen/avrjd
Here's a rudimentary FIDDLE that will get you started.
There is a container (you could change it to body) that is filled with little divs (you adjust the size of the divs and container as you wish).
JavaScript fills the container, and assigns a random color to each div with inline styling.
JS
for(var n=1; n < 100; n++)
{
for(var r = 1; r < 50; r++)
{
mycolor = '#' + Math.random().toString(16).substring(2, 8);
var mydiv = "<div style='background-color:" + mycolor + " ;'></div>";
$( '.container' ).append( mydiv );
}
$( '.container' ).append( "<div class='clearboth'></div>");
}
Related
I'm having trouble implementing a gallery/portfolio, just like the ones pictured in the portfolio templates of Wix. In my HTML I have set up three div columns, in which I add images, and my thought process was to create a script which adds each image (from a list of images) to the column which currently has the smallest height.
I've already used CSS to ensure that the images are full width in the columns and have margins between each other.
The problem I've been having is that the script seems to work but only after I refresh the page--otherwise the heights returned are nonsense values like 0px and 20px, where they should be 356.2px, 306.4px, etc, or arbitrary image height values. Since 0px is being returned, the images go into the same column.
Some visuals to better describe what I mean:
What I get after the first refresh
vs What I get before the first refresh
I've looked at some questions with similar problems, and many explain that the image might not have been loaded yet. I've tried $(window).on('load', function... , $(img).onload, $('#gallery-holder-1').ready, ... and a bunch of other random stuff but nothing seems to work.
My code looks like the following:
/* List of images */
const images = ["img1.png", "img2.png", "img3.png", "img4.png", "img5.png"];
$(document).ready(function() {
var holder = 0; // to determine which holder to add to
var height1 = 0; // heights of each gallery-holder
var height2 = 0;
var height3 = 0;
// add all the images to the holders
for (const image of images) {
// get height of each holder
height1 = $('#gallery-holder-1').css("height");
height2 = $('#gallery-holder-2').css("height");
height3 = $('#gallery-holder-3').css("height");
// find smallest height
if(height3 < height2) {
if (height3 < height1) { holder = 3; }
else { holder = 1; }
}
else {
if (height2 < height1) { holder = 2; }
else { holder = 1; }
}
// create image and append
var img = document.createElement("img");
img.src = image;
$(`#gallery-holder-${holder}`).append(img);
}
});
Does anyone know what might be the problem or, alternatively, a better way to implement a portfolio like the kind on Wix?
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
What I'm Trying To Achieve:
With a wrapper for a display plane and an inner element with any text within;
Calculate center;
Get width of wrapper
Get width of text prior separation
( Wrapper width / 2 ) - Text width = where first letter will go
Break up text into own div elements - I don't require but for anyone looking to use any answers, you may want to replace spaces for
Set position of each letter container to be outside of container to the right
Animate each letter elements margin with an end ease effect;
First to middle position
All following to end position minus total widths of already moved letters.
Hold for a couple of seconds
Each letter element does the same going outside of the plane to the left with a slight delay.
Repeat
In A Less Confusing Nut Shell
Each letter comes on with a slightly delayed starting time to the center of the wrapper, holds there and then goes out of the viewport. I am personally doing this for a loading animation.
My Attempt So Far:
<div class="LoadWrap">
<div class="Loading">Loading</div>
</div>
<script type="text/javascript" src="Assets/JS/jquery-3.1.1.js"></script>
<script type="text/javascript" src="Assets/JS/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var Elem = $('.Loading'),
EWid = Elem.width(),
EStr = Elem.html(),
ESLe = EStr.length,
EOWi = Elem.parent().width(),
ABCD = (EOWi - EWid) / 2,
CTWi = 0;
Elem.html("");
for (var i = 0, len = ESLe; i < len; i++) {
Elem.append("<div style=\"margin-left: " + EOWi + "px;\">" + EStr[i] + "</div>");
}
for (var i = 0, len = ESLe; i < len; i++) {
var ThisWidth = $(".Loading > div:nth-of-type(i)").width();
console.log(ThisWidth);
//setTimeout(
// function() {
// $("#full-wrapper #full").animate({
// marginLeft: '-=938px'
// },{
// easing: 'easing',
// duration: 250,
// });
// }, 500);
}
});
</script>
Problems I'm Experiencing:
':nth-of-type( number )' seems to work however :nth-of-type(i) will not.
You need to concatenate the number
var ThisWidth = $(".Loading > div:nth-of-type(" + i + ")").width();
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Trying to replicate this awesome "Mouse over Escape" effect from the link below using simple jQuery: http://codecanyon.net/item/jquery-text-animation/full_screen_preview/233445
Any pointers or tips? See "Mouse over Escape" section in link above.
Here's a simple jQuery code I wrote:
// jQuery explode text by Aziz Natour
// CC BY 4.0 License
// http://creativecommons.org/licenses/by/4.0/
$('.explodeMe').each(function() {
var text = $(this).text();
$(this).html(text.replace(/./g, "<span>$&</span>"));
});
$('.explodeMe span').each(function() {
var min = -10, max = 10,
min2 = -30, max2 = 30,
random = Math.floor(Math.random() * (max - min + 1)) + min,
random2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2,
css = "top:"+random+"px; left:"+random2+"px",
el = $(this);
el.on({
mouseenter: function () {
el.attr("style", css);
},
mouseleave: function () {
setTimeout(function() {
el.removeAttr("style");
}, 300);
}
});
});
.explodeMe span {
position: relative;
transition: 0.3s .1s;
top:0;left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="explodeMe">I get nervous around cursors.</span>
Codepen demo: http://codepen.io/azizn/full/redbRa
The logic:
Wrap each textual character inside a <span> tag
Make the new span tags relatively positioned to manipulate their location without affecting layout flow.
Apply randomized CSS style to each span separately (for dynamic movement) on hover
Remove the style after a delay
The position change is animated using the CSS transition property.
This is my JSFiddle : http://jsfiddle.net/0r16e802/4/
What I am trying to do is taking the image and draw it as an HTML table
2 big problem in my algorithm
I can seem to be able to draw the images and only the first image is loaded in the first row
big problem in the size and the background-position
var Append="";
$(document).ready(function(){
var row=2;
var ItemPerRow=10;
CreateEmojiTable(row, ItemPerRow);
function CreateEmojiTable(row, ItemsPerRow){
Append+="<table width='99%' style='padding-top:3px;'>";
for(var i=0;i<row;i++)
{
Append+="<tr>";
DrawEmoji(ItemsPerRow, i);
Append+="</tr>";
}
Append+="</table>";
$("#emoji_container").html(Append);
}
function DrawEmoji(ItemsPerRow, r){
var size=16;
for(var i=0;i<ItemsPerRow;i++){
Append+="<td>"
Append+="<div class='emoji' style='background-position:0px -"+parseInt(r*i*size)+"px;'></div>";
Append+="</td>";
}
}
});
EDIT: corrected indexing
As suggested by Jovan, the indexing should be as he says:
(r*ItemsPerRow + i) * size
But it's still misaligned so you'll have to correct it like this:
(r*ItemsPerRow + i) * size - 2
Then, you don't want to go beyond the actual maximum index, which is 262, or you'll have repetitions and misalignments as I told in the comment above.
Here is the full solution. It fixes indexing, alignment and maximum index: http://jsfiddle.net/0r16e802/12/
The emojis in the image are aligned to 17 pixels, not 16.
var size=17;
This aligns them to one another, but you'll still have to solve the border conditions, which are 1 pixel off.
To do this, fix the CSS by 1 pixel:
height:16px;
Finally, fix the size computation by subtracting 1:
parseInt(r*i*size - 1)
Here is the solution: http://jsfiddle.net/0r16e802/5/
I don't think any of the previously posted answers are correct, even if they do happen to work for the first two rows.
The way your sprite is organized, you are looking for:
parseInt( (r*ItemsPerRow + i) * size)
As #pid already said, the sizing was somewhat out by a pixel but also the first row repeats because of i=0 The offset height of the first row ends up being worked out as 0. You also have a 'squidgy' factor for whatever reason of needing to -2 from the height to make them align properly, probably an issue with the original image.
function DrawEmoji(ItemsPerRow, r) {
var size = 17;
for (var i = 0; i < ItemsPerRow; i++) {
Append += "<td>"
Append += "<div class='emoji' style='background-position:0px -" + parseInt((r + 1) * (i + 1) * size - 2) + "px;'></div>";
Append += "</td>";
}
}
});
http://jsfiddle.net/0r16e802/9/
I am getting long text using ajax in json form I want to fill those content in the fix height div
suppose I have div height 500px and width 300px. and font size is 16px
i want any javascript recursive method that can fill data according to height and width of div and can return me remaining text.
if any one can do that then Please provide me solution.
Thanks in Advance
First of all, wrap the text inside a <span> in put it in your <div>. I'm assuming that div is your fixed size element here:
// Be careful about text nodes, or use firstElementChild instead
var span = div.firstChild, text = span.innerText, rest = "";
if (span.offsetHeight > 500) {
var totalLength = 0, markLength, i = 0,
rects = span.getClientRects();
for (; i < rects.length; i++) {
totalLength += rects[i].right - rects[i].left;
if (rects[i].bottom - rects[0].top <= 500)
markLength = totalLength;
}
var mark = Math.floor(text.length * markLength / totalLength);
span.textContent = text.substring(0, mark);
rest = text.substring(mark);
}
The variable rest contains the remaining part.
Beware that this method uses some approximations, and sometimes may not fill the container to the brim. In some unlucky cases, it may even overflow the container, so you have to run it again until you get the correct size.
Why don't just put all in the div and in the div you set
overflow="hidden"
Create a temp div, fix it width and append text until it exceed your height then stop, after that copy all content to the main div
var s = 'Your long long long long long long long long long long content';
var i = 0;
var tmpdiv = $('<div style="width:50px; height:auto; position:absolute; left:-99999px"/>').appendTo(document.body);
while (i < s.length-1 && tmpdiv.height() < 50){
tmpdiv.append(s[i]);
i++;
}
$('#fixdiv').html(tmpdiv.html());