|
JavaScript - Image Fade And Cycle Problem
Hi,
I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located: Code: // create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
"header/images/tankimage2.gif",
"header/images/tankimage3.gif",
"header/images/tankimage4.gif")
Here is the code in the master page which finds the javascript: Code: <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>" type="text/javascript"></script>
Here is the function call in the masterpage to fade and cycle the images: Code: <body onload="FadeAndCycleImages()"> Here is the code in the masterpage which references the cycling images: Code: <span class="fadingimages">
<img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage" />
</span>
Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated. Thank you, petela Similar TutorialsHello everybody, I'll quit new as it comes to programming, so please forgive this nono on forehand. I've used a script and would like to add an other feature. Now the text is fading in and out. What I would like now is instead of the TEXT in the DIV, the script uses the text array, so you see a different text fading in after the last fadeout. Thanks for your help. Code: <html>
<head>
<script language='javascript'>
function blink(elementid){
colorarray = Array(
'#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#E9F6E3',
'#E5EAD8','#E0DDCA','#DACDBB','#D4BCAA','#CEAA99','#C79786',
'#C18474','#BA7161','#B45F50','#AE4E3F','#A83E30','#A33122',
'#9F2517','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f',
'#9c1c0f');
i=0;
setInterval ("changecolor('"+elementid+"')",200);
}
function changecolor(x) {
var x= document.getElementById(x);
if (x != null){
x.style.color = colorarray[i];
if (i==24){ i= 0;
colorarray = colorarray.reverse();
}
}
i++;
}
var text=new Array();
text[0] = "text 1";
text[1] = "text 2";
text[2] = "text 3";
</script>
</head>
<body bgcolor="#ECFFEC">
<script language="javascript">blink('fade');</script>
// INSTEAD OF 'TEXT' I'LL LIKE IF TO BE ONE OF THE TEXT ARRAY
<div id="fade">TEXT</div>
</body>
</html>
Hi I have some Javascript on my website http://www.restoreanddesign.co.uk The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors. I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript. i have bolded/coloured the lines i think is causing the problems -------------------------------------------------------------------- Code: <script type="text/javascript" language="JavaScript">
// JavaScript Document
var imagenumber = 4 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "images/newtopbar.jpg"
images[2] = "images/newtopbar2.jpg"
images[3] = "images/newtopbar3.jpg"
images[4] = "images/newtopbar4.jpg"
var image = images[rand1]
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
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? I have this code... I want to be able to make each image fade from one to the other. Like this... http://www.dynamicdrive.com/dynamici...nslideshow.htm Is there a way to do that with this code? Code:
<script type="text/javascript">
// Simple Javascript Time based Image Swap
var Pics = new Array();
var counter = 0;
// Use this section to change the image paths
function LoadImages()
{
Pics[1] = new Image();
Pics[1].src = "images/pic1.jpg";
Pics[2] = new Image();
Pics[2].src = "images/pic2.jpg";
Pics[3] = new Image();
Pics[3].src = "images/pic3.jpg";
Pics[4] = new Image();
Pics[4].src = "images/pic4.jpg";
Pics[5] = new Image();
Pics[5].src = "images/pic5.jpg";
Pics[6] = new Image();
Pics[6].src = "images/pic6.jpg";
Pics[7] = new Image();
Pics[7].src = "images/pic7.jpg";
Pics[8] = new Image();
Pics[8].src = "images/pic8.jpg";
Pics[9] = new Image();
Pics[9].src = "images/pic9.jpg";
Pics[10] = new Image();
Pics[10].src = "images/pic10.jpg";
Pics[11] = new Image();
Pics[11].src = "images/pic11.jpg";
Pics[12] = new Image();
Pics[12].src = "images/pic12.jpg";
Pics[13] = new Image();
Pics[13].src = "images/pic13.jpg";
Pics[14] = new Image();
Pics[14].src = "images/pic14.jpg";
Pics[15] = new Image();
Pics[15].src = "images/pic15.jpg";
Pics[16] = new Image();
Pics[16].src = "images/pic16.jpg";
Pics[17] = new Image();
Pics[17].src = "images/pic17.jpg";
document.pic1.src = Pics[1].src;
}
//Time in miliseconds
function timedImage()
{
counter ++
if (counter > 17) {
counter = 1;
}
document.pic1.src = Pics[counter].src;
t=setTimeout("timedImage()",5000);
}
</script>
I've been looking for a way to fade a selection of images in on load while keeping their background present until they fade in. similar to whats been used on this site: http://inventorystudio.co.uk/ thought this would be relatively simple but seems to be harder than i expected. any suggestions? Hi! I'm wondering if somebody here could help me please. I'm trying to develope the image slideshow using PHP and JavaScript. The idea is that the PHP file gets random images from the folder, i'm using session to prevent repeating the same image and then JavaScript generates the fade slideshow using that PHP file. I've come up with the solution to use two img tags in the HTML page, so JavaScript then swap them around and play with opacity, but unfortunately couldn't make it work. Everything I have tried in JavaScript didn't work properly. I'd be grateful for any help and advice guys. Thank you. My PHP code: PHP Code: <?php class images { var $images = Array(); var $imgDir = 'images/'; function getImages() { $images = Array(); if ($dir = opendir($this->imgDir)) { while(($file = readdir($dir)) !== false) { if(preg_match('#(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)#i', $file)) $images[] = $file; } closedir($dir); } return $images; } function getNextImage() { if (($images = $this->getImages()) !== false) { session_start(); if (!isset($_SESSION['image'], $images[$_SESSION['image']])) { $index = mt_rand(0, count($images)-1); } else { $index = $_SESSION['image'] == count($images)-1 ? 0 : $_SESSION['image']+1; } $_SESSION['image'] = $index; return $images[$index]; } return false; } function outputImage() { if (($file = $this->getNextImage()) !== false) { header('Cache-Control: no-cache, must-revalidate'); // HTTP/1.1 header('Expires: Wed, 9 Dec 1981 07:00:00 GMT'); // Date in the past header('Content-type: image/jpg'); readfile($this->imgDir.$file); exit(); } } } $img = new images(); $img->outputImage(); ?> My HTML page: Code: <html> <head> <title>Images</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="javascript/slideshow2.js" language="javascript"></script> </head> <body onload="startSlideShow();"> <h1>Images</h1> <div id="imageWrap"> <div id="images"> <img id="sampleImgFade" src="images.php" alt="images" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;" width="800" height="600" onload="coverLoaded(this);" /> <img id="sampleImg" src="images.php" width="800" height="600" alt="images" onload="mainLoaded();" /> </div> </div> </body> </html> CSS code: Code: #imageWrap {
clear: both;
}
#images {
position: relative;
clear: both;
}
#sampleImgFade {
position: absolute;
top: 0px;
left: 0px;
}
JavaScript code which doesn't work properly(just to show in which direction I'm going): Code: var img;
var loaded = new Array();
loaded['start'] = true;
loaded['main'] = false;
loaded['cover'] = true;
var fade = 0;
var i = 0;
function getImage() {
img = new image();
img.src = "images.php";
}
function coverLoaded(obj) {
loaded['cover'] = true;
setOpacity(obj, 100);
window.setTimeout("startFade", 5000);
}
function mainLoaded() {
loaded['main'] = true;
if (loaded['start'] && loaded['cover'] && loaded['main']) startFade();
}
function startFade() {
loaded['start'] = false;
loaded['main'] = false;
loaded['cover'] = false;
fade = window.setInterval("fadeIn()", 50);
}
function fadeIn() {
var obj = document.getElementById("sampleImgFade");
var opacity = getOpacity(obj);
if (opacity > 0) {
setOpacity(obj, opacity-5);
} else {
window.clearInterval(fade);
document.getElementById("sampleImg").src = "images.php?u="+i++;
}
}
function getOpacity(obj) {
if (obj.filters) {
return obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity;
} else if (obj.style.MozOpacity) { // mozilla
return obj.style.MozOpacity*100;
} else if (obj.style.KhtmlOpacity) { // konquerer
return obj.style.KhtmlOpacity;
} else { // not supported
return 0;
}
}
function setOpacity(obj, opacity) {
if (obj.filters) {
obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity = opacity;
} else if (obj.style.MozOpacity) { // mozilla
obj.style.MozOpacity = opacity/100;
} else if (obj.style.KhtmlOpacity) { // konquerer
obj.style.KhtmlOpacity = opacity;
}
}
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 everyone. I'm brand new to this forum and in need of some help. If you've got a free minute and are interested in helping the clueless I've got one for you. I'm trying to form a script and the appropriate calls to fade-in some text on the event of an image mouseover. Here is what I'm working with: Code: <html>
<head>
<script type="text/javascript">
function setOpacity(level) {
element.style.opacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
var duration = 1000;
var steps = 20;
var delay = 5000;
function fadeIn() {
for (i = 0; i <= 1; i += (1 / steps)) {
setOpacity(" + i + "), i * duration;
}
}
</script>
</head>
<body>
<p id="text" style="filter:alpha(opacity=0);opacity:0.5">
This is the text.
</p>
<img name="image" src="pic.jpg" onmouseover="javascript:fadeIn(document.getElementById('text'))" />
</body>
</html>
I know there are problems with this. It looks wonky to me and I don't even know what I'm doing. It's a mashup of some code I found somewhere and my own bad guesses at how to fill in the gaps. Any tips on how I can bring this together? Thanks so much for reading this far. I appreciate your time. I've been trying to figure this out for days.. I just found a script that Old Pedant made which is close to what i need: http://www.clearviewarts.com/fadeBigDemo.html But two concerns: 1. how can i have it so when i click the thumbnail, it fades in a different image (rather than just a larger version of the thumbnail)? 2. how can i have it fade in and out from simply hovering over the thumbnail (rather than clicking it)? Your help would be greatly appreciated.. 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! Hi everyone, I'm new on this forum. I really need help in coding an part of my website. I want to make the logo background image fade to another background image on hover. Here is the code I have until now: Code: #logo
{margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:600px;
height:515px;}
#logo h1
{display:block;
background:url(img/logo.jpg) no-repeat;
width:600px;
height:515px;
text-indent:-10000px;
margin:0px;}
#logo h1 a
{display:block;
width:100%;
height:100%;}
#logo h1 a:hover
{background:url(img/logo.jpg) no-repeat 0px -515px;}
I want the background:url(img/logo.jpg) no-repeat; to fade to {background:url(img/logo.jpg) no-repeat 0px -515px;}. I haven't found any tutorial which explains how to do that properly. I'd be really greatful if you could help me. Thank you very much, Alex Hi, I have a problem with a fade script using jquery, in firefox etc.. all is ok. But IE the fade does not fade it just comes in & out. If any one would be kind enough to have a quick look I would appreciate it. You can see the js in the main page, not an external file. The url is www.thecityspa.co.uk Hello and thanks for the help. I'm no expert by any means, and I have no idea what the problem could be. Internet Explorer crops my images on my image fade, but Chrome and Safari view it just fine. the website is www.pisanchynproductions.com If you open it in IE and Chrome you can see Chrome shows image fadeshow fine, and IE crops the images. For the record, I don't want the images cropped. The problem must be in here somewhere. Code: var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/SSPP1.JPG", "", ""] //plain image syntax
fadeimages[1]=["images/SSPP2.JPG", "", ""] //plain image syntax
fadeimages[2]=["images/SSPP3.JPG", "", ""] //plain image syntax
fadeimages[3]=["images/SSPP4.JPG", "", ""] //plain image syntax
fadeimages[4]=["images/SSPP5.JPG", "", ""] //plain image syntax
fadeimages[5]=["images/SSPP6.JPG", "", ""] //plain image syntax
fadeimages[6]=["images/SSPP7.JPG", "", ""] //plain image syntax
fadeimages[7]=["images/SSPP11.JPG", "", ""] //plain image syntax
fadeimages[8]=["images/SSPP12.JPG", "", ""] //plain image syntax
fadeimages[9]=["images/SSPP13.JPG", "", ""] //plain image syntax
fadeimages[10]=["images/SSPP14.JPG", "", ""] //plain image syntax
var fadebgcolor="white"
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();})
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}
catch(e){}
@end @*/
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="gallery") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" rel="nofollow" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="gallery") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
if(document.getElementById('content'))
document.getElementById('content').style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}catch(e){}
@end @*/
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
I wish i knew more so I could realized how dumb this question was. I've got a <ul> w/ 6 <li> items and CSS to make them 104x228 side blocks, which hold 2 images, one on top of the other. The 6 rows of images look like this: X X X X X X X X X X This is what I want: The top row of images to be opacity:0 (or hidden), and then when you mouseover the bottom images, the top images come to 100 opacity. When you mouseout, the opacity is back to 0. Here's the HTML and CSS: Code: <ul class="carz"> <li><img src="img/impreza2.jpg" class="imgtophidden"/><img src="img/impreza.jpg" /></li> <li><img src="img/wrx.jpg" class="imgtophidden"/><img src="img/wrx.jpg" /></li> <li><img src="img/legacy2.jpg" class="imgtophidden"/><img src="img/legacy.jpg" />/li> <li><img src="img/outback2.jpg" class="imgtophidden"/><img src="img/outback.jpg" /></li> <li><img src="img/forester2.jpg" class="imgtophidden"/><img src="img/forester.jpg" /></li> <li><img src="img/tribeca2.jpg" class="imgtophidden"/><img src="img/tribeca.jpg" /></li> </ul> The classes are like so: Code: .imgtophidden {
opacity: 0;
}
.imgtop {
opacity: 100;
}
I am new to jQuery coding (but loving learning) and I want to figure out: how do I make this in jQuery? Here's what I have so far: Code: $(function() {
$("ul.carz li").hover(function() {
$(this).find('img.imgtophidden').addClass('imgtop')
} , function() {
$(this).find('img.imgtop').addClass('imgtophidden')
});
});
Hi, I'm have set up a gallery site, pretty standard stuff with thumbnails to the right and big image to the left. I would like to add a fade in on the big image when the thumbnail is clicked and don't really know how to implement it. The big images are contained in a div called <#left> while the thumbs are within a div called <div class="gallery"> I have searched Google and these forums for a solution but haven't had any luck...can anyone help me out with this? Thanks J http://www.javascriptkit.com/javatut...rnalphp2.shtml Anyone have a decent way of adding a fade affect to this script? okay i have a problem...i get the content of my rows from my database... the problem is when there is 4 rows... and i try to click on the 1st row... instead of it being deleted the 3rd row is deleted.. when i click on the 2nd row... the 4th row is delete... the moveicon.gif is the image for deleting the row.. there is no problem when i remove the javascript...but when i applied it i noticed the poblem Code: <table width="759" border="0">
<tr>
<td colspan="5"><span class="style8">Confirmed Request</span> </td>
</tr>
<tr>
<td width="105" bgcolor="#408080"><span class="style5">Type</span></td>
<td width="463" bgcolor="#408080"><span class="style5">Topic</span></td>
<td width="108" bgcolor="#408080"><span class="style5">Date</span></td>
<td width="25" bgcolor="#408080"><div align="center"></div></td>
<td width="36" bgcolor="#408080"><div align="center"></div></td>
</tr>
<%@ page import="com.sun.rowset.CachedRowSetImpl;" %>
<%
int i = 0;
CachedRowSetImpl crset3 = new CachedRowSetImpl();
crset3 = view.home2();
while (crset3.next())
{
String day3 = crset3.getString("dep_date");
String[] monthcol2= day3.split("-");
year = Integer.parseInt(monthcol2[0]);
month = Integer.parseInt(monthcol2[1]);
day= Integer.parseInt(monthcol2[2]);
m="";
if(month==1)
{
m="Jan";
}
else if (month==2)
{
m="Feb";
}
else if (month==3)
{
m="March";
}
else if (month==4)
{
m="April";
}
else if (month==5)
{
m="May";
}
else if (month==6)
{
m="June";
}
else if (month==7)
{
m="July";
}
else if (month==8)
{
m="Aug";
}
else if (month==9)
{
m="Sept";
}
else if (month==10)
{
m="Oct";
}
else if (month==11)
{
m="Nov";
}
else if (month==12)
{
m="Dec";
}
if(i==0)
{
%>
<tr>
<script src="images/jquery-latest.js"></script>
<script type="text/javascript">
<!--
function confirmation1(){
var answer = confirm("Do you want to move this to archives?")
if (answer){
$("#movieIcon").parents("tr").fadeOut("slow");
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
}
else{
}
}
//-->
</script>
<td scope="row"><fade1><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %> </span> </div></fade1></td>
<td scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_name")%></a>
</span> </div></td>
<td > <span class="style7">
<% out.println(day);%>
<% out.println("-");%>
<% out.println(m);%>
<% out.println("-");%>
<% out.println(year);%>
</span></td>
<td ><div align="center"><a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=yes,scrollbars=yes,status=yes,width=640,height=500'); if (chw != null) chw.focus(); return false"><img src="../Chapters/images/reporticon.gif" border="0"></a></div></td>
<td ><div align="center"><img id="movieIcon" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation1()"/></div></td>
</tr>
<%
i=1;
}
else
{
%>
<tr>
<script type="text/javascript">
<!--
<!--
function confirmation(){
var answer = confirm("Do you want to move this to archives?")
if (answer){
$("#movieIcon1").parents("tr").fadeOut("slow");
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
}
else{
}
}
//-->
//-->
</script>
<td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %></span> </div></td>
<td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"><%= crset3.getString("dep_name")%>
</span> </div></td>
<td bgcolor="#CCCCCC"> <span class="style7">
<% out.println(day);%>
<% out.println("-");%>
<% out.println(m);%>
<% out.println("-");%>
<% out.println(year);%>
</span></td>
<td bgcolor="#CCCCCC"> <a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=no,scrollbars=yes,status=no,width=640,height=500'); if (chw != null) chw.focus(); return false"><div align="center"><img src="../Chapters/images/reporticon.gif" border="0"></div>
</a></td>
<td bgcolor="#CCCCCC" ><div align="center"><img id="movieIcon1" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation()"></div></td>
</tr>
<%
i=0;
}
}
%>
</table>
Hi, This must be a 1st. It works ok in IE...But not in Firefox? I need to use white text over a dark bg color or if possible over an image. The problem is in FF the white text distorts on fade The black text works ok when adding the white bg. See my test code below. (It can be copied straight in to test) If anyone could please take a quick look and give some pointers. Code: <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML DIR="LTR" LANG="en">
<head>
<title>Working-Test-Banner</title>
<style type="text/css">
#welcomebanner img {border: none;}
#wrapper{position:relative;}
#welcomebanner {margin: 0; padding: 0; position:relative;background-color:color:#fff;}
#welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
#welcomebanner li {display: none;}
p{font-size:30px;background-color:purple;color:#fff;}
h2{font-size:30px;background-color:#fff;color:#000;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery;
var welcomeBannerTimer;
function nextSlide(){
var el = $j('#welcomebanner');
var slides = el.data('slides');
var c = el.data('slideIndex');
var n = ((c+1) >= slides.length)? 0 : c+1;
el.data('slideIndex', n);
$j(slides[c]).fadeOut(null, function(){
$j(slides[n]).fadeIn();
});
}
function over(){
clearInterval(welcomeBannerTimer);
}
function out(){
welcomeBannerTimer = setInterval(nextSlide, 3000);
}
$j(window).load(function() {
var el = $j('#welcomebanner');
var slides = $j('#welcomebanner>li');
if (slides.length < 2){
$j(slides[0]).show();
return;
}
el.data('slides', slides);
el.data('slideIndex', 0);
welcomeBannerTimer = setInterval(nextSlide, 3000);
el.bind('mouseenter', over).bind('mouseleave', out);
$j(slides[0]).show();
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="welcomebanner">
<li>
<h2>testing the text fade</h2>
<p>testing the text fade</p>
</li>
<li>
<h2>Firefox and IE problems</h2>
<p>Firefox and IE problems</p>
</li>
</ul>
</div>
</body>
</html>
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! Hey all, Hopefully I can explain this so it makes sense. I have a div with some buttons in it going horizontally. Kind of like a top menu of sorts. The div is of a fixed width and these buttons are spaced evenly across it. What I would like to do (and the hardest part is finding the right words for all this) is add more buttons. But because of the limited space I want to leave the current buttons as they are but provide a way, either by hovering over the left or right end of the div ideally or clicking << or >> types of links to 'cycle' through the buttons. So end result would be the user would see lets say 5 buttons upon load but be able to access the other buttons by cycling/scrolling left or right. It would be great if the buttons would loop around so they would never reach the 'end' going left or right. Does this make sense? I haven't been able to find anything close to this but that could possibly be because I am not sure what to call it. Thanks for any help! |
|||||||