SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,380
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Image pops on with inner HTML; I want it to fade in

    When an input button is clicked, then an innerHTML is written to a span element, which shows a photo, and the text moves down to accommodate it. However, I'd like the photo to fade in with the innerHTML. Do I do this with Javascript or CSS transitions? I don't know how to adapt either to this script. I am using innerHTML on a external JS page so it loads quickly without photos, showing only the photos wanted -- this is for a mobile app. (Note that I don't want to include the entire bulk of Jquery just to do this effect.)

    HTML:
    Code:
    <div>
    <a href="#26" onclick="num26()"><input type="button" value="photo" class="buttonIfmar"></a>
    <span id="num26"></span>
    <p>text is here</p>
    </div>
    external JS:
    Code:
    function num26() {
    document.getElementById('num26').innerHTML = '<a href="#num26" onclick="displayNone()" alt=""><input type="button" value="close" class="closeButton"></a>'
    + '<img src="photo.jpg" width="350px" style="clear:both;"><br>';
    }
    
    function displayNone() {
    document.getElementById('num26').innerHTML = ''; 
    }
    Steve Husting

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I did a bit of Googling and found a function that does what you want.
    Here's a working example with the code you provided:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Image fade in example</title>
      </head>
    	
      <body>
        <div>
          <a href="#26" onclick="num26()"><input type="button" value="photo" class="buttonIfmar"></a>
          <span id="num26"></span>
          <p>text is here</p>
        </div>
    
        <script>
          function appear(elm, i, steps, speed){
            var t_o;
            i = i || 0;
            steps = steps || 5;
            speed = speed || 50;
    
            t_o = setInterval(function(){
              opacity = i / 100;
              i = i + steps;
              if(opacity > 1 || opacity < 0){
                clearInterval(t_o);
                return;
              }
              elm.style.opacity = opacity;
              elm.style.filter = 'alpha(opacity=' + opacity*100 + ')';
            }, speed);
          }    
    
          function num26() {
            document.getElementById('num26').innerHTML = '<a href="#num26" onclick="displayNone()" alt=""><input type="button" value="close" class="closeButton"></a>' + '<img src="photo.jpg" width="350px" style="clear:both;"><br>';
            appear(document.getElementById('num26'), 0, 5, 40);
          }
    
          function displayNone() {
            appear(document.getElementById('num26'), 100, -5, 40);
            setTimeout(function(){ document.getElementById('num26').innerHTML = '';}, 700)
          }
        </script>
      </body>
    </html>
    I found the function here: http://stackoverflow.com/questions/2...ing-javascript

    If you look at the page in question, it is explained a little more.

    HTH

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,380
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow! Thank you very much!
    Steve Husting


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •