1

I want to pass an object to the function flipIt(obj). I have the image id stored in a variable called globe.

When I pass globe to flipIt(), it isn't working because globe is a variable containing the image id and flipIt() needs an object.

I have tried ('#'+globe) to make it obj but its is also not working:

flipIt('#'+globe);

Function Definition is:

function flipIt(obj) {
    console.log("value before Function status   " + status);
    alert('FlipIT Called' + obj);

    $(obj).css("-webkit-transform-style","preserve-3d");
    $(obj).css("-webkit-transition","all 1.0s linear");
    $(obj).css("transform-style","preserve-3d");
    $(obj).css("transition","all 1.0s linear");
}    

I tried by printing obj value... for variable it is printing id value instead it should print HTMLimage element.

Javascript

$(document).ready(function () {
    var globe;

    /*   Reading the data from XML file*/
    $.ajax({
        type: "GET",
        url: "photos.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('item').each(function() {
                var path = $(this).attr('path');
                var width = $(this).attr('width');
                var height = $(this).attr('height');
                var id = $(this).attr('id');
                var alt = $(this).attr('alt');
                var longdesc = $(this).find('longdesc').text();
                var description = $(this).find('desc').text();
                $('#myImageFlow').prepend('<img src="'+path+'" id='+id+'  height="'+height+'"  width="'+ width+'" longdesc="'+longdesc+'" alt="'+alt+'"/>');
                imgArr[i] = description;
                i = i+1;
            });
        });
    });
});

XML File:

<items id = "items">
   <item path="img/1_bankofamerica.jpg" width="300" height="360" id="id1" alt="img1" type="bitmapfile">
      <back>swf/backcard_0.swf </back>
      <longdesc>img/img1.png</longdesc>
      <desc>Decription about Image # 1 </desc>
   </item>
   <item path="img/2_harbourfront.jpg" width="300" height="360" id="id2" alt="img2" type="bitmapfile">
      <back>swf/backcard_1.swf </back>
      <longdesc>img/img2.png</longdesc>
      <desc>Decription about Image # 2 </desc>
   </item>
   <item path="img/2_harbourfront3.jpg" width="300" height="360" id="id3" alt="img3" type="bitmapfile">
      <back>swf/backcard_2.swf </back>
      <longdesc>img/img3.png</longdesc>
      <desc>Decription about Image # 3 </desc>
   </item>
   <item path="img/3_harbourfront.jpg" width="300" height="360" id="id4" alt="img4" type="bitmapfile">
      <back>swf/backcard_3.swf </back>
      <longdesc>img/img4.png</longdesc>
      <desc>Decription about Image # 4 </desc>
   </item>
   <item path="img/5_lighthouse.jpg" width="300" height="360" id="id5" alt="img5" type="bitmapfile">
      <back>swf/backcard_4.swf </back>
      <longdesc>img/img5.png</longdesc>
      <desc>Decription about Image # 5 </desc>
   </item>
</items>
6
  • 2
    I would say, pass $('#'+globe), but I see you're already doing this inside the flipIt function. Why do you access globe again in the flipIt function if you want to pass it? Commented May 23, 2013 at 11:07
  • was just checking globe.. i am not accessing globe inside function Commented May 23, 2013 at 11:08
  • 1
    What does this mean? "i have obj value stored in a variable 'globe'" You're using globe as if it's a string not an object. Commented May 23, 2013 at 11:09
  • show content of globe, and show the HTML code that contains the element with that id.. Commented May 23, 2013 at 11:09
  • try to put it in a global variable Commented May 23, 2013 at 11:10

1 Answer 1

3

Asuming globe is a string containing the id of the element you want to select (not prefixed with #), you'll need to transform it into a jQuery object before passing it to your function:

flipIt($('#'+globe));

Then, you don't need to wrap another $() around it inside the flipIt function, because it's already an object. So inside the function, just do:

obj.css("-webkit-transform-style","preserve-3d");
...

Next, I guess you want to declare globe in the global scope. Now you're declaring it in the scope of the document ready function. So put it outside:

var globe;

$(document).ready(function () {
    // document ready
});

Also the document ready has a shorter notation:

$(function() {
    // document ready
});
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.