Javascript plugin for automatic rotation of images [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
need to let the images disappear and reappear like here (footer at) http://www.guiltypeople.nl/het-bureau/.
Each logo, disappear slowly, and reappear on a different place. Could you help me find a Javascript plugin or something to do this?
thanks

First: To overlap the images you must make a trick with position: absolute or play a bit with background. Check here, here and here.
TIP: If the position it's random and not a loop, you must implement a function which changes location of background hidden object's with jquery or javascript.
Second: When you have the images overlapped, you must make the transition effect. For this you must use a loop and the alpha css property.
In your original question you asked also for rotations and other FX, for this you don't need a plugin, check transforming with css.
Example of changin alpha property in plain javascript:
for (var i = 0; i <= 100;){
var element = document.getElementById('id');
element.style.opacity = i * 0.1;
element.style.filter = 'alpha(opacity=' + i + ')'; // IE fallback
i = i + 10;
}
You can use the iterations to make rotation also, or use less i increment to perform each action when mod condition is true, imagine you want to rotate 90 degrees 4 times and make image disapear in 10 steps:
i = i + 5; // allows 20 iterations
if (i % 25 == 0) // if you want 4 rotation steps
if (i % 10 == 0) // if you want 10 alpha modifications

Related

I would like to find out how to get the remaining points a user needs to level up [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Sorry, I'm really bad at math and I also don't know the English terms so I really don't know how to ask this question properly.
I'm using this to calculate a users level
const curLevel = Math.floor(0.2 * Math.sqrt(score.points));
I would like to find out how to get the remaining points a user needs to level up. I didn't really try anything yet because I have no idea where to begin, might even be something super simple...
You can find the number of points needed to reach the next integer level by solving for points in the equation curLevel + 1 = 0.2 * Math.sqrt(nextLevelPoint).
You get that you can calculate the total points needed for the next level with:
let nextLevelPoint = Math.pow(5*curLevel + 5, 2)
Subtract score.point from this nextLevelPoint and you get the remaining points a user needs to level up.

How can I make a mapping of counters dynamic with a for loop? [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 5 years ago.
Improve this question
I have a carousel with chevrons and pagination. When the carousel left chevron is clicked, a var counter is set to --, and when the right chevron is clicked, the counter is set to ++.
I can't tie the pagination to the chevron animation as different events occur.
I have the below code for my pagination. When all events have completed, I set the following:
if (pagCount === 1) {
counter = 0;
} else if (pagCount === 2) {
counter = -1;
} else if (pagCount === 3) {
counter = -2;
} else if (pagCount === 4) {
counter = -3;
} else if (pagCount === 5) {
counter = -4;
}
so that if the user clicks on either chevron, they will be in the correct position in the slides already.
Is there a way to make this dynamic? At the moment I need to know the number of slides (5 currently) and must update this manually as more slides are added.
EDIT: Joschi's comment below resolved this issue.
You can do something like this
counter = -(pagCount - 1)
So if pagCount = 10
then -(pagCount - 1) = -9
#Joschi helped with resolving this, the solution was to replace my if statements with counter = 1 - pagCount;

Creating mathematical charts using chart.js jQuery [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Have you got any ideas how to create user-interactive line math charts with chart.js library, something like in wolframalpha? I know that i need to calculate x and y to draw chart correctly and range. It should look like myExample I can do line charts with static data, put in a code but need to know how to draw it after user provide function e.g 2x+5. All ideas and tricks will be very useful :) Thanks
Use math.js to parse the string input into a function.
// If "input" is a variable representing the string input for y
var f = math.eval('f(x) = ' + input');
Then compute a range of values for f to pass into chart.js:
// If "min" and "max" are values representing the minimum and max values
var values = [],
var x = min;
var increment = (max - min) / 10000;
for (var i = 0; i < 10000; i++)
values[i] = f(x + increment * i);

javascript show progress bar while lengthy javascript calculations are in progress? [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 am coding a javascript based network application and in which i have to create array of 1000 rec which generate random numbers between 0 and 1 as
for (var i = 0; i < 1000; i++) {
rec[i] = Math.random();
}
it takes some seconds to generate all random numbers and show it on a div so i just want to ask to how to show progress bar while it generating values?
Are you doing something daft like writing or appending values to the DOM within the loop - thus forcing the browser to try and redraw the screen each iteration...
example 1: fiddle - 4000ms+ (for me)
for (var i = 0; i < 1000; i++) {
rec[i] = Math.random();
document.getElementById('out').innerHTML += ('<br/>'+rec[i]);
}
example 2: fiddle - 10ms (or thereabout)
for (var i = 0; i < 1000; i++) {
rec[i] = Math.random();
}
document.getElementById('out').innerHTML = rec.join('<br/>');
It should not take seconds to generate a 1000 random numbers. In comparison I'm typing this on an 8 year old laptop with a crappy Centrino processor and a simple test produces somewhere in the region of 420,000 random numbers within a second.

D3 Real-Time streamgraph (Graph Data Visualization) [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 6 years ago.
Improve this question
I would like a stream graph as in this example:
http://mbostock.github.com/d3/ex/stream.html
but I would like real time data entering from the right and have old data leave from the left, such that I always have a window of 200 samples. How would I do this such that I have the appropriate transitions?
I tried changing the data points in the array a and then recreating an area as such
data0 = d3.layout.stack()(a);
but my transitions do not make it look like the chart is sliding across the screen.
Thanks in advance.
Try this tutorial:
When implementing realtime displays of time-series data, we often use the x-axis to encode time as position: as time progresses, new data comes in from the right, and old data slides out to the left. If you use D3’s built-in path interpolators, however, you may see some surprising behavior...
To eliminate the wiggle, interpolate the transform rather than the path. This makes sense if you think of the chart as visualizing a function—its value isn’t changing, we’re just showing a different part of the domain. By sliding the visible window at the same rate that new data arrives, we can seamlessly display realtime data...
Here is a simple example:
http://jsfiddle.net/cqDA9/1/
It shows a possible solution to keeping track and updating the different data series.
var update = function () {
for (Name in chart.chartSeries) {
chart.chartSeries[Name] = Math.random() * 10;
}
for (Name in chart2.chartSeries) {
chart2.chartSeries[Name] = Math.random() * 10;
}
setTimeout(update, 1000);
}
setTimeout(update, 1000);

Categories

Resources