|
JavaScript - 'simple' Animation On Bg Image (slide) & Text.
Hi there,
I'm having some real trouble with what I thought would be some really simple animations. I've been using, or trying to use the jQuery plugin. Basically I have a button, the mark up would probably (don't have to if anyone can come up with something better) look like this: Code: <button><span>Text in Button</span><i></i></button> I've uploaded a pic, to show (very crudely), how the animation should work: So, you have text with circle graphic on the end by default. When you hover over this element, the background should slide across. This could use another image, probably preferably, so 2 in totally, one for the left side and one for the right. As well as this animation,the text should also slide, probably just 5/10px or so across. I guess this would all animate in reverse when moving the mouse off the element. Does anyone have any ideas on this or can point me in the right direction? It would be greatly appreciated as ever. Thanks for taking the time to read, Steve Similar TutorialsHi everyone! I'm new to coding and need help on my school project. I have to animate a ball and make it move up and down the page using the if statement and the or logic. I understand the concepts of the if statement but when it comes to actually writing it in code, I fail miserably at it. Heres the code... Code: <html>
<body>
<center><button type="button"onClick="first()">Click to move ball down!</button>
<button type="button"onclick="second()">Click to return ball to top!</button></center>
<IMG ID="ball"STYLE="position:absolute;left:50;top:50;width:100;height:100;"SRC="ball.jpg">
<script language="JavaScript">
var myElement=document.getElementById("ball");
var loc= 50;
function first()
{
loc +=50;
myElement.style.top=loc;
}
setInterval("first()",50);
function move()
{
if(loc>500 || loc<0)
{
loc=-loc;
}
myBall.style.top=loc;
}
</script>
</body>
</html>
.. so what is happening is the ball will continuously fall without stopping. Can someone help me get the ball bounce from the edge of the screen back to the top and continue to do it. Thanks. I have just completed my JS studies and wish to try 3 things to test what I have learned, first I wish to create a simple animation, then I'll attempt my own slideshow and last a specific script. First, can I try the animation on this specific forum? If not then is there another forum for this on this board or do I have to go to an animation specific site please?
I realize this is an overly simple question, but I'm rather horrible at javascript. What I'm doing is changing an img src and having it loop through images. I want it to only start looping when I click and than stop if I click again. It loops through when I click once, but when I click again it starts changing its rate of image switching. Starts off switching at 1000 milliseconds than upon clicking again it switches through two images quickly and than slows again. Code: var myImage = document.getElementById("mainImage");
var imageArray=["1.jpg","2.jpg","3.jpg","4.jpg" ];
var imageIndex=0;
What I assume is the trouble causing function: Code: function changeImage(){
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length) {
imageIndex=0;
}
}
How the trouble function is being called: Code: var imgSwtch=0;
myImage.onclick= function(){
if(imgSwtch==0){
var intervalHandle = setInterval(changeImage,1000);
imgSwtch=1;
console.log("start");
}
else{
clearInterval(intervalHandle);
imgSwtch=0;
console.log("stop");
}
};
How can I make a image where the first image "rolls" up and another (different) image "rolls" up from the bottom? I know how to code it except for the animation sequence. All images are 200 width and 50 height.\ Thanks in advance! (Would like to use jQuery if possible) Hi, I am looking for a script which could do picture animation like in this page But there is other problem: When you put your mouse on them, they appear colored. I need that this appearing action would take 5 seconds. 5 sek. to become colored, 5 sek. to become grey when you put away your mouse. If you need more info, ask.. Thanks a lot. I've pared this down as much as I can to demonstrate the issue. What can I do to make the slide in go over the top of the image rather than underneath as at present? Code: <html>
<head>
<title>slidein</title>
<style>
#headerstudy {width:980px;height:280px;margin:0 auto;padding:0;}
#mainbook {position:absolute;top:7.5em;left:15.4m;border:0 none}
</style>
<script>
// *************** TRANSLATE
var master = new Object("element")
master.curLeft = 0; master.curTop = 10;
master.gapLeft = 0; master.gapTop = 0;
master.timer = null;
function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop)
{
clearTimeout(eval(layerName).timer)
var el = document.getElementById(layerName);
if(eval(layerName).curLeft != fromLeft)
{
if((Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft)
{
eval(layerName).curLeft = fromLeft;
}
else if(eval(layerName).curLeft < fromLeft)
{
eval(layerName).curLeft = eval(layerName).curLeft + paceLeft;
}
else if(eval(layerName).curLeft > fromLeft)
{
eval(layerName).curLeft = eval(layerName).curLeft - paceLeft;
}
el.style.left = eval(layerName).curLeft + 'px';
}
if(eval(layerName).curTop != fromTop)
{
if((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop)
{
eval(layerName).curTop = fromTop;
}
else if(eval(layerName).curTop < fromTop)
{
eval(layerName).curTop = eval(layerName).curTop + paceTop;
}
else if(eval(layerName).curTop > fromTop)
{
eval(layerName).curTop = eval(layerName).curTop - paceTop;
}
el.style.top = eval(layerName).curTop + 'px';
}
eval(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30);
}
function setPace(layerName, fromLeft, fromTop, motionSpeed)
{
eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) / motionSpeed;
eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) / motionSpeed;
moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop);
}
var expandState = 0
function expand()
{
if(expandState == 0)
{
setPace("master", 121, 10, 10);
expandState = 1;
}
else
{
setPace("master", -120, 10, 10);
expandState = 0;
}
}
</script>
</head>
<body>
<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu2" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="http://aapress.com.au/images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;" bgcolor="#FFFFFF">
<tr>
<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">
Gadget by LabPixies.com</a></td>
</tr>
<tr>
<td>
<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
</iframe></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
sidemenu.style.top = '80px';
}
setInterval("FixY()",100);
</script>
<div id="headerstudy">
<img id="mainbook" src="http://aapress.com.au/images/booksblank.jpg" width="572" height="285">
</div>
</body>
</html>
Hi,,, Please help me out to do the image scrolling using jquery, where on onclick of button 5 image scroll at once then next 5 image will show. Hi guys, I am currently stuck up on something.. check this page http://dev.andrewfopalan.com/new_slider.html Well for starters.. I am trying to mimic this effect.. http://www.vogue.com/ The slider on the very top.. A quick preview of what I did was.. I used this plugin.. easyslider().. And then edited it.. since I am still learning jQuery and javascript.. so I made changes to the controls... usually the elements for design.. all I did was that.. The first problem was how to make it center like the one on the vogue.. so it was done... Second the masking problem.. I had alot of trouble thinking how I am going to do this.. because whenever I used absolute position on masks and the controls, everything is messed up on all browser.. So my problem primarily was how to make the effect like vogue mask, so what I did was used opacity on the list... and add a class active that regains the opacity 1 on the middle part of the slider.. so that was done.. My follow up problem is whenever I am navigating through the slider.. I add the "active" class on the next item on the list.. up until there I am fine.. but when I am at almost at the end, at the 5th slider, I am not getting the active class? and after a couple of clicks on the "next".. it wont navigate through... here's the code for the next button: Code: // this gets the current location of the active slider on the list..
$("a#"+options.nextId).click(function(e){
var id= $('.active').attr('id');
//this removes the "active" class on the slider.. and then goes to the next item on the list.. and then add the class "active" to the next image slide..
$("ul li:nth-child("+(id)+")").removeClass('active').next().addClass('active');
// this is the plugin's animation to move to the next slide..
animate("next",true);
Heres' the code for the animate Code: function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p},
{ queue:false, duration:speed, complete:adjust,
}
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
heres the adjust code function Code: function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
I am very still new to this jQuery thing.. but I am trying my best to learn.. Hope someone could teach me and help me on this... Hi, I'm a complete novice using javascript. I'm trying to get a mootools plugin to work with a slide in/slide out javascript using multiple divs. Here's the page: http://pawsdogs.com/test/Site/work2.htm The mootools code (Noobslide) slides a main image on the right when you click thumbnails on the left, which are wrapped in a thumb mask using CSS. The first row of thumbnails works perfectly, but when it's passed on to the next div the mask isn't passed on and the effect breaks down. Thanks so much if anyone can help! Here's the html: Code: <li><a href="#" id="slidecontrol_2" class="slidecontrol">Click Here</a>
<div id="slidedisplay_2" style="display:none;">
<div id="thumbs7">
<div class="thumbs">
<div><img src="images2/img4.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img5.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img6.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
<span></span>
</p>
</div>
</div></li>
<li><a href="#" id="slidecontrol_3" class="slidecontrol">asdf</a>
<div id="slidedisplay_3" style="display:none;">
<div id="thumbs7">
<div class="thumbs">
<div><img src="images2/img2.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img3.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
</p>
</div>
</div>
The javascript: Code: $(document).ready(function () {
$('a.slidecontrol').click(function(){
var $this = $(this);
var divID = $this.attr("id").replace("slidecontrol_", "slidedisplay_");
var $div = $('#'+divID);
if ($div.is(':visible')) {
$div.slideUp(500);
} else {
$div.slideDown(500);
}
return false;
});
});
The CSS: Code: #thumbs7{
position:relative;
width:200px;
clear:both;
height:41px;
overflow:hidden;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
position:absolute;
top:0;
width:100%;
height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
display:block;
width:60px;
height:41px;
margin:0;
float:left;
cursor:pointer;
}
#thumbs7 .thumbs div img{
width:54px;
float:right;
}
#thumbs_handles7 span{
background:url(../images2/thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
width:1200px;
background:url(../images2/thumbs_mask.gif) no-repeat center top;
}
Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser I need to make a very simple text scroller (either vertical or horizontal) using JavaScript. Can anyone point me in the right direction? Thank you I need to replace the captions with simple text for download speed purposes. This is controlled by a piece of Javascript written for me. I need to change the caption image for a text one. The site is here Frank alias effpeetee. Hi guys,I was thinking about the code to : write something inside the text box and if the word entered is equal "hero" for example the box next to it will turn green means correct, otherwise it will turn red means wrong,and if nothing entered it stays white. I really like to know how we code that in javascript using functions, without any CSS or anything else. That means we have 2 objects a text box and a rectangle for feedback color. Remark: there is no button at all, the validation will be each time you are typing. A Bonus question : if someday we decide to change the color with pictures , is it possible to do that? Thank you very much for your help, much appreciate it. Hi, I have created an animation exercise for an eLearning lesson in a program that uses JavaScript as the scripting for a Windows executable. A retired social worker who creates these eLearning materials as give-away's to help people in the community improve health, it would be a big help to reaching more people if instead of a Windows executable version, the animation could be developed in a web page. A lot more people could view the eLearning and try this exercise which trains people in pacing their breathing. The animation has a 300X300 circle on the canvas with a couple of text input boxes and a start button. The JS < 50 lines of script, but since it was not developed for a web page, it has no tags and it depends on objects like the circle or button (or 2 audio files to create the inhale/exhale sounds) that were already placed on the canvas in the Windows executable program. I'm not very skilled using Dreamweaver CS5, but with help, reading, references can try to convert this JS into a web version, if it's possible. Not sure how to do this and would appreciate any help. I am adding a screenshot of the interface and the JS functions that are called by the start button. //JS: ( bar1 is the variable entered by the use as breaths per minute-BPM; //time1 is the exercise length; the variables initially are set as follows: //time1=15, //volume=100) var time1 function minuteTimer() { breakLoop = false stopLoop = false fork (calcBreathing) for (var i=0;i<time1;i++) { wait(60) breakLoop = true Submit.Show() Text122.Show() Text12.Show() TextInput22.Show() TextInput2.Show() Submit2.Hide() TextInput2.SetTransparency(0,false) TextInput22.SetTransparency(0,false) Text12.SetTransparency(0,false) Text122.SetTransparency(0,false) Text5.SetTransparency(0,false) Frame12.SetTransparency(0,false) Submit.SetTransparency(0,false) TextInput2.Enable(true) TextInput22.Enable(true) Debug.trace("\n minutes elapsed "+(i+1)+"\n") } stopLoop = true } function calcBreathing() { var bar2 = 60/bar1 for (loop = 0;loop<bar1;loop++) { mySound.Play(1,volume) Vector8.Scale(.5,.5, bar2*.3) mySound.Stop() wait (bar2*.05) mySound2.Play(1,volume) Vector8.Scale(-.5,-.5,bar2*.6) mySound2.Stop() wait (bar2*.05) if (breakLoop) break } breakLoop = false if (bar1 > 6) bar1-- if (!stopLoop) calcBreathing() } Any help appreciated. Thanks very much. Kind Regards, saratogacoach I have a picture of a pinwheel on my website that I want to spin onMouseover. Can this be done with JavaScript?
I want to create some type of seasonal feel on my Web page where there are falling leaves. I presently have 6 different gif images of leaves that I know I will probably have to load into an array. I also know that I will have to figure out the maximum width & height of the screen, which is different in Internet Explorer and other browsers. My goal is to load the leaves randomly as well using 'Math.floor(Math.random()*6)', if that is correct. Beyond that, I am lost on how to manipulate the Web page to make this animation occur. Any help would be appreciated. Thank you. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Autumn</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript">
<!--Hide from incompatible browsers
/* <![CDATA[ */
var widthMax=0;
var heightMax=0;
var leavesLoaded = new Array(6);
for (var i=0; i<6; ++i)
{
leavesLoaded[i] = new Image();
leavesLoaded[i].src = "leaf" + (i+1) + ".gif";
}
function setLeaf()
{
if (navigator.appName == "Microsoft Internet Explorer")
{
widthMax=document.documentElement.clientWidth;
heightMax=document.documentElement.clientHeight;
}
else
{
widthMax=window.innerWidth-14;
heightMax=window.innerHeight;
}
setTimeout('fallingLeaves()',400);
}
/* ]]> */
// Stop hiding from incompatible browsers -->
</script>
</head>
<body onload="setLeaf();" >
<p><img src="images/leaf1.gif" id="leaf" style="position:absolute; left:0px; top:0px; visibility:hidden" alt="Image of a Leaf" /></p>
</body>
</html>
Hey everyone. Been racking my brain all day trying to figure out how to duplicate this code with the limited javascript knowledge I have been trying to learn. This code is a Dropdown menu of Yes or No, than a Select button that Opens up a Text Input directly below the dropdown. So far, It works great. My problem is I need at least two of these on the same page and I do not know how to go about it. I have tried changing values to accommodate adding another on the same form, but than both stop working. Can someone Please HELP! Thank you in advance. Code: <html>
<head>
<SCRIPT language="javascript">
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("id", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</SCRIPT>
</head>
<body>
<label>
<SELECT name="element">
<OPTION value="text" name="refer_yes" id="refer_yes">Yes</OPTION>
<OPTION value="text" name="refer_no" id="refer_no">No</OPTION>
</SELECT>
<INPUT type="button" value="Select" onclick="add(document.forms[0].element.value='')"/>
</label>
<span id="fooBar"> </span>
</body>
<html>
|
|||||||