Solved

text slide fade effect list of items

Posted on 2007-04-06
5
1,135 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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 how to count occurrences of each item in an array.

823 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