Solved

text slide fade effect list of items

Posted on 2007-04-06
5
1,130 Views
Last Modified: 2010-05-18
Hello Folks :) Happy Easter!

I'm trying to create a animated slide show of new articles. the effect i'm after is a text slide and cross fade type of effect that you can see on http://answers.yahoo.com with the 'Special feature' / 'Best of answers' box with the left right buttons. i've spent some time trying to figure out how they do it but its a bit out of my league i think :)

Not to mention complications because of the way I want to do it, i.e show the article headline in a thin strip over a background image and when the user mouseovers the headline then show the rest of the article intro text. then on clicking the left or right arrows; the headline and article text should transition to the next or previous one.

There can be 10-15 articles and I'm not fussed if they're in a javascript array or in the html itself.

Cheers,
VM


I've setup the basic layout of the page with images on photobucket etc. (code below)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
      <title>Untitled</title>
      <style type="text/css">
     
      *{margin:0;padding:0}
     
      body{margin:20px;}
     
      #tab{
      background:#FFFFFF url(http://www.southgate-melbourne.com.au/images/southgate_photo.jpg);
      width:464px;
      height:46px;
      position:relative;
      padding-top:120px;
      }
     
      #titleDiv{width:455px;padding:4px;}
      #titleDiv a{position:relative}
     
      a#info {
      color:#fff;
      font: normal 8pt Tahoma;
      padding:4x;
      text-decoration:none;
      display:block;
      }
     
      .NQ{font:normal 16pt Times New Roman;color:#fff;}
     
      a#info:hover {z-index:25;}
     
      #infoQ{
      display:none;
      color:#fff;
      font: normal 8pt Tahoma;
      text-indent:0px;
      width:358px;
      padding:5px 5px 0px 100px;
      height:95px;
      margin-top:20px;
      }
     
      img.nextBtn{float:right}
     
      #infoQ a{color:#fff;font: normal 8pt Tahoma;text-decoration:none;}
     
      #titleDiv[id],#infoQ[id]{background: url(http://i67.photobucket.com/albums/h287/sultana_14/q.png);}
     
      * html #infoQ,* html #titleDiv{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i67.photobucket.com/albums/h287/sultana_14/q.png', sizingMethod='scale');}
      </style>

      <script type="text/javascript">

      var arVersion = navigator.appVersion.split("MSIE")
      var version = parseFloat(arVersion[1])
      //fix PNG alpha transparency for IE on image load
      function fixPNG(myImage)
      {
          if ((version >= 5.5) && (version < 7) && (document.body.filters))
          {
             var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
               var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
               var imgTitle = (myImage.title) ?
                               "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' "
               var imgStyle = "display:inline-block;" + myImage.style.cssText
               var strNewHTML = "<span " + imgID + imgClass + imgTitle
                        + " style=\"" + "width:" + myImage.width
                        + "px; height:" + myImage.height
                        + "px;" + imgStyle + ";"
                        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                        + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
               myImage.outerHTML = strNewHTML      
          }
      }      
     
      //show article tip on mouseover article title
      function showTip(){
            document.getElementById('tab').style.paddingTop=1+'px';
            document.getElementById('tab').style.height=163+'px';
            document.getElementById('info').style.marginTop=-1+'px';
            document.getElementById('infoQ').style.display='block';
      }

      </script>
</head>

<body>

<div id="tab">
<img src="http://i67.photobucket.com/albums/h287/sultana_14/sign-up-now.png" width="94" height="94" alt="Sign Up Now" style="position:absolute;left:0;top:0;" onload="fixPNG(this)">
<span id="infoQ">
<span class="NQ">New Article:</span><br>
<A href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras urna libero, euismod at, vehicula fermentum, lacinia ut, orci. Nam euismod, nunc id lobortis pharetra, metus ante semper sapien, vel molestie mauris nisi tempor neque. Suspendisse est. Quisque rutrum pede vel dui. Quisque laoreet vestibulum leo.</span></A>
<div id="titleDiv"><a href="#" ><img src="http://i67.photobucket.com/albums/h287/sultana_14/right.gif" border="0" class="nextBtn"></a><a href="#" ><img src="http://i67.photobucket.com/albums/h287/sultana_14/left.gif" border="0" class="nextBtn"></a><a href="#" id="info" onMouseover="showTip();return false;">Click me to see more of article 1</a></div>
</div>




</body>
</html>
0
Comment
Question by:VirusMinus
5 Comments
 
LVL 8

Expert Comment

by:jawahar_prasad
ID: 18869703
0
 
LVL 10

Expert Comment

by:stormist
ID: 19027125
Utilize scriptaculous
http://script.aculo.us/

Specifically, here are the docs and demo: http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo
0
 
LVL 30

Author Comment

by:VirusMinus
ID: 19071132
both were not exactly what i was looking for.

I found this eventually and it was perfect, minor tweaking and i was home :)

http://smoothgallery.jondesign.net/showcase/gallery/
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 19561914
PAQed with points refunded (500)

Computer101
EE Admin
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now