Solved

text slide fade effect list of items

Posted on 2007-04-06
5
1,153 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

617 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