fadein and fadeout is not coming properly

Question

punithapary 0 Light Poster

17 Years Ago

Hi,

In my website i am planning to do portfolio things in that i gave fade in fade for all images this is working with same size of image.But i have images like this sizes 500/300, 300/150 like if i give this images into portfolio that time if one image fading to another one means that time small size imGE is going top or bottom like that ,I alighed as center.
Please can anyone tell me how to fix this prloblem.

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="include/dw_event.js" type="text/javascript"></script>
<script src="include/dw_rotator.js" type="text/javascript"></script>
<script src="include/dw_rotator_aux.js" type="text/javascript"></script>

<script type="text/javascript">
var rotator1 = {
    path: 'images/',  // path to your images
    id:   'r1',   // id assigned in image tag
    bTrans: true, // transition filter for IE Win
bTrans: true,
 speed: 5400,
    bMouse: true,
    bRand:  true,
    images: ["logo_newark_mission.jpg", "logo_expert.jpg"]
}
function initRotator() {
    // pass name of variable containing rotator properties
    dw_Rotator.setup(rotator1);
}


dw_Event.add( window, 'load', initRotator);

</script>
<style type="text/css">
<!--
.style3 {color: #ffffff}
-->
</style>
		<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
	// hide last div
	if (lastDiv) {
		document.getElementById(lastDiv).className = "hiddenDiv";
	}
	//if value of the box is not nothing and an object with that name exists, then change the class
	if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv = divName;
	}
}
//-->
</script>
<style type="text/css">
.hide { display:none; }
.div_center{text-align:center;}
.show {
	position:absolute;
	display:inline-table;
	width: 792px;
	top: 214px;
	height: 290px;
	left: 93px;
}
form#search { text-align:center; }
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
.stylecursor{
cursor:hand;
}
</style>
<!-- JS for hiding tables and form validation-->
<script type="text/javascript">
function showSelect(theId)
{
	var hiddenTables = document.getElementById("hiddenTables").getElementsByTagName("table");
	
	for (var t = 0; t < hiddenTables.length; t++)
	{
		var tableClass = "hide";
		if (hiddenTables[t].id == theId)
			tableClass = "show";
		
		hiddenTables[t].className = tableClass;
	}
 if(theId == "web")
 {
  document.getElementById("web").style.display = "block";
  document.getElementById("logo").style.display = "none";
  document.getElementById("print").style.display = "none";
  document.getElementById("banner").style.display = "none";

  }
 if(theId == "logo")
 {
  document.getElementById("web").style.display = "none";
  document.getElementById("logo").style.display = "block";
  document.getElementById("print").style.display = "none";
  document.getElementById("banner").style.display = "none";

  }
 if(theId == "print")
 {
  document.getElementById("web").style.display = "none";
  document.getElementById("logo").style.display = "none";
  document.getElementById("print").style.display = "block";
  document.getElementById("banner").style.display = "none";

  }
 if(theId == "banner")
 {
  document.getElementById("web").style.display = "none";
  document.getElementById("logo").style.display = "none";
  document.getElementById("print").style.display = "none";
  document.getElementById("banner").style.display = "block";

  }
 }

function action()
{
}

</script>

		<style type="text/css" media="screen">
.hiddenDiv {
	display: none;
	}
.visibleDiv {
	display: block;

	border: 1px grey solid;
	}
.color{
color:#D94111;}
.style7 {font-size: 12px}


--></style>

<style type="text/css">
  .hideDisplayStyle {
    visibility: hidden;
    font-weight:bold;
    color:#ff9900;}
</style>
</head>


<body bgcolor="#000000">
<table width="800" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td height="10" colspan="3" valign="bottom" bgcolor="#ffffff" style="background-image:url(images/top.gif); background-repeat:repeat-x;">&nbsp;</td>
  </tr>
  <tr height="194"  align="center"> 
    <td height="347" colspan="3" align="center" valign="middle" bgcolor="#ffffff" >
	<div id="hiddenTables">
        <table border="0" id="web" align="center" class="hide">
          <tr>
            <td colspan="2" align="center" valign="middle"><iframe 
      src="web1.php" name="mainwnd"
      marginwidth="0" marginheight="0" align="top" scrolling="No" 
      frameborder="0" id="mainwnd" allowtransparency="allowtransparency" noresize="noresize" 
      target="_top"></iframe></td>
          </tr>
        </table>
      <div align="center" id="logo" class="hide">
	  <img src="images/logo_expert.jpg" align="absmiddle" name="r1" id="r1"></div>
    </div></td>
  </tr>
  <tr>
    <td valign="bottom" colspan="3" bgcolor="#000000"  style="background-image:url(images/bottom.gif); background-repeat:repeat-x;">&nbsp;</td>
  </tr>
</table>
</body>
</html>

thanks in advance
Punithapary

html-css javascript

3 Contributors
2 Replies
113 Views
1 Day Discussion Span
Latest Post 17 Years Ago Latest Post by peter_budo

Dani AI

Generated 9 Months Ago

— the jumpy fade is almost always a CSS/layout problem, not the fade itself. When two images of different intrinsic heights are faded without being stacked and centered inside a fixed box, the browser reflows and the smaller image will appear to move up or down. The simplest robust fixes are: give the rotator a fixed container size and force each image to be absolutely centered inside that container, or use the image as a centered background so every slide occupies identical space.

A minimal CSS approach that works in modern browsers (absolutely stacks and centers each image, preserves aspect ratio, and prevents reflow during opacity fades):

.rotator {
  position: relative;
  width: 800px;   /* pick your display size */
  height: 300px;
  overflow: hidden;
}

.rotator img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  display: block;
}

If you prefer not to use img tags, make each slide a block with a background-image and let the browser center/scale it:

.slide {
  width: 800px;
  height: 300px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; /* or cover depending on crop behavior */
}

Extra tips: remove deprecated alignment attributes on IMG, ensure the rotator uses opacity transitions (not display:none/block) so space is preserved while fading, and pre-generate scaled images or set explicit width/height to avoid layout shifts and slow loads. For old browsers without CSS transforms, use a JS fallback to compute vertical offset or a table-cell/inline-block vertical-align trick. was right that this is a JS/CSS issue; ’s move was appropriate — applying one of the fixes above will stop the vertical jump during fades.

All 2 Replies

ShawnCplus 456 Code Monkey

17 Years Ago

This is a javascript issue, please post your problem in the appropriate forum.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

peter_budo 2,532 Code tags enforcer Team Colleague Featured Poster · Answer 1 · 2009-06-30T14:52:56+00:00

This is a javascript issue, please post your problem in the appropriate forum.

Now that was a bad advice as punithapary created not one bad two threads. You should just click on Flag Bad Post and request post to be moved to appropriate section.

Post moved...

fadein and fadeout is not coming properly

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers