www.webdeveloper.com
Results 1 to 9 of 9

Thread: set background image to newly created DOM element

  1. #1
    Join Date
    Jan 2011
    Posts
    4

    set background image to newly created DOM element

    I am trying to dynamically create child elements and add a background image before appending it to the parent node. Everything is working except for the image files actually appearing. When you inspect the element in Mozilla, it reveals that the li elements have all been created and attached, and even contain the "style" attribute. I am certain it is my reference to the image array that I am not calling correctly...can someone please help me figure out how to use the array to reference the new background image?

    external js file:

    Code:
    function placeThumbs()
    {
    	var images = ["a.gif", "b.gif", "c.gif"];
    	var jgal = document.getElementById("gallery");
    	var newLi;
    	for (i=0; i<images.length; i++)
    	{
    		newLi = document.createElement("li");
    		jgal.appendChild(newLi);
    		newLi.id = i;
    		newLi.style.backgroundImage = images[i];
    	}
    }
    html:

    Code:
    <body>
    <ul id="gallery">
    </ul>
    <script language="javascript" type="text/javascript">placeThumbs()</script>
    </body>

  2. #2
    Join Date
    Aug 2009
    Posts
    593
    You need to wrap url() around your images in css

    Code:
    newLi.style.backgroundImage = 'url(' + images[i] + ')';
    Nicely written JavaScript BTW. Don't forget to declare i as well

  3. #3
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    The first thing I noticed was this:
    newLi.id = i;

    This is setting an id to an integer. If I remember correctly, ids/names cannot begin with anything but an underscore or a letter, and cannot be just integers. I think there are also rules about special characters, but I'm not recalling it - I avoid using them, anyway.

    There could be something else, but fix that, first, and then see if it's still not working.

    ^_^

  4. #4
    Join Date
    Jan 2011
    Posts
    4

    Thank you!

    @thraddash

    Problem solved, but your solution leads me to another question I hope you can answer for me. Can you explain to me what the following syntax actually does, so I can know when to use it in the future?

    Code:
    'url(' + images[i] + ')'
    @wolfshade

    I'm sure you're right about rules for ids. I was trying a couple of different methods to assign style attributes and accidentally left that snippet in the code.

  5. #5
    Join Date
    Aug 2009
    Posts
    593
    You need to have url() wrapped around your style property assignment just like you would have done it in css.

    Code:
    'url(' + images[i] + ')'
    
    would produce
    
    url(a.gif) / url(b.gif) / url(c.gif)
    Just like you could use all the background properties in one line...

    Code:
    .background = 'url(a.gif) no-repeat left top #000';
    http://www.w3schools.com/css/pr_background-image.asp
    Last edited by thraddash; 01-26-2011 at 02:53 PM.

  6. #6
    Join Date
    Jan 2011
    Posts
    4
    I guess what I am asking is how to know when to use the quotes.

    Does it matter between single and double quotes? I have sought answers online, but there seems to be variance in opinions.

  7. #7
    Join Date
    Aug 2009
    Posts
    593
    When you want to append string literals to variables or other string literals, then you need quotes.

    In JavaScript either quote is fine as they do the same thing, unlike in PHP.

    I use single quotes for my strings, but I use double quotes for my html attributes:

    Javascript
    Code:
    var data = 'My String';
    var html = '<a href="#">' + data + " - This works too" + '</a>';
    HTML
    Code:
    <div class="DivClass" style="border: solid 1px black;"></div>

  8. #8
    Join Date
    Jan 2011
    Posts
    4
    Ok, I think I get it now. Sorry, I picked Javascript back up after not using it for a while.

    Thank you!!!

  9. #9
    Join Date
    Aug 2009
    Posts
    593
    Once you feel you are writing good JavaScript code again, validate it every now and then and learn from what it recommends.

    http://www.jslint.com/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles