|
JavaScript - Simple Fading Slideshow Problem
Sorry, I'm new in javascript and i can't understand what's wrong with my code.. I've spent some time searching for the solution, but i give up. For some of you may it be just a piece of cake, so maybe you can look at this:
Code: <script language="javascript">
var n_pics = 3;
var current = 1;
var opacity = 1;
var opacity_IE = 100;
function fade(how)
{
if(how==0)
{
if(opacity>0)
{
opacity = opacity - 0.1;
}
else return;
}
else
{
if(opacity<1)
{
opacity = opacity + 0.1;
opacity_IE = opacity * 100;
}
else return;
}
document.getElementById('fade_show').style = 'opacity:'+opacity+'; filter:alpha(opacity='+opacity_IE+')'; //break_point 1
var temp = 'fade('+how+')';
setTimeout(temp, 1000);
}
function main_loop()
{
fade(0); //break_point 2
if(current == n_pics)
{
current = 1;
}
else
{
current = current + 1;
}
document.getElementById('fade_show').innerHTML = '<img src="images/fade_show/'+current+'.jpg" />';
fade(1);
main_loop();
}
</script>
</head>
<body onload="main_loop();">
fade(0) means to fade out, and fade(1) - to fade in. on IE i get 'Member Not found' on break_point 1 and too much recursion at breake_point 2 can you help me? Similar TutorialsI have a jQuery Slideshow script that i'm using and it's all done in 6 lines. Code: $(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css. Code: .fadein {
position:relative;
width:100%;
height:300px;
background-color:#000;
overflow:hidden
}
.fadein img {
position:relative;
left:300px;
width:auto;
text-align:center;
top:0px;
}
jonathaneiger.com Alrighty so here's what I have. Live example: http://www.thestrikeforum.com/ex/ It's a image slideshow that dynamically gets all the images (via php) in the current directory and puts them into the slideshow array. The array then randomly displays the images in the slideshow (via javascript). There are 5 images in the folder rotateimage which also has the php script getimages.php in it. Currently only the first image fades in however I want all the images to fade in as the first one does. Codes: Php script that gets all the images for the array: PHP Code: <? //PHP SCRIPT: getimages.php Header("content-type: application/x-javascript"); //This function gets the file names of all images in the current directory //and ouputs them as a JavaScript array function returnimages($dirname=".") { $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ //if this file is a valid image //Output it as a JavaScript array element echo 'galleryarray['.$curimage.']="'.$file .'";'; $curimage++; } } closedir($handle); } return($files); } echo 'var galleryarray=new Array();'; //Define array in JavaScript returnimages() //Output the array elements containing the image file names ?> Main html page with the javascript: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="rotateimage/getimages.php"></script>
<script type="text/javascript">
var curimg=0
var max=galleryarray.length
var random=Math.floor(Math.random()*max)
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])
//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
random=Math.floor(Math.random()*max)
}
function initImage() {
imageId = 'slideshow';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
window.onload=function(){
setInterval("rotateimages()", 2500)
initImage()
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>
<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>
</html>
If anyone could assist me in doing so or can help me find a better way to do the fading images for the slideshow feel free to share.. here's the main page code WITHOUT the fading code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="rotateimage/getimages.php"></script>
<script type="text/javascript">
var curimg=0
var max=galleryarray.length
var random=Math.floor(Math.random()*max)
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])
//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
random=Math.floor(Math.random()*max)
}
window.onload=function(){
setInterval("rotateimages()", 2500)
initImage()
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>
<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>
</html>
Hey everyone, For a site I'm currently working on I needed the index page to start out blacked out, have an animated logo fade in, then fade out again before the main page contents fading up all without redirecting etc. I used the following to do this and it works except for one thing. Once the overlay div has faded, it seems to take around 20-30 seconds before the main contents becomes usable. Any ideas for a fix? Code: <body style="overflow:hidden;" onload="MM_preloadImages('images/enter_o.png')">
<div id="overlay" ><img border="0" src="images/animatelogo.gif" alt="img" /></div>
<script type="text/javascript">
/*<![CDATA[*/
function fade(o){
var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0];
this.obj=obj;
var img=document.getElementById(o.ID).getElementsByTagName('IMG')[0];
img.style.top=this.wwhs()[1]/2-img.height/2+'px';
this.mS=o.Duration||1000;
this.animate(img,new Date(),0,100,true);
img.style.visibility='visible';
}
fade.prototype={
animate:function(obj,srt,f,t,sc){
var oop=this,ms=new Date().getTime()-srt,now=Math.floor(sc=='s'?(t-f)*Math.sin(this.inc*ms)+f:sc=='c'?t-(t-f)*Math.cos(this.inc*ms):(t-f)/this.mS*ms+f);
this.now=Math.max(now,f<0||t<0?now:0);
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
if (ms<this.mS){
this.dly=setTimeout(function(){ oop.animate(obj,srt,f,t,sc); },10);
}
else if (sc){
this.animate(this.obj,new Date(),100,0,false);
}
else {
document.body.removeChild(obj);
}
},
wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}
}
setTimeout(function(){
new fade({
ID:'overlay',
Duration:11500
});
},10);
/*]]>*/
</script>
<table class="mainbody" width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div style="position:absolute; left: 50%; top: 50%; margin: -197px 0 0 -300px; height: 394px; width: 600px; text-align:center;" />
<iframe src="http://player.vimeo.com/video/******44?title=0&byline=0&portrait=0&color=000000" width="600" height="328" frameborder="0"></iframe>
<br /><br /><a href="films.php" class="entrytext"><img src="images/enter.png" id="Image1" onmouseover="MM_swapImage('Image1','','images/enter_o.png',1)" onmouseout="MM_swapImgRestore()"></a></div>
</td>
</tr>
</table>
</body>
So as a breakdown, the page should load black, remain black as a logo fades into it, plays through and fades out, followed by the main content fading up and becoming usable. All this happens as desired except after the main content is visible it takes ages to become active as if the overlay is still there :-\ Thanks So far I have this written up which does work well. However, the problem is if one toggles the fadeOut function while the fadeIn function is still in action. That causes the functions to collide and have to element being faded start flashing or freezing. Is there a simple way to prevent this? Thank you. Code: function fadeIn(elementId) {
var element = document.getElementById(elementId);
if(element.style.display === 'none') {
element.style.display = 'block';
element.style.opacity = '0';
}
if(element.style.opacity < 1) {
var opacityFloat = parseFloat(element.style.opacity);
element.style.opacity = opacityFloat + 0.1;
setTimeout("fadeIn('" + elementId + "')", 50);
}
}
function fadeOut(elementId) {
var element = document.getElementById(elementId);
if(element.style.opacity > 0) {
var opacityFloat = parseFloat(element.style.opacity);
element.style.opacity = opacityFloat - 0.1;
setTimeout("fadeOut('" + elementId + "')", 50);
}
if(element.style.opacity == 0) {
element.style.display = 'none';
}
}
Hello, looking for simple javascript slideshow script, similar to this: http://www.jimex.co.jp/veh_details.php?id=4541 I like the mousover effect when the main image is changed once the mouse is over the thumbnails on the right hand side. Has anyone got something like this? Thanks Hi everyone, I am a newbie Javascript programmer. I have gotten better lately and am starting creating scripts from scratch to test my knowledge. I wrote the script below and needless to say, it does not work... yet. I know I am not far and I need someone's help to tweak my script and let me know what was wrong with. That would be greatly appreciated. Anyone? I have this div in the middle of a page which has an image. I want the image.src to switch to the next image every 3 seconds. Here's my html code: Code: <body> <div id="slideShow"> <img src="pic3.jpg" id="image" /> </div> </body> Here's my js code: Code: window.onload = initLoad;
function initLoad()
{
// Create a new image object
oImage = new Image;
// tie the object image object with your target id in your html code
oImage = document.getElementById("image");
//Create a new date object
var oCurrDate = new Date();
// Create a new time object
var oCurrentTime = oCurrDate.getSeconds();
//Loop through all images in the document
for(var i=0; i<document.images.length; i++)
{
//the current image remains so as long as 3 seconds or less have passed
while(oCurrentTime <= oCurrentTime + 3)
{
// if 3 seconds have not passed, your current picture remains on the screen
oImage.src = document.images[i].src;
}
}
}
hi everybody, I need a help about making a slideshow script which could work with IE and Firefox, the code I have for it is work only on the IE, so hope if any one could help me in this issue.
Hi All, I accidentally damaged my slide show today and cant work out how to fix it. If you go to www.myav.com.au its on the home page. I had only links showing so I added the <ul id="slideshow"> tag and now I have the box coming up but its just blank. Any ideas? Thanks so much! I'm not sure whether this is a javascript or CSS related problem so sorry if I've posted this in the wrong place. I'm modifying a slideshow plugin to fit my website and have changed some of the dimensions of the slides. Now the next slide is coming in from the wrong position on the right hand side. I'm not sure how to fix this, can someone please help? http://ah.mjtippet.com/ Currently working on a slideshow for this website, and I've used the same code in the past but because I am now working with a wordpress template I'm having some problems. Link to slideshow The next image is loading underneath the current image and then moving up, which I need them images to stay in place of course. Code: <div id="lookbook">
<a href="http://www.axandapple.com/store/?cat=71" target="_self"><ul class="ppt">
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-1.jpg" ALT="Ax+Apple Presents The Witching Hour Collection"></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-2.jpg" ALT="Ax+Apple Nyx & Orion Necklaces"></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-3.jpg" ALT="Ax+Apple Odessa & Oracle Necklaces"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-4.jpg" ALT="Ax+Apple Jupiter & Naja Necklaces"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-5.jpg" ALT="Ax+Apple Nyx & Orion Necklaces"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-6.jpg" ALT="Ax+Apple Odessa & Oracle Necklaces and Snake Charmer Bracelet"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-7.jpg" ALT="Ax+Apple Jupiter & Naja Necklaces and Asteria Earrings"></img></li>
</ul></a>
<p style="text-align:center;"><button type="button" id="back">Back</button>
<button type="button" id="stop">Pause</button>
<button type="button" id="play">Play</button>
<button type="button" id="fwd">Forward</button></p>
</div>
<p>2011 Ax+Apple</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
$('#play').hide();
var cur = $('.ppt li:first');
var interval;
$('#fwd').click( function() {
goFwd();
showPause();
} );
$('#back').click( function() {
goBack();
showPause();
} );
$('#stop').click( function() {
stop();
showPlay();
} );
$('#play').click( function() {
start();
showPause();
} );
function goFwd() {
stop();
forward();
start();
}
function goBack() {
stop();
back();
start();
}
function back() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'first' )
cur = $('.ppt li:last');
else
cur = cur.prev();
cur.fadeIn( 1000 );
}
function forward() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
function showPause() {
$('#play').hide();
$('#stop').show();
}
function showPlay() {
$('#stop').hide();
$('#play').show();
}
function start() {
interval = setInterval( "forward()", 3000 );
}
function stop() {
clearInterval( interval );
}
$(function() {
start();
} );
</script>
Code: #lookbook{
position:relative;
}
ul.ppt{
position:absolute;
height:699px;
}
.ppt li{
list-style-type:none;
position:absolute;
top:0px;
left:0px;
height:699px;
}
.ppt img{
background-color:#FFF;
padding:5px;
top:0px;
position:absolute;
}
#lookbook p{
text-align:center;
z-index:99;
}
#lookbook button{
background-color:#FFF;
border:0;
padding:0 3px 0 3px;
color:#000;
font:12px "Courier", "Courier New", Courier, monospace;
}
Hi there, I am currently creating my first ever website and I am attempting to put in some javascript but I am having trouble, would it be possible for someone to guide me. I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lyons Design and Print</title>
<style type="text/css" media="all">
body
{
background-image:url('background.jpg');
}
.header {
font-size: 24pt;
font-weight: bold;
padding: 20px;
border-bottom: 1px solid #000;
text-align:center;
}
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d
border-width:1px 0;
text-align: center;
}
#nav li {
display:inline-block;
padding:0;
margin:0;
}
* html #nav li { display: inline; }
*+html #nav li { display: inline; }
#nav a:link,
#nav a:visited {
color:#000;
background:#0033CC;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:#0033CC;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#large format printing #nav-large format printing a,
#scanning #nav-scanning a,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a,
#large format photo copying #nav-large format photo copying a,
#contacts #nav-contacts a,
#about us #nav-about us a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#large format printing #nav-large format printing a:hover,
#scanning #nav-scanning a:hover,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover,
#large format photo copying #nav-large format photo copying a:hover,
#contacts #nav-contacts a:hover,
#about us #nav-about us a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="DesignPrinter.jpg"
var image2=new Image()
image2.src="print-design.jpg"
var image3=new Image()
image3.src="printingpress.jpg"
var image4=new Image()
image4.src="thermal.jpg"
//-->
</script>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</style>
</head>
<body>
<div class="header"><img src="logo.jpg"></div>
<ul id="nav">
<li id="nav-Home"><a href="Home.html">Home</a></li>
<li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
<li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
<li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
<li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
<li id="nav-Contacts"><a href="#">Contacts</a></li>
<li id="nav-About Us"><a href="#">About Us</a></li></ul>
<table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>
<p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
<embed src="beatles.mid" width="144" height="60">
</body>
PLEASE! I NEED HELP! I inherited this problem from a client who insists on keeping this template. I've got all of the images in the correct folder, the slideshow css is correct, but I'm not sure how to edit the Slideshow.js file to show the 2 additional images. The first 3 images work perfectly. I was able to swap custom images for the original images without a problem. Here is the Slideshow.js code Code: var $$ = $.fn;
$$.extend({
SplitID : function()
{
return this.attr('id').split('-').pop();
},
Slideshow : {
Ready : function()
{
$('div.tmpSlideshowControl')
.hover(
function() {
$(this).addClass('tmpSlideshowControlOn');
},
function() {
$(this).removeClass('tmpSlideshowControlOn');
}
)
.click(
function() {
$$.Slideshow.Interrupted = true;
$('div.tmpSlide').hide();
$('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');
$('div#tmpSlide-' + $(this).SplitID()).show()
$(this).addClass('tmpSlideshowControlActive');
}
);
this.Counter = 1;
this.Interrupted = false;
this.Transition();
},
Transition : function()
{
if (this.Interrupted) {
return;
}
this.Last = this.Counter - 1;
if (this.Last < 1) {
this.Last = 3;
}
$('div#tmpSlide-' + this.Last).fadeOut(
'slow',
function() {
$('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
$('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
$('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');
$$.Slideshow.Counter++;
if ($$.Slideshow.Counter > 3) {
$$.Slideshow.Counter = 1;
}
setTimeout('$$.Slideshow.Transition();', 4000);
}
);
}
}
});
$(document).ready(
function() {
$$.Slideshow.Ready();
}
);
The html code for the pages looks like this: Code: <div id='tmpSlideshow'>
<div id='tmpSlide-1' class='tmpSlide'>
<div class="banner1">
<div class="clear">
<div class="banner_inner">
<div class="clear">
<p>Care for the whole family</p>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
<div class="clear">
<ul>
<li>Newborn Care</li>
<li>Children</li>
<li>Teenagers</li>
<li>Young Adults</li>
<li>Seniors</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id='tmpSlide-2' class='tmpSlide'>
<div class="banner2">
<div class="clear">
<div class="banner_inner">
<div class="clear">
<p>Care for the whole family</p>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
<div class="clear">
<ul>
<li>Newborn Care</li>
<li>Children</li>
<li>Teenagers</li>
<li>Young Adults</li>
<li>Seniors</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id='tmpSlide-3' class='tmpSlide'>
<div class="banner3">
<div class="clear">
<div class="banner_inner">
<div class="clear">
<p>Care for the whole family</p>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
<div class="clear">
<ul>
<li>Newborn Care</li>
<li>Children</li>
<li>Teenagers</li>
<li>Young Adults</li>
<li>Seniors</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id='tmpSlide-4' class='tmpSlide'>
<div class="banner4">
<div class="banner">
<div class="banner_inner">
<div class="clear">
<p>Care for the whole family</p>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
<div class="clear">
<ul>
<li>Newborn Care</li>
<li>Children</li>
<li>Teenagers</li>
<li>Young Adults</li>
<li>Seniors</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="31" alt="" /></div>
</div>
</div>
<div id='tmpSlide-5' class='tmpSlide'>
<div class="banner5">
<div class="clear">
<div class="banner_inner">
<div class="clear">
<p>Care for the whole family</p>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
<div class="clear">
<ul>
<li>Weight Loss</li>
<li>Fit for Life</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Hi, Im using the following javascript to cycle through 3 images on my website header. http://www.dynamicdrive.com/dynamici...nslideshow.htm However, I have put it in a div layer and it works fine, except in Internet explorer, if you load the page in a small window and then maximise, it moves out of position. Similarly if you open the page maximised, and then make the page smaller, it again moves out of position. My page layout is centered on the web page. is there anyone who could help me? I'm teaching myself how to build websites; up until now I have made websites using tables within tables and it's all fairly straight forward, now I realise that divs and css allow you to do soooo much more! I have put these files in a temp folder on my website so not to over write the current site. Basically I have followed this online tutorial (http://www.cryer.co.uk/resources/jav...show_links.htm) but when I test the slideshow, it doesn't work. the link is: www.telecaretechnology.com/telecare2/index.html Since I have started writing this, my css file seems to have had a wobbly - I assume my problem is where I'm trying to use server-side include?? Is that the best way to add these files? the javascript I have used to make the slideshow run is he http://www.telecaretechnology.com/te...2/slideshow.js I would really appreciate any advice! Kind Regards, Jamie Hello, hoping someone can help. Have built a slide show for header using following, but there is a very annoying time lag between the photo changing and the caption changing (ie photo changes, then a brief moment later the caption changes). Can anyone tell me how to correct this so that the caption and the photo change simultaneously? Thanks in advance! <script type="text/javascript"> $(function() { $('#slideshow').cycle({ fx: 'fade', timeout: 3000, after: function() { $('#caption').html(this.alt); } }); }); </script> hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(my images here)
</script>
For the Links:
<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>
For the Image:
<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>
Not done any coding for a LONG time. I want to get the value of the opacity for a element. I'm using Nightly 9.0a1. Also, from what I have read Firefox should us this to SET the opacity style: Code: obj.style.opacity = opacity/100; But this does not see to work in the CSS. In the CSS the value ranges from 0 to 1. So 50% would be 0.5 My current function stops working before executing the alert command. I'm guessing i'm trying to get the style value wrong? Code: function fadeByid(objId) {
if (document.getElementById) {
obj = document.getElementById(objId);
opacity = obj.style.opacity;
alert(opacity);
if (opacity >= 100) {
setOpacity(obj, opacity);
opacity -= 10;
window.setTimeout("fadeByid('"+objID+"','"+opacity+")", 100);
}
}
}
Hey everyone, What I need to do is have my website so when it loads on the homepage for the first time its starts of with a blank (specified color) background, then the logo fades in the middle, then a few seconds later that all fades away to reveal the website. Is this possible without forwarding to separate pages and without flash? Thanks all. Hi guys! I'm trying to make a div layer (id "tehz") fade in using Java. Problem is, it doesn't go through the animation, it just skips to the last stage. If I put an alert to show me the value of "cat" at every step it works just fine. Can anyone please tell me what's the matter? Code: function vis(cat) {
if(cat<=90) {
// alert(cat)
document.getElementById("tehz").style.opacity=cat/100;
document.getElementById("tehz").style.filter="alpha(opacity="+cat+")"
cat=cat*1+1
setTimeout(vis(cat),1000);
}
}
|
|||||||