Develop Reference

Use JS/jQuery To Animate Letters In Element One-By-One [closed]

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();

Pixelation effect with divs? [closed]

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>");
}

replace image with another for one second with javascript [closed]

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 have an image that I want to replace with another (same image, but brighter color) to grab the attention of the user to it when he clicks on a certain button, just so he knows that it's there. So I want to replace the original pic with the other twice, for 1 second each, seperated by 1 second as well.
In other words, the user is on the page, he clicks on the button, the original dark image changes to the bright image for 1 second, then back to the dark image for 1 second, then the bright image for one second, and last comes back to the original dark one.
so: original--> replace it (1 sec) --> original(1 sec) --> replace it (1 sec)--> original
I know I have to use javascript for it, but I am very weak in javascript. can someone give me the code for it? Thanks

The below is a rough idea of one possible implementation, easily improved...the benefit being you only need one image.
Demo Fiddle
HTML
<img src='http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg' />
<button id='button'>Start 1 second!</button>
CSS
img {
height:100px;
width:100px;
}
jQuery
var interval;
function isEven(n) {
return isNumber(n) && (n % 2 == 0);
}
function isNumber(n) {
return n === parseFloat(n);
}
$('#button').on('click', function () {
var src = $('img').attr('src');
var alt = 'http://www.online-image-editor.com/styles/2013/images/example_image.png';
$('img').attr('src', alt);
var count = 0;
interval = setInterval(function () {
count++;
if (count == 4) {
clearInterval(interval);
return false;
}
isEven(count) ? $('img').attr('src', alt) : $('img').attr('src', src);
}, 1000);
});

Dryden is correct but we can at least point you in the right direction.
See http://www.w3schools.com/jsref/met_win_settimeout.asp
Combine that with a onclick function and document.getElementById("imageid").src="../img/imgname.png";
Magic.
If you can't get it working with that, post the code you are using.

In CSS you can use animation and specifities of box-model while you alternate padding and height/width to show background or not of img tag .
DEMO
basic coding :
<img src="http://lorempixel.com/300/200/nature/9" />
img { background:url(http://lorempixel.com/300/200/nature/6);
animation : 2s infinite blink;
}
#keyframes blink {
0%, 24.9%,75.1% ,100% {
heigh:0;
width:0;
padding:100px 150px
}
25%, 75% {
height:200px;
width:300px;
padding:0 0;
}
}

Javascript random text fade out / in [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have some text that randomly changes every 3 seconds, it is working like a charm but i want to make whenever it changes there is a fade out, fade in transition. This is my script/
<script type="text/javascript">
var textarray = [
"& prisioner 24601.",
"& occasional timelord.",
"& part-time Pokémon trainer.",
"& guilty for the zombie apocalypse.",
"& potential book worm." // No comma after last entry
];
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('random_text').innerHTML=textarray[rannum];
}
onload = function() { RndText(); }
var inter = setInterval(function() { RndText(); }, 3000);
and this is the html part it is applied to:
<span id="random_text">& occasional time lord</span>
Any idea on how to make this happen?
Thank you

Since you've tagged this post with jquery, you can easily achieve this using jQuery's own fadeIn() and fadeOut() functions.
For example, your code can be updated as follows:
var textarray = [
"& prisioner 24601.",
"& occasional timelord.",
"& part-time Pokémon trainer.",
"& guilty for the zombie apocalypse.",
"& potential book worm."
];
function RndText()
{
var rannum = Math.floor(Math.random() * textarray.length);
$('#random_text').fadeOut('fast', function() {
$(this).text(textarray[rannum]).fadeIn('fast');
});
}
$(function() {
// Call the random function when the DOM is ready:
RndText();
});
var inter = setInterval(function() { RndText(); }, 3000);
I also made some slight changes to your code (such as changing window.onload to $(document).ready()).
jsFiddle Demo

Try
fiddle Demo
var $ryt = $('#random_text');
function RndText() {
var rannum = Math.floor(Math.random() * textarray.length);
$ryt.html(textarray[rannum]).hide().fadeIn('slow');
}

How is the scrolling functionality done in this website? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am interested in the way this site has the speakers scrolling at a certain interval.
I am unsure if this is a jQuery plugin but would be keen to know/understand how this functionality is done.

Create a container element that is set to the dimensions you want to display. Then set its overflow property to hidden and give it a child that is much taller. Then use a setInterval to animate the offset from the child to the parent:
HTML --
<div id="container">
<div id="child"></div>
</div>
CSS --
#container {
position : relative;
width : 500px;
height : 300px;
overflow : hidden;
}
#child {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 900px;
}
JS --
$(function () {
var $child = $('#child'),
timer = setInterval(function () {
$child.animate({ top : '-=300' }, 500);
}, 1500);
});
Update
You can then detect if the #child element should be animated back to the beginning once its entire height has been shown:
$(function () {
var $child = $('#child'),
height = $child.height(),
interval = 300,
current = 0,
timer = setInterval(function () {
current++;
if ((current * interval) >= height) {
current = 0;
$child.stop().animate({ top : 0 }, 1000);
} else {
$child.stop().animate({ top : (current * interval * -1) }, 500);
}
}, 1500);
});​
Here is a demo: http://jsfiddle.net/BH5gK/2/