Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Return jQuery Object from property

    Hello,

    how can I make the following object work properly so when I use 'layers.photo1.layer' a jQuery element is returned rather than the text of the function as it is now.

    I also need to be able to find the element by the photo1 object its contained in not have to input a string there so that I can also reuse it in the background layer.

    Code:
    		var layers = {			
    			photo1 : {
    				layer: function() { return $(element).find($('photo1'))}
    			},
    			background : {
    				layer: function() { return $(element).find($('background'))}
    			}
    		}
    Thx Very Much!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    layer is a function (rather a function reference). If you want to CALL this function you need to append () parentheses to the end. Otherwise you will get a function reference (which will be converted to a string containing the source text of the function).

    Second: The .find() method expects a selector and not another jQuery object. So you don't need $('photo1'). You only need the string

    Finally: 'photo1' is a valid selector, but only for HTML elements called <photo1>. I guess you don't have elements like that on your page, do you? So is photo1 an id or a class attribute?

    So this will do the trick if "photo1" is an id attribute
    Code:
    var layers = {			
    			photo1 : {
    				layer: function() { return $(element).find('#photo1')}
    			},
    			background : {
    				layer: function() { return $(element).find('#background')}
    			}
    		}
    
    var myLayer = layers.photo1.layer();

  • Users who have thanked devnull69 for this post:

    grogo21 (03-23-2012)

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Why would you need a function if it can be simplified like this?

    Code:
    var layers = {			
    	photo1 : {
    		layer: $(element).find('#photo1')
    	},
    	background : {
    		layer: $(element).find('#background')
    	}
    }
    var myLayer = layers.photo1.layer;

  • #4
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    devnull69, your solution work just great! I think I was trying to push through this task with little sleep and I made some silly mistakes. I have no explanation for why I was trying to pass a jQuery object into the find method haha.

    glenngv, your solution seems like it should work but at the moment it is returning undefined because the actual elements don't exist yet on the page. It seems like a better option performance wise tho because it appears as though it wouldn't have to search for the element each time the prop is called. I will have to comeback and implement it.

    The last question I have is how can I replace '#photo1' and '#background' with the name of the parent object. The objects photo1 and background and any others I add will be elements on the page. If its possible I could then reuse the same function for each layer prop.

    Thx

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Move the declaration of layers variable inside document ready or at the bottom of the body to ensure that the elements exist on the page.

    For the last question. Are 'photo1' and 'background' the actual tag names?? Can you post the html for those elements?

  • #6
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    yes, those will become the id's of the div elements.

    Code:
    var buildCanvas = function(){
    	for(var layer in importLayers) {
    		$(plugin.canvasContainer).append(String.format('<div id="{0}" class="layer" style="top: {1}px; left: {2}px;"></div>', layer, importLayers[layer].yPos, importLayers[layer].xPos));
            }
    }

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    You'll have to be more accurate when it comes to naming conventions

    Example:
    Code:
    <div id="myid" name="myname" class="myclass"></div>
    1. div is the tag name. Selector "div"
    2. id is the id attribute (not the name, not the tag name). It must be unique for the whole document. Selector "#myid"
    3. name is the name attribute (not the tag name). It doesn't necessarily have to be unique. Selector "[name='myname']"
    4. class is the class name attribute. Selector ".myclass"

    So if you have $('photo1'), the selector will ONLY be able to select elements if you actually have an element with TAG NAME photo1, e.g.
    Code:
    <photo1 id="whatever"></photo1>
    And I bet you don't have such elements!

    So the question again is
    Are 'photo1' and 'background' the actual tag names??


  •  

    Posting Permissions

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