Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

text slide fade effect list of items

Posted on 2007-04-06
5
Medium Priority
?
1,157 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

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…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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 …

670 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