I have an animation where a pendulum swings back and forth using css3 rotations. Luckily I can retrieve the current transformation matrix and convert it to radians but unluckily it doesn't sway from -30 degrees to 30 as it is supposed to but instead sways from 0 to 30 with half the period. I want to convert it to a regular curve that goes from amplitude to negative amplitude. Anyone have any idea how its done?[url]...
View 6 RepliesI'm looking for a low-overhead algorithm implemented in Javascript for blending between two sine-curves defining distance as a function of time for DHTML animation.
The "primary" motion is described by the equation (1/2)-(1/2)cos(pi*time), which creates 1/2 a cosine curve normalized on (0,1) on both axes, which is useful because I can multiply the amplitude at any given time by the total pixel motion needed to get how far along the movement the object being moved should be at any given time. What I've accomplished so far can be viewed at http://ryan.octospider.com/dev/
The final default behavior of the script will be to cycle through all 6 images endlessly. However, when the user mouses over one of the menu buttons to the left of the design, I want the images to smoothly transition to a faster scroll (the same curve as before, but over a shorter time) without stopping and accelerating again from zero velocity, that carries it to the selected image.
This's easy enough to work out with calculus -- unfortunately, I don't know how to perform the multiple derivatives needed in Javascript in a timely manner.. myself and an engineer friend have been poking at this problem for a while, thinking about weighted averages (with the weights changing linearly over time) and such, but if this has been done, I'd like to know how, to save myself a lot of trial-and-error effort.
Either I made an uh-oh, or there is a serious problem with Javscripts math functions. Math.sin(x) returns the sine of x in radians. Last time I checked, the sine of pi radians is 0, but in javascript:
View 8 Replies View RelatedThis script creates a motion blur effect of a moving object - Downgrades very well with others.
You must look at a sample to see what it is and how nice it is.
All you need to do is put the code bellow in the body section of your page... Instructions are in the code to change properties...
Go to http://free.7host04.com/logocurve/index.html for the LogoCurve generator to view samples and work out what you need
- It makes life a LOT easier!! :)
Hope you enjoy!
David :thumbsup:
<script language="JavaScript">
<!--Hide
/*
LOGO CURVE Version 3.2
24.01.2003
Writen by David Bann - South Africa
e-mail: david@ftgconsulting.co.za
Feel free to use this code, but please email me the website it is used on,
and leave this commenting in tact. Thank you!
Please let me know of any bugs or if you edit the script.
Additions since version 3.1:
- Added chengeable formulas for curve.
- Added changeable event at which the script is initiated.
Things to come:
- Better use of layers - will use less layers, but still get same
effect... (User will be able to specify how many layers to be used,
adding more functionality and effects, as well as performance)
- I want to add an option of document boundaries for the curve,as to stop
the logo from going out of the document and dissapearing totaly.
- Fade to work in browsers other then IE.
*/
//----------------------- Start Customizable Variables -----------------------//
//=== Positioning ===//
var left = 0;// Starting left position
var top = 20;// Starting left position
//=== Curve and Distance ===//
var topInc = 5;// Incriment of top position
var leftInc = 5;// Incriment of left position
/* Make both the horizontal curve and the vertical curve the same to..
.. get an increasing gap with no curve. */
var hor_curve = 20;// Horizontal curve - 0 for no curve
var ver_curve = -20;// Vertical curve - 0 for no curve
//=== Timing and Other ===//
var noTimes = 50;// Number of times the picture is shown
var waitTime = 1;// Time delay
var layer = 2;// Layer level
var picture = 'smalllogo.gif'// Picture to display (Smaller images work better)
var start_retracted= true;// Start the image retracted (true / false)
var retract= true;// Retract from behind after expanding (true / false)
//=== Fade options (Only IEusers see fade) ===//
var fade = true;// Gradual Fade (true / false) - Only works if retract =true
var fd_destop = 0;// Destination transparency level (ie 80, for mostly solid)
var fd_rate = 10;// Time in milliseconds between trasparency changes (best under 100)
var fd_delta = 5;// Amount of change each time (ie 5, for 5% change in transparency)
var event_init = 'onClick'// Event at which the script is initiated
var left_formula = '(left + leftInc) + ((count/100) * hor_curve)'// Left position formula
var top_formula = '(top + topInc) + ((count/100) * ver_curve)'// Top position formula
//----------------------- End Customizable Variables -----------------------//
//--------------------- DO NOT EDIT BEYOND THIS POINT! ---------------------//
var count = 0;
var count2 = 0;
var timeOutVal = waitTime * 10;
var txt;
var image;
var imageName;
var lay = new Array;
function addLayer(){
left = eval(left_formula);
top = eval(top_formula);
txt = "<div id='Layer" + count + "' style='position:absolute; visibility:hidden; left:" + left + "; top:" + top + "; z-index:" + layer + "'>";
txt += "<a href='#' " + event_init + "='replay()'><img src='" + picture + "' border=0 style='filter:alpha(opacity=100)' name = 'Image" + count + "'></a>";
txt += "</div>";
document.write(txt);
lay[count]=new lib_obj("Layer"+count);
}
function logoCurveInit(){
while (count < noTimes) {
addLayer();
count++;
}
count = 0;
lay[0].showIt();
if (!start_retracted)
animate();
}
function animate(){
if (start_retracted) {
if (!retract){
if (count > 0){
setTimeout('animate()',timeOutVal);
lay[count].hideIt();
count--;
}
}
else{
if (count >= 0){
setTimeout('animate()',timeOutVal);
lay[count].showIt();
if (count != 0)
fadeImage();
count--;
}
}
if (retract){
if(count==0)
retractIt();
}
}
else{
if (count < noTimes){
setTimeout('animate()',timeOutVal);
lay[count].showIt();
if (count != noTimes-1 && retract)
fadeImage();
count++;
}
if (retract){
if (count == noTimes)
retractIt();
}
}
}
function replay(){
if ((count == noTimes || (count == 0 || count == -1)) &&(count2 == noTimes-1 || count2 == 0)){
start_retracted = !start_retracted; // Make the value opposite of what it is
make_all_visible();
if (start_retracted){
count = noTimes-1;
}
else {
count = 0;
}
animate();
}
}
function retractIt(){
if (start_retracted) { // If the logo is not retracted (showing all the layers)
if (count2 > 0){
setTimeout('retractIt()',timeOutVal);
lay[count2].hideIt();
count2--;
}
}
else{ // If the logo is retracted (Only showing the first layer)
if (count2 < noTimes-1){
setTimeout('retractIt()',timeOutVal);
lay[count2].hideIt();
count2++;
}
}
}
function fadeImage(){
if (fade){
if (count >= 0 && count <= noTimes){
image = document.images['Image' + count];
nereidFade(image,fd_destop,fd_rate,fd_delta);
}
}
}
function make_all_visible(){
for (var i = 0; i< noTimes ; i++){
if (document.images['Image' + i].style.MozOpacity){
document.images['Image' + i].style.MozOpacity=100;
}
else if (document.images['Image' + i].filters) {
document.images['Image' + i].filters.alpha.opacity = 100;
}
}
}
////***************(DHTMLCentral.com)****************////
function check_browser(){
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5)
return this
}
bw=new check_browser()
function show_message(txt){alert(txt); return false}
function lib_obj(obj,nest){
if(!bw.bw) return show_message('Old browser')
nest=(!nest) ? "":'document.'+nest+'.'
this.evnt=bw.dom? document.getElementById(obj):
bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
if(!this.evnt) return show_message('The layer does not exist ('+obj+')'
+'- If your using Netscape please check the nesting of your tags!')
this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;
this.ref=bw.dom||bw.ie4?document:this.css.document;
this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;
this.y=parseInt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0
this.w=this.evnt.offsetWidth||this.css.clip.width|| this.ref.width||this.css.pixelWidth||0;
this.h=this.evnt.offsetHeight||this.css.clip.height|| this.ref.height||this.css.pixelHeight||0
this.c=0
if((bw.dom || bw.ie4) && this.css.clip) {
this.c=this.css.clip; this.c=this.c.slice(5,this.c.length-1);
this.c=this.c.split(' ');
for(var i=0;i<4;i++){this.c[i]=parseInt(this.c[i])}
}
this.ct=this.css.clip.top||this.c[0]||0;
this.cr=this.css.clip.right||this.c[1]||this.w||0
this.cb=this.css.clip.bottom||this.c[2]||this.h||0;
this.cl=this.css.clip.left||this.c[3]||0
this.obj = obj + "Object"; eval(this.obj + "=this")
return this
}
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}
lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}
lib_obj.prototype.writeIt = function(text,startHTML,endHTML){
if(bw.ns4){
if(!startHTML){startHTML=""; endHTML=""} this.ref.open("text/html");
this.ref.write(startHTML+text+endHTML);
this.ref.close()
}else this.evnt.innerHTML=text
}
////***************(DHTMLCentral.com)****************////
/* Code taken from DynamicDrive.com (Start)-->
Gradual-Highlight Image Script II-
By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
For full source to script, visit http://dynamicdrive.com */
nereidFadeObjects = new Object();nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)return
if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return;}
clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity;
direction = 1; if (object.filters.alpha.opacity > destOp){direction = -1;}
delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
// <-- Code taken from DynamicDrive.com (End)
window.onload=new logoCurveInit();
//-->End Hide
</script>
I would like to create a program which converts some letters into different ones.
1) I want 2 text areas (input and output) + "convert" button
2) if I type in the input area the letters "ea" I would like it to be converted into "a", so that If I type "cambrea" and press "submit" the output text will have "cambra".
3) if I type "e " which is (e+space) I want it to be converted into " " which is "space" example: if I type the word "spine " it should be converted into "spin , note that there is a space after "spin ".
4) If I type any vowel before "o" it should render "o", example: gambuo becomes gambo.
would this be possible? I'm not very familiar with Javascript even though I can modify it.
I have seen lot of reg. expession with ?:
For dummy eg
(((XXX)ddd)ff)
The above expression is modified as
(?:(?:(XXX)ddd)ff)
Although both the above expr. gives same result. (RegExp.match() gives
same o/p), most of the places , i have seen second option.
Yes, but different matches r shown (using RegExp.exec())
Is the second expr. most efficient or in particular scenarios?
Any comments???
I am trying to find the indexOf searchText(a var from user input) in the string textbox(also a var). I want it case insentive so I added the i flag.
View 4 Replies View RelatedSee title :) How do i do it?
View 17 Replies View Relatedconvert this php to javascript?
[Code]....
how to convert this CSS
.hidden { opacity: 0;
-moz-opacity: 0;
filterrogidXImageTransform.Microsoft.Alpha(opacity=0);
}
to javascript?
Coding patterns for regular expressions is completely unintuitive, as far
as I can see. I have been trying to write script that produces an array
of attribute components within an HTML element.
Consider the example of the HTML element TABLE with the following
attributes producing sufficient complexity within the element:
<table id="machines" class="noborders inred"
style="margin:2em 4em;background-color:#ddd;">
Note that the HTML was created as a string in code, and thus there are NO
newlines ('
') in the string, as if a file was parsed...so newlines are
not an issue. The only whitespace is the space character ' ' itself,
required to delimit the element components.
I want to write an RE containing paranthesized substring matching that
neatly orders attribute components. The resulting array, after the
execution of the string .match() method upon the example, should look as
follows:
attrs = [ "id", "machines", "class", "noborders inred", "style",
"margin:2em 4em;background-color:#ddd;" ]
I can then march down the array (in steps of 2) setting attributes
(name=value) to the element using standard DOM interface methods, right?
In approaching the writing of the RE, I have to take into account the
characters permitted to form the attribute name and the attribute value.
I assume a start to the RE pattern as:
<attribute name>=<attribute value>
I then try to find the right RE pattern for <attribute name>, keeping in
mind what the legal characters are for attribute names according to the
HTML standard ("recommendation"):
[A-Za-z0-9-]+
I believe this patterns conforms to the standard for attribute values:
[,;'":!%A-Za-z0-9s.-]+
That pattern tries to be more exclusive than inclusive, although I think
just about every character on the planet, including a newline, is
acceptable in an attribute value, at least the kind one might see in an
HTML document. Code:
At the moment my code is like:
function telValid(inString) {
var regexp = /^[0-9 +()]+$/;
return (inString.match(regexp,''));
}
which is use to validate phone numbers (UK at the moment)
this works ok, but wont allow - (Dashes) which i need..
tried doing:
function telValid(inString) {
var regexp = /^[0-9 +-()]+$/;
return (inString.match(regexp,''));
}
I am finding it difficult to find a regular expression for following situation(replace)
a b c d = a,b,c d
a b c = a,b c
I am trying to construct a reg exp for a field which can accept username as
(username) or (username@domain.com/net/org etc).
username should allowed alphanumeric values also it should accept -,_,.
it should not allowed @ twice
regular express to get the file name from a URL?
It has to be flexible in that the extension can be either 4, 5, or 6 chars (.php, .html, .shtml for example) and needs to cater for and whether querystring parameters exist too.
So, both
[URL]
and
[URL]
The regex should return newthread for both.
I.E.:
---------------------------
Windows Internet Explorer
---------------------------
<EMBED src=http://www.youtube.com/v/JTmM3jut05Q&hl=en&fs=1& width=500 height=200 type=application/x-shockwave-flash allowfullscreen="true" allowscriptaccess="always"></EMBED>
how can i get "src" value in above code using regular expression?
<object width="500" height="200"><param name="movie" value="http://www.youtube.com/v/JTmM3jut05Q&hl=en&fs=1&"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/JTmM3jut05Q&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="200"></object>
how can i get "src" value in above code using regular expression?
what will be the regular expression for this line:
Code JavaScript:
var id = $(this).attr("href").substring( $(this).attr("href").lastIndexOf('#'), $(this).attr("href").length);
Basically it gets the string after # in href attribute of clicked anchor tag.
I have this expression:
/(19|20)dd/)[- /.](0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])
to detect if my date:
2010-12-15
is valid. It's not working. What do I have wrong?
I'm having a problem making the regular expression for U.S. zip code verification work.
the regular expression: /(^d{5}$)|(^d{5}-d{4}$)/
My code is below. No matter what I type in, it asks me to correct my zip code. Any suggestions? Code:
When Internet Explorer 5.01 for Windows hits the regular expression:
/(?=<)|>/
it complains about an unexpected quantifier. In fact, it seems to complain whenever I use a lookahead expression. Is there any way around this?
I am trying to use regular expressions within JavaScript for the picture upload component of a shopping cart. I still can't seem to get my mind around them.
I have a page with a working file upload. When you click on browse and then select your file, the file name is also returned to the second field, the picture name field. The problem is that the entire string is returned - 'G:CatalogMyPicturessomepic.jpg' instead of 'somepic.jpg'.
I know this can be pulled out with regular expressions, everything from the right until it hits a / or I included the script and a couple of links. Code:
I have a regular expression called mCheck and a variable called usrVal which contains Ƈ/20/41/11/22' I then use the usrVal.match(mCheck) so the code looks like the following
var mCheck = /^[0-9][0-9]/;
if(!usrVal.match(mCheck))
{
usrVal = Ɔ' + usrVal;
}
Now, I was under the impression that if there wasn't a match then the match method would return boolean 'False'. However it is returning 'null' instead... I have used this exact same check on other pages before and it returned false just fine....
The regular expression I have prevent special characters but not spaces.
$(this).val(text.replace(/[^wds]/, ""));
How do I prevent spaces?
i have a quick ? i have a variable that is named dynamically by
combining values into a string, how would i then get the value of the
string
formname = "document.form" + count + ".quantity.value"
I then need the value of the form element, not the value of the
variable (formname).
how to convert below vbscript to javascript.
[Code]...
function calculateGst(exGst) {
//percentage of current gst.
var gst = 10;
var gstAmount = (exGst * (1 / gst));
var gstInc = (exGst + gstAmount)
alert(gstAmount);
alert(gstInc);
}
now, the exGst parameter comes from an document.getElemenetById('txtExGst').value in an onclick event.
the problem is this. if 400 is entered at exGst, the gstAmount spits out 40, as it should, but the gstInc spits out 40040...so its treating it like a string rather than a number...