Results 1 to 4 of 4

Thread: Fade in the image when it is loaded with AJAX request

  1. #1
    Join Date
    Dec 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Fade in the image when it is loaded with AJAX request

    I have this issue posted ealier to queue the AJAX request, and now I am facing another issue which is to fade in the image when it is called with AJAX, below is the code, please let me know if you know how to get around it. many thanks, Lau

    this is the file calling AJAX (ajaxreq.php)
    #################################
    <script>
    function getXMLHttpRequestObject()
    {
    // Initialize the object:
    var req = false;
    // Choose object type based upon what's supported:
    if (window.XMLHttpRequest)
    {
    // IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
    req = new window.XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
    // Create type Msxml2.XMLHTTP, if possible:
    req = new window.ActiveXObject("Msxml2.XMLHTTP");
    }
    else
    {
    req = new window.ActiveXObject("Microsoft.XMLHTTP");
    }
    return req;
    }

    function get(url, target)
    {
    var req = null;
    req = getXMLHttpRequestObject();
    if(req)
    {//alert( startRow );
    req.onreadystatechange = function()
    {
    if(req.readyState == 4)
    {
    var result = document.getElementById(target);
    result.innerHTML = req.responseText;
    }
    else
    {
    var loading = document.getElementById(target);
    loading.innerHTML = 'loading';
    }
    }
    req.open('get', url, true);
    req.send(null);
    }
    else
    {
    alert('Request failed.');
    }
    }

    function getlist()
    {
    var onLoadActions = new Array();
    function addOnLoadAction(action)
    {
    onLoadActions[onLoadActions] = action;
    }

    function performOnLoadActions()
    {
    for (var count =0; count < onLoadActions.length; count++)
    {
    eval(onLoadActions[count]);
    }
    }
    addOnLoadAction(get('bg.php','content1'));
    addOnLoadAction(get('text1.php','content2'));
    addOnLoadAction(get('text2.php','content3'));
    }


    <!--
    document.write("<style type='text/css'>#bg {visibility:hidden;}</style>");

    function initImage() {
    imageId = 'bg';
    image = document.getElementById(imageId);
    setOpacity(image, 0);
    image.style.visibility = "visible";
    fadeIn(imageId,0);
    }
    function fadeIn(objId,opacity) {
    if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
    setOpacity(obj, opacity);
    opacity += 10;
    window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
    }
    }
    }
    function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999: opacity;
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
    }
    // -->

    </script>



    <a href="#" onClick="getlist(); return false;">Load</a>
    <div id="content1">
    </div>

    <div id="content2">
    </div>

    <div id="content3">
    </div>
    #################################


    This is the file containing the image (bg.html)
    #################################
    <div id="bg">
    <img src="fullscreen.jpg">
    </div>
    #################################
    Last edited by lauthiamkok; 12-21-2008 at 05:09 PM.

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Quote Originally Posted by lauthiamkok View Post
    opacity = (opacity == 100)?99.999pacity;
    Wrap your code in code tags (button looks like this #) to avoid unwanted smileys and to make it a lot more readable.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    [SUGGESTION] Instead of this...

    Code:
    function getXMLHttpRequestObject()
    {
    // Initialize the object:
    var req = false;
    // Choose object type based upon what's supported:
    if (window.XMLHttpRequest)
    {
    // IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
    req = new window.XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
    // Create type Msxml2.XMLHTTP, if possible:
    req = new window.ActiveXObject("Msxml2.XMLHTTP");
    }
    else
    {
    req = new window.ActiveXObject("Microsoft.XMLHTTP");
    }
    return req;
    }
    ... try this:

    Code:
    function getXMLHttpRequestObject()
    {
        if(window.XMLHttpRequest) return new window.XMLHttpRequest(); // IE 7, Mozilla, Safari, Firefox, Opera, most browsers
        else if(window.ActiveXObject) return new window.ActiveXObject("Msxml2.XMLHTTP"); // Create type Msxml2.XMLHTTP, if possible
        else return new window.ActiveXObject("Microsoft.XMLHTTP");
        return 0; // return 0 just in case none of the statements apply
    }
    The second version saves more memory (). Instead of this...

    Code:
    function get(url, target)
    {
    var req = null;
    req = getXMLHttpRequestObject();
    if(req)
    {//alert( startRow );
    req.onreadystatechange = function()
    {
    if(req.readyState == 4)
    {
    var result = document.getElementById(target);
    result.innerHTML = req.responseText;
    }
    else
    {
    var loading = document.getElementById(target);
    loading.innerHTML = 'loading';
    }
    }
    req.open('get', url, true);
    req.send(null);
    }
    else
    {
    alert('Request failed.');
    }
    }
    ...try this:

    Code:
    function get(url, target)
    {
        var req = getXMLHttpRequestObject();
        if(req)
        {
            // alert(startRow);
            req.onreadystatechange = function() {
                if(req.readyState == 4) document.getElementById(target).innerHTML = req.responseText;
                else document.getElementById(target).innerHTML = "loading";
            };
            req.open("get", url, true);
            req.send(null);
        }
        else alert("Request failed.");
    }
    I'm not sure if you would need 'req', but I'll include it just in case. Then there's this...

    Code:
    function getlist()
    {
    var onLoadActions = new Array();
    function addOnLoadAction(action)
    {
    onLoadActions[onLoadActions] = action;
    }
    
    function performOnLoadActions()
    {
    for (var count =0; count < onLoadActions.length; count++)
    {
    eval(onLoadActions[count]);
    }
    }
    addOnLoadAction(get('bg.php','content1'));
    addOnLoadAction(get('text1.php','content2'));
    addOnLoadAction(get('text2.php','content3'));
    }
    ...to this:

    Code:
    function getlist()
    {
        var onLoadActions = [];
        function addOnLoadAction(action)
        {
            onLoadActions[onLoadActions] = action;
        }
    
        function performOnLoadActions()
        {
            for (var count = 0; count < onLoadActions.length; count++) eval(onLoadActions[count]);
        }
    
        addOnLoadAction(get("bg.php","content1"));
        addOnLoadAction(get("text1.php","content2"));
        addOnLoadAction(get("text2.php","content3"));
    }
    [/SUGGESTION]
    Last edited by magicyte; 12-22-2008 at 03:57 AM.

  4. The Following User Says Thank You to magicyte For This Useful Post:

    lauthiamkok (12-22-2008)

  5. #4
    Join Date
    Dec 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much Christ for simplifying and debugging the code for me.

    Now I now it has such a big different to write the code in

    req = getXMLHttpRequestObject(); and var req = getXMLHttpRequestObject();

    var onLoadActions = new Array(); and var onLoadActions = [];

    I will need read some online documentations or forum to understand what the different between these code properly but thanks for pointing out.

    Much appreciated!

    Best,
    Lau

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
  •