|
JavaScript - Using Fade Animation With Images & Links - Not Working
Hi. I'm Matthew, the creator of the Easing Slider Wordpress plugin. Currently I'm working on the next update of the slider which is to allow the user to assign a link to each image. This is working fine with the slide animations but is creating problems with the fade animation (note I'm using jQuery). Here are the two issues:
1) Using .animate({opacity:0}) & .animate({opacity:1}) the slider is only linking to the link assigned to the last image in the slider. The links are supposed to link: 1. google.com, 2. hotmail.com & 3. fadebook.com. However the slider is only linking to the last link (facebook.com). 2) Using .fadeIn & .fadeOut everything appears to work correctly and the links correspond to the images however when using the pagination before the image has finished fading can cause the images to disappear or appear not fully faded. You can see the overall code he http://pastebin.com/9JwaM9tg (check lines 72, 215 & 216) Example (using .animate): http://www.matthewruddy.com/demo/ I've spent ages trying to figure this out but I really am struggling and cannot find a solution. Many people use the fade effect and I don't particularly want to get rid of it but I will have to if I can't find a solution. I would appreciate if anyone could help me out. Thanks in advance. Matthew. Similar TutorialsHi, I'm building an html web page (no flash) and was wondering if it was possible to fade (or slide up from the horizontal rule) my navigation links into the page, one after the other, for the home page only, and ideally only for the first session visit. Aside from looking cool, I think it will draw the attention of the visitor and let them know where their main links are. I've experimented with animated .gif's, but not only was the implementation buggy, it didn't give me the flexibility to quickly edit the links. I'm thinking some sort of JavaScript (or css?) can accomplish this, but I don't know the first thing about writing JavaScript and I couldn't find any script on the web. Does anyone know if such a script does exist, or if there's a better way I should go about doing this? Thanks! Here's the structure for my main index: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="templates/styles.css"> <title>Test</title> </head> <body class="main"> <center> <table border="0" cellspacing="0" cellpadding="0" width="800" class="header"> <tr> <td align="left" valign="bottom" width="455" height="45"><a href="index.html" class="nav"><img src="images/logo.png" alt="Logo"></a></td> <td align="right" valign="bottom" width="146" height="45"> <a href="link1/index.html" class="nav">Link1</a> </td> <td align="right" valign="bottom" width="103" height="45"> <a href="link2/index.html" class="nav">Link2</a> </td> <td align="right" valign="bottom" width="96" height="45"> <a href="link3/index.html" class="nav">Link3</a> </td> </tr> <tr> <td align="center" valign="top" width="800" height="10" colspan="4"><hr noshade></td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" width="800"> <tr> <td width="800" height="10"></td> </tr> <tr> <td align="center" valign="top" width="800" height="440"> CONTENT WILL GO HERE </td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" width="800"> <tr> <td align="center" valign="bottom" height="45" class="footer"> <hr noshade> </td> </tr> </table> </center> </body> </html> I found the effect I would like to achieve here, but the code doesn't allow me to make turn the text into links, and I would like to leave the links where they are in the html and maybe the JavaScript could call each link by id? http://www.codingforums.com/showthre...072#post923072 Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
width:600px;
margin:auto;
}
#container p{
height:100%;
}
#p4 {
font-family:'times new roman',serif;
font-size:18px;
color:#006;
text-align:justify;
}
</style>
<script type="text/javascript">
var lines=new Array();
lines[0]='text1';
lines[1]='text2';
lines[2]='text3';
lines[3]='text4';
lines[4]=
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.'+
'Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus '+
'nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. '+
'Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, '+
'nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,'+
'ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate '+
'ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta '+
'bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.';
var c=0;
var value=0;
var speed=20;
function addLines() {
if(c>=lines.length) {
return;
}
par=document.createElement('p');
par.setAttribute('id','p'+c);
par.appendChild(document.createTextNode(lines[c]));
document.getElementById('container').appendChild(par);
setOpacity();
}
function setOpacity() {
obj=document.getElementById('p'+c);
if(value>100) {
value=0;
c++;
return addLines();
}
if(obj.filters) {
obj.style.filter='alpha(opacity='+value+')';
}
else {
obj.style.opacity=value/100;
}
value++;
setTimeout('setOpacity()',speed);
}
window.onload=function() {
addLines();
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Hi, I have problem with javascript for image effects... Here is the LINK... login with theese nick and pass: nick: google pass: googleads the problem: When you log into, on the top of the page are 4 images with fade effect... But effect is wrong. When I came first I see those images in full collors. How to change my script to show them in grey when I first came? Thanks in advance... Hi guys. I'm trying this tutorial to get a sweet looking menu. http://snook.ca/archives/javascript/...ge-animations/ I've followed all the steps but I seem to be missing something, because the transition is just a simple hover transition. Can someone check what I'm doing wrong, please? Thank you very much! JS Code Code: $('a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -150px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
HTML Code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="javascript.js"></script> <script type="text/javascript" src="jquery.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html> Styles code Code: ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
width:100px;
height:50px;
margin:0;
padding:0;
text-align:center;
}
li a {
display:block;
padding:0;
height:100%;
color:#FFF;
text-decoration:none;
}
li a {
background:url(animation.jpg) no-repeat 0 0;
}
li a:hover {
background-position:0px -150px;
}
Dear all, I have been trying to replicate a cool javascript effect that appears here. See the funky images fading in when hovering with mouse? I want that ;-) By using Firebug I think I have narrowed down the code needed to: Code: <div id="main" class="clearafter">
<div class="inner clearafter">
<div class="columns clearafter">
<div class="project hovers column" style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);">
<a href="http://mountfolly.co.uk" class="image">
<img width="274" height="137" alt="project" src="/images/41_project.jpg" class="screenshot">
<img width="274" height="137" alt="project" src="/images/7_project.jpg" class="text" style="opacity: 0; display: inline;">
</a>
<h3>Text and titles etc...</h3>
<p>etc etc etc...</p>
</div>
<div style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);" class="project hovers column"></div>
</div>
</div>
</div>
<script type="text/javascript" src="/javascript/global.js"></script>
and this (which I put into a javascript file called global.js): Code: /* project listings */
// to deal with IEs opacity idiocy
$(function() {
$('.project.hovers .text').css({opacity: 0}).show();
$('.project.hovers').css({cursor: 'pointer'}).click(function() {
location.href = $('h3 > a', this).attr('href');
});
});
$('.project.hovers').hover(
function () {
$('.text',this).stop().fadeTo('100',1);
$(this).stop().animate({borderTopColor: '#E9E9E9', borderRightColor: '#E9E9E9', borderBottomColor: '#E9E9E9', borderLeftColor: '#E9E9E9', backgroundColor: '#EEE' }, 100)
},
function () {
$('.text',this).stop().fadeTo(1000,0);
$(this).stop().animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF', backgroundColor: '#FFF' }, 1000)
}
);
But when I re-create the files (index.html, global.js, and replacement images) all I get is this. No hover effect... Any ideas what is missing? Would appreciate some help. Thanks, Wysiwyger PS: If you fancy a laugh, check these out Hi We've been trying to work out the solution to this problem all day now, and no luck. So I'm hoping someone here maybe able to help. We're using a fade image slideshow from : http://www.javascriptkit.com/script/...tionshow.shtml On our webpage: http://lovelyhotels.co.uk/lvm/contact.htm It works perfectly in Firefox, Chrome and Safari. However in I.E. ( were using v.9) it shows no images at all, just a blank space The code is exactly the same as the page on javascriptkit yet his images fade as they should in IE and ours do not show at all. Anyone got any ideas at all what maybe wrong Many thanks! Hi, I reckon this is pretty simple for u guys but I'm new to jquery code. Adding the code for the fade buttons breaks the nivoslider - any ideas? (All the below in header - jquery-1.3.2.min.js is a file on my machine) <link href="style.css" rel="stylesheet" type="text/css" /> /* this below is nivoslider code */ <link rel="stylesheet" href="nivoslider/nivoslider/nivo-slider.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="nivoslider/nivoslider/jquery.nivo.slider.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> /* this below is fade button code - */ <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.static,.home,.products,.ordering,.contact').append('<span class="hover"></span>').each(function () { var $span = $('> span.hover', this).css('opacity', 0); $(this).hover(function () { $span.stop().fadeTo(500, 1); }, function () { $span.stop().fadeTo(500, 0); }); }); }); </script> </head> This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff Text: 1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded? 2.variables? any help would be appreciated! Thanks, Cookies, whatever this forum gives out, you may receive! I' am trying to do a frame by frame animation, lik an animated gif. I am using svg (vector graphics) and IE9 has native support for svg. The code functions in every other browser but IE9 plays the animation once then nothing. If you would like to try and not have svg files you can use whatever gif,jpg or png just put an img-tag where i have embed. Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
/*One div per image all uses this class*/
.eyesPos {
position:absolute;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}
#eye_wrapper{/*This is a master div for easy placement of the others*/
position:absolute;
width:80px;
height:50px;
z-index:2;
left: 275px;
top: 200px;
}
</style>
<script>
var eyes=["a","b","c","d"];//Image id in this array
var startAnim=setInterval(visaOga,100);//Animation speed
function visaOga(){
document.getElementById(eyes.splice(0,1)).style.display="block";
if(eyes.length==0){
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
dBort = function(){
document.getElementById("d").style.display="none";
eyes=["a","b","c","d"];
}
setTimeout(dBort,1500);//So last image is shown 1.5 sec
return;//Aborts - dBort -. Sequence can start over
if(document.getElementById("d").style.display=="none"){
startAnim;//Strts sequence if last image invisible
}
}
}
</script>
</head>
<body>
<!--Images in own div invisible at start-->
<div id="eye_wrapper">
<div class="eyesPos" id="a" style= display:none;>
<embed src="0.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="b" style= display:none;>
<embed src="1.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="c" style= display:none;>
<embed src="2.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="d" style= display:none;>
<embed src="3.svg" width="80" height="50" />
</div>
</div>
</body>
</html>
Ok, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. I'm a php developer and have come across a mind boggling issue involving Javascript. I'm uploading images to a server without issue. They are being returned to the page in thumbnails. The script works great but I can't get the links for the images that I've uploaded. If I right click and view the image I can see the link on the server. How would I go about getting that link? If I look at the source code the link isn't present. Its a dynamically generated link for the uploaded image. Being completely unfamiliar with Javascript I'm hoping someone here can help me out. Here's the code I'm working with: Code: <input type="file" name="u" size="40" style="width:500px"/><br/>
</div>
<style type="text/css">
.flashUpload {width : 151px;}
</style>
<script>
document.write('<script type="text/javascript" language="JavaScript" src="mytoken"' + '><' + '/script>');
function processUrlResponse(pic,error,window) {
if ( window.parent != 'undefined' )
$(window).remove();
}
var errorTexts = {
'ERROR' :'There was an error uploading your picture.',
'FS' : 'The file size of the picture you attempted to add is too large. Please reduce your picture\'s file size before adding it again.',
'FP' : 'You specified a picture file that could not be found on your computer.',
'ME' : 'There was an error uploading your picture. ',
'FC' : 'The content of your picture file is corrupted.',
'FF' : 'There was a problem with the format of your picture file.',
'SD' : 'There was a problem connecting to Picture Services.'
};
var popupMsg =
'<CENTER class="modal">' +
'<TABLE height=210 cellSpacing=0 cellPadding=0 width=240 border=1>' +
'<TR vAlign=top align=left><TD>' +
'<TABLE cellSpacing=0 cellPadding=6 width="100%" border=0>' +
'<TR><TD align=right><div class="closeBtn close"> </div></TD></TR>' +
'<TR align=middle>' +
'<TD><B><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#003399 size=4><I>' +
'Loading Pictures' +
'</I></FONT><P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#003399 size=2>' +
'Please wait.' +
'</B></FONT><BR><BR><img src="myupload.com/busy.gif"/></p></TD></TR></TABLE></TD></TR></TABLE></CENTER>';
var imageUpload = {
disableFlashResize :true,
uploadUrl : 'myupload.com',
dataField : 'Photo',
thumbnailSizeId : '14',
defaultSizeId : '18',
removeText : 'Remove',
cancelText : 'Cancel',
retryText : 'Retry upload',
uploadingText : 'Image uploading',
flash_button_width : 151,
flash_button_height : 18,
flash_button_text : '<span class="button">Select Images</span>',
flash_button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt;font-weight:bold;} .buttonSmall { font-size: 10pt; }',
flash_button_text_top_padding : 1,
flash_button_text_left_padding : 11,
errorTexts : errorTexts,
popupMsg : popupMsg
};
My head is spinning. Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need. Here is the code relevant to my issue: HTML: Code: <div id="faqBox"> <h1 id="faqHeader"><u>F.A.Q's</u></h1> <ul> <li><a href="#" onclick="">What is the purpose of this website?</a></li> <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li> <li><a href="#">Why was this award created?</a></li> <li><a href="#">How do we nominate somebody?</a></li> <li><a href="#">How are people presented with this award?</a></li> </ul> </div> <div id="faqInfoBox"> <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" /> </div> CSS: Code: #faqInfoBox {width: 40%;
border: 5px ridge;
height: 310px;
background: #606626;
float: right;
margin-right: 3%;}
#faqBox ul li{font-family: trebuchet ms;
line-height: 30px;
list-style-type: square;}
JS: Code: var imgArray = new Array(4);
imgArray[0] = 'images/content1.png';
imgArray[1] = 'images/content2.png';
imgArray[2] = 'images/content3.png';
imgArray[3] = 'images/content4.png';
imgArray[4] = 'images/content5.png';
var currIndex = 0;
function imgChange(that)
{
if(currIndex < myImages.length - 1) {
that.src = myImages[++currIndex];
}else {
currIndex = 0;
that.src = myImages[currIndex];
}
}
The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site he http://abjava.host22.com/Site1/ if you would care to take a look. I don't want to be fed the answer but just some pointers/tips on what I could do. I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created). I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me. Thank you very much in advance if anyone can help. Regards, LC. Hello, I need the links to the rotating images to open in a new window. Is there an easy way to do this? Here is my code: [CODE] <script type="text/javascript"> var preload_ctrl_images=true; //And configure the image buttons' images he var previmg='left.gif'; var stopimg='stop.gif'; var playimg='play.gif'; var nextimg='right.gif'; var slides=[]; //FIRST SLIDESHOW //configure the below images and descriptions to your own. slides[0] = ["/pics/nav/home2/music-club_manatella.jpg", "", "/progs/main/manatella.pdf"]; slides[1] = ["/pics/nav/home2/teen-read-week2011.jpg", "", "/teens/teen-read-week2011.pdf"]; slides[2] = ["/pics/nav/home2/oceanway-express.jpg", "", "/lib/branches/OWY.html"]; slides[3] = ["/pics/nav/home2/jea-green.jpg", "", "/progs/jpl/home-energy-evaluation.html"]; slides[4] = ["/pics/nav/home2/childrens-summer-reading.jpg", "", "/kids/kids-summer-reading2011.pdf"]; slides[5] = ["/pics/nav/home2/teen-summer-reading.jpg", "", "/teens/teens-summer-reading2011.pdf"]; slides[6] = ["/pics/nav/home2/internet-safety.jpg", "", "/Training/Internet-Safety/internet-safety.html"]; slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed //above slide show uses only the defaults </script> <script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript"> </script> [CODE] [URL]http://jpl.coj.net Thank you so much for your help, Elbee Hi all I've been looking now for over a week on how create this http://instances.110mb.com/ effect when you hover over the ships on that page. I would be eternally grateful for any ideas how to replicate this effect. Thanks Rob Hey Im trying to add links in the images for EasySlide but I cant see to see where to put it..... Here is the .js code: Code: /**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/
* @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.handStopped = false;
this.animating = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.contentDiv = this.scroller.down('div');
this.current = $(this.contentDiv.children[0].id);
this.sectionWidth = this.contentDiv.children[0].getWidth();
this.slideRelations = {};
this.options = Object.extend({
effectType: 'mosaic',
duration: 3.0,
frequency: 3,
eRows: Prototype.Browser.IE ? 3 : 6,
eCols: Prototype.Browser.IE ? 6 : 12,
eColor: '#FFFFFF'
}, options || {});
this.effects = {
'scroll' : this.scroll,
'speedscroll' : this.speedscroll,
'fade' : this.fade,
'blend' : this.blend,
'mosaic' : this.mosaic
};
this.sections = this.wrapper.getElementsBySelector('div.section');
for (var i = 0; i < this.sections.length; i++) {
var nextSibling = this.sections[i].nextSiblings()[0];
if (nextSibling){
this.slideRelations[this.sections[i].id] = nextSibling.id;
} else {
this.slideRelations[this.sections[i].id] = this.sections[0].id;
}
this.effects[this.options.effectType].bind(this)().prepare(this.sections[i], i);
}
this.events = {
mouseover: this.pause.bind(this),
mouseout: this.resume.bind(this)
};
this.addObservers();
if (this.options.autoGlide) {
this.start();
} else {
this.handStopped = true;
}
},
scroll: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
$(el).setStyle('left: ' + glider.sectionWidth + 'px;');
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
new Effect.Parallel([
new Effect.Move(elementIdToShow, {
sync: true,
x: 0,
y: 0,
mode: 'absolute'
}),
new Effect.Move(glider.current.id, {
sync: true,
x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
y: 0,
mode: 'absolute'
})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}
}
},
speedscroll: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
$(el).setStyle('left: ' + glider.sectionWidth + 'px;');
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
$(elementIdToShow).setStyle({zIndex: 5});
$(glider.current.id).setStyle({zIndex: 1});
var currentId = glider.current.id;
new Effect.Move(elementIdToShow, {
x: 0,
y: 0,
mode: 'absolute',
transition: Effect.Transitions.linear,
duration: glider.options.duration / 2,
afterFinish: function() {
moveCurrent.cancel();
$(currentId).setStyle('left: ' + (direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth) + 'px;');
glider.setAnimating(false);
}
});
var moveCurrent = new Effect.Move(glider.current.id, {
x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
y: 0,
mode: 'absolute',
transition: Effect.Transitions.linear,
duration: glider.options.duration
});
}
}
},
fade: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
el.setOpacity(0);
$(el).setStyle({ zIndex : '0' });
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
$(el).setStyle({ zIndex : '998' });
$$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : '998' });
$(glider.current.id).setStyle({ zIndex : '0' });
new Effect.Opacity(glider.current.id, {
duration: glider.options.duration,
from: 1.0,
to: 0.0,
afterFinish: function() {
new Effect.Opacity(elementIdToShow, {
duration: glider.options.duration,
from: 0.0,
to: 1.0,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}.bind(glider)
});
}
}
},
blend: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
el.setOpacity(0);
$(el).setStyle({ zIndex : '0' });
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
$(el).setStyle({ zIndex : '998' });
$$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : '998' });
$(glider.current.id).setStyle({ zIndex : '0' });
new Effect.Parallel([
new Effect.Opacity(glider.current.id, {
sync: true,
duration: glider.options.duration,
from: 1.0,
to: 0.0
}),
new Effect.Opacity(elementIdToShow, {
sync: true,
duration: glider.options.duration,
from: 0.0,
to: 1.0
})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}
}
},
mosaic: function() {
var glider = this;
var delayedAppear = function(eSquare) {
var opacity = Math.random();
new Effect.Parallel([
new Effect.Appear ( eSquare, {from: 0, to: opacity, duration: this.options.duration} ),
new Effect.Appear ( eSquare, {from: opacity, to: 0, duration: this.options.duration/1.25} )
], {sync: false});
};
return {
prepa function(el, i) {
if (i > 0) {
el.setStyle({ zIndex : 0 });
el.hide();
} else {
el.setStyle({ zIndex : 999 });
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
if (i == (glider.sections.length - 1)) {
glider.eSquares = [];
var elDimension = el.getDimensions();
var elWidth = elDimension.width;
var elHeight = elDimension.height;
var sqWidth = elWidth / glider.options.eCols;
var sqHeight = elHeight / glider.options.eRows;
$R(0, glider.options.eCols-1).each(function(col) {
glider.eSquares[col] = [];
$R(0, glider.options.eRows-1).each(function(row) {
var sqLeft = col * sqWidth;
var sqTop = row * sqHeight;
glider.eSquares[col][row] = new Element('div').setStyle({
opacity : 0,
backgroundColor : glider.options.eColor,
position : 'absolute',
zIndex : 5,
left : sqLeft + 'px',
top : sqTop + 'px',
width : sqWidth + 'px',
height : sqHeight + 'px'
});
el.up('div').insert(glider.eSquares[col][row]);
}.bind(glider))
}.bind(glider));
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : 999 });
$(glider.current.id).setStyle({ zIndex : 0 });
new Effect.Parallel([
new Effect.Fade(glider.current.id, {sync: true}),
new Effect.Appear(elementIdToShow, {sync: true})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
$R(0, glider.options.eCols-1).each(function(col) {
$R(0, glider.options.eRows-1).each(function(row) {
var eSquare = glider.eSquares[col][row];
var delay = Math.random() * (glider.options.duration / 3) * 1000;
setTimeout(delayedAppear.bind(glider, eSquare), delay);
}.bind(this))
}.bind(this));
}
}
},
setAnimating: function(flag) {
this.animating = flag;
if (flag) {
$$('.easyslidecontrolwr')[0].addClassName('disabled');
} else {
$$('.easyslidecontrolwr')[0].removeClassName('disabled');
}
},
addObservers: function(){
this.wrapper.observe('mouseover', this.events.mouseover);
this.wrapper.observe('mouseout', this.events.mouseout);
var descriptions = this.wrapper.getElementsBySelector('div.sliderdescription');
descriptions.invoke('observe', 'mouseover', this.makeActive);
descriptions.invoke('observe', 'mouseout', this.makeInactive);
//Nubmbers
var controls = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidedirect');
controls.invoke('observe', 'click', this.numClick.bind(this));
//Arrows
var stop = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidestop');
stop.invoke('observe', 'click', this.stop.bind(this));
var play = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideplay');
play.invoke('observe', 'click', this.start.bind(this));
var prev = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideprev');
prev.invoke('observe', 'click', this.previous.bind(this));
var next = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidenext');
next.invoke('observe', 'click', this.next.bind(this));
},
numClick: function(event){
var element = Event.findElement(event, 'a'); /*clicked link*/
var nextElementId = element.href.split('#')[1];
var direction = 'normal';
for (var i in this.slideRelations) {
if (i === this.current.id) {
direction = 'normal';
break;
}
if (i === nextElementId) {
direction = 'reverse';
break;
}
}
this.animate(nextElementId, direction);
Event.stop(event);
},
animate: function(elementIdToShow, direction){
if (this.animating || this.current.id == elementIdToShow) {
return;
}
this.setAnimating(true);
this.toggleControl($$('a[href="#' + elementIdToShow + '"]')[0]);
this.effects[this.options.effectType].bind(this)().animate(elementIdToShow, direction);
this.current = $(elementIdToShow);
},
next: function(event){
var nextMove = '';
nextMove = this.slideRelations[this.current.id];
this.animate(nextMove, 'normal');
if (event) {
Event.stop(event);
}
},
previous: function(event){
var prevMove = '';
for (var i in this.slideRelations) {
if (this.slideRelations[i] == this.current.id) {
prevMove = i;
break;
}
}
this.animate(prevMove, 'reverse');
if (event) {
Event.stop(event);
}
},
makeActive: function(event){
var element = Event.findElement(event, 'div');
element.addClassName('active');
},
makeInactive: function(event){
var element = Event.findElement(event, 'div');
element.removeClassName('active');
},
toggleControl: function(el){
if (!el) return false;
$$('.easyslidercontrol a').invoke('removeClassName', 'active');
el.addClassName('active');
},
stop: function(event){
this.handStopped = true;
clearTimeout(this.timer);
Event.stop(event);
},
start: function(event){
this.handStopped = false;
this.periodicallyUpdate();
if (event) {
Event.stop(event);
}
},
pause: function(event){
if (!this.handStopped) {
clearTimeout(this.timer);
this.timer = null;
}
Event.stop(event);
},
resume: function(event){
if (!this.handStopped) {
this.periodicallyUpdate();
}
},
periodicallyUpdate: function(){
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency * 1000);
}
});
Somewhere there each time a image appears I want it to go to a certain link (for example purposes: google.com). How can I do this? I imagine there is a onClick event somewhere in there but I just cannot find it. Thanks! hey guys this is my first post, looking at the sheer wwealth of knowledge on here i thought you guys would be the best people to ask. I have created a photography website myself and coded it all in dreamweaver cs4. Now i have created it using html, as i didnt want to limit it to flash users and loading times etc etc. So today i found myself a nice simple slideshow tool that uses html and javascript. i created it using a site online (which i will not post as i dont think we are allowed to post to online sites). The slideshow loads images up in the background, and it plays them in a random order. Now i am able to define individual image links to either a url of the an image, or point it to individual images, listing them one by one in my coding, which as a photographer having differet galleries is goign to be a royal pain when i want to have new images showing up. So my idea is to replace the code that retrieves in dividual images from url's, to replace it with a piece of code that will display an image from a list of about 7 or 8 folders on my server all containing images.... i.e. displays an image from the folder .../images/models/pic01.jpg then it brings up an iamge from a different folder .../images/portrait/pic08.jpg. Is there a way to do this and how can i go about it? this is the code i currently have: Code:
<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();
// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["/images/models/photo01.jpg", "", ""];
theimage[1]=["/images/models/photo02.jpg", "", ""];
theimage[2]=["/images/models/photo03.jpg", "", ""];
theimage[3]=["/images/models/photo04.jpg", "", ""];
theimage[4]=["/images/models/photo05.jpg", "", ""];
///// Plugin variables
playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
dotrans=1; // if value = 1 then there are transitions played in IE
transtype='revealtrans';// 'blendTrans' or 'revealtrans'
transattributes='0';// duration=seconds,transition=#<24
//#####
//key that holds where in the array currently are
i=0;
//###########################################
//if random
function SetRandom() {
tempimage = new Array();
for(p=0; p<theimage.length; p++){
for(p1=0; p1>-1; p1) {
tempNum = Math.floor(Math.random()*theimage.length)
if(!tempimage[tempNum]){
tempimage[tempNum]=theimage[p];
break;
}
}
}
for(p=0;p<theimage.length;p++)theimage[p]=tempimage[p];
}
//if random order
SetRandom()
//###########################################
window.onload=function(){
//preload images into browser
preloadSlide();
//set transitions
GetTrans();
//set the first slide
SetSlide(0);
//autoplay
PlaySlide();
}
//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;
//switch the image
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
document.images.imgslide.src=theimage[i][0];
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')
}
//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}
//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}
//###########################################
//desc: picks the transition to apply to the images
function GetTrans() {
//si=document.slideshow.trans.selectedIndex;
if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
dotrans=0;
}
else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
dotrans=1;
transtype='blendTrans';
document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
}else{
dotrans=1;
transtype='revealtrans';
if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
}
}
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}
</script>
then this is the little bit of html Code: <!-- slide show HTML -->
<form name="slideshow">
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onMouseOver="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
</table>
</form>
<!-- end of slide show HTML -->
hope someone can shed a little light on this for me thank you Chris I'm a beginner. My links are not working in this js script. The menu renders properly, but nothing happens when I click the link. Thanks, Ed [code] <HTMl> <head> <title>JavaScript Example</title> <script language="JavaScript"> // Create array to hold four URLs; var dest = new Array(4); dest[0] = window.location.href; dest[1] = "http://www.journey.maryanngoble.com/"; dest[2] = "http://www.facebook.com/bluegrasscreative/"; dest[3] = "http://www.campbellsville.edu"; function go(d) { // Change location of current window one selected from menu // d.menu.options.selectedIndex returns a number that corresponds // to the choice they selected in the pop up menu on the form // If a user selected the first choice, selectedIndex = 0 and the // URL will be set to dest[0] or http://www.bluegrasscreative.com/ window.location.href = dest[d.destination.options.selectedIndex]; // Open new window with selected location // var x = window.open(dest[d.destination.options.selectedIndex],"New Window"); // To set the URL for another frame in this frameset // top.framename.location.href = dest[d.menu.options.selectedIndex]); } </script> </head> <body bgcolor="white"> <form name="x"> <label for="destination"><h3>Where do you want to go?</h3></label> <select id="destination" onchange="go(x)"> <option>Quick Links</option> <option value="1">MaryAnn's blog</option> <option value="2">BGC Facebook</option> <option value="3">Campbellsville University</option> </select> </form> </body> </html> [code] I hate javascript.... OK, here's my latest challenge with Javascript. I recently went into twp php files and made a few very minor changes to some outdated $date functions. Now, I have three small icons for 'copy', 'paste','delete' using the javascript 'onclick' function that have stopped working. In fact, when I replace the two recently revised files with the originals, these icons no longer work there either. Any help would be appreciated. I'm simply at a total loss for ideas here. From the primary php file is the relevant lines of source code....As far as I can tell, the second paragraph in each area is returning a 'null' value; i.e. o1a.options.selectedIndex is null. Code:
function aCopy(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
avail_1a = o1a.options.selectedIndex;
avail_1b = o1b.options.selectedIndex;
avail_2a = o2a.options.selectedIndex;
avail_2b = o2b.options.selectedIndex;
avail_3a = o3a.options.selectedIndex;
avail_3b = o3b.options.selectedIndex;
}
function aPaste(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
o1a.options.selectedIndex = avail_1a;
o1b.options.selectedIndex = avail_1b;
o2a.options.selectedIndex = avail_2a;
o2b.options.selectedIndex = avail_2b;
o3a.options.selectedIndex = avail_3a;
o3b.options.selectedIndex = avail_3b;
}
function aDelete(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
o1a.options.selectedIndex = 0;
o1b.options.selectedIndex = 0;
o2a.options.selectedIndex = 0;
o2b.options.selectedIndex = 0;
o3a.options.selectedIndex = 0;
o3b.options.selectedIndex = 0;
From the supporting php file are the following lines of code.... Code: $s .= "<td nowrap=nowrap class=calendar style='border-left:1px dashed #000;'>";
$s .= "<a href='javascript:void(0);' onclick=\"aCopy('$year-$month-$d');\"><img src='../admin/_calendar/Copy.gif' alt='Copy Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aPaste('$year-$month-$d');\"><img src='../admin/_calendar/Paste.gif' alt='Paste Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aDelete('$year-$month-$d');\"><img src='../admin/_calendar/Delete.gif' alt='Delete/No Availability' width='16' height='16' border='0' /></a>";
$s .= "</td>";
None of these lines of code were changed or altered when I was updating the code. Any thoughts or suggestions would be deeply appreciated? Talltom I have a problem when changing images and image maps with mouseover and click events in IE. Firefox, Chrome and Safari all work well but IE does not. It's hard to describe but when I mouse over a hot spot the image changes and then right away changes back. you can see it here: here is the Javascript code: Code: var current_overID = "";
var last_overID = "";
function item (img_name,width,height)
{
img_prefix = img_name;
this.slide_img = new Image (width,height);
this.slide_img.src = "http://www.dsisyr.com/images/stories/DeltaV/" + img_prefix + ".jpg";
}
function new_item (img_name,width,height)
{
item [img_name] = new item (img_name,width,height);
}
function mouseover (itemID, mapID)
{
current_overID = itemID;
if (current_overID != last_overID) {
document.deltavmap.src = item [current_overID].slide_img.src;
document.deltavmap.useMap=mapID;
}
}
new_item ("DSI-DeltaV1",700,300);
new_item ("DSI-DeltaV1-2-1",700,300);
new_item ("DSI-DeltaV1-2-2",700,300);
.....many more
<MAP NAME="deltav">
<AREA SHAPE="RECT" COORDS="27,27,219,53" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng')" window.defaultStatus='' window.status='Engineering' return true >
<AREA SHAPE="RECT" COORDS="27,74,171,97" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-3-1', '#sw')" window.defaultStatus='' window.status='Software'; return true >
<AREA SHAPE="RECT" COORDS="27,122,270,145" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-4-1', '#doc')" window.defaultStatus='' window.status='Documentation'; return true >
<AREA SHAPE="RECT" COORDS="27,167,156,195" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-5-1', '#sup')" window.defaultStatus='' window.status='Support'; return true >
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<MAP NAME="eng">
<AREA SHAPE="RECT" COORDS="38,52,244,75"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng') "
window.defaultStatus=''
window.status='Batch Processing' return true
>
<AREA SHAPE="RECT" COORDS="40,82,230,103"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-2', '#eng')"
window.defaultStatus=''
window.status='Control Modules' return true
>
<AREA SHAPE="RECT" COORDS="40,112,143,136"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-3', '#eng')"
window.defaultStatus=''
window.status='Graphics' return true
>
<AREA SHAPE="RECT" COORDS="40,141,176,168"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-4', '#eng')"
window.defaultStatus=''
window.status='ProtoTyping' return true
>
<AREA SHAPE="RECT" COORDS="24,224,84,234"
HREF="#" OnClick="mouseover('DSI-DeltaV1-3-1', '#sw')"
window.defaultStatus=''
window.status='Software' return true
>
<AREA SHAPE="RECT" COORDS="24,236,124,247"
HREF="#" OnClick="mouseover('DSI-DeltaV1-4-1', '#doc')"
window.defaultStatus=''
window.status='Documentation' return true
>
<AREA SHAPE="RECT" COORDS="25,248,76,261"
HREF="#" OnClick="mouseover('DSI-DeltaV1-5-1', '#sup')"
window.defaultStatus=''
window.status='Support' return true
>
<AREA SHAPE="RECT" COORDS="620,240,699,399" HREF="#" OnClick="mouseover('DSI-DeltaV1', '#deltav')" window.defaultStatus='' window.status='deltav'; return true >
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
... many others
Can any one tell me what i need to do to fix this in IE? Thanks! Fayette |
|||||||